diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts index b7d077af08..fd15e3fb37 100644 --- a/App/Container/Navi-Insurance/index.ts +++ b/App/Container/Navi-Insurance/index.ts @@ -1,5 +1,6 @@ export { default as QuoteOfferScreen } from "./screen/quote-offer-screen/QuoteOfferScreen"; export { default as QuoteApologyScreen } from "./screen/quote-apology-screen/QuoteApologyScreen"; export { default as ComparePlanScreen } from "./screen/compare-plan-screen/ComparePlanScreen"; +export { default as MarketBenefitCompareScreen } from "./screen/market-benefit-compare-screen/MarketBenefitCompareScreen"; export { default as GenericShimmerScreen } from "./screen/generic-shimmer-screen/GenericShimmerScreen"; -export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen"; \ No newline at end of file +export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen"; diff --git a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx new file mode 100644 index 0000000000..dab0f0d926 --- /dev/null +++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx @@ -0,0 +1,224 @@ +import { useNavigation } from "@react-navigation/native"; +import React, { useEffect } from "react"; +import { + BackHandler, + NativeScrollEvent, + NativeSyntheticEvent, + View, +} from "react-native"; +import Animated, { + useAnimatedStyle, + useSharedValue, +} from "react-native-reanimated"; +import BaseWidget from "../../../../../components/widgets/BaseWidget"; +import { + BaseActionTypes, + GenericActionPayload, +} from "../../../../common/actions/GenericAction"; +import { + AnalyticsEventNameConstants, + ConstantCta, +} from "../../../../common/constants"; +import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent"; +import { logToSentry } from "../../../../common/hooks/useSentryLogging"; +import { AnalyticsEvent, CtaData, CtaType } from "../../../../common/interface"; +import { Widget } from "../../../../common/interface/widgets/Widget"; +import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData"; +import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules"; +import { + CtaNavigator, + extractCtaParameters, +} from "../../../../common/navigator/NavigationRouter"; +import { ScreenState } from "../../../../common/screen/BaseScreen"; +import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes"; +import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen"; +import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen"; +import styles from "./MarketBenefitCompareScreenStyles"; +const MarketBenefitCompareScreen = ({ + ctaData, + screenData, + handleActions, +}: { + ctaData: CtaData; + screenData: ScreenData | null; + handleActions: (screenPayload?: GenericActionPayload) => void; +}) => { + const navigation = useNavigation(); + const y = useSharedValue(0); + const onScroll = (event: NativeSyntheticEvent) => { + y.value = event.nativeEvent.contentOffset.y; + }; + const handleClick = (cta?: CtaData) => { + if (!cta) { + logToSentry( + `Navigation cta is missing or invalid: ${cta} | MethodName: handleClick}`, + ); + return; + } + + const { navigatorType } = extractCtaParameters(cta); + + try { + switch (cta.type) { + case CtaType.DEEP_LINK: + case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR: + NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator( + JSON.stringify(cta), + ); + break; + case CtaType.RN_NAVIGATOR: + CtaNavigator.performNavigation(navigation, navigatorType, cta); + break; + case CtaType.GO_BACK: + if (navigation.canGoBack()) { + navigation.goBack(); + } else { + BackHandler.exitApp(); + } + break; + default: + NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator( + JSON.stringify(cta), + ); + break; + } + } catch (error) { + logToSentry( + `Error while navigating to deep link with CTA: ${cta} | MethodName: handleClick}`, + ); + } + }; + + useEffect(() => { + handleActions({ + baseActionType: BaseActionTypes.SCREEN_ACTION, + metaData: [ + { + actionType: ScreenActionTypes.FETCH_BENEFIT_COMPARE_LIST, + data: ctaData?.data, + }, + ], + }); + }, [ctaData]); + + const headerStyle = useAnimatedStyle(() => { + return { + shadowColor: y.value > 1 ? "black" : "transparent", + shadowOpacity: y.value > 1 ? 1 : 0, + shadowRadius: y.value > 1 ? 8 : 0, + elevation: y.value > 1 ? 32 : 0, + }; + }); + + const Header = () => { + return ( + + {getWidgetViews( + screenData?.screenWidgets?.headerWidgets, + handleActions, + screenData?.screenState, + handleClick, + )} + + ); + }; + + const ContentWidgets = () => { + return getWidgetViews( + screenData?.screenWidgets?.contentWidgets, + handleActions, + screenData?.screenState, + handleClick, + ); + }; + + const Footer = () => { + return ( + + {getWidgetViews( + screenData?.screenWidgets?.footerWidgets, + handleActions, + screenData?.screenState, + handleClick, + )} + + ); + }; + + useEffect(() => { + switch (screenData?.screenState) { + case ScreenState.LOADED: + const initEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_RN_BENEFIT_COMPARE_PAGE_INIT, + }; + sendAsAnalyticsEvent(initEvent); + break; + case ScreenState.ERROR: + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_RN_BENEFIT_COMPARE_PAGE_ERROR_VIEW, + }; + sendAsAnalyticsEvent(errorEvent); + break; + default: + break; + } + }, [screenData?.screenState]); + + if (screenData?.screenState === ScreenState.LOADING) { + return ; + } + + if (screenData?.screenState === ScreenState.ERROR) { + return ( + + ); + } + return ( + +
+ + + +