TP-61032 | Enhancement | Sum insured click to scroll (#10302)

components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx

@@ -7,16 +7,16 @@ import Animated, {
 } from "react-native-reanimated";
 import { AnimatedScrollView } from "react-native-reanimated/lib/typescript/reanimated2/component/ScrollView";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
-import { SumInsuredWidgetData } from "../../../App/common/interface/widgets/widgetData/SumInsuredWidgetData";
-import { getIndexFromOffset } from "../../../App/common/utilities/SizeUtils";
-import CarouselItem from "./component/CarouselItem";
-import { logToSentry } from "../../../App/common/hooks/useSentryLogging";
-import { AnalyticsEvent } from "../../../App/common/interface";
-import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
 import {
   AnalyticsEventNameConstants,
   AnalyticsEventPropertyConstants,
 } from "../../../App/common/constants/AnalyticsEventsConstant";
+import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import { logToSentry } from "../../../App/common/hooks/useSentryLogging";
+import { AnalyticsEvent } from "../../../App/common/interface";
+import { SumInsuredWidgetData } from "../../../App/common/interface/widgets/widgetData/SumInsuredWidgetData";
+import { getIndexFromOffset } from "../../../App/common/utilities/SizeUtils";
+import CarouselItem from "./component/CarouselItem";
 
 const SumInsuredWidget = ({
   widgetData,
@@ -39,6 +39,42 @@ const SumInsuredWidget = ({
   const isMiddleCard = useSharedValue(false);
   const scrollViewRef = useRef<AnimatedScrollView>(null);
 
+  const scrollToPosition = (index: number) => {
+    if (index <= 0) {
+      return;
+    }
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollTo({
+        x: (index - 1) * SIZE,
+        animated: true,
+      });
+      if (widgetData?.carouselListData) {
+        handleActions(
+          widgetData?.carouselListData[index - 1]?.dependentWidgets,
+          widgetData?.widgetMetaData?.onValueChangeAction
+        );
+      }
+      const clickEvent: AnalyticsEvent = {
+        name: AnalyticsEventNameConstants.HI_SI_PILLS_CLICK,
+        properties: new Map([
+          [
+            AnalyticsEventPropertyConstants.SUM_INSURED,
+            widgetData?.carouselListData
+              ?.at(index - 1)
+              ?.sumInsured?.toString() ?? "",
+          ],
+          [
+            AnalyticsEventPropertyConstants.TAG,
+            widgetData?.widgetMetaData?.recommendItemIndex === index - 1
+              ? AnalyticsEventPropertyConstants.RECOMMENDED
+              : AnalyticsEventPropertyConstants.NOT_RECOMMENDED,
+          ],
+        ]),
+      };
+      sendAsAnalyticsEvent(clickEvent);
+    }
+  };
+
   useEffect(() => {
     if (widgetData?.widgetMetaData?.selectedItemIndex === undefined) return;
     if (scrollViewRef.current) {
@@ -66,7 +102,7 @@ const SumInsuredWidget = ({
       );
       return;
     }
-  
+
     // Makes a patch call to update the sumInsured in the backend
     const updatedActionPayload: GenericActionPayload = {
       ...actionPayloadList,
@@ -79,7 +115,7 @@ const SumInsuredWidget = ({
         };
       }),
     };
-  
+
     handleActions(null, updatedActionPayload);
   };
 
@@ -147,6 +183,7 @@ const SumInsuredWidget = ({
               widgetData={widgetData}
               x={x}
               SIZE={SIZE}
+              scrollToPosition={scrollToPosition}
             />
           </View>
         );

components/widgets/sum-insured-carousel-widget/component/CarouselItem.tsx

@@ -1,4 +1,5 @@
 import { TextStyle, ViewStyle } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import Animated, { SharedValue } from "react-native-reanimated";
 import {
   SumInsuredData,
@@ -15,6 +16,7 @@ const CarouselItem = ({
   widgetData,
   x,
   SIZE,
+  scrollToPosition,
 }: {
   item: SumInsuredData;
   index: number;
@@ -22,7 +24,11 @@ const CarouselItem = ({
   widgetData: SumInsuredWidgetData;
   x: any;
   SIZE: number;
+  scrollToPosition: (index: number) => void;
 }) => {
+  const handleClick = () => {
+    scrollToPosition(index);
+  };
   const {
     style,
     cardContainer,
@@ -34,24 +40,28 @@ const CarouselItem = ({
     substringStyle,
   } = getCarouselItemStyles(index, isMiddleCard, widgetData, x, SIZE);
   return (
-    <Animated.View style={[cardContainer, style]}>
-      <TagTextComponent
-        selectedItemIndex={widgetData?.widgetMetaData?.selectedItemIndex!!}
-        recommendItemIndex={widgetData?.widgetMetaData?.recommendItemIndex!!}
-        selectedItemTagText={widgetData?.widgetMetaData?.selectedItemTagText!!}
-        index={index}
-        tagContainer={tagContainer}
-        tagText={tagText}
-      />
+    <TouchableWithoutFeedback onPress={handleClick}>
+      <Animated.View style={[cardContainer, style]}>
+        <TagTextComponent
+          selectedItemIndex={widgetData?.widgetMetaData?.selectedItemIndex!!}
+          recommendItemIndex={widgetData?.widgetMetaData?.recommendItemIndex!!}
+          selectedItemTagText={
+            widgetData?.widgetMetaData?.selectedItemTagText!!
+          }
+          index={index}
+          tagContainer={tagContainer}
+          tagText={tagText}
+        />
 
-      <Animated.Text style={titleStyle}>{item.title?.text}</Animated.Text>
-      <SubtitleComponent
-        item={item}
-        subtitleContainer={subtitleContainer}
-        subtitleStyle={subtitleStyle}
-        substringStyle={substringStyle}
-      />
-    </Animated.View>
+        <Animated.Text style={titleStyle}>{item.title?.text}</Animated.Text>
+        <SubtitleComponent
+          item={item}
+          subtitleContainer={subtitleContainer}
+          subtitleStyle={subtitleStyle}
+          substringStyle={substringStyle}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
   );
 };
 
@@ -75,7 +85,7 @@ const TagTextComponent = ({
   return (
     <Animated.View style={tagContainer}>
       <Animated.Text style={tagText}>
-      {recommendItemIndex === index - 1 && selectedItemTagText}
+        {recommendItemIndex === index - 1 && selectedItemTagText}
       </Animated.Text>
     </Animated.View>
   );