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

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

android/app/src/main/java/com/naviapp/app/NaviApplication.kt

@@ -99,7 +99,7 @@ open class NaviApplication : MultiDexApplication(), Application.ActivityLifecycl
     private val applicationScope = CoroutineScope(Dispatchers.IO + rnJob)
 
     override val reactNativeHost = object : DefaultReactNativeHost(this) {
-        override fun getUseDeveloperSupport() = false
+        override fun getUseDeveloperSupport() = BuildConfig.DEBUG
         override fun getPackages(): List<ReactPackage> {
             val packages = PackageList(this).packages.toMutableList()
             packages.add(NativePackage())

android/navi-insurance/src/main/java/com/navi/insurance/health/viewmodel/QuoteVM.kt

@@ -165,6 +165,8 @@ constructor(private val repository: QuoteRepository, actionHandler: ActionHandle
         get() = _isQuotePageScrollingDown
 
     val refreshQuotePage = SingleLiveEvent<Boolean>()
+    var ctaData: CtaData? = null
+
 
     fun turnOffLaunchFlag(key: String) {
         _launchBottomSheet.value?.set(key, false)

android/navi-insurance/src/main/java/com/navi/insurance/models/response/QuoteGenericResponse.kt

@@ -34,6 +34,7 @@ data class QuoteGenericResponse(
     @SerializedName("callbackData") val callbackData: CallbackData? = null,
     @SerializedName("floatingButtonData")
     val floatingButtonData: FloatingButtonData? = null,
+    @SerializedName("backCta") val backCta: CtaData? = null
 )
 
 @Parcelize

android/navi-insurance/src/main/java/com/navi/insurance/navigator/NaviInsuranceDeeplinkNavigator.kt

@@ -422,7 +422,9 @@ object NaviInsuranceDeeplinkNavigator {
                                         ) {
                                             Intent(activity, QuoteActivity::class.java)
                                         } else null
-                                    intent?.action = deepLink
+                                    intent?.action =
+                                        ctaData.parameters?.find { it.key == "actionUrl" }?.value
+                                            ?: deepLink
                                     intent?.putExtra(FROM_DEEP_LINK, true)
                                 } catch (e: Exception) {
                                     Timber.e(e)

android/navi-insurance/src/main/java/com/navi/insurance/quoteredesign/QuoteActivity.kt

@@ -34,6 +34,7 @@ import com.navi.base.sharedpref.CommonPrefConstants.USER_EXTERNAL_ID
 import com.navi.base.sharedpref.PreferenceManager
 import com.navi.base.utils.isNotNull
 import com.navi.base.utils.orFalse
+import com.navi.base.utils.orTrue
 import com.navi.common.callback.RequestToCallbackHandler
 import com.navi.common.juspay.HyperServicesHolder
 import com.navi.common.model.ModuleName
@@ -153,6 +154,7 @@ class QuoteActivity :
     val insuranceAnalyticsHandler = InsuranceAnalyticsHandler()
     private var isDeeplinkNavigationDone = false
     private val paymentScreenAnalytics by lazy { NaviPaymentScreenAnalytics.naviAnalytics.PaymentMethodAnalytics() }
+    public var backCta: CtaData? = null
 
     @Inject
     lateinit var callbackActionButton: CallbackActionButton
@@ -434,11 +436,30 @@ class QuoteActivity :
                     }
                 )
             }
+        } else if(backCta != null){
+            sendAnalyticsEvent(backCta)
+            NaviInsuranceDeeplinkNavigator.navigate(
+                this,
+                backCta!!,
+                finish = backCta?.finish.orTrue(),
+                clearTask = backCta?.clearTask.orFalse()
+            )
+            backCta = null
+
         } else {
             super.onBackPressed()
         }
     }
 
+    private fun sendAnalyticsEvent(ctaData: CtaData?) {
+        ctaData?.analyticsEventProperties?.name?.let { analyticsEventName ->
+            NaviInsuranceAnalytics.postAnalyticsEvent(
+                eventName = analyticsEventName,
+                eventProperties = backCta?.analyticsEventProperties?.properties
+            )
+        }
+    }
+
     private fun shouldShowSurveyBottomSheet(): Boolean {
         val isExperimentEnabled =
             quoteViewModel.quoteResponse.value

android/navi-insurance/src/main/java/com/navi/insurance/quoteredesign/fragments/PolicyAddonFragment.kt

@@ -46,6 +46,7 @@ import com.navi.naviwidgets.adapters.NaviAdapter
 import com.navi.naviwidgets.callbacks.WidgetCallback
 import com.navi.design.utils.isValidHexColor
 import com.navi.insurance.navigator.NaviInsuranceDeeplinkNavigator
+import com.navi.insurance.quoteredesign.QuoteActivity
 import com.navi.naviwidgets.extensions.FloatingButtonOverlay
 import com.navi.naviwidgets.models.GenericWidgetDataInfo
 import com.navi.naviwidgets.viewholder.ViewHolderFactoryImpl
@@ -61,6 +62,7 @@ class PolicyAddonFragment : BaseFragment(), WidgetCallback, View.OnClickListener
     private val FIRST_ITEM = 0
     private var apiErrorHandler: ApiErrorHandler? = null
     private var analyticsEventHandler: AnalyticsEventHandler? = null
+    private var parentActivity: QuoteActivity? = null
 
     @Inject
     lateinit var insuranceAnalyticsHandler: InsuranceAnalyticsHandler
@@ -76,6 +78,7 @@ class PolicyAddonFragment : BaseFragment(), WidgetCallback, View.OnClickListener
             container,
             false
         )
+        parentActivity = activity as? QuoteActivity
         startShimmerLoading()
         initObservers()
         initListeners()
@@ -167,6 +170,8 @@ class PolicyAddonFragment : BaseFragment(), WidgetCallback, View.OnClickListener
         sharedViewModel.addOnResponse.observe(viewLifecycleOwner) { widgetGenericResponse ->
             widgetGenericResponse?.let {
                 stopShimmerLoading()
+                sharedViewModel.ctaData = it.backCta
+                if (parentActivity != null) parentActivity?.backCta = sharedViewModel.ctaData
                 it.contentWidget?.let { widgetConfigList ->
                     if (binding.addonRv.adapter == null) {
                         @Suppress("UNCHECKED_CAST")

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