TP-61032 | RN Quote PageTesting fixes (#10203)

Co-authored-by: Raaj Gopal <raaj.gopal@navi.com>

components/StyledLottie.tsx

@@ -1,50 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import LottieView from "lottie-react-native";
-import { LottieFieldData } from "../App/common/interface/widgets/widgetData/TitleWidgetData";
-import { StyleSheet, TouchableOpacity } from "react-native";
-import { CtaData } from "../App/common/interface";
-
-export const StyledLottie = ({
-  lottieFieldData,
-  handleClick,
-}: {
-  lottieFieldData: LottieFieldData;
-  handleClick?: (ctaData: CtaData) => void;
-}) => {
-  const animationRef = useRef<LottieView | null>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      animationRef.current?.play();
-    }, lottieFieldData?.delayAnimationBy ?? 0);
-  }, []);
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        lottieFieldData.cta && handleClick && handleClick(lottieFieldData.cta);
-      }}
-      style={styles.touchableOpacity}
-      activeOpacity={1}
-    >
-      <LottieView
-        ref={animationRef}
-        source={{ uri: lottieFieldData?.url }}
-        autoPlay={lottieFieldData?.autoPlay ?? true}
-        loop={lottieFieldData?.loop ?? true}
-        style={[styles.lottie, lottieFieldData?.lottieStyle]}
-      />
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  lottie: {
-    flex: 1,
-    width: "100%",
-    height: "100%",
-  },
-  touchableOpacity: {
-    flex: 1,
-  },
-});

components/reusable/cta-button/CtaButton.tsx

@@ -2,7 +2,7 @@ import { TouchableHighlight, ViewStyle } from "react-native";
 import { Lottie } from "../../../App/common/constants/StringConstant";
 import { ButtonState } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData";
 import { LottieFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
-import { StyledLottie } from "../../StyledLottie";
+import { StyledLottie } from "../../widgets/styled-lottie/StyledLottie";
 import styles from "./CtaButtonStyle";
 
 const CtaButton = ({

components/widgets/HeaderLottieAnimationWidget.tsx

@@ -5,7 +5,7 @@ import { NaviLinearGradient } from "../../App/common/hooks/useGradient";
 import { CtaData } from "../../App/common/interface";
 import { HeaderLottieAnimationWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderLottieAnimationWidgetData";
 import Colors from "../../assets/colors/colors";
-import { StyledLottie } from "../StyledLottie";
+import { StyledLottie } from "./styled-lottie/StyledLottie";
 import { StyledText } from "./styled-text/StyledText";
 
 const HeaderLottieAnimationWidget = ({

components/widgets/HeaderWithAssetsWidget.tsx

@@ -1,18 +1,18 @@
+import { useEffect } from "react";
 import {
+  BackHandler,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
   View,
   ViewStyle,
-  StyleSheet,
-  BackHandler,
-  TouchableOpacity,
-  Image,
 } from "react-native";
 import { GenericActionPayload } from "../../App/common/actions/GenericAction";
-import { StyledImage } from "../StyledImage";
-import { StyledLottie } from "../StyledLottie";
-import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData";
 import { CtaData } from "../../App/common/interface";
+import { HeaderWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderWithAssetsWidgetData";
+import { StyledImage } from "../StyledImage";
+import { StyledLottie } from "./styled-lottie/StyledLottie";
 import { StyledText } from "./styled-text/StyledText";
-import { useEffect } from "react";
 
 const HeaderWithAssetsWidget = ({
   widgetData,

components/widgets/TitleWithAssetsWidget.tsx

@@ -1,10 +1,10 @@
-import { View, ViewStyle, StyleSheet, TouchableOpacity } from "react-native";
+import { StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
 import { GenericActionPayload } from "../../App/common/actions/GenericAction";
-import { StyledImage } from "../StyledImage";
-import { StyledLottie } from "../StyledLottie";
-import { TitleWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData";
 import { CtaData } from "../../App/common/interface";
+import { TitleWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData";
 import Colors from "../../assets/colors/colors";
+import { StyledImage } from "../StyledImage";
+import { StyledLottie } from "./styled-lottie/StyledLottie";
 import { StyledText } from "./styled-text/StyledText";
 
 const TitleWithAssetsWidget = ({

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

@@ -7,7 +7,8 @@ import {
 } from "react-native-gesture-handler";
 import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
-import { CtaData } from "../../../App/common/interface";
+import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
+import { AnalyticsEvent, CtaData } from "../../../App/common/interface";
 import {
   ButtonState,
   CardInfo,
@@ -65,7 +66,17 @@ const FooterWithCardWidget = ({
   };
 
   const throttledHandleActions = useCallback(
-    _.throttle(() => handleActions(null, widgetData?.action), 700, {
+    _.throttle(
+      ({
+        action,
+        actionEvent,
+      }: {
+        action: GenericActionPayload | undefined;
+        actionEvent: AnalyticsEvent | undefined;
+      }) => {
+        if (!!actionEvent) sendAsAnalyticsEvent(actionEvent);
+        handleActions(null, action);
+      }, 700, {
       leading: true,
       trailing: false,
     }),
@@ -81,7 +92,15 @@ const FooterWithCardWidget = ({
     <View>
       {widgetData?.cardInfo?.title?.text &&
         widgetData?.cardInfo?.rightTitle?.text && (
-          <TouchableWithoutFeedback onPress={throttledHandleActions}>
+        <TouchableWithoutFeedback onPress={() => {
+          throttledHandleActions({
+            action: widgetData?.action,
+            actionEvent:
+              widgetData?.cardAction?.metaData?.at(0)
+                ?.analyticsEventProperties,
+          });
+        }
+          }>
             <CardComponent
               cardInfo={widgetData.cardInfo}
               style={styles.cardContainer}
@@ -90,7 +109,14 @@ const FooterWithCardWidget = ({
         )}
       <View style={getViewStyle()}>
         <View style={commonStyles.flex_1}>
-          <TouchableOpacity onPress={throttledHandleActions}>
+          <TouchableOpacity onPress={() => {
+            throttledHandleActions({
+              action: widgetData?.action,
+              actionEvent:
+                widgetData?.titleAction?.metaData?.at(0)
+                  ?.analyticsEventProperties,
+            });
+          }}>
             <TitleWidget
               widgetData={widgetData}
               widgetStyle={styles.titleContainer}

components/widgets/styled-lottie/StyledLottie.tsx

@@ -16,8 +16,12 @@ export const StyledLottie = ({
   const animationRef = useRef<LottieView | null>(null);
 
   useEffect(() => {
-    animationRef.current?.play();
-  }, []);
+    const timeoutId = setTimeout(() => {
+      animationRef.current?.play();
+    }, lottieFieldData?.delayAnimationBy ?? 0);
+  
+    return () => clearTimeout(timeoutId);
+  }, [lottieFieldData]);
 
   return (
     <TouchableOpacity