From 4db9ca09cd941fb0de26b2e479ebe3cf7bb3f9bc Mon Sep 17 00:00:00 2001
From: Prajjaval Verma <prajjaval.verma@navi.com>
Date: Wed, 9 Oct 2024 14:46:26 +0530
Subject: [PATCH] TP-83691 | Benefit Screen Final (#12582)

Co-authored-by: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>
---
 App/Container/Navi-Insurance/Styles/index.ts  |   3 +
 App/Container/Navi-Insurance/index.ts         |   1 +
 .../Navi-Insurance/network/BenefitPageApi.ts  |  40 +++
 App/Container/Navi-Insurance/network/index.ts |   5 +-
 .../screen/benefit-screen/BenefitScreen.tsx   | 261 ++++++++++++++++++
 .../benefit-screen/BenefitScreenStyles.ts     |  52 ++++
 .../compare-plan-screen/ComparePlanScreen.tsx |   9 +-
 .../MarketBenefitCompareScreen.tsx            |  14 +-
 .../quote-offer-screen/QuoteOfferScreen.tsx   |   1 +
 .../constants/AnalyticsEventsConstant.ts      |   2 +
 App/common/constants/ModalNameConstants.ts    |   2 +
 App/common/constants/ScreenNameConstants.ts   |   1 +
 App/common/constants/WidgetNameConstants.ts   |   1 +
 App/common/interface/index.ts                 |   3 +
 ...itleSubtitleWithDropdownBottomSheetData.ts |  14 +-
 .../interface/widgets/modalData/index.ts      |   5 +
 .../widgetData/BenefitScreenHeaderData.ts     |  22 ++
 .../widgetData/FooterWithCardWidgetData.ts    |   4 +
 .../widgets/widgetData/ListItemWidgetData.ts  |  21 ++
 .../widgetData/TitleWithAssetsWidgetData.ts   |   2 +
 .../widgetData/TitleWithListWidgetData.ts     |   1 +
 .../interface/widgets/widgetData/index.ts     |  32 ++-
 App/common/modals/modalViewResolver.tsx       |  10 +
 App/common/screen/ScreenActionHandler.tsx     |   4 +
 App/common/screen/ScreenActionTypes.ts        |   1 +
 .../screen/screen-mappers/GIScreenMapper.tsx  |  11 +-
 App/common/utilities/CacheUtils.ts            |   2 +
 App/common/utilities/CtaParamsUtils.ts        |  26 +-
 App/common/widgets/widgetResolver.tsx         |  13 +
 assets/colors/colors.ts                       |   1 +
 .../TitleSubtitleWithDropdownBottomSheet.tsx  |   4 +-
 .../TopSectionExpandableBottomSheet.tsx       | 205 ++++++++++++++
 .../TopSectionExpandableBottomSheetStyle.ts   |  43 +++
 .../FooterWithCardWidget.tsx                  |  54 +++-
 .../FooterWithCardWidgetStyle.ts              |  17 ++
 components/widgets/index.tsx                  |   1 +
 .../ListItemWidget.tsx                        |  71 +++++
 .../ListItemWidgetStyles.ts                   |  30 ++
 .../widgets/title-widget/TitleWidget.tsx      |  14 +-
 .../TitleWithColumnWidget.tsx                 |   6 +-
 .../TitleWithListWidget.tsx                   |   6 +-
 network/NetworkService.ts                     |   4 +
 .../payloads/request/BenefitScreenRequest.ts  |   5 +
 43 files changed, 972 insertions(+), 52 deletions(-)
 create mode 100644 App/Container/Navi-Insurance/network/BenefitPageApi.ts
 create mode 100644 App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
 create mode 100644 App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
 create mode 100644 App/common/interface/widgets/modalData/index.ts
 create mode 100644 App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts
 create mode 100644 App/common/interface/widgets/widgetData/ListItemWidgetData.ts
 create mode 100644 components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx
 create mode 100644 components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheetStyle.ts
 create mode 100644 components/widgets/list-item-with-icon-widget/ListItemWidget.tsx
 create mode 100644 components/widgets/list-item-with-icon-widget/ListItemWidgetStyles.ts
 create mode 100644 network/payloads/request/BenefitScreenRequest.ts

diff --git a/App/Container/Navi-Insurance/Styles/index.ts b/App/Container/Navi-Insurance/Styles/index.ts
index 39db99b7f0..200093c1d1 100644
--- a/App/Container/Navi-Insurance/Styles/index.ts
+++ b/App/Container/Navi-Insurance/Styles/index.ts
@@ -34,4 +34,7 @@ export const commonStyles = StyleSheet.create({
   height54: {
     height: 54,
   },
+  flexStart: {
+    alignItems: "flex-start",
+  },
 });
diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts
index 69e947b3c2..c8f15800af 100644
--- a/App/Container/Navi-Insurance/index.ts
+++ b/App/Container/Navi-Insurance/index.ts
@@ -5,3 +5,4 @@ export { default as MarketBenefitCompareScreen } from "./screen/market-benefit-c
 export { default as WaitingPeriodScreen } from "./screen/waiting-period-screen/WaitingPeriodScreen";
 export { default as GenericShimmerScreen } from "./screen/generic-shimmer-screen/GenericShimmerScreen";
 export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen";
+export { default as BenefitScreen } from "./screen/benefit-screen/BenefitScreen";
diff --git a/App/Container/Navi-Insurance/network/BenefitPageApi.ts b/App/Container/Navi-Insurance/network/BenefitPageApi.ts
new file mode 100644
index 0000000000..83d0c504e4
--- /dev/null
+++ b/App/Container/Navi-Insurance/network/BenefitPageApi.ts
@@ -0,0 +1,40 @@
+import { Dispatch, SetStateAction } from "react";
+import { getXTargetHeaderInfo } from "../../../../network/ApiClient";
+import { get } from "../../../../network/NetworkService";
+import { ActionMetaData } from "../../../common/actions/GenericAction";
+import {
+  AnalyticsFlowNameConstant,
+  AnalyticsMethodNameConstant,
+  GI,
+} from "../../../common/constants";
+import { CtaData } from "../../../common/interface";
+import { ScreenData } from "../../../common/interface/widgets/screenData/ScreenData";
+import {
+  handleErrorData,
+  handleResponseData,
+} from "../../../common/screen/ScreenActionHandler";
+import { ScreenActionTypes } from "../../../common/screen/ScreenActionTypes";
+
+export const getBenefitPageData = async (
+  screenMetaData: ActionMetaData,
+  setScreenData: Dispatch<SetStateAction<ScreenData | null>>,
+) => {
+  const url = "benefits/v2";
+  return get<ApiResponse<CtaData>>(
+    url,
+    getXTargetHeaderInfo(GI.toLocaleUpperCase()),
+    screenMetaData.data,
+  )
+    .then(response => {
+      handleResponseData(setScreenData, response);
+    })
+    .catch(error => {
+      handleErrorData(
+        error,
+        setScreenData,
+        screenMetaData,
+        AnalyticsFlowNameConstant.GI_RN_BENEFIT,
+        AnalyticsMethodNameConstant.FETCH_BENEFIT_LIST,
+      );
+    });
+};
diff --git a/App/Container/Navi-Insurance/network/index.ts b/App/Container/Navi-Insurance/network/index.ts
index fe49f3e864..1a7a222cbf 100644
--- a/App/Container/Navi-Insurance/network/index.ts
+++ b/App/Container/Navi-Insurance/network/index.ts
@@ -1,3 +1,4 @@
-export * from "./WaitingPeriodApi";
-export * from "./QuotePageApi";
+export * from "./BenefitPageApi";
 export * from "./MarketBenefitComparePageApi";
+export * from "./QuotePageApi";
+export * from "./WaitingPeriodApi";
diff --git a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
new file mode 100644
index 0000000000..ac37908ebc
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx
@@ -0,0 +1,261 @@
+import { useNavigation } from "@react-navigation/native";
+import { useEffect } from "react";
+import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { StyledImage, StyledText } from "../../../../../components/widgets";
+import BaseWidget from "../../../../../components/widgets/BaseWidget";
+import {
+  BaseActionTypes,
+  GenericActionPayload,
+} from "../../../../common/actions/GenericAction";
+import {
+  AnalyticsEventNameConstants,
+  AnalyticsMethodNameConstant,
+  BENEFIT_SCREEN,
+  ConstantCta,
+  INITIAL_Y_VALUE,
+  NAVIGATION_ERROR,
+} from "../../../../common/constants";
+import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent";
+import { NaviLinearGradient } from "../../../../common/hooks/useGradient";
+import { AnalyticsEvent, CtaData, CtaType } from "../../../../common/interface";
+import { Widget } from "../../../../common/interface/widgets/Widget";
+import { BenefitScreenHeaderData } from "../../../../common/interface/widgets/widgetData";
+import { BenefitScreenProps } from "../../../../common/interface/widgets/widgetData/BenefitScreenHeaderData";
+import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules";
+import { CtaNavigator } from "../../../../common/navigator/NavigationRouter";
+import { ScreenState } from "../../../../common/screen/BaseScreen";
+import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
+import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils";
+import { handleGoBackOrExitApp } from "../../../../common/utilities/NavigationUtil";
+import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
+import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
+import styles from "./BenefitScreenStyles";
+
+const BenefitScreen = ({
+  ctaData,
+  screenData,
+  handleActions,
+}: BenefitScreenProps) => {
+  const navigation = useNavigation();
+  const y = useSharedValue(INITIAL_Y_VALUE);
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    y.value = event.nativeEvent.contentOffset.y;
+  };
+  const derivedY = useDerivedValue(() => {
+    return y.value;
+  });
+
+  const handleClick = (cta?: CtaData) => {
+    if (!cta) {
+      const errorEvent: AnalyticsEvent = {
+        name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA,
+        properties: {
+          screenName: BENEFIT_SCREEN,
+          methodName: AnalyticsMethodNameConstant.HANDLE_CTA_CLICK,
+        },
+      };
+      sendAsAnalyticsEvent(errorEvent);
+      return;
+    }
+    const { navigatorType } = extractCtaParameters(cta);
+    try {
+      switch (cta.type) {
+        case CtaType.DEEP_LINK:
+        case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR:
+          NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator(
+            JSON.stringify(cta),
+          );
+          break;
+        case CtaType.RN_NAVIGATOR:
+          CtaNavigator.performNavigation(navigation, navigatorType, cta);
+          break;
+        case CtaType.GO_BACK:
+          handleGoBackOrExitApp(navigation);
+          break;
+        default:
+          NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
+            JSON.stringify(cta),
+          );
+          break;
+      }
+    } catch (error) {
+      const errorEvent: AnalyticsEvent = {
+        name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA,
+        properties: {
+          screenName: BENEFIT_SCREEN,
+          methodName: AnalyticsMethodNameConstant.HANDLE_CTA_CLICK,
+          reason: error?.toString() || NAVIGATION_ERROR,
+        },
+      };
+      sendAsAnalyticsEvent(errorEvent);
+    }
+  };
+
+  useEffect(() => {
+    const { planId, benefitType, sourceScreen } = extractCtaParameters(ctaData);
+
+    const data: BenefitScreenRequest = {
+      planId: planId,
+      benefitType: benefitType,
+      sourceScreen: sourceScreen,
+    };
+
+    handleActions({
+      baseActionType: BaseActionTypes.SCREEN_ACTION,
+      metaData: [
+        {
+          actionType: ScreenActionTypes.FETCH_BENEFIT_LIST,
+          data,
+          screenName: BENEFIT_SCREEN,
+        },
+      ],
+    });
+  }, [ctaData]);
+
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      maxHeight: withTiming(derivedY.value > 0 ? 0 : 200, {
+        duration: derivedY.value > 0 ? 150 : 200,
+      }),
+      // Updating maxHeight to 0 when derivedY.value > 0 to hide the header icon
+      // and updating to 200 [> icon height] when derivedY.value <= 0 to show the header icon
+      opacity: withTiming(derivedY.value > 0 ? 0 : 1, {
+        duration: derivedY.value > 0 ? 10 : 250,
+      }),
+    };
+  });
+
+  const Header = () => {
+    let headerData = screenData?.screenWidgets?.headerWidgets?.at(
+      0,
+    ) as BenefitScreenHeaderData;
+    return (
+      <NaviLinearGradient
+        gradientColors={
+          derivedY.value > 0
+            ? headerData?.scrolledGradient
+            : headerData?.defaultGradient
+        }
+      >
+        <Animated.View style={styles.header}>
+          <View style={styles.headerContainer}>
+            <View style={styles.headerContainerTopBar}>
+              {headerData?.leftIcon && (
+                <StyledImage
+                  imageFieldData={headerData?.leftIcon}
+                  handleClick={handleClick}
+                />
+              )}
+              {headerData?.title && (
+                <StyledText textFieldData={headerData?.title} />
+              )}
+              {headerData?.rightIcon ? (
+                <StyledImage imageFieldData={headerData?.rightIcon} />
+              ) : (
+                <View style={styles.placeholderImage} />
+              )}
+            </View>
+            {headerData?.subtitle && (
+              <StyledText textFieldData={headerData?.subtitle} />
+            )}
+            {<View style={styles.spacer} />}
+            {headerData?.description?.url && (
+              <Animated.View
+                style={[styles.headerContainerBottomBar, headerStyle]}
+              >
+                <StyledImage imageFieldData={headerData?.description} />
+              </Animated.View>
+            )}
+          </View>
+        </Animated.View>
+      </NaviLinearGradient>
+    );
+  };
+
+  const Footer = () => {
+    return (
+      <View style={styles.footer}>
+        {getWidgetViews(
+          screenData?.screenWidgets?.footerWidgets,
+          handleActions,
+          screenData?.screenState,
+          handleClick,
+        )}
+      </View>
+    );
+  };
+
+  if (screenData?.screenState === ScreenState.LOADING) {
+    return <GenericShimmerScreen handleClick={handleClick} />;
+  }
+
+  if (screenData?.screenState === ScreenState.ERROR) {
+    return (
+      <QuoteOfferErrorScreen
+        errorMetaData={screenData.errorMetaData}
+        handleActions={handleActions}
+        handleClick={handleClick}
+        headerProperties={{
+          leftIconCta: ConstantCta.GO_BACK_CTA,
+          leftIcon: "BACK_ARROW",
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={[styles.container, screenData?.screenStyle]}>
+      <Animated.ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.content}
+        nestedScrollEnabled={true}
+        bounces={false}
+        scrollEnabled={true}
+        onScroll={onScroll}
+        stickyHeaderIndices={[0]}
+        overScrollMode={"never"}
+      >
+        <Header />
+        {getWidgetViews(
+          screenData?.screenWidgets?.contentWidgets,
+          handleActions,
+          screenData?.screenState,
+          handleClick,
+        )}
+      </Animated.ScrollView>
+      <Footer />
+    </View>
+  );
+};
+
+function getWidgetViews(
+  widgetList: Widget[] | undefined,
+  handleActions: (screenActionPayload?: GenericActionPayload) => void,
+  screenState?: ScreenState | null,
+  handleClick?: (ctaData: CtaData) => void,
+): React.JSX.Element {
+  return (
+    <View>
+      {widgetList?.map((widget, index) => {
+        return (
+          <BaseWidget
+            widget={widget}
+            handleScreenActions={handleActions}
+            screenState={screenState}
+            widgetIndex={index}
+            key={index}
+            handleClick={handleClick}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+export default BenefitScreen;
diff --git a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
new file mode 100644
index 0000000000..9eca04a53c
--- /dev/null
+++ b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreenStyles.ts
@@ -0,0 +1,52 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+    backgroundColor: "#FFFFFF",
+  },
+  header: {
+    width: "100%",
+    alignItems: "stretch",
+    zIndex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  footer: {
+    alignItems: "stretch",
+  },
+  headerContainer: {
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  headerContainerTopBar: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  headerButton: {
+    backgroundColor: "#274688",
+    borderRadius: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  headerContainerBottomBar: {
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  spacer: {
+    height: 24,
+  },
+  placeholderImage: { height: 24, width: 24 },
+});
+
+export default styles;
diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
index 1a5001df45..17ef162f6b 100644
--- a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx
@@ -1,6 +1,6 @@
 import { useNavigation } from "@react-navigation/native";
 import React, { useEffect } from "react";
-import { BackHandler, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import BaseWidget from "../../../../../components/widgets/BaseWidget";
 import {
   BaseActionTypes,
@@ -15,6 +15,7 @@ import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/
 import { CtaNavigator } from "../../../../common/navigator/NavigationRouter";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
+import { handleGoBackOrExitApp } from "../../../../common/utilities/NavigationUtil";
 import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import ComparePlanShimmerScreen from "./shimmer-screen/ComparePlanShimmerScreen";
@@ -51,11 +52,7 @@ const ComparePlanScreen = ({
           CtaNavigator.performNavigation(navigation, navigatorType, cta);
           break;
         case CtaType.GO_BACK:
-          if (navigation.canGoBack()) {
-            navigation.goBack();
-          } else {
-            BackHandler.exitApp();
-          }
+          handleGoBackOrExitApp(navigation);
           break;
         default:
           NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
diff --git a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
index fef8d2216e..9bf209d4b6 100644
--- a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx
@@ -1,11 +1,6 @@
 import { useNavigation } from "@react-navigation/native";
 import React, { useEffect } from "react";
-import {
-  BackHandler,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  View,
-} from "react-native";
+import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -30,6 +25,7 @@ import { CtaNavigator } from "../../../../common/navigator/NavigationRouter";
 import { ScreenState } from "../../../../common/screen/BaseScreen";
 import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils";
+import { handleGoBackOrExitApp } from "../../../../common/utilities/NavigationUtil";
 import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen";
 import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen";
 import styles from "./MarketBenefitCompareScreenStyles";
@@ -69,11 +65,7 @@ const MarketBenefitCompareScreen = ({
           CtaNavigator.performNavigation(navigation, navigatorType, cta);
           break;
         case CtaType.GO_BACK:
-          if (navigation.canGoBack()) {
-            navigation.goBack();
-          } else {
-            BackHandler.exitApp();
-          }
+          handleGoBackOrExitApp(navigation);
           break;
         default:
           NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
diff --git a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
index 42c9cef79b..9d2b2e39ef 100644
--- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
@@ -49,6 +49,7 @@ import { handleGoBackOrExitApp } from "../../../../common/utilities/NavigationUt
 import styles from "./QuoteOfferScreenStyle";
 import QuoteOfferErrorScreen from "./error-screen/QuoteOfferErrorScreen";
 import QuoteOfferShimmerScreen from "./shimmer-screen/QuoteOfferShimmerScreen";
+
 const QuoteOfferScreen = ({
   ctaData,
   screenData,
diff --git a/App/common/constants/AnalyticsEventsConstant.ts b/App/common/constants/AnalyticsEventsConstant.ts
index db05c84616..c9eeee956a 100644
--- a/App/common/constants/AnalyticsEventsConstant.ts
+++ b/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",
 };
diff --git a/App/common/constants/ModalNameConstants.ts b/App/common/constants/ModalNameConstants.ts
index ef2454092e..4cb1e16998 100644
--- a/App/common/constants/ModalNameConstants.ts
+++ b/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";
diff --git a/App/common/constants/ScreenNameConstants.ts b/App/common/constants/ScreenNameConstants.ts
index 584652bc8a..00181a376c 100644
--- a/App/common/constants/ScreenNameConstants.ts
+++ b/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";
diff --git a/App/common/constants/WidgetNameConstants.ts b/App/common/constants/WidgetNameConstants.ts
index bb189722da..ccf0f6ee02 100644
--- a/App/common/constants/WidgetNameConstants.ts
+++ b/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";
diff --git a/App/common/interface/index.ts b/App/common/interface/index.ts
index 50aebc4fa5..940af9013c 100644
--- a/App/common/interface/index.ts
+++ b/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",
 }
diff --git a/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts b/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts
index 9a0a4c17b0..0dfa86c65e 100644
--- a/App/common/interface/widgets/modalData/TitleSubtitleWithDropdownBottomSheetData.ts
+++ b/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 {
diff --git a/App/common/interface/widgets/modalData/index.ts b/App/common/interface/widgets/modalData/index.ts
new file mode 100644
index 0000000000..430291c33b
--- /dev/null
+++ b/App/common/interface/widgets/modalData/index.ts
@@ -0,0 +1,5 @@
+export type {
+  DropdownContent,
+  DropdownData,
+  TitleSubtitleWithDropdownBottomSheetProps,
+} from "./TitleSubtitleWithDropdownBottomSheetData";
diff --git a/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts b/App/common/interface/widgets/widgetData/BenefitScreenHeaderData.ts
new file mode 100644
index 0000000000..982a9d47aa
--- /dev/null
+++ b/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;
+}
diff --git a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
index c4dab48129..a06659ca6b 100644
--- a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
+++ b/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 {
diff --git a/App/common/interface/widgets/widgetData/ListItemWidgetData.ts b/App/common/interface/widgets/widgetData/ListItemWidgetData.ts
new file mode 100644
index 0000000000..9efa0298a4
--- /dev/null
+++ b/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;
+}
diff --git a/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts
index b828d0f652..22c48df8eb 100644
--- a/App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData.ts
+++ b/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;
 }
diff --git a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts
index af16dc30a5..b7634b9142 100644
--- a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts
+++ b/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;
 }
diff --git a/App/common/interface/widgets/widgetData/index.ts b/App/common/interface/widgets/widgetData/index.ts
index ae69d60bdb..d25322e496 100644
--- a/App/common/interface/widgets/widgetData/index.ts
+++ b/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";
diff --git a/App/common/modals/modalViewResolver.tsx b/App/common/modals/modalViewResolver.tsx
index 40a16e6bde..0bad56d413 100644
--- a/App/common/modals/modalViewResolver.tsx
+++ b/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 />;
   }
diff --git a/App/common/screen/ScreenActionHandler.tsx b/App/common/screen/ScreenActionHandler.tsx
index 9142447ffd..a7dc1a7fad 100644
--- a/App/common/screen/ScreenActionHandler.tsx
+++ b/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,
diff --git a/App/common/screen/ScreenActionTypes.ts b/App/common/screen/ScreenActionTypes.ts
index ece6093364..d98f97b0fb 100644
--- a/App/common/screen/ScreenActionTypes.ts
+++ b/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",
 };
diff --git a/App/common/screen/screen-mappers/GIScreenMapper.tsx b/App/common/screen/screen-mappers/GIScreenMapper.tsx
index 06aa4518bb..3c2142a274 100644
--- a/App/common/screen/screen-mappers/GIScreenMapper.tsx
+++ b/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(
diff --git a/App/common/utilities/CacheUtils.ts b/App/common/utilities/CacheUtils.ts
index 2e02b4cf8b..560bf969b9 100644
--- a/App/common/utilities/CacheUtils.ts
+++ b/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,
 ];
diff --git a/App/common/utilities/CtaParamsUtils.ts b/App/common/utilities/CtaParamsUtils.ts
index 1f8ba1ad36..1e10655eaa 100644
--- a/App/common/utilities/CtaParamsUtils.ts
+++ b/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) => {
diff --git a/App/common/widgets/widgetResolver.tsx b/App/common/widgets/widgetResolver.tsx
index e67faf1129..468b0a51cf 100644
--- a/App/common/widgets/widgetResolver.tsx
+++ b/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
diff --git a/assets/colors/colors.ts b/assets/colors/colors.ts
index 00d852506e..999ab91b95 100644
--- a/assets/colors/colors.ts
+++ b/assets/colors/colors.ts
@@ -11,6 +11,7 @@ const Colors = {
   shimmerBgColor: "#E9E7F0",
   shimmerHighlightColor: "#F5F5F8",
   silver: "#BCBCBC",
+  kleinBlue: "#0036A3",
 };
 
 export default Colors;
diff --git a/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
index 1a71e7dd8e..ba1ccbd85e 100644
--- a/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
+++ b/components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx
@@ -55,7 +55,7 @@ const DropDownComponent = ({
     }).start();
   };
 
-  const getBulletPoint = (item: DropdownContent) => {
+  const BulletPoint = ({ item }: { item: DropdownContent }) => {
     return (
       <View>
         {item?.icon?.url ? (
@@ -70,7 +70,7 @@ const DropDownComponent = ({
   const DropdownItemComponent = ({ item }: { item: DropdownContent }) => {
     return (
       <View style={styles.rowContainer}>
-        {getBulletPoint(item)}
+        <BulletPoint item={item} />
         {item?.content?.text && <StyledText textFieldData={item.content} />}
       </View>
     );
diff --git a/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx b/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx
new file mode 100644
index 0000000000..fbc543e549
--- /dev/null
+++ b/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx
@@ -0,0 +1,205 @@
+import React, { useState } from "react";
+import {
+  FlatList,
+  LayoutAnimation,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
+import { INITIAL_Y_VALUE } from "../../../App/common/constants";
+import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
+import {
+  DropdownContent,
+  DropdownData,
+  TitleSubtitleWithDropdownBottomSheetProps,
+} from "../../../App/common/interface/widgets/modalData";
+import { TextFieldData } from "../../../App/common/interface/widgets/widgetData";
+import { StyledImage } from "../../StyledImage";
+import { StyledText } from "../../widgets/styled-text/StyledText";
+import styles from "./TopSectionExpandableBottomSheetStyle";
+
+const TopSectionExpandableBottomSheet = ({
+  bottomSheetData,
+  handleModalClick,
+  handleActions,
+}: TitleSubtitleWithDropdownBottomSheetProps) => {
+  const y = useSharedValue(INITIAL_Y_VALUE);
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    y.value = event.nativeEvent.contentOffset.y;
+  };
+  const derivedY = useDerivedValue(() => {
+    return y.value;
+  });
+
+  const handleRightTitleClick = () => {
+    handleModalClick && handleModalClick(bottomSheetData?.rightTitle?.cta!!);
+  };
+
+  const headerIconClick = () => {
+    handleModalClick &&
+      bottomSheetData?.headerDescriptionText?.cta &&
+      handleModalClick(bottomSheetData?.headerDescriptionText?.cta);
+  };
+
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      shadowColor: derivedY.value > 0 ? "black" : "transparent",
+      shadowOpacity: derivedY.value > 0 ? 1 : 0,
+      shadowRadius: derivedY.value > 0 ? 8 : 0,
+      elevation: derivedY.value > 0 ? 32 : 0,
+    };
+  });
+
+  const Header = () => {
+    return (
+      <Animated.View style={[styles.title, headerStyle]}>
+        {bottomSheetData?.title?.text && (
+          <StyledText textFieldData={bottomSheetData.title} />
+        )}
+        {bottomSheetData?.rightTitle && (
+          <TouchableOpacity activeOpacity={1} onPress={handleRightTitleClick}>
+            <StyledText textFieldData={bottomSheetData.rightTitle} />
+          </TouchableOpacity>
+        )}
+      </Animated.View>
+    );
+  };
+  return (
+    <View style={bottomSheetData?.viewStyle}>
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+        scrollEnabled={true}
+        overScrollMode={"never"}
+        stickyHeaderIndices={[0]}
+        onScroll={onScroll}
+      >
+        <Header />
+        <TouchableOpacity activeOpacity={1}>
+          <NaviLinearGradient
+            gradientColors={bottomSheetData?.backgroundGradient}
+            orientation={bottomSheetData?.gradientOrientation}
+          >
+            {bottomSheetData?.subtitle?.text && (
+              <StyledText textFieldData={bottomSheetData.subtitle} />
+            )}
+            <View style={styles.videoContainer}>
+              <TouchableOpacity activeOpacity={1} onPress={headerIconClick}>
+                {bottomSheetData?.headerDescriptionText && (
+                  <StyledText
+                    textFieldData={bottomSheetData.headerDescriptionText}
+                  />
+                )}
+              </TouchableOpacity>
+              {bottomSheetData?.headerDescriptionIcon && (
+                <StyledImage
+                  imageFieldData={bottomSheetData.headerDescriptionIcon}
+                  handleClick={handleModalClick}
+                />
+              )}
+            </View>
+          </NaviLinearGradient>
+          {bottomSheetData?.dropdownData?.title?.text && (
+            <DropDownComponent dropdownData={bottomSheetData?.dropdownData} />
+          )}
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+};
+
+const DropDownComponent = ({
+  dropdownData,
+}: {
+  dropdownData: DropdownData;
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const toggleOpen = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsExpanded(value => !value);
+    dropdownData?.toggleEvent &&
+      sendAsAnalyticsEvent(dropdownData?.toggleEvent);
+  };
+
+  const BulletPoint = ({ item }: { item: DropdownContent }) => {
+    return (
+      <View>
+        {item?.icon?.url ? (
+          <StyledImage imageFieldData={item.icon} />
+        ) : (
+          <View style={styles.bulletIcon}></View>
+        )}
+      </View>
+    );
+  };
+
+  const DropdownItemComponent = ({ item }: { item: DropdownContent }) => {
+    return (
+      <View style={styles.rowContainer}>
+        <BulletPoint item={item} />
+        {item?.content?.text && <StyledText textFieldData={item.content} />}
+      </View>
+    );
+  };
+
+  const CollapsableText = (collapsableText?: TextFieldData) => {
+    return (
+      <View>
+        {collapsableText?.text && (
+          <TouchableOpacity onPress={toggleOpen} activeOpacity={1}>
+            <StyledText textFieldData={collapsableText} />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.contentSection, dropdownData?.style]}>
+      <TouchableOpacity
+        disabled={isExpanded}
+        onPress={!isExpanded ? toggleOpen : undefined}
+        activeOpacity={1}
+        style={commonStyles.flexStart}
+      >
+        {dropdownData?.title?.text && (
+          <StyledText textFieldData={dropdownData.title} />
+        )}
+        {dropdownData?.contentList?.[0] && (
+          <DropdownItemComponent
+            item={{
+              ...dropdownData.contentList[0],
+              content: {
+                ...(dropdownData.contentList[0]?.content as TextFieldData),
+                numberOfLines: isExpanded ? 10 : 1,
+              },
+            }}
+          />
+        )}
+      </TouchableOpacity>
+      {isExpanded && dropdownData?.contentList && (
+        <FlatList
+          data={dropdownData?.contentList?.slice(1)}
+          renderItem={({ item }) => <DropdownItemComponent item={item} />}
+        />
+      )}
+      <View style={styles.expandText}>
+        {isExpanded
+          ? CollapsableText(dropdownData?.collapseText)
+          : CollapsableText(dropdownData?.expandText)}
+      </View>
+    </View>
+  );
+};
+
+export default TopSectionExpandableBottomSheet;
diff --git a/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheetStyle.ts b/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheetStyle.ts
new file mode 100644
index 0000000000..b919d7382d
--- /dev/null
+++ b/components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheetStyle.ts
@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  title: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    backgroundColor: "#FFFFFF",
+    paddingBottom: 16,
+  },
+  videoContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  contentSection: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  bulletIcon: {
+    width: 4,
+    height: 4,
+    borderRadius: 4,
+    backgroundColor: "#444444",
+    marginTop: 8,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    marginVertical: 8,
+  },
+  expandText: {
+    backgroundColor: "white",
+    width: "100%",
+    alignItems: "flex-start",
+    paddingTop: 8,
+  },
+});
+
+export default styles;
diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
index 10c10244e1..2752350470 100644
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
@@ -64,11 +64,21 @@ const FooterWithCardWidget = ({
     }
   };
 
+  const handleSecondaryFooterClick = () => {
+    if (handleClick && widgetData?.secondaryFooterButton?.cta) {
+      handleClick(widgetData.secondaryFooterButton.cta);
+    } else {
+      handleActions(null, widgetData?.secondaryButtonAction);
+    }
+  };
+
   const getViewStyle = (): ViewStyle => {
     return widgetData.cardInfo?.title?.text ||
       widgetData.cardInfo?.centerTitle?.text
       ? styles.rowContainer
-      : styles.roundedRowContainer;
+      : widgetData.bottomTitle?.text
+        ? styles.roundedRowContainerWithBottomTitle
+        : styles.roundedRowContainer;
   };
 
   const throttledHandleActions = useCallback(
@@ -114,7 +124,14 @@ const FooterWithCardWidget = ({
       : ButtonState.ENABLED;
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        widgetData?.borderRadius != undefined
+          ? { borderRadius: widgetData?.borderRadius }
+          : {},
+      ]}
+    >
       {widgetData?.cardInfo?.title?.text &&
         widgetData?.cardInfo?.rightTitle?.text && (
           <TouchableOpacity onPress={cardAction} activeOpacity={1}>
@@ -156,15 +173,32 @@ const FooterWithCardWidget = ({
           </View>
         )}
         <View style={commonStyles.flex_1}>
-          <CtaButton
-            state={buttonState}
-            onPress={handleFooterClick}
-            style={commonStyles.height54}
-          >
-            {widgetData?.footerButton?.title && (
+          {widgetData?.footerButton?.title?.text && (
+            <CtaButton
+              state={buttonState}
+              onPress={handleFooterClick}
+              style={commonStyles.height54}
+            >
               <StyledText textFieldData={widgetData?.footerButton?.title} />
-            )}
-          </CtaButton>
+            </CtaButton>
+          )}
+          {widgetData?.secondaryFooterButton?.title?.text && (
+            <CtaButton
+              state={buttonState}
+              onPress={handleSecondaryFooterClick}
+              style={styles.secondaryFooterButton}
+            >
+              <StyledText
+                textFieldData={widgetData?.secondaryFooterButton?.title}
+              />
+            </CtaButton>
+          )}
+          {widgetData?.bottomTitle?.text && (
+            <TitleWidget
+              widgetData={{ title: widgetData?.bottomTitle }}
+              handleClick={handleClick}
+            />
+          )}
         </View>
       </View>
     </View>
diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
index cc10c0f915..f289085497 100644
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
@@ -36,6 +36,16 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingHorizontal: 16,
   },
+
+  roundedRowContainerWithBottomTitle: {
+    backgroundColor: "white",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 24,
+    paddingTop: 16,
+    paddingHorizontal: 16,
+  },
+
   centerTitleContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -62,6 +72,13 @@ const styles = StyleSheet.create({
     paddingTop: 5,
     paddingBottom: 2,
   },
+  secondaryFooterButton: {
+    height: 54,
+    backgroundColor: "#F5F5F5",
+    borderRadius: 4,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
 
 export default styles;
diff --git a/components/widgets/index.tsx b/components/widgets/index.tsx
index a4552fae3e..e66d882316 100644
--- a/components/widgets/index.tsx
+++ b/components/widgets/index.tsx
@@ -20,3 +20,4 @@ export { default as TitleWidget } from "./title-widget/TitleWidget";
 export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-background/TitleWithAssetBackground";
 export { default as TitleWithColumnWidget } from "./title-with-column-widget/TitleWithColumnWidget";
 export { default as TitleWithListWidget } from "./title-with-list-widget/TitleWithListWidget";
+export { default as ListItemWidget } from "./list-item-with-icon-widget/ListItemWidget";
diff --git a/components/widgets/list-item-with-icon-widget/ListItemWidget.tsx b/components/widgets/list-item-with-icon-widget/ListItemWidget.tsx
new file mode 100644
index 0000000000..17556f7e91
--- /dev/null
+++ b/components/widgets/list-item-with-icon-widget/ListItemWidget.tsx
@@ -0,0 +1,71 @@
+import { useCallback } from "react";
+import { FlatList, TouchableOpacity, View } from "react-native";
+import {
+  ListItemWidgetProps,
+  TitleWithAssetsWidgetData,
+} from "../../../App/common/interface/widgets/widgetData";
+import { createThrottledHandler } from "../../../App/common/utilities/ThrottleUtil";
+import { StyledImage } from "../../StyledImage";
+import { StyledLottie } from "../styled-lottie/StyledLottie";
+import { StyledText } from "../styled-text/StyledText";
+import styles from "./ListItemWidgetStyles";
+
+const ListItemWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  widgetIndex,
+  handleClick,
+}: ListItemWidgetProps) => {
+  const throttledHandleActions = useCallback(
+    createThrottledHandler(action => handleActions(null, action), 700),
+    [widgetData],
+  );
+
+  return (
+    <FlatList
+      data={widgetData.listItems}
+      renderItem={({ item }: { item: TitleWithAssetsWidgetData }) => (
+        <TouchableOpacity
+          onPress={() => {
+            const { cta, actions } = item || {};
+            if (actions) {
+              throttledHandleActions(actions);
+            } else if (cta && handleClick) {
+              handleClick(cta);
+            }
+          }}
+          activeOpacity={1}
+        >
+          <View style={styles.container}>
+            <View style={styles.rowContainer}>
+              {item?.leftIcon && (
+                <StyledImage imageFieldData={item?.leftIcon} />
+              )}
+              {item?.leftLottie && (
+                <StyledLottie lottieFieldData={item?.leftLottie} />
+              )}
+              <View style={styles.titleContainer}>
+                {item?.title && <StyledText textFieldData={item?.title} />}
+                {item?.subtitle && (
+                  <StyledText textFieldData={item?.subtitle} />
+                )}
+              </View>
+            </View>
+            {item?.rightIcon && (
+              <StyledImage imageFieldData={item?.rightIcon} />
+            )}
+            {item?.rightLottie && (
+              <StyledLottie lottieFieldData={item?.rightLottie} />
+            )}
+          </View>
+        </TouchableOpacity>
+      )}
+      keyExtractor={(item, index) => item?.id || index.toString()}
+      ItemSeparatorComponent={() => <View style={styles.separator} />}
+      contentContainerStyle={widgetData?.listStyle}
+    />
+  );
+};
+
+export default ListItemWidget;
diff --git a/components/widgets/list-item-with-icon-widget/ListItemWidgetStyles.ts b/components/widgets/list-item-with-icon-widget/ListItemWidgetStyles.ts
new file mode 100644
index 0000000000..759f103e87
--- /dev/null
+++ b/components/widgets/list-item-with-icon-widget/ListItemWidgetStyles.ts
@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import Colors from "../../../assets/colors/colors";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingTop: 16,
+    paddingBottom: 20,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    gap: 12,
+    width: "80%",
+  },
+  titleContainer: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Colors.lightGray,
+  },
+});
+
+export default styles;
diff --git a/components/widgets/title-widget/TitleWidget.tsx b/components/widgets/title-widget/TitleWidget.tsx
index 539ce27f41..c37ec0367a 100644
--- a/components/widgets/title-widget/TitleWidget.tsx
+++ b/components/widgets/title-widget/TitleWidget.tsx
@@ -49,7 +49,11 @@ const TitleWidget = ({
   return (
     <View style={widgetStyle}>
       {widgetData.title && (
-        <TouchableOpacity onPress={handleTitleClick} activeOpacity={1}>
+        <TouchableOpacity
+          onPress={handleTitleClick}
+          activeOpacity={1}
+          disabled={!(widgetData?.title?.cta || widgetData?.title?.actions)}
+        >
           <StyledText textFieldData={widgetData.title} />
         </TouchableOpacity>
       )}
@@ -57,7 +61,13 @@ const TitleWidget = ({
         <StyledText textFieldData={widgetData.subtitle} />
       )}
       {widgetData.rightTitle && (
-        <TouchableOpacity onPress={handleRightTitleClick} activeOpacity={1}>
+        <TouchableOpacity
+          onPress={handleRightTitleClick}
+          activeOpacity={1}
+          disabled={
+            !(widgetData?.rightTitle?.cta || widgetData?.rightTitle?.actions)
+          }
+        >
           <StyledText textFieldData={widgetData.rightTitle} />
         </TouchableOpacity>
       )}
diff --git a/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx b/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
index b6bba282de..5ec3585a16 100644
--- a/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
+++ b/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
@@ -1,14 +1,14 @@
 import { View, ViewStyle } from "react-native";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
-import { TitleWithColumnWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWithColumnWidgetData";
-import { StyledText } from "../styled-text/StyledText";
 import {
   ImageFieldData,
   TextFieldData,
 } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+import { TitleWithColumnWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWithColumnWidgetData";
 import { StyledImage } from "../../StyledImage";
-import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
+import { StyledText } from "../styled-text/StyledText";
 import { styles } from "./TitleWithColumnWidgetStyle";
 
 const TitleWithColumnWidget = ({
diff --git a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
index 9014494e1d..2e21ff9162 100644
--- a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
+++ b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx
@@ -32,7 +32,11 @@ const ListItemComponent = ({
     item.onViewEvent && sendAsAnalyticsEvent(item.onViewEvent);
   });
   return (
-    <TouchableOpacity onPress={() => handleWidgetClick(item)} activeOpacity={1}>
+    <TouchableOpacity
+      onPress={() => handleWidgetClick(item)}
+      activeOpacity={1}
+      disabled={!(item?.cta || item?.actions)}
+    >
       <TitleWidget
         widgetData={item}
         widgetStyle={styles.itemRowContainer}
diff --git a/network/NetworkService.ts b/network/NetworkService.ts
index 8a8e33b2f6..d81af8e4e4 100644
--- a/network/NetworkService.ts
+++ b/network/NetworkService.ts
@@ -29,6 +29,10 @@ export const get = async <T>(
       signal: newAbortSignal(11000),
     });
 
+    if (params) {
+      requestConfig.params = params;
+    }
+
     addBundleVersionToHeader(axiosInstance);
 
     if (params) {
diff --git a/network/payloads/request/BenefitScreenRequest.ts b/network/payloads/request/BenefitScreenRequest.ts
new file mode 100644
index 0000000000..35f30adcd9
--- /dev/null
+++ b/network/payloads/request/BenefitScreenRequest.ts
@@ -0,0 +1,5 @@
+interface BenefitScreenRequest {
+  planId?: string | null;
+  benefitType?: string | null;
+  sourceScreen?: string | null;
+}