TP-62888 | Feature | Market benefit comparison (#10870)

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

@@ -11,15 +11,15 @@ import {
   FooterWithCardWidgetData,
 } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData";
 import { ScreenState } from "../../../App/common/screen/BaseScreen";
+import Colors from "../../../assets/colors/colors";
 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";
+import { StyledText } from "../styled-text/StyledText";
+import TitleWidget from "../title-widget/TitleWidget";
+import styles from "./FooterWithCardWidgetStyle";
 
 export const CardComponent = ({
   cardInfo,
@@ -57,7 +57,11 @@ const FooterWithCardWidget = ({
   screenState?: ScreenState | null;
 }) => {
   const handleFooterClick = () => {
-    handleActions(null, widgetData?.buttonAction);
+    if (handleClick && widgetData?.footerButton?.cta) {
+      handleClick(widgetData.footerButton.cta);
+    } else {
+      handleActions(null, widgetData?.buttonAction);
+    }
   };
 
   const getViewStyle = (): ViewStyle => {

components/widgets/hero-section-widget/HeroSectionWidget.tsx

@@ -0,0 +1,41 @@
+import { View } from "react-native";
+import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
+import { HeroSectionWidgetProps } from "../../../App/common/interface/widgets/widgetData/HeroSectionWidgetData";
+import { StyledImage } from "../../StyledImage";
+import { StyledText } from "../styled-text/StyledText";
+import styles from "./HeroSectionWidgetStyles";
+
+const HeroSectionWidget = ({
+  widgetData,
+  widgetStyle,
+  handleActions,
+  handleClick,
+  widgetIndex,
+}: HeroSectionWidgetProps) => {
+  return (
+    <NaviLinearGradient
+      gradientColors={widgetData?.backgroundGradient}
+      orientation={widgetData?.gradientOrientation}
+    >
+      <View style={styles.container}>
+        <View style={styles.rowContainer}>
+          {widgetData?.title?.text && (
+            <StyledText textFieldData={widgetData?.title} />
+          )}
+          {widgetData?.image?.url && (
+            <StyledImage imageFieldData={widgetData?.image} />
+          )}
+        </View>
+        <View style={styles.calloutContainer}>
+          {widgetData?.callout?.title?.text && (
+            <View style={widgetData?.callout?.calloutStyle}>
+              <StyledText textFieldData={widgetData?.callout?.title} />
+            </View>
+          )}
+        </View>
+      </View>
+    </NaviLinearGradient>
+  );
+};
+
+export default HeroSectionWidget;

components/widgets/hero-section-widget/HeroSectionWidgetStyles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    flexDirection: "column",
+    flexGrow: 1,
+    flexBasis: 0,
+  },
+  rowContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  calloutContainer: {
+    flexShrink: 1,
+    flexWrap: "wrap",
+  },
+});
+
+export default styles;

components/widgets/index.tsx

@@ -1,6 +1,8 @@
 export { StyledText } from "./styled-text/StyledText";
 export { StyledImage } from "../StyledImage";
 export { default as TitleWidget } from "./title-widget/TitleWidget";
+export { default as FooterWithCardWidget } from "./footer-with-card-widget/FooterWithCardWidget";
 export { default as TitleWithAssetBackgroundWidget } from "./title-with-asset-background/TitleWithAssetBackground";
 export { default as SelectCardWithDetailListWidget } from "./select-card-with-detail-list/SelectCardWithDetailList";
 export { default as TableWidget } from "./table-widget/Table";
+export { default as HeroSectionWidget } from "./hero-section-widget/HeroSectionWidget";

components/widgets/table-widget/Table.tsx

@@ -1,28 +1,55 @@
-import { useEffect, useState } from "react";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
-import {
-  TableWidgetProps,
-  Column,
-  Row,
-  Cell as CellData,
-  ColumnsProps,
-  RowsProps,
-  CellProps,
-} from "../../../App/common/interface/widgets/widgetData";
 import { StyledImage, StyledText } from "..";
-import { styles } from "./TableWidgetStyles";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import {
+  Cell as CellData,
+  CellProps,
+  Column,
+  ColumnsProps,
+  Row,
+  RowsProps,
+  TableWidgetProps,
+} from "../../../App/common/interface/widgets/widgetData";
+import { styles } from "./TableWidgetStyles";
 
-const Cell = ({ widgetData, cell, index, handleClick }: CellProps) => {
-  useEffect(()=>{
-    cell?.analyticEvents?.onViewEvent && sendAsAnalyticsEvent(cell?.analyticEvents?.onViewEvent)
-  },[])
+const Cell = ({
+  widgetData,
+  cell,
+  index,
+  handleClick,
+  handleActions,
+}: CellProps) => {
+  useEffect(() => {
+    cell?.analyticEvents?.onViewEvent &&
+      sendAsAnalyticsEvent(cell?.analyticEvents?.onViewEvent);
+  }, []);
+  const throttledHandleActions = useCallback(
+    throttle(() => handleActions(null, cell?.action), 700, {
+      leading: true,
+      trailing: false,
+    }),
+    [widgetData],
+  );
+  const cellAction = () => {
+    throttledHandleActions();
+  };
+  const handleTableCellClick = () => {
+    if (cell?.cta) {
+      handleClick && handleClick(cell?.cta);
+    } else if (cell?.action) {
+      cellAction();
+    }
+  };
   return (
     <TouchableOpacity
-      style={[styles.cell, widgetData?.columns?.[index]?.columnStyle]}
-      onPress={() => {
-        handleClick && cell?.cta && handleClick(cell?.cta);
-      }}
+      style={[
+        styles.cell,
+        widgetData?.columns?.[index]?.columnStyle,
+        cell?.cellStyle,
+      ]}
+      onPress={handleTableCellClick}
       activeOpacity={1}
     >
       {cell?.title?.text && (
@@ -36,7 +63,12 @@ const Cell = ({ widgetData, cell, index, handleClick }: CellProps) => {
   );
 };
 
-const Rows = ({ widgetData, rowsToDisplay, handleClick }: RowsProps) => {
+const Rows = ({
+  widgetData,
+  rowsToDisplay,
+  handleClick,
+  handleActions,
+}: RowsProps) => {
   return (
     <>
       {widgetData?.rows &&
@@ -52,6 +84,7 @@ const Rows = ({ widgetData, rowsToDisplay, handleClick }: RowsProps) => {
                     key={index}
                     widgetData={widgetData}
                     handleClick={handleClick}
+                    handleActions={handleActions}
                   />
                 ))}
               </View>
@@ -70,6 +103,9 @@ const Columns = ({ widgetData }: ColumnsProps) => {
               style={[styles.cell, styles.header, column?.columnStyle]}
               key={index}
             >
+              {column?.image?.url && (
+                <StyledImage imageFieldData={column?.image} />
+              )}
               {column?.title?.text && (
                 <StyledText textFieldData={column?.title} />
               )}
@@ -83,14 +119,21 @@ const Columns = ({ widgetData }: ColumnsProps) => {
   );
 };
 
-const Table = ({ widgetData, handleClick }: TableWidgetProps) => {
+const Table = ({
+  widgetData,
+  handleClick,
+  handleActions,
+}: TableWidgetProps) => {
   const [rowsToDisplay, setRowsToDisplay] = useState<number | undefined>(
     widgetData?.rowsToDisplay || widgetData?.rows?.length,
   );
 
   const handleSelect = () => {
     setRowsToDisplay(widgetData?.rows?.length);
-    widgetData.viewButton?.cta?.analyticsEventProperties && sendAsAnalyticsEvent(widgetData.viewButton?.cta?.analyticsEventProperties)
+    widgetData?.viewButton?.cta?.analyticsEventProperties &&
+      sendAsAnalyticsEvent(
+        widgetData?.viewButton?.cta?.analyticsEventProperties,
+      );
   };
 
   return (
@@ -100,6 +143,7 @@ const Table = ({ widgetData, handleClick }: TableWidgetProps) => {
         widgetData={widgetData}
         rowsToDisplay={rowsToDisplay}
         handleClick={handleClick}
+        handleActions={handleActions}
       />
       {rowsToDisplay !== widgetData?.rows?.length &&
         widgetData.viewButton?.text && (

components/widgets/title-widget/TitleWidget.tsx

@@ -16,25 +16,25 @@ const TitleWidget = ({
   widgetStyle?: ViewStyle;
   handleActions?: (
     value: any | undefined | null,
-    actionPayloadList: GenericActionPayload | undefined
+    actionPayloadList: GenericActionPayload | undefined,
   ) => void;
   handleClick?: (cta: CtaData) => void;
   widgetIndex?: number;
 }) => {
   const handleTitleClick = () => {
-    const {cta , actions} = widgetData?.title || {};
+    const { cta, actions } = widgetData?.title || {};
     if (actions && handleActions) {
-      handleActions(null, actions)
-    } else if (cta && handleClick) { 
+      handleActions(null, actions);
+    } else if (cta && handleClick) {
       handleClick(cta);
     }
   };
 
   const handleRightTitleClick = () => {
-    const {cta , actions} = widgetData?.rightTitle || {};
+    const { cta, actions } = widgetData?.rightTitle || {};
     if (actions && handleActions) {
-      handleActions(null, actions)
-    } else if (cta && handleClick) { 
+      handleActions(null, actions);
+    } else if (cta && handleClick) {
       handleClick(cta);
     }
   };