From ab74346b98c98451165a6736a595a4ed62128cad Mon Sep 17 00:00:00 2001 From: Kshitij Pramod Ghongadi Date: Tue, 24 Sep 2024 23:09:17 +0530 Subject: [PATCH] TP-84151 | Waiting Period Screen + Atomic Components Action Handling cleanup (#12576) Co-authored-by: Somarapu Vamshi --- App/Container/Navi-Insurance/index.ts | 1 + .../network/WaitingPeriodApi.ts | 39 +++ App/Container/Navi-Insurance/network/index.ts | 3 +- .../compare-plan-screen/ComparePlanScreen.tsx | 27 +- .../GenericShimmerScreen.tsx | 40 +-- .../MarketBenefitCompareScreen.tsx | 2 +- .../WaitingPeriodScreen.tsx | 240 ++++++++++++++++++ .../WaitingPeriodScreenStyles.ts | 22 ++ .../constants/AnalyticsEventsConstant.ts | 6 + App/common/constants/CtaConstants.ts | 8 +- App/common/constants/NumericalConstants.ts | 3 +- App/common/constants/ScreenNameConstants.ts | 1 + App/common/constants/StringConstant.ts | 1 + App/common/constants/WidgetNameConstants.ts | 11 +- .../widgetData/HeroSectionWidgetData.ts | 1 + ...itleRightTitleWithContentListWidgetData.ts | 41 +++ .../widgets/widgetData/TitleWidgetData.ts | 2 + .../interface/widgets/widgetData/index.ts | 9 +- App/common/screen/ScreenActionHandler.tsx | 15 +- App/common/screen/ScreenActionTypes.ts | 1 + .../screen/screen-mappers/GIScreenMapper.tsx | 10 + App/common/utilities/ThrottleUtil.ts | 14 + App/common/widgets/widgetResolver.tsx | 45 ++-- android/app/src/main/assets/fonts/tt_bold.otf | Bin 0 -> 172384 bytes android/link-assets-manifest.json | 4 + assets/fonts/tt_bold.otf | Bin 0 -> 172384 bytes components/StyledImage.tsx | 27 +- .../hero-section-widget/HeroSectionWidget.tsx | 11 +- .../HeroSectionWidgetStyles.ts | 8 +- components/widgets/index.tsx | 24 +- .../widgets/styled-lottie/StyledLottie.tsx | 20 +- components/widgets/styled-text/StyledText.tsx | 171 ++++++++++--- .../TitleRightTitleWithContentListWidget.tsx | 89 +++++++ ...leRightTitleWithContentListWidgetStyles.ts | 18 ++ .../TitleWithColumnWidget.tsx | 24 +- .../TitleWithListWidget.tsx | 2 +- 36 files changed, 797 insertions(+), 143 deletions(-) create mode 100644 App/Container/Navi-Insurance/network/WaitingPeriodApi.ts create mode 100644 App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx create mode 100644 App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreenStyles.ts create mode 100644 App/common/interface/widgets/widgetData/TitleRightTitleWithContentListWidgetData.ts create mode 100644 App/common/utilities/ThrottleUtil.ts create mode 100644 android/app/src/main/assets/fonts/tt_bold.otf create mode 100644 assets/fonts/tt_bold.otf create mode 100644 components/widgets/title-right-title-with-content-list-widget/TitleRightTitleWithContentListWidget.tsx create mode 100644 components/widgets/title-right-title-with-content-list-widget/TitleRightTitleWithContentListWidgetStyles.ts diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts index fd15e3fb37..69e947b3c2 100644 --- a/App/Container/Navi-Insurance/index.ts +++ b/App/Container/Navi-Insurance/index.ts @@ -2,5 +2,6 @@ export { default as QuoteOfferScreen } from "./screen/quote-offer-screen/QuoteOf 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 WaitingPeriodScreen } from "./screen/waiting-period-screen/WaitingPeriodScreen"; export { default as GenericShimmerScreen } from "./screen/generic-shimmer-screen/GenericShimmerScreen"; export { default as GenericErrorScreen } from "./screen/generic-error-screen/GenericErrorScreen"; diff --git a/App/Container/Navi-Insurance/network/WaitingPeriodApi.ts b/App/Container/Navi-Insurance/network/WaitingPeriodApi.ts new file mode 100644 index 0000000000..f411f5b330 --- /dev/null +++ b/App/Container/Navi-Insurance/network/WaitingPeriodApi.ts @@ -0,0 +1,39 @@ +import { Dispatch, SetStateAction } from "react"; +import { getXTargetHeaderInfo } from "../../../../network/ApiClient"; +import { get } from "../../../../network/NetworkService"; +import { ActionMetaData } from "../../../common/actions/GenericAction"; +import { + AnalyticsFlowNameConstant, + AnalyticsMethodNameConstant, + GI, +} from "../../../common/constants"; +import { CtaData } from "../../../common/interface"; +import { ScreenData } from "../../../common/interface/widgets/screenData/ScreenData"; +import { + handleErrorData, + handleResponseData, +} from "../../../common/screen/ScreenActionHandler"; +import { ScreenActionTypes } from "../../../common/screen/ScreenActionTypes"; +export const getWaitingPeriodScreenData = async ( + screenMetaData: ActionMetaData, + setScreenData: Dispatch>, +) => { + const url = "waiting-period"; + return get>( + url, + getXTargetHeaderInfo(GI.toLocaleUpperCase()), + ) + .then(response => { + handleResponseData(setScreenData, response); + }) + .catch(error => { + handleErrorData( + error, + setScreenData, + screenMetaData, + AnalyticsFlowNameConstant.GI_WAITING_PERIOD, + AnalyticsMethodNameConstant.WAITING_PERIOD_SCREEN, + ScreenActionTypes.FETCH_WAITING_PERIOD_SCREEN, + ); + }); +}; diff --git a/App/Container/Navi-Insurance/network/index.ts b/App/Container/Navi-Insurance/network/index.ts index 6fd2fe0e9b..fe49f3e864 100644 --- a/App/Container/Navi-Insurance/network/index.ts +++ b/App/Container/Navi-Insurance/network/index.ts @@ -1,2 +1,3 @@ -export * from "./MarketBenefitComparePageApi"; +export * from "./WaitingPeriodApi"; export * from "./QuotePageApi"; +export * from "./MarketBenefitComparePageApi"; diff --git a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx index 9760c88aff..f6e75e827c 100644 --- a/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx +++ b/App/Container/Navi-Insurance/screen/compare-plan-screen/ComparePlanScreen.tsx @@ -1,25 +1,25 @@ +import { useNavigation } from "@react-navigation/native"; import React, { useEffect } from "react"; -import { ScrollView, Text, View } from "react-native"; -import { CtaData, CtaType } from "../../../../common/interface"; -import { ScreenData } from "../../../../common/interface/widgets/screenData/ScreenData"; +import { BackHandler, ScrollView, View } from "react-native"; +import BaseWidget from "../../../../../components/widgets/BaseWidget"; import { BaseActionTypes, GenericActionPayload, } from "../../../../common/actions/GenericAction"; -import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes"; -import { Widget } from "../../../../common/interface/widgets/Widget"; -import { ScreenState } from "../../../../common/screen/BaseScreen"; -import BaseWidget from "../../../../../components/widgets/BaseWidget"; +import { COMPARE_PLAN_SCREEN, ConstantCta } from "../../../../common/constants"; import { logToSentry } from "../../../../common/hooks/useSentryLogging"; +import { 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 { useNavigation } from "@react-navigation/native"; -import ComparePlanShimmerScreen from "./shimmer-screen/ComparePlanShimmerScreen"; import { CtaNavigator, extractCtaParameters, } from "../../../../common/navigator/NavigationRouter"; +import { ScreenState } from "../../../../common/screen/BaseScreen"; +import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes"; import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen"; -import { COMPARE_PLAN_SCREEN, ConstantCta } from "../../../../common/constants"; +import ComparePlanShimmerScreen from "./shimmer-screen/ComparePlanShimmerScreen"; const ComparePlanScreen = ({ ctaData, @@ -52,6 +52,13 @@ const ComparePlanScreen = ({ 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), diff --git a/App/Container/Navi-Insurance/screen/generic-shimmer-screen/GenericShimmerScreen.tsx b/App/Container/Navi-Insurance/screen/generic-shimmer-screen/GenericShimmerScreen.tsx index 5b18f45100..8619447713 100644 --- a/App/Container/Navi-Insurance/screen/generic-shimmer-screen/GenericShimmerScreen.tsx +++ b/App/Container/Navi-Insurance/screen/generic-shimmer-screen/GenericShimmerScreen.tsx @@ -3,46 +3,20 @@ import SkeletonPlaceholder from "react-native-skeleton-placeholder"; import Colors from "../../../../../assets/colors/colors"; import { StaticHeader } from "../../../../../components/reusable/static-header/StaticHeader"; import { ConstantCta } from "../../../../common/constants/CtaConstants"; -import { logToSentry } from "../../../../common/hooks/useSentryLogging"; -import { CtaData, CtaType } from "../../../../common/interface"; -import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules"; +import { CtaData } from "../../../../common/interface"; import styles from "./GenericShimmerScreenStyle"; -const GenericShimmerScreen = () => { - const handleClick = (cta?: CtaData) => { - if (!cta) { - logToSentry( - `Navigation cta is missing or invalid: ${cta} | MethodName: handleClick}`, - ); - return; - } - - try { - switch (cta.type) { - case CtaType.DEEP_LINK: - case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR: - NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator( - JSON.stringify(cta), - ); - break; - default: - NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator( - JSON.stringify(cta), - ); - break; - } - } catch (error) { - logToSentry( - `Error while navigating to deep link with CTA: ${cta} | MethodName: handleClick}`, - ); - } - }; +const GenericShimmerScreen = ({ + handleClick, +}: { + handleClick: (cta: CtaData) => void; +}) => { return ( 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 index 96ba3f5e65..99d8c9f50c 100644 --- a/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx +++ b/App/Container/Navi-Insurance/screen/market-benefit-compare-screen/MarketBenefitCompareScreen.tsx @@ -167,7 +167,7 @@ const MarketBenefitCompareScreen = ({ }, [screenData?.screenState]); if (screenData?.screenState === ScreenState.LOADING) { - return ; + return ; } if (screenData?.screenState === ScreenState.ERROR) { diff --git a/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx b/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx new file mode 100644 index 0000000000..22e0c889a6 --- /dev/null +++ b/App/Container/Navi-Insurance/screen/waiting-period-screen/WaitingPeriodScreen.tsx @@ -0,0 +1,240 @@ +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, + AnalyticsMethodNameConstant, + ConstantCta, + INITIAL_Y_VALUE, + NAVIGATION_ERROR, + WAITING_PERIOD_SCREEN, +} from "../../../../common/constants"; +import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent"; +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 "./WaitingPeriodScreenStyles"; + +const WaitingPeriodScreen = ({ + ctaData, + screenData, + handleActions, +}: { + ctaData: CtaData; + screenData: ScreenData | null; + handleActions: (screenPayload?: GenericActionPayload) => void; +}) => { + const navigation = useNavigation(); + const y = useSharedValue(INITIAL_Y_VALUE); + const onScroll = (event: NativeSyntheticEvent) => { + y.value = event.nativeEvent.contentOffset.y; + }; + const handleClick = (cta?: CtaData) => { + if (!cta) { + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA, + properties: { + screenName: WAITING_PERIOD_SCREEN, + methodName: AnalyticsMethodNameConstant.HANDLE_CTA_CLICK, + }, + }; + sendAsAnalyticsEvent(errorEvent); + 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) { + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA, + properties: { + screenName: WAITING_PERIOD_SCREEN, + methodName: AnalyticsMethodNameConstant.HANDLE_CTA_CLICK, + reason: NAVIGATION_ERROR, + }, + }; + sendAsAnalyticsEvent(errorEvent); + } + }; + + useEffect(() => { + handleActions({ + baseActionType: BaseActionTypes.SCREEN_ACTION, + metaData: [ + { + actionType: ScreenActionTypes.FETCH_WAITING_PERIOD_SCREEN, + data: ctaData?.data, + screenName: WAITING_PERIOD_SCREEN, + }, + ], + }); + }, [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_WAITING_PERIOD_PAGE_INIT, + }; + sendAsAnalyticsEvent(initEvent); + break; + case ScreenState.ERROR: + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_RN_WAITING_PERIOD_PAGE_ERROR_VIEW, + }; + sendAsAnalyticsEvent(errorEvent); + break; + default: + break; + } + }, [screenData?.screenState]); + + if (screenData?.screenState === ScreenState.LOADING) { + return ; + } + + if (screenData?.screenState === ScreenState.ERROR) { + return ( + + ); + } + return ( + +
+ + + +