Quote Page V2 | TP-61793 | TP-61794 | TP-61795 (#10440)

2024-04-18 15:45:20 +05:30
parent c6850bb4ad
commit 0e71fc57cf
28 changed files with 675 additions and 65 deletions
--- a/App/Container/Navi-Insurance/Styles/index.ts
+++ b/App/Container/Navi-Insurance/Styles/index.ts
@@ -15,6 +15,15 @@ export const commonStyles = StyleSheet.create({
  verticalSpacer32: {
    height: 32,
  },
+  verticalSpacer4: {
+    height: 4,
+  },
+  verticalSpacer16: {
+    height: 16,
+  },
+  verticalSpacer24: {
+    height: 24,
+  },
  selfAlignCenter: {
    alignSelf: "center",
  },
--- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
+++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
@@ -9,6 +9,7 @@ import {
 import Animated, {
  useAnimatedStyle,
  useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import Colors from "../../../../../assets/colors/colors";
 import BaseWidget from "../../../../../components/widgets/BaseWidget";
@@ -33,7 +34,8 @@ import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
 import styles from "./QuoteOfferScreenStyle";
 import QuoteOfferErrorScreen from "./error-screen/QuoteOfferErrorScreen";
 import QuoteOfferShimmerScreen from "./shimmer-screen/QuoteOfferShimmerScreen";
-
+import { FabWidgetData } from "../../../../common/interface/widgets/widgetData/FabWidgetData";
+import FAB from "../../../../../components/widgets/fab/FAB";
 const QuoteOfferScreen = ({
  ctaData,
  screenData,
@@ -44,17 +46,30 @@ const QuoteOfferScreen = ({
  handleActions: (screenPayload?: GenericActionPayload) => void;
 }) => {
  const y = useSharedValue(0);
-  // TODO: check and remove below code if it is working fine in release.
-  // const onScroll = useAnimatedScrollHandler({
-  //   onScroll: (event) => {
-  //     y.value = event.contentOffset.y;
-  //   },
-  // });
+  const lastScrollPosition = useSharedValue(0);

  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    lastScrollPosition.value = y.value;
    y.value = event.nativeEvent.contentOffset.y;
  };

+  const fabTextStyle = useAnimatedStyle(() => {
+    return {
+      maxWidth: withTiming(
+        y.value < lastScrollPosition.value || y.value <= 0 ? "100%" : 0,
+        { duration: 100 }
+      ),
+      paddingRight: withTiming(
+        y.value < lastScrollPosition.value || y.value <= 0 ? 16 : 0,
+        { duration: 100 }
+      ),
+      opacity: withTiming(
+        y.value < lastScrollPosition.value || y.value <= 0 ? 1 : 0,
+        { duration: 100 }
+      ),
+    };
+  });
+
  const headerBgStyle = useAnimatedStyle(() => {
    return {
      backgroundColor:
@@ -238,6 +253,19 @@ const QuoteOfferScreen = ({
            handleClick
          )}
        </View>
+        {screenData?.screenMetaData?.floatingWidgets?.map(
+          (fabWidget: Widget, index: number) => {
+            return (
+              <FAB
+                key={`${fabWidget.widgetId}_${index}`}
+                widgetData={fabWidget.widgetData as FabWidgetData}
+                handleActions={handleActions}
+                handleClick={handleClick}
+                scrollStyle={fabTextStyle}
+              />
+            );
+          }
+        )}
      </View>
    );
  }
--- a/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts
+++ b/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreenStyle.ts
@@ -6,6 +6,7 @@ const styles = StyleSheet.create({
    flexDirection: "column",
  },
  header: {
+    width: "100%",
    alignItems: "stretch",
    position: "absolute",
    zIndex: 1,
--- a/App/common/constants/WidgetNameConstants.ts
+++ b/App/common/constants/WidgetNameConstants.ts
@@ -13,3 +13,5 @@ export const HEADER_LOTTIE_ANIMATION_WIDGET = "HEADER_LOTTIE_ANIMATION_WIDGET";
 export const SUM_INSURED_WIDGET = "SUM_INSURED_WIDGET";
 export const TITLE_SUBTITLE_WITH_ASSET_WIDGET = "TITLE_SUBTITLE_WITH_ASSET_WIDGET";
 export const FAB_REQUEST_TO_CALLBACK = "FAB_REQUEST_TO_CALLBACK";
+export const TITLE_WITH_COLUMN_WIDGET = "TITLE_WITH_COLUMN_WIDGET";
+export const TITLE_WITH_ASSET_BACKGROUND_WIDGET = "TITLE_WITH_ASSET_BACKGROUND_WIDGET";
--- a/App/common/hooks/useGradient.tsx
+++ b/App/common/hooks/useGradient.tsx
@@ -1,17 +1,20 @@
 import LinearGradient from "react-native-linear-gradient";
 import { isValidHexColors } from "../utilities/ValidateColors";
 import { Orientation } from "../constants/StringConstant";
+import { ViewStyle } from "react-native";

 export const NaviLinearGradient = ({
  gradientColors,
  defaultColors,
  children,
  orientation,
+  style,
 }: {
  gradientColors?: string[];
  defaultColors?: string[];
  children?: React.ReactNode;
  orientation?: string;
+  style?: ViewStyle;
 }) => {
  let startValue;
  switch (orientation) {
@@ -48,6 +51,7 @@ export const NaviLinearGradient = ({
      colors={isValidHexColors(gradientColors, defaultColors)}
      start={startValue}
      end={endValue}
+      style={style}
    >
      {children}
    </LinearGradient>
--- a/App/common/interface/widgets/screenData/ScreenMetaData.ts
+++ b/App/common/interface/widgets/screenData/ScreenMetaData.ts
@@ -1,6 +1,8 @@
 import { CtaData } from "../..";
+import { Widget } from "../Widget";

 export interface ScreenMetaData {
  backButtonCta?: CtaData;
  redirectionCta?: CtaData;
+  floatingWidgets?: Widget[];
 }
--- a/App/common/interface/widgets/widgetData/FabWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/FabWidgetData.ts
@@ -1,15 +1,21 @@
 import { CtaData } from "../..";
 import { GenericWidgetData } from "../Widget";
-import { LottieFieldData } from "./TitleWidgetData";
-
+import {
+  ImageFieldData,
+  LottieFieldData,
+  TextFieldData,
+} from "./TitleWidgetData";

 export interface FabWidgetData extends GenericWidgetData {
-    lottieData?: LottieFieldData;
-    properties?: FabProperties;
-    callbackCta?: CtaData;
-};
+  lottieData?: LottieFieldData;
+  buttonTitle?: TextFieldData;
+  topLottieData?: LottieFieldData;
+  imageData?: ImageFieldData;
+  properties?: FabProperties;
+  callbackCta?: CtaData;
+}

-export interface FabProperties { 
-    isDraggable?: boolean;
-    startingPosition?: number;
-}
+export interface FabProperties {
+  isDraggable?: boolean;
+  startingPosition?: number;
+}
--- a/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/FooterWithCardWidgetData.ts
@@ -22,6 +22,8 @@ export interface FinalPatchCallRequestBody {
 }

 export interface CardInfo extends GenericWidgetData {
+  dashedSeparator?: boolean;
+  centerTitle?: TextFieldData;
  title?: TextFieldData;
  rightTitle?: TextFieldData;
 }
--- a/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData.ts
@@ -13,4 +13,5 @@ export interface HeaderWithAssetsWidgetData extends GenericWidgetData {
  rightIcon?: ImageFieldData;
  rightLottie?: LottieFieldData;
  action?: GenericActionPayload;
+  isRightAssetVisible?: boolean;
 }
--- a/App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts
+++ b/App/common/interface/widgets/widgetData/TitleWithAssetBackground.ts
@@ -0,0 +1,22 @@
+import { GenericWidgetData } from "../Widget";
+import { ButtonData } from "./FooterWithCardWidgetData";
+import {
+  ImageFieldData,
+  LottieFieldData,
+  TextFieldData,
+} from "./TitleWidgetData";
+
+export interface TitleWithAssetBackgroundData extends GenericWidgetData {
+  backgroundIcon?: ImageFieldData;
+  backgroundLottie?: LottieFieldData;
+  middleStrip?: Strip;
+  title?: TextFieldData;
+  footerButton?: ButtonData
+}
+
+export interface Strip {
+  firstIcon?: ImageFieldData;
+  secondIcon?: ImageFieldData;
+  stripTitle?: TextFieldData;
+  stripTitleGradient?: string[];
+}
--- a/App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts
+++ b/App/common/interface/widgets/widgetData/TitleWithColumnWidgetData.ts
@@ -0,0 +1,18 @@
+import { GenericWidgetData } from "../Widget";
+import {
+  ImageFieldData,
+  LottieFieldData,
+  TextFieldData,
+} from "./TitleWidgetData";
+
+export interface TitleWithColumnWidgetData extends GenericWidgetData {
+  leftIcon?: ImageFieldData;
+  leftLottie?: LottieFieldData;
+  leftTitle?: TextFieldData;
+  leftSubtitle?: TextFieldData;
+  title?: TextFieldData;
+  rightIcon?: ImageFieldData;
+  rightLottie?: LottieFieldData;
+  rightTitle?: TextFieldData;
+  rightSubtitle?: TextFieldData;
+}
--- a/App/common/widgets/widgetResolver.tsx
+++ b/App/common/widgets/widgetResolver.tsx
@@ -24,12 +24,16 @@ import {
  TITLE_SUBTITLE_WITH_ASSET_WIDGET,
  TITLE_WIDGET,
  TITLE_WITH_ASSETS_WIDGET,
+  TITLE_WITH_ASSET_BACKGROUND_WIDGET,
+  TITLE_WITH_COLUMN_WIDGET,
  TITLE_WITH_LIST_WIDGET,
 } from "../constants/WidgetNameConstants";
 import { CtaData } from "../interface";
 import { GenericWidgetData, Widget } from "../interface/widgets/Widget";
 import { SumInsuredWidgetData } from "../interface/widgets/widgetData/SumInsuredWidgetData";
 import { ScreenState } from "../screen/BaseScreen";
+import { TitleWithColumnWidget } from "../../../components/widgets/title-with-column-widget/TitleWithColumnWidget";
+import { TitleWithAssetBackgroundWidget } from "../../../components/widgets/title-with-asset-background/TitleWithAssetBackground";

 export const GetWidgetView = {
  getWidget: (
@@ -198,6 +202,27 @@ function resolveWidgetView(
          handleClick={handleClick}
        />
      );
+      case TITLE_WITH_COLUMN_WIDGET:
+        return (
+          <TitleWithColumnWidget
+            widgetData={widgetData}
+            widgetStyle={widgetStyle}
+            handleActions={handleActions}
+            handleClick={handleClick}
+            widgetIndex={widgetIndex}
+          />
+        )
+      case TITLE_WITH_ASSET_BACKGROUND_WIDGET:
+        return (
+          <TitleWithAssetBackgroundWidget
+            widgetData={widgetData}
+            widgetStyle={widgetStyle}
+            handleActions={handleActions}
+            widgetIndex={widgetIndex}
+            key={widgetIndex}
+            handleClick={handleClick}
+          />
+        );
    default:
      return <View />;
  }
--- a/assets/colors/colors.ts
+++ b/assets/colors/colors.ts
@@ -10,6 +10,7 @@ const Colors = {
  lightBlue: "#EAF2FF",
  shimmerBgColor: "#E9E7F0",
  shimmerHighlightColor: "#F5F5F8",
+  silver: "#BCBCBC",
 };

 export default Colors;
--- a/assets/mocks/mockApiResponse.json
+++ b/assets/mocks/mockApiResponse.json
--- a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts
+++ b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheetStyle.ts
@@ -34,6 +34,7 @@ const styles = StyleSheet.create({
  stepsBulletRow: {
    flexDirection: "row",
    marginStart: 44,
+    marginBottom: 12,
  },
  bulletContainer: {
    flex: 1,
--- a/components/reusable/dashed-separator/DashedSeparator.tsx
+++ b/components/reusable/dashed-separator/DashedSeparator.tsx
@@ -1,5 +1,7 @@
 import { View, ViewStyle } from "react-native";
 import styles from "./DashedSeparatorStyle";
+import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
+import { Orientation } from "../../../App/common/constants/StringConstant";

 export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => {
  return <View style={[styles.horizontalDashedDivider, style]} />;
@@ -8,3 +10,61 @@ export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => {
 export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => {
  return <View style={[styles.verticalDashedDivider, style]} />;
 };
+
+export const GradientHorizontalDashedSeparator = ({
+  height,
+  colorsArray,
+}: {
+  height: number;
+  colorsArray: string[];
+}) => {
+  return (
+    <View style={{ height: height }}>
+      <NaviLinearGradient
+        gradientColors={colorsArray}
+        orientation={Orientation.HORIZONTAL}
+        style={styles.gradientContainer}
+      >
+        <View style={styles.gradientDashedDivider} />
+      </NaviLinearGradient>
+    </View>
+  );
+};
+
+export const CustomHorizontalDashedSeparator = ({
+  height,
+  width,
+  space,
+  backgroundColor,
+  colorsArray,
+  dashesCount,
+}: {
+  height?: number;
+  width?: number;
+  space?: number;
+  backgroundColor?: string;
+  colorsArray?: string[];
+  dashesCount?: number;
+}) => {
+  return (
+    <View style={{ height: height }}>
+      <NaviLinearGradient
+        gradientColors={colorsArray}
+        orientation={Orientation.HORIZONTAL}
+        style={styles.customGradientContainer}
+      >
+        {[...Array(dashesCount ? dashesCount : 1000).keys()].map((_, index) => (
+          <View
+            key={`dash_${index}`}
+            style={{
+              width: space ? space : styles.customGradient.width,
+              height: height? height : styles.customGradient.height,
+              marginLeft: width? width : styles.customGradient.marginLeft,
+              backgroundColor: backgroundColor? backgroundColor : styles.customGradient.backgroundColor,
+            }}
+          />
+        ))}
+      </NaviLinearGradient>
+    </View>
+  );
+};
--- a/components/reusable/dashed-separator/DashedSeparatorStyle.ts
+++ b/components/reusable/dashed-separator/DashedSeparatorStyle.ts
@@ -1,4 +1,5 @@
 import { StyleSheet } from "react-native";
+import Colors from "../../../assets/colors/colors";

 const styles = StyleSheet.create({
  horizontalDashedDivider: {
@@ -17,6 +18,31 @@ const styles = StyleSheet.create({
    borderRightColor: "#EBEBEB",
    borderRightWidth: 1,
  },
+  gradientContainer: {
+    flex: 1,
+    flexDirection: "row",
+    borderRadius: 1,
+    overflow: "hidden",
+  },
+  gradientDashedDivider: {
+    width: "100%",
+    height: 0,
+    backgroundColor: "transparent",
+    borderStyle: "dashed",
+    borderBottomColor: "white",
+    borderBottomWidth: 1.5,
+  },
+  customGradientContainer: {
+    flex: 1,
+    flexDirection: "row",
+    overflow: "hidden",
+  },
+  customGradient: {
+    width: 1,
+    height: 1,
+    marginLeft: 4,
+    backgroundColor: Colors.white,
+  },
 });

 export default styles;
--- a/components/widgets/HeaderWithAssetsWidget.tsx
+++ b/components/widgets/HeaderWithAssetsWidget.tsx
@@ -67,18 +67,20 @@ const HeaderWithAssetsWidget = ({
      {widgetData.centerTitle && (
        <StyledText textFieldData={widgetData?.centerTitle} />
      )}
-      {widgetData.rightIcon && (
-        <StyledImage
-          imageFieldData={widgetData?.rightIcon}
-          handleClick={handleClick}
-        />
-      )}
-      {widgetData.rightLottie && (
-        <StyledLottie
-          lottieFieldData={widgetData?.rightLottie}
-          handleClick={handleClick}
-        />
-      )}
+      {widgetData.rightIcon &&
+        (widgetData.isRightAssetVisible === false ? false : true) && (
+          <StyledImage
+            imageFieldData={widgetData?.rightIcon}
+            handleClick={handleClick}
+          />
+        )}
+      {widgetData.rightLottie &&
+        (widgetData.isRightAssetVisible === false ? false : true) && (
+          <StyledLottie
+            lottieFieldData={widgetData?.rightLottie}
+            handleClick={handleClick}
+          />
+        )}
    </View>
  );
 };
--- a/components/widgets/fab/FAB.tsx
+++ b/components/widgets/fab/FAB.tsx
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";

 import { StyledLottie } from "../styled-lottie/StyledLottie";

-import { NativeEventEmitter, useWindowDimensions } from "react-native";
+import {
+  NativeEventEmitter,
+  ViewStyle,
+  useWindowDimensions,
+} from "react-native";

 import {
  PanGestureHandler,
@@ -21,11 +25,14 @@ import { NativeEventNameConstants } from "../../../App/common/constants/EventNam
 import { CtaData } from "../../../App/common/interface";
 import { FabWidgetData } from "../../../App/common/interface/widgets/widgetData/FabWidgetData";
 import { FAB_HEIGHT, styles } from "./FABStyle";
+import { StyledText } from "../styled-text/StyledText";
+import { StyledImage } from "../../StyledImage";

 const FAB = ({
  widgetData,
  handleActions,
  handleClick,
+  scrollStyle,
 }: {
  widgetData: FabWidgetData;
  handleActions: (
@@ -33,6 +40,7 @@ const FAB = ({
    actionPayloadList: GenericActionPayload | undefined
  ) => void;
  handleClick?: (cta: CtaData) => void;
+  scrollStyle?: ViewStyle;
 }) => {
  const [enabled, setEnabled] = useState(true);
  const { height } = useWindowDimensions();
@@ -96,16 +104,36 @@ const FAB = ({
        onHandlerStateChange={_onTapHandlerStateChange}
      >
        <Animated.View style={styles.fabButtonStyles}>
-          <Animated.View style={styles.lottie}>
-            {widgetData?.lottieData && (
-              <StyledLottie lottieFieldData={widgetData?.lottieData} />
+          {widgetData.topLottieData && (
+            <Animated.View style={styles.topLottie}>
+              <StyledLottie lottieFieldData={widgetData?.topLottieData} />
+            </Animated.View>
+          )}
+          {widgetData?.imageData && (
+            <Animated.View style={styles.image}>
+              <StyledImage imageFieldData={widgetData?.imageData} />
+            </Animated.View>
+          )}
+          {widgetData?.buttonTitle?.text && (
+            <Animated.View style={[styles.buttonTitle, scrollStyle]}>
+              <StyledText textFieldData={widgetData?.buttonTitle} />
+            </Animated.View>
+          )}
+          {widgetData.lottieData &&
+            !!!widgetData.topLottieData &&
+            !!!widgetData.imageData &&
+            !!!widgetData.buttonTitle?.text && (
+              <Animated.View style={styles.lottie}>
+                <StyledLottie lottieFieldData={widgetData?.lottieData} />
+              </Animated.View>
            )}
-          </Animated.View>
        </Animated.View>
      </TapGestureHandler>
    </Animated.View>
  );

+  /* remove backward compatibility code in next release */
+
  return isDraggable ? (
    <PanGestureHandler onHandlerStateChange={_onPanHandlerStateChange}>
      {fabContent}
--- a/components/widgets/fab/FABStyle.ts
+++ b/components/widgets/fab/FABStyle.ts
@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";

-export const FAB_WIDTH = 60;
+export const FAB_WIDTH = 48;
 export const FAB_HEIGHT = FAB_WIDTH;
 export const FAB_BORDER_RADIUS = FAB_WIDTH / 2;

@@ -14,15 +14,33 @@ export const styles = StyleSheet.create({
    right: 20,
  },
  fabButtonStyles: {
+    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
-    backgroundColor: "#1F002A",
-    width: FAB_WIDTH,
+    backgroundColor: "#0047D6",
    height: FAB_HEIGHT,
    borderRadius: FAB_BORDER_RADIUS,
  },
  lottie: {
    height: FAB_HEIGHT,
-    width: "100%",
+    width: FAB_WIDTH,
  },
+  topLottie: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: 16,
+    width: 16,
+  },
+  image: {
+    height: FAB_HEIGHT,
+    width: FAB_WIDTH,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonTitle: {
+    height: 22,
+    paddingRight: 16,
+    width: "auto",
+  }
 });
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
@@ -19,6 +19,11 @@ import CtaButton from "../../reusable/cta-button/CtaButton";
 import { StyledText } from "../styled-text/StyledText";
 import TitleWidget from "../title-widget/TitleWidget";
 import styles from "./FooterWithCardWidgetStyle";
+import {
+  GradientHorizontalDashedSeparator,
+  HorizontalDashedSeparator,
+} from "../../reusable/dashed-separator/DashedSeparator";
+import Colors from "../../../assets/colors/colors";

 export const CardComponent = ({
  cardInfo,
@@ -60,7 +65,8 @@ const FooterWithCardWidget = ({
  };

  const getViewStyle = (): ViewStyle => {
-    return widgetData.cardInfo?.title?.text
+    return widgetData.cardInfo?.title?.text ||
+      widgetData.cardInfo?.centerTitle?.text
      ? styles.rowContainer
      : styles.roundedRowContainer;
  };
@@ -76,13 +82,32 @@ const FooterWithCardWidget = ({
      }) => {
        if (!!actionEvent) sendAsAnalyticsEvent(actionEvent);
        handleActions(null, action);
-      }, 700, {
-      leading: true,
-      trailing: false,
-    }),
+      },
+      700,
+      {
+        leading: true,
+        trailing: false,
+      }
+    ),
    [widgetData]
  );

+  const cardAction = () => {
+    throttledHandleActions({
+      action: widgetData?.action,
+      actionEvent:
+        widgetData?.cardAction?.metaData?.at(0)?.analyticsEventProperties,
+    });
+  };
+
+  const titleAction = () => {
+    throttledHandleActions({
+      action: widgetData?.action,
+      actionEvent:
+        widgetData?.titleAction?.metaData?.at(0)?.analyticsEventProperties,
+    });
+  };
+
  const buttonState =
    screenState === ScreenState.OVERLAY
      ? ButtonState.LOADING
@@ -92,31 +117,34 @@ const FooterWithCardWidget = ({
    <View>
      {widgetData?.cardInfo?.title?.text &&
        widgetData?.cardInfo?.rightTitle?.text && (
-        <TouchableWithoutFeedback onPress={() => {
-          throttledHandleActions({
-            action: widgetData?.action,
-            actionEvent:
-              widgetData?.cardAction?.metaData?.at(0)
-                ?.analyticsEventProperties,
-          });
-        }
-          }>
+          <TouchableOpacity onPress={cardAction} activeOpacity={1}>
            <CardComponent
              cardInfo={widgetData.cardInfo}
              style={styles.cardContainer}
            />
-          </TouchableWithoutFeedback>
+            <View style={styles.greenSeparatorContainer}>
+              <HorizontalDashedSeparator style={styles.greenSeparator} />
+            </View>
+          </TouchableOpacity>
        )}
+
+      {widgetData?.cardInfo?.centerTitle?.text && (
+        <View style={styles.centerTitleContainer}>
+          <StyledText textFieldData={widgetData.cardInfo.centerTitle} />
+        </View>
+      )}
+      {widgetData?.cardInfo?.dashedSeparator && (
+        <View style={styles.dashedSeparatorContainer}>
+          <GradientHorizontalDashedSeparator
+            height={1.5}
+            colorsArray={[Colors.white, Colors.silver, Colors.white]}
+          />
+        </View>
+      )}
+
      <View style={getViewStyle()}>
        <View style={commonStyles.flex_1}>
-          <TouchableOpacity onPress={() => {
-            throttledHandleActions({
-              action: widgetData?.action,
-              actionEvent:
-                widgetData?.titleAction?.metaData?.at(0)
-                  ?.analyticsEventProperties,
-            });
-          }}>
+          <TouchableOpacity onPress={titleAction} activeOpacity={1}>
            <TitleWidget
              widgetData={widgetData}
              widgetStyle={styles.titleContainer}
--- a/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
+++ b/components/widgets/footer-with-card-widget/FooterWithCardWidgetStyle.ts
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 32,
-    paddingTop: 20,
+    paddingTop: 12,
    paddingHorizontal: 16,
  },
  roundedRowContainer: {
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 32,
-    paddingTop: 20,
+    paddingTop: 16,
    paddingHorizontal: 16,
    borderRadius: 16,
    borderBottomLeftRadius: 0,
@@ -40,6 +40,34 @@ const styles = StyleSheet.create({
    shadowRadius: 10,
    elevation: 10,
  },
+  centerTitleContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    backgroundColor: "#FFFFFF",
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    shadowColor: "black",
+    shadowOpacity: 1,
+    shadowOffset: { width: 0, height: -16 },
+    shadowRadius: 8,
+    elevation: 12,
+    borderWidth: 1
+  },
+  greenSeparatorContainer: {
+    paddingHorizontal: 16,
+    backgroundColor: "#FFFFFF",
+    paddingBottom: 8,
+  },
+  greenSeparator: {
+    borderBottomColor: "#E7F8EE",
+  },
+  dashedSeparatorContainer: {
+    paddingHorizontal: 16,
+    backgroundColor: "#FFFFFF",
+  },
  titleContainer: {
    flexDirection: "column",
    justifyContent: "space-between",
--- a/components/widgets/gradient-text/GradientText.tsx
+++ b/components/widgets/gradient-text/GradientText.tsx
@@ -0,0 +1,33 @@
+import MaskedView from "@react-native-masked-view/masked-view";
+import LinearGradient from "react-native-linear-gradient";
+import { Text } from "react-native";
+import { TextFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+import { isValidHexColors } from "../../../App/common/utilities/ValidateColors";
+
+export const GradientText = ({
+  textFieldData,
+  colorsArray,
+}: {
+  textFieldData: TextFieldData;
+  colorsArray?: string[];
+}) => {
+  return (
+    <GradientMask colorsArray={colorsArray} textStyle={textFieldData.textStyle}>
+      {textFieldData.text}
+    </GradientMask>
+  );
+};
+
+export const GradientMask = (props: any) => {
+  return (
+    <MaskedView maskElement={<Text {...props} style={props.textStyle} />}>
+      <LinearGradient
+        colors={isValidHexColors(props.colorsArray)}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+      >
+        <Text {...props} style={[props.textStyle, { opacity: 0 }]} />
+      </LinearGradient>
+    </MaskedView>
+  );
+};
--- a/components/widgets/styled-lottie/StyledLottieComponentStyle.ts
+++ b/components/widgets/styled-lottie/StyledLottieComponentStyle.ts
@@ -2,12 +2,10 @@ import { StyleSheet } from "react-native";

 const styles = StyleSheet.create({
  lottie: {
-    flex: 1,
    width: "100%",
    height: "100%",
  },
  touchableOpacity: {
-    flex: 1,
  },
 });

--- a/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx
+++ b/components/widgets/title-with-asset-background/TitleWithAssetBackground.tsx
@@ -0,0 +1,107 @@
+import { TouchableOpacity, View, ViewStyle } from "react-native";
+import {
+  Strip,
+  TitleWithAssetBackgroundData,
+} from "../../../App/common/interface/widgets/widgetData/TitleWithAssetBackground";
+import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
+import { CtaData } from "../../../App/common/interface";
+import { StyledImage } from "../../StyledImage";
+import { StyledText } from "../styled-text/StyledText";
+import CtaButton from "../../reusable/cta-button/CtaButton";
+import { ImageFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
+import { GradientText } from "../gradient-text/GradientText";
+import { styles } from "./TitleWithAssetBackgroundStyle";
+
+export const TitleWithAssetBackgroundWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  handleClick,
+  widgetIndex,
+}: {
+  widgetData: TitleWithAssetBackgroundData;
+  widgetStyle: ViewStyle;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex: number;
+}) => {
+  const Strip = ({ stripData }: { stripData: Strip }) => {
+    return (
+      <View style={styles.strip}>
+        <StripImage
+          image={stripData?.firstIcon}
+          imageStyle={styles.firstStripImage}
+        />
+        <StripImage
+          image={stripData?.secondIcon}
+          imageStyle={styles.secondStripImage}
+        />
+        {stripData.stripTitle && (
+          <View style={styles.stripTitle}>
+            <GradientText
+              textFieldData={stripData.stripTitle}
+              colorsArray={stripData.stripTitleGradient}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const StripImage = ({
+    image,
+    imageStyle,
+  }: {
+    image?: ImageFieldData;
+    imageStyle?: ViewStyle;
+  }) => {
+    return (
+      <View style={imageStyle}>
+        {image && <StyledImage imageFieldData={image} />}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {widgetData?.backgroundIcon && (
+        <StyledImage imageFieldData={widgetData?.backgroundIcon} />
+      )}
+      {widgetData?.title?.text && (
+        <View style={styles.title}>
+          <StyledText textFieldData={widgetData?.title} />
+        </View>
+      )}
+      {widgetData.middleStrip && (
+        <TouchableOpacity
+          style={styles.stripContainer}
+          onPress={() => {
+            handleClick &&
+              widgetData?.footerButton?.cta &&
+              handleClick(widgetData?.footerButton?.cta);
+          }}
+          activeOpacity={1}
+        >
+          <Strip stripData={widgetData?.middleStrip} />
+        </TouchableOpacity>
+      )}
+      {widgetData.footerButton && (
+        <CtaButton
+          style={styles.footer}
+          onPress={() => {
+            handleClick &&
+              widgetData?.footerButton?.cta &&
+              handleClick(widgetData?.footerButton?.cta);
+          }}
+        >
+          {widgetData.footerButton?.title?.text && (
+            <StyledText textFieldData={widgetData.footerButton?.title} />
+          )}
+        </CtaButton>
+      )}
+    </View>
+  );
+};
--- a/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts
+++ b/components/widgets/title-with-asset-background/TitleWithAssetBackgroundStyle.ts
@@ -0,0 +1,60 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    position: "absolute",
+    top: 32,
+    alignSelf: "center",
+  },
+  stripContainer: {
+    marginHorizontal: 16,
+    bottom: 72,
+    alignSelf: "center",
+    position: "absolute",
+  },
+  strip: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    width: "100%",
+    backgroundColor: "#E8F1FF",
+    borderRadius: 21,
+    padding: 4,
+  },
+  firstStripImage: {
+    width: 34,
+    height: 34,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 38,
+    borderWidth: 1,
+    borderColor: "#BED7FF",
+    backgroundColor: "white",
+  },
+  secondStripImage: {
+    position: "absolute",
+    start: 27,
+    width: 34,
+    height: 34,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    borderRadius: 38,
+    borderWidth: 1,
+    borderColor: "#BED7FF",
+    backgroundColor: "white",
+  },
+  stripTitle: {
+    paddingHorizontal: 40,
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    alignSelf: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+});
--- a/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
+++ b/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
@@ -0,0 +1,70 @@
+import { View, ViewStyle } from "react-native";
+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 { StyledImage } from "../../StyledImage";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
+import { styles } from "./TitleWithColumnWidgetStyle";
+
+export const TitleWithColumnWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  handleClick,
+  widgetIndex,
+}: {
+  widgetData: TitleWithColumnWidgetData;
+  widgetStyle: ViewStyle;
+  handleActions: (
+    value?: any | undefined | null,
+    screenActionPayload?: GenericActionPayload
+  ) => void;
+  handleClick?: (cta: CtaData) => void;
+  widgetIndex: number;
+}) => {
+  const ColumnItem = ({
+    imageData,
+    title,
+    subtitle,
+  }: {
+    imageData?: ImageFieldData;
+    title?: TextFieldData;
+    subtitle?: TextFieldData;
+  }) => {
+    return (
+      <View style={styles.columnItem}>
+        {imageData?.url && <StyledImage imageFieldData={imageData} />}
+        {imageData?.url && title?.text && <View style={commonStyles.verticalSpacer16} />}
+        {title?.text && <StyledText textFieldData={title} />}
+        {title?.text && subtitle?.text && <View style={commonStyles.verticalSpacer4} />}
+        {subtitle?.text && <StyledText textFieldData={subtitle} />}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.columnContainer}>
+        {widgetData.title?.text && <StyledText textFieldData={widgetData.title} />}
+        {widgetData.title?.text && <View style={commonStyles.verticalSpacer24} />}
+        <View style={styles.rowContainer}>
+          <ColumnItem
+            imageData={widgetData.leftIcon}
+            title={widgetData.leftTitle}
+            subtitle={widgetData.leftSubtitle}
+          />
+          <ColumnItem
+            imageData={widgetData.rightIcon}
+            title={widgetData.rightTitle}
+            subtitle={widgetData.rightSubtitle}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts
+++ b/components/widgets/title-with-column-widget/TitleWithColumnWidgetStyle.ts
@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "white",
+    shadowColor: "#D1D9E6",
+    shadowOpacity: 1,
+    shadowOffset: {
+      width: 3,
+      height: 3,
+    },
+    elevation: 5,
+  },
+  columnContainer: {
+    flex: 1,
+    flexDirection: "column",
+    padding: 20,
+    justifyContent: "center",
+  },
+  rowContainer: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  columnItem: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+});