TP-83691 | Benefit Screen Final (#12582)

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

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>

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;

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";

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;

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;

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>
       )}

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 = ({

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}