TP-83691 | Benefit Screen Final (#12582)

Co-authored-by: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>

App/common/constants/AnalyticsEventsConstant.ts

@@ -24,6 +24,7 @@ export const AnalyticsFlowNameConstant = {
   GI_RN_BENEFIT_COMPARE: "GiRnBenefitCompare",
   GI_WAITING_PERIOD: "GiWaitingPeriod",
   REACT_NATIVE: "ReactNative",
+  GI_RN_BENEFIT: "GiRnBenefit",
 };
 
 export const AnalyticsModuleNameConstant = {
@@ -37,6 +38,7 @@ export const AnalyticsMethodNameConstant = {
   FINAL_PATCH_CALL: "finalPatchCall",
   COMPARE_PLAN_LIST: "comparePlanList",
   MARKET_BENEFIT_COMPARE_LIST: "gi_market_benefit_compare_list_error",
+  FETCH_BENEFIT_LIST: "gi_fetch_benefit_screen_error",
   WAITING_PERIOD_SCREEN: "gi_waiting_period_screen_error",
   HANDLE_CTA_CLICK: "handleCtaClick",
 };

App/common/constants/ModalNameConstants.ts

@@ -8,3 +8,5 @@ export const MEMBER_DETAILS_BOTTOM_SHEET = "member_details_bottom_sheet";
 export const POLICY_AMOUNT_BOTTOM_SHEET = "policy_amount_bottom_sheet";
 export const TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET =
   "title_with_left_right_buttons_bottom_sheet";
+export const TOP_SECTION_WITH_EXPANDABLE_CONTENT_BOTTOM_SHEET =
+  "top_section_expandable_bottom_sheet";

App/common/constants/ScreenNameConstants.ts

@@ -10,3 +10,4 @@ export const QUOTE_APOLOGY_SCREEN = "fresh_policy_form";
 export const MARKET_BENEFITS_COMPARE_SCREEN = "market_benefits_compare";
 export const COMPARE_PLAN_SCREEN = "compare_plans";
 export const WAITING_PERIOD_SCREEN = "waiting_period";
+export const BENEFIT_SCREEN = "benefit";

App/common/constants/WidgetNameConstants.ts

@@ -23,5 +23,6 @@ export const TABLE_WIDGET = "TABLE_WIDGET";
 export const HERO_SECTION_WIDGET = "HERO_SECTION_WIDGET";
 export const SELECT_CARD_WITH_DETAIL_LIST_WIDGET =
   "SELECT_CARD_WITH_DETAIL_LIST_WIDGET";
+export const LIST_ITEM_WITH_ICON_WIDGET = "LIST_ITEM_WITH_ICON_WIDGET";
 export const TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET =
   "TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET";

App/common/interface/index.ts

@@ -51,6 +51,9 @@ export enum ParameterType {
   PRE_QUOTE_ID = "preQuoteId",
   QUOTE_ID = "quoteId",
   NAVIGATOR_TYPE = "RnNavigatorType",
+  PLAN_ID = "planId",
+  BENEFIT_TYPE = "benefitType",
+  SOURCE_SCREEN = "sourceScreen",
   APPLICATION_ID = "applicationId",
   SOURCE = "source",
 }

App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts

@@ -1,8 +1,9 @@
 import { ViewStyle } from "react-native";
-import { CtaData } from "../..";
+import { AnalyticsEvent, CtaData } from "../..";
 import { GenericWidgetData } from "../Widget";
 import { ImageFieldData, TextFieldData } from "../widgetData/TitleWidgetData";
 import { KeyValueInfoData } from "./PremiumDetailsBottomSheetData";
+import { GenericActionPayload } from "../../../actions/GenericAction";
 
 export interface TitleSubtitleWithDropdownBottomSheetData
   extends GenericWidgetData {
@@ -12,19 +13,30 @@ export interface TitleSubtitleWithDropdownBottomSheetData
   infoList?: KeyValueInfoData[];
   dropdownData?: DropdownData;
   viewStyle?: ViewStyle;
+  headerDescriptionText?: TextFieldData;
+  headerDescriptionIcon?: ImageFieldData;
+  backgroundGradient?: string[];
+  gradientOrientation?: string;
 }
 
 export interface TitleSubtitleWithDropdownBottomSheetProps {
   bottomSheetData: TitleSubtitleWithDropdownBottomSheetData;
   handleModalClick: (cta: CtaData) => void;
+  handleActions?: (
+    value: any | undefined | null,
+    actionPayloadList: GenericActionPayload | undefined,
+  ) => void;
 }
 
 export interface DropdownData {
   title?: TextFieldData;
   rightIcon?: ImageFieldData;
+  expandText?: TextFieldData;
+  collapseText?: TextFieldData;
   titleContainerStyle?: TitleContainerStyle;
   contentList?: DropdownContent[];
   style?: ViewStyle;
+  toggleEvent?: AnalyticsEvent;
 }
 
 export interface TitleContainerStyle {

App/common/interface/widgets/modalData/index.ts

@@ -0,0 +1,5 @@
+export type {
+  DropdownContent,
+  DropdownData,
+  TitleSubtitleWithDropdownBottomSheetProps,
+} from "./TitleSubtitleWithDropdownBottomSheetData";

App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts

@@ -0,0 +1,22 @@
+import { CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { GenericWidgetData } from "../Widget";
+import { ScreenData } from "../screenData/ScreenData";
+import { ImageFieldData, TextFieldData } from "./TitleWidgetData";
+
+export interface BenefitScreenHeaderData extends GenericWidgetData {
+  title?: TextFieldData;
+  subtitle?: TextFieldData;
+  button?: TextFieldData;
+  leftIcon?: ImageFieldData;
+  rightIcon?: ImageFieldData;
+  description?: ImageFieldData;
+  defaultGradient?: string[];
+  scrolledGradient?: string[];
+}
+
+export interface BenefitScreenProps {
+  ctaData: CtaData;
+  screenData: ScreenData | null;
+  handleActions: (screenPayload?: GenericActionPayload) => void;
+}

App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts

@@ -10,10 +10,14 @@ export interface FooterWithCardWidgetData extends GenericWidgetData {
   subtitle?: TextFieldData;
   cardInfo?: CardInfo;
   footerButton?: ButtonData;
+  secondaryFooterButton?: ButtonData;
   cardAction?: GenericActionPayload;
   titleAction?: GenericActionPayload;
   action?: GenericActionPayload;
   buttonAction?: GenericActionPayload;
+  secondaryButtonAction?: GenericActionPayload;
+  bottomTitle?: TextFieldData;
+  borderRadius?: number;
 }
 
 export interface FinalPatchCallRequestBody {

App/common/interface/widgets/widgetData/ListItemWidgetData.ts

@@ -0,0 +1,21 @@
+import { ViewStyle } from "react-native";
+import { CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { GenericWidgetData } from "../Widget";
+import { TitleWithAssetsWidgetData } from "./TitleWithAssetsWidgetData";
+
+export interface ListItemWidgetData extends GenericWidgetData {
+  listStyle?: ViewStyle;
+  listItems?: TitleWithAssetsWidgetData[];
+}
+
+export interface ListItemWidgetProps {
+  widgetData: ListItemWidgetData;
+  widgetStyle: ViewStyle;
+  handleActions: (
+    value?: any | undefined | null,
+    actionPayload?: GenericActionPayload,
+  ) => void;
+  widgetIndex?: number;
+  handleClick?: (ctaData: CtaData) => void;
+}

App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts

@@ -12,9 +12,11 @@ export interface TitleWithAssetsWidgetData extends GenericWidgetData {
   leftIcon?: ImageFieldData;
   leftLottie?: LottieFieldData;
   title?: TextFieldData;
+  subtitle?: TextFieldData;
   titleStyle?: ViewStyle;
   rightIcon?: ImageFieldData;
   rightLottie?: LottieFieldData;
   cta?: CtaData;
   actions?: GenericActionPayload;
+  id?: string;
 }

App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts

@@ -12,6 +12,7 @@ export interface TitleWithListWidgetData extends GenericWidgetData {
   listData?: ListItem[];
   listFooter?: ListItem;
   listStyle?: ViewStyle;
+  listSeparatorStyle?: ViewStyle;
   tooltip?: TooltipData;
   separatorData?: ItemSeparatorData;
 }

App/common/interface/widgets/widgetData/index.ts

@@ -1,29 +1,37 @@
 export type {
-  SelectCardWithDetailListData,
-  Item,
   ContainerTag,
   Detail,
-  SelectCardWithDetailListProps,
+  Item,
   ItemCardProps,
   ItemDetailProps,
+  SelectCardWithDetailListData,
+  SelectCardWithDetailListProps,
 } from "./SelectCardWithDetailListData";
 
 export type {
-  TableWidgetProps,
-  TableWidgetData,
-  Column,
-  Row,
   Cell,
-  ColumnsProps,
-  RowsProps,
   CellProps,
+  Column,
+  ColumnsProps,
+  Row,
+  RowsProps,
+  TableWidgetData,
+  TableWidgetProps,
 } from "./TableWidgetData";
 
-export type { HeroSectionWidgetData } from "./HeroSectionWidgetData";
-
 export type {
   TitleRightTitleWithContentListWidgetData,
-  TitleRightTitleWithContentListWidgetProps,
   TitleRightTitleWithContentListWidgetDataItem,
   TitleRightTitleWithContentListWidgetDataItemProps,
+  TitleRightTitleWithContentListWidgetProps,
 } from "./TitleRightTitleWithContentListWidgetData";
+
+export type { HeroSectionWidgetData } from "./HeroSectionWidgetData";
+
+export type { TextFieldData } from "./TitleWidgetData";
+
+export type { ListItemWidgetProps } from "./ListItemWidgetData";
+
+export type { TitleWithAssetsWidgetData } from "./TitleWithAssetsWidgetData";
+
+export type { BenefitScreenHeaderData } from "./BenefitScreenHeaderData";

App/common/modals/modalViewResolver.tsx

@@ -11,6 +11,7 @@ import {
   TITLE_WITH_FEEDBACK_PILL_BOTTOM_SHEET,
   TITLE_WITH_LEFT_RIGHT_BUTTONS_BOTTOM_SHEET,
   TITLE_WITH_STEPS_BOTTOM_SHEET,
+  TOP_SECTION_WITH_EXPANDABLE_CONTENT_BOTTOM_SHEET,
 } from "../constants/ModalNameConstants";
 import { CtaData } from "../interface";
 import { ModalView } from "../interface/modals/ModalView";
@@ -20,6 +21,7 @@ import { MemberDetailBottomSheet } from "../../../components/bottomsheet/member-
 import { PolicyAmountBottomSheet } from "../../../components/bottomsheet/policy-amount-bottom-sheet/PolicyAmountBottomSheet";
 import { GenericActionPayload } from "../actions/GenericAction";
 import TitleWithLeftRightButtonsBottomSheet from "../../../components/bottomsheet/title-with-left-right-buttons-bottom-sheet/TitleWithLeftRightButtonsBottomSheet";
+import TopSectionExpandableBottomSheet from "../../../components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet";
 
 export const GetModalView = {
   getModal: (
@@ -106,6 +108,14 @@ function resolveModalView(
           handleActions={handleActions}
         />
       );
+    case TOP_SECTION_WITH_EXPANDABLE_CONTENT_BOTTOM_SHEET:
+      return (
+        <TopSectionExpandableBottomSheet
+          bottomSheetData={modalData}
+          handleModalClick={handleModalClick}
+          handleActions={handleActions}
+        />
+      );
     default:
       return <View />;
   }

App/common/screen/ScreenActionHandler.tsx

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from "react";
 import {
   createQuote,
   fetchComparisonPlanList,
+  getBenefitPageData,
   getMarketBenefitComparePageData,
   getQuotePageData,
   getWaitingPeriodScreenData,
@@ -43,6 +44,9 @@ export const ScreenActionHandler = {
       case ScreenActionTypes.FETCH_WAITING_PERIOD_SCREEN: {
         return getWaitingPeriodScreenData(screenMetaData, setScreenData);
       }
+      case ScreenActionTypes.FETCH_BENEFIT_LIST: {
+        return getBenefitPageData(screenMetaData, setScreenData);
+      }
       case ScreenActionTypes.SHOW_LOADER: {
         const updatedScreenData: ScreenData = {
           ...screenData,

App/common/screen/ScreenActionTypes.ts

@@ -6,5 +6,6 @@ export const ScreenActionTypes = {
   SHOW_LOADER: "SHOW_LOADER",
   FETCH_BENEFIT_COMPARE_LIST: "FETCH_BENEFIT_COMPARE_LIST",
   FETCH_COMPARE_PLAN_LIST: "FETCH_COMPARE_PLAN_LIST",
+  FETCH_BENEFIT_LIST: "FETCH_BENEFIT_LIST",
   FETCH_WAITING_PERIOD_SCREEN: "FETCH_WAITING_PERIOD_SCREEN",
 };

App/common/screen/screen-mappers/GIScreenMapper.tsx

@@ -1,5 +1,6 @@
 import { View } from "react-native";
 import {
+  BenefitScreen,
   ComparePlanScreen,
   MarketBenefitCompareScreen,
   QuoteApologyScreen,
@@ -8,6 +9,7 @@ import {
 } from "../../../Container/Navi-Insurance";
 import { GenericActionPayload } from "../../actions/GenericAction";
 import {
+  BENEFIT_SCREEN,
   BUY_INSURANCE_SCREEN,
   COMPARE_PLAN_SCREEN,
   MARKET_BENEFITS_COMPARE_SCREEN,
@@ -62,6 +64,14 @@ export const GIScreenMapper = {
               handleActions={handleActions}
             />
           );
+        case BENEFIT_SCREEN:
+          return (
+            <BenefitScreen
+              ctaData={ctaData}
+              screenData={screenData}
+              handleActions={handleActions}
+            />
+          );
         case WAITING_PERIOD_SCREEN:
           return (
             <WaitingPeriodScreen
@@ -73,7 +83,6 @@ export const GIScreenMapper = {
         default: {
           return <View />;
         }
-        //default will be changed to cta handler through bridge
       }
     } else {
       logToSentry(

App/common/utilities/CacheUtils.ts

@@ -1,6 +1,7 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { NetworkConnectorModule } from "../../common/native-module/NativeModules";
 import {
+  BENEFIT_SCREEN,
   BUY_INSURANCE_SCREEN,
   COMPARE_PLAN_SCREEN,
   QUOTE_OFFER_SCREEN,
@@ -96,4 +97,5 @@ export const screensWithCachingDisabled = [
   BUY_INSURANCE_SCREEN,
   QUOTE_OFFER_SCREEN,
   COMPARE_PLAN_SCREEN,
+  BENEFIT_SCREEN,
 ];

App/common/utilities/CtaParamsUtils.ts

@@ -10,12 +10,18 @@ export const extractCtaParameters = (
   navigatorType?: string | undefined | null;
   applicationId?: string | undefined | null;
   source?: string | undefined | null;
+  planId?: string | undefined | null;
+  benefitType?: string | undefined | null;
+  sourceScreen?: string | undefined | null;
 } => {
   let preQuoteId: string | undefined | null = undefined;
   let quoteId: string | undefined | null = undefined;
   let navigatorType: string | undefined | null = undefined;
   let applicationId: string | undefined | null = undefined;
   let source: string | undefined | null = undefined;
+  let planId: string | undefined | null = undefined;
+  let benefitType: string | undefined | null = undefined;
+  let sourceScreen: string | undefined | null = undefined;
 
   ctaData?.parameters?.forEach((item: CtaParameter) => {
     switch (item.key) {
@@ -34,11 +40,29 @@ export const extractCtaParameters = (
       case ParameterType.SOURCE:
         source = item.value;
         break;
+      case ParameterType.PLAN_ID:
+        planId = item.value;
+        break;
+      case ParameterType.BENEFIT_TYPE:
+        benefitType = item.value;
+        break;
+      case ParameterType.SOURCE_SCREEN:
+        sourceScreen = item.value;
+        break;
       default:
         break;
     }
   });
-  return { preQuoteId, quoteId, navigatorType, applicationId, source };
+  return {
+    preQuoteId,
+    quoteId,
+    navigatorType,
+    applicationId,
+    source,
+    planId,
+    benefitType,
+    sourceScreen,
+  };
 };
 
 export const getQuoteIdFromCta = (ctaData?: CtaData) => {

App/common/widgets/widgetResolver.tsx

@@ -8,6 +8,7 @@ import {
   HeaderLottieAnimationWidget,
   HeaderWithAssetsWidget,
   HeroSectionWidget,
+  ListItemWidget,
   SelectCardWithDetailListWidget,
   SliderWidget,
   SpacerWidget,
@@ -31,6 +32,7 @@ import {
   HEADER_LOTTIE_ANIMATION_WIDGET,
   HEADER_WITH_ASSETS_WIDGET,
   HERO_SECTION_WIDGET,
+  LIST_ITEM_WITH_ICON_WIDGET,
   SELECT_CARD_WITH_DETAIL_LIST_WIDGET,
   SLIDER_WIDGET,
   SPACER_WIDGET,
@@ -286,6 +288,17 @@ function resolveWidgetView(
           handleClick={handleClick}
         />
       );
+    case LIST_ITEM_WITH_ICON_WIDGET:
+      return (
+        <ListItemWidget
+          widgetData={widgetData}
+          widgetStyle={widgetStyle}
+          handleActions={handleActions}
+          widgetIndex={widgetIndex}
+          key={widgetIndex}
+          handleClick={handleClick}
+        />
+      );
     case TITLE_RIGHT_TITLE_WITH_CONTENT_LIST_WIDGET:
       return (
         <TitleRightTitleWithContentListWidget