diff --git a/App/Container/Navi-Insurance/Styles/index.ts b/App/Container/Navi-Insurance/Styles/index.ts index 39db99b7f0..200093c1d1 100644 --- a/App/Container/Navi-Insurance/Styles/index.ts +++ b/App/Container/Navi-Insurance/Styles/index.ts @@ -34,4 +34,7 @@ export const commonStyles = StyleSheet.create({ height54: { height: 54, }, + flexStart: { + alignItems: "flex-start", + }, }); diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts index 69e947b3c2..c8f15800af 100644 --- a/App/Container/Navi-Insurance/index.ts +++ b/App/Container/Navi-Insurance/index.ts @@ -5,3 +5,4 @@ export { default as MarketBenefitCompareScreen } from "./screen/market-benefit-c 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"; +export { default as BenefitScreen } from "./screen/benefit-screen/BenefitScreen"; diff --git a/App/Container/Navi-Insurance/network/BenefitPageApi.ts b/App/Container/Navi-Insurance/network/BenefitPageApi.ts new file mode 100644 index 0000000000..83d0c504e4 --- /dev/null +++ b/App/Container/Navi-Insurance/network/BenefitPageApi.ts @@ -0,0 +1,40 @@ +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 getBenefitPageData = async ( + screenMetaData: ActionMetaData, + setScreenData: Dispatch>, +) => { + const url = "benefits/v2"; + return get>( + url, + getXTargetHeaderInfo(GI.toLocaleUpperCase()), + screenMetaData.data, + ) + .then(response => { + handleResponseData(setScreenData, response); + }) + .catch(error => { + handleErrorData( + error, + setScreenData, + screenMetaData, + AnalyticsFlowNameConstant.GI_RN_BENEFIT, + AnalyticsMethodNameConstant.FETCH_BENEFIT_LIST, + ); + }); +}; diff --git a/App/Container/Navi-Insurance/network/index.ts b/App/Container/Navi-Insurance/network/index.ts index fe49f3e864..1a7a222cbf 100644 --- a/App/Container/Navi-Insurance/network/index.ts +++ b/App/Container/Navi-Insurance/network/index.ts @@ -1,3 +1,4 @@ -export * from "./WaitingPeriodApi"; -export * from "./QuotePageApi"; +export * from "./BenefitPageApi"; export * from "./MarketBenefitComparePageApi"; +export * from "./QuotePageApi"; +export * from "./WaitingPeriodApi"; diff --git a/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx new file mode 100644 index 0000000000..ac37908ebc --- /dev/null +++ b/App/Container/Navi-Insurance/screen/benefit-screen/BenefitScreen.tsx @@ -0,0 +1,261 @@ +import { useNavigation } from "@react-navigation/native"; +import { useEffect } from "react"; +import { NativeScrollEvent, NativeSyntheticEvent, View } from "react-native"; +import Animated, { + useAnimatedStyle, + useDerivedValue, + useSharedValue, + withTiming, +} from "react-native-reanimated"; +import { StyledImage, StyledText } from "../../../../../components/widgets"; +import BaseWidget from "../../../../../components/widgets/BaseWidget"; +import { + BaseActionTypes, + GenericActionPayload, +} from "../../../../common/actions/GenericAction"; +import { + AnalyticsEventNameConstants, + AnalyticsMethodNameConstant, + BENEFIT_SCREEN, + ConstantCta, + INITIAL_Y_VALUE, + NAVIGATION_ERROR, +} from "../../../../common/constants"; +import { sendAsAnalyticsEvent } from "../../../../common/hooks/useAnalyticsEvent"; +import { NaviLinearGradient } from "../../../../common/hooks/useGradient"; +import { AnalyticsEvent, CtaData, CtaType } from "../../../../common/interface"; +import { Widget } from "../../../../common/interface/widgets/Widget"; +import { BenefitScreenHeaderData } from "../../../../common/interface/widgets/widgetData"; +import { BenefitScreenProps } from "../../../../common/interface/widgets/widgetData/BenefitScreenHeaderData"; +import { NativeDeeplinkNavigatorModule } from "../../../../common/native-module/NativeModules"; +import { CtaNavigator } from "../../../../common/navigator/NavigationRouter"; +import { ScreenState } from "../../../../common/screen/BaseScreen"; +import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes"; +import { extractCtaParameters } from "../../../../common/utilities/CtaParamsUtils"; +import { handleGoBackOrExitApp } from "../../../../common/utilities/NavigationUtil"; +import GenericShimmerScreen from "../generic-shimmer-screen/GenericShimmerScreen"; +import QuoteOfferErrorScreen from "../quote-offer-screen/error-screen/QuoteOfferErrorScreen"; +import styles from "./BenefitScreenStyles"; + +const BenefitScreen = ({ + ctaData, + screenData, + handleActions, +}: BenefitScreenProps) => { + const navigation = useNavigation(); + const y = useSharedValue(INITIAL_Y_VALUE); + const onScroll = (event: NativeSyntheticEvent) => { + y.value = event.nativeEvent.contentOffset.y; + }; + const derivedY = useDerivedValue(() => { + return y.value; + }); + + const handleClick = (cta?: CtaData) => { + if (!cta) { + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA, + properties: { + screenName: BENEFIT_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: + handleGoBackOrExitApp(navigation); + break; + default: + NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator( + JSON.stringify(cta), + ); + break; + } + } catch (error) { + const errorEvent: AnalyticsEvent = { + name: AnalyticsEventNameConstants.HI_INVALID_SCREEN_CTA, + properties: { + screenName: BENEFIT_SCREEN, + methodName: AnalyticsMethodNameConstant.HANDLE_CTA_CLICK, + reason: error?.toString() || NAVIGATION_ERROR, + }, + }; + sendAsAnalyticsEvent(errorEvent); + } + }; + + useEffect(() => { + const { planId, benefitType, sourceScreen } = extractCtaParameters(ctaData); + + const data: BenefitScreenRequest = { + planId: planId, + benefitType: benefitType, + sourceScreen: sourceScreen, + }; + + handleActions({ + baseActionType: BaseActionTypes.SCREEN_ACTION, + metaData: [ + { + actionType: ScreenActionTypes.FETCH_BENEFIT_LIST, + data, + screenName: BENEFIT_SCREEN, + }, + ], + }); + }, [ctaData]); + + const headerStyle = useAnimatedStyle(() => { + return { + maxHeight: withTiming(derivedY.value > 0 ? 0 : 200, { + duration: derivedY.value > 0 ? 150 : 200, + }), + // Updating maxHeight to 0 when derivedY.value > 0 to hide the header icon + // and updating to 200 [> icon height] when derivedY.value <= 0 to show the header icon + opacity: withTiming(derivedY.value > 0 ? 0 : 1, { + duration: derivedY.value > 0 ? 10 : 250, + }), + }; + }); + + const Header = () => { + let headerData = screenData?.screenWidgets?.headerWidgets?.at( + 0, + ) as BenefitScreenHeaderData; + return ( + 0 + ? headerData?.scrolledGradient + : headerData?.defaultGradient + } + > + + + + {headerData?.leftIcon && ( + + )} + {headerData?.title && ( + + )} + {headerData?.rightIcon ? ( + + ) : ( + + )} + + {headerData?.subtitle && ( + + )} + {} + {headerData?.description?.url && ( + + + + )} + + + + ); + }; + + const Footer = () => { + return ( + + {getWidgetViews( + screenData?.screenWidgets?.footerWidgets, + handleActions, + screenData?.screenState, + handleClick, + )} + + ); + }; + + if (screenData?.screenState === ScreenState.LOADING) { + return ; + } + + if (screenData?.screenState === ScreenState.ERROR) { + return ( + + ); + } + + return ( + + +
+ {getWidgetViews( + screenData?.screenWidgets?.contentWidgets, + handleActions, + screenData?.screenState, + handleClick, + )} + +