TP-84819|Understand navi widget and ItemSeparator addition (#12715)

App/common/constants/StringConstant.ts

@@ -45,3 +45,14 @@ export const QUOTE_ID = "quoteId";
 export const BUILD_CONFIG_DETAILS = "BUILD_CONFIG_DETAILS";
 export const SPACE_UNICODE = "\u00A0";
 export const REACT_NATIVE = "rn";
+
+export enum SeparatorType {
+  DASHED = "dashed",
+  SOLID = "solid",
+  GRADIENT = "gradient",
+}
+
+export enum SeparatorOrientationType {
+  VERTICAL = "vertical",
+  HORIZONTAL = "horizontal",
+}

App/common/interface/components/ItemSeparatorData.ts

@@ -0,0 +1,16 @@
+import { ViewStyle } from "react-native";
+import { SeparatorOrientationType, SeparatorType } from "../../constants";
+
+export interface ItemSeparatorData {
+  separatorType: SeparatorType;
+  separatorStyle?: ViewStyle;
+  orientationType: SeparatorOrientationType;
+  gradientData?: {
+    height: number;
+    colorsArray: string[];
+  };
+}
+
+export interface ItemSeparatorProps {
+  separatorData: ItemSeparatorData;
+}

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

@@ -8,6 +8,7 @@ export interface TitleWidgetData extends GenericWidgetData {
   subtitle?: TextFieldData;
   rightTitle?: TextFieldData;
   cta?: CtaData;
+  actions?: GenericActionPayload;
 }
 
 export interface TextFieldData {

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

@@ -1,5 +1,7 @@
 import { ViewStyle } from "react-native";
-import { AnalyticsEvent } from "../..";
+import { AnalyticsEvent, CtaData } from "../..";
+import { GenericActionPayload } from "../../../actions/GenericAction";
+import { ItemSeparatorData } from "../../components/ItemSeparatorData";
 import { TooltipData } from "../../components/TooltipData";
 import { GenericWidgetData } from "../Widget";
 import { TextFieldData } from "./TitleWidgetData";
@@ -11,6 +13,7 @@ export interface TitleWithListWidgetData extends GenericWidgetData {
   listFooter?: ListItem;
   listStyle?: ViewStyle;
   tooltip?: TooltipData;
+  separatorData?: ItemSeparatorData;
 }
 
 export interface ListItem extends GenericWidgetData {
@@ -19,4 +22,6 @@ export interface ListItem extends GenericWidgetData {
   rightTitle?: TextFieldData;
   itemStyle?: ViewStyle;
   onViewEvent?: AnalyticsEvent;
+  actions?: GenericActionPayload;
+  cta?: CtaData;
 }

components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx

@@ -9,7 +9,7 @@ import {
 } from "../../../App/common/interface/widgets/modalData/PremiumDetailsBottomSheetData";
 import { StyledImage } from "../../StyledImage";
 import CtaButton from "../../reusable/cta-button/CtaButton";
-import { HorizontalDashedSeparator } from "../../reusable/dashed-separator/DashedSeparator";
+import { HorizontalDashedSeparator } from "../../reusable/item-separator/dashed-separator/DashedSeparator";
 import { CardComponent } from "../../widgets/footer-with-card-widget/FooterWithCardWidget";
 import { StyledText } from "../../widgets/styled-text/StyledText";
 import TitleWidget from "../../widgets/title-widget/TitleWidget";

components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx

@@ -11,7 +11,7 @@ import {
 import { ButtonData } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData";
 import { StyledImage } from "../../StyledImage";
 import CtaButton from "../../reusable/cta-button/CtaButton";
-import { VerticalDashedSeparator } from "../../reusable/dashed-separator/DashedSeparator";
+import { VerticalDashedSeparator } from "../../reusable/item-separator/dashed-separator/DashedSeparator";
 import { StyledText } from "../../widgets/styled-text/StyledText";
 import styles from "./TitleWithStepsBottomSheetStyle";
 

components/reusable/index.ts

@@ -1 +1,2 @@
 export { default as SelectButton } from "./select-button/SelectButton";
+export { default as ItemSeparator } from "./item-separator/ItemSeparator";

components/reusable/item-separator/ItemSeparator.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  SeparatorOrientationType,
+  SeparatorType,
+} from "../../../App/common/constants";
+import { ItemSeparatorProps } from "../../../App/common/interface/components/ItemSeparatorData";
+import {
+  GradientHorizontalDashedSeparator,
+  HorizontalDashedSeparator,
+  VerticalDashedSeparator,
+} from "./dashed-separator/DashedSeparator";
+import { HorizontalSolidSeparator } from "./solid-separator/SolidSeparator";
+
+const getHorizontalSeparator = ({
+  separatorData: { separatorType, separatorStyle, gradientData },
+}: ItemSeparatorProps) => {
+  switch (separatorType) {
+    case SeparatorType.DASHED:
+      return <HorizontalDashedSeparator style={separatorStyle} />;
+
+    case SeparatorType.SOLID:
+      return <HorizontalSolidSeparator style={separatorStyle} />;
+
+    case SeparatorType.GRADIENT: {
+      if (!gradientData) return null;
+      return (
+        <GradientHorizontalDashedSeparator
+          height={gradientData.height}
+          colorsArray={gradientData.colorsArray}
+        />
+      );
+    }
+    default:
+      return null;
+  }
+};
+
+const getVerticalSeparator = ({
+  separatorData: { separatorType, separatorStyle },
+}: ItemSeparatorProps) => {
+  switch (separatorType) {
+    case SeparatorType.DASHED:
+      return <VerticalDashedSeparator style={separatorStyle} />;
+
+    default:
+      return null;
+  }
+};
+
+const renderSeparator = (props: ItemSeparatorProps) => {
+  const { orientationType } = props.separatorData || {};
+  switch (orientationType) {
+    case SeparatorOrientationType.HORIZONTAL:
+      return getHorizontalSeparator(props);
+
+    case SeparatorOrientationType.VERTICAL:
+      return getVerticalSeparator(props);
+
+    default:
+      return null;
+  }
+};
+
+const ItemSeparator = (props: ItemSeparatorProps) => {
+  return renderSeparator(props);
+};
+
+export default ItemSeparator;

components/reusable/item-separator/dashed-separator/DashedSeparator.tsx

@@ -1,13 +1,21 @@
 import { View, ViewStyle } from "react-native";
 import styles from "./DashedSeparatorStyle";
-import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
-import { Orientation } from "../../../App/common/constants/StringConstant";
+import { Orientation } from "../../../../App/common/constants";
+import { NaviLinearGradient } from "../../../../App/common/hooks/useGradient";
 
-export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => {
+export const HorizontalDashedSeparator = ({
+  style,
+}: {
+  style: ViewStyle | undefined;
+}) => {
   return <View style={[styles.horizontalDashedDivider, style]} />;
 };
 
-export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => {
+export const VerticalDashedSeparator = ({
+  style,
+}: {
+  style: ViewStyle | undefined;
+}) => {
   return <View style={[styles.verticalDashedDivider, style]} />;
 };
 
@@ -58,9 +66,11 @@ export const CustomHorizontalDashedSeparator = ({
             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,
+              height: height ? height : styles.customGradient.height,
+              marginLeft: width ? width : styles.customGradient.marginLeft,
+              backgroundColor: backgroundColor
+                ? backgroundColor
+                : styles.customGradient.backgroundColor,
             }}
           />
         ))}

components/reusable/item-separator/dashed-separator/DashedSeparatorStyle.ts

@@ -1,11 +1,11 @@
 import { StyleSheet } from "react-native";
-import Colors from "../../../assets/colors/colors";
+import Colors from "../../../../assets/colors/colors";
 
 const styles = StyleSheet.create({
   horizontalDashedDivider: {
     width: "100%",
     height: 1,
-    backgroundColor: "#FFFFFF",
+    backgroundColor: "transparent",
     borderStyle: "dashed",
     borderBottomColor: "#E3E5E5",
     borderBottomWidth: 1,
@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
   verticalDashedDivider: {
     width: 1,
     height: "100%",
-    backgroundColor: "#FFFFFF",
+    backgroundColor: "transparent",
     borderStyle: "dashed",
     borderRightColor: "#EBEBEB",
     borderRightWidth: 1,

components/reusable/item-separator/solid-separator/SolidSeparator.tsx

@@ -0,0 +1,10 @@
+import { View, ViewStyle } from "react-native";
+import styles from "./SolidSeparatorStyle";
+
+export const HorizontalSolidSeparator = ({
+  style,
+}: {
+  style: ViewStyle | undefined;
+}) => {
+  return <View style={[styles.horizontalSolidSeparator, style]} />;
+};

components/reusable/item-separator/solid-separator/SolidSeparatorStyle.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  horizontalSolidSeparator: {
+    height: 1,
+    backgroundColor: "#E3E5E5",
+    opacity: 0.8,
+  },
+});
+
+export default styles;

components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx

@@ -16,7 +16,7 @@ import CtaButton from "../../reusable/cta-button/CtaButton";
 import {
   GradientHorizontalDashedSeparator,
   HorizontalDashedSeparator,
-} from "../../reusable/dashed-separator/DashedSeparator";
+} from "../../reusable/item-separator/dashed-separator/DashedSeparator";
 import { StyledText } from "../styled-text/StyledText";
 import TitleWidget from "../title-widget/TitleWidget";
 import styles from "./FooterWithCardWidgetStyle";

components/widgets/title-widget/TitleWidget.tsx

@@ -1,5 +1,4 @@
-import { View, ViewStyle } from "react-native";
-import { TouchableOpacity } from "react-native";
+import { TouchableOpacity, View, ViewStyle } from "react-native";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
 import { TitleWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
@@ -27,6 +26,10 @@ const TitleWidget = ({
       handleActions(null, actions);
     } else if (cta && handleClick) {
       handleClick(cta);
+    } else if (widgetData?.actions && handleActions) {
+      handleActions(null, widgetData?.actions);
+    } else if (widgetData?.cta && handleClick) {
+      handleClick(widgetData?.cta);
     }
   };
 
@@ -36,6 +39,8 @@ const TitleWidget = ({
       handleActions(null, actions);
     } else if (cta && handleClick) {
       handleClick(cta);
+    } else if (widgetData?.actions && handleActions) {
+      handleActions(null, widgetData?.actions);
     }
   };
 

components/widgets/title-with-list-widget/TitleWithListWidget.tsx

@@ -1,6 +1,6 @@
 import throttle from "lodash/throttle";
-import { useCallback, useEffect } from "react";
-import { FlatList, View, ViewStyle } from "react-native";
+import React, { useCallback, useEffect } from "react";
+import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
 import { CtaData } from "../../../App/common/interface";
@@ -8,6 +8,7 @@ import {
   ListItem,
   TitleWithListWidgetData,
 } from "../../../App/common/interface/widgets/widgetData/TitleWithListWidgetData";
+import { ItemSeparator } from "../../reusable";
 import Tooltip from "../../reusable/tooltip/Tooltip";
 import { StyledText } from "../styled-text/StyledText";
 import TitleWidget from "../title-widget/TitleWidget";
@@ -16,20 +17,27 @@ import styles from "./TitleWithListWidgetStyle";
 const ListItemComponent = ({
   item,
   handleActions,
+  handleWidgetClick,
 }: {
   item: ListItem;
-  handleActions?: (screenActionPayload?: GenericActionPayload) => void;
+  handleActions: (
+    value: any | undefined | null,
+    actionPayloadList: GenericActionPayload | undefined,
+  ) => void;
+  handleWidgetClick: (item: ListItem) => void;
 }) => {
   useEffect(() => {
     item.onViewEvent && sendAsAnalyticsEvent(item.onViewEvent);
   });
   return (
-    <TitleWidget
-      widgetData={item}
-      widgetStyle={styles.itemRowContainer}
-      handleActions={handleActions}
-      widgetIndex={Number(item.id)}
-    />
+    <TouchableOpacity onPress={() => handleWidgetClick(item)} activeOpacity={1}>
+      <TitleWidget
+        widgetData={item}
+        widgetStyle={styles.itemRowContainer}
+        handleActions={handleActions}
+        widgetIndex={Number(item.id)}
+      />
+    </TouchableOpacity>
   );
 };
 
@@ -58,7 +66,10 @@ const TitleWithListWidget = ({
 }: {
   widgetData: TitleWithListWidgetData;
   widgetStyle: ViewStyle;
-  handleActions: (screenActionPayload?: GenericActionPayload) => void;
+  handleActions: (
+    value: any | undefined | null,
+    actionPayloadList: GenericActionPayload | undefined,
+  ) => void;
   handleClick?: (cta: CtaData) => void;
   widgetIndex?: number;
 }) => {
@@ -66,6 +77,18 @@ const TitleWithListWidget = ({
     throttle(handleActions, 700, { leading: true, trailing: false }),
     [],
   );
+  const handleWidgetClick = (item: ListItem) => {
+    if (item?.actions) {
+      handleActions(null, item?.actions);
+    } else if (item?.cta && handleClick) {
+      handleClick(item?.cta);
+    }
+  };
+
+  const throttledHandleWidgetClick = useCallback(
+    throttle(handleWidgetClick, 700, { leading: true, trailing: false }),
+    [],
+  );
   return (
     <View>
       <TitleWidget
@@ -86,9 +109,13 @@ const TitleWithListWidget = ({
             <ListItemComponent
               item={item}
               handleActions={throttledHandleActions}
+              handleWidgetClick={throttledHandleWidgetClick}
             />
           )}
           keyExtractor={(item, index) => item.id || index.toString()}
+          ItemSeparatorComponent={() => (
+            <ItemSeparator separatorData={widgetData.separatorData!!} />
+          )}
         />
         {widgetData.listFooter?.title?.text && (
           <ListFooterItemComponent