super-app/App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx

import React, { useEffect } from "react";
import {
  NativeEventEmitter,
  NativeScrollEvent,
  NativeSyntheticEvent,
  StatusBar,
  View,
} from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";
import Colors from "../../../../../assets/colors/colors";
import BaseWidget from "../../../../../components/widgets/BaseWidget";
import {
  BaseActionTypes,
  GenericActionPayload,
} from "../../../../common/actions/GenericAction";
import {
  HI_RN_QUOTE_PAGE_ERROR_VIEW,
  HI_RN_QUOTE_PAGE_INIT,
} from "../../../../common/constants/AnalyticsEventsConstant";
import { NativeEventNameConstants } from "../../../../common/constants/EventNameConstants";
import {
  HEADER_LOTTIE_TITLE_HEIGHT,
  HEADER_LOTTIE_WIDGET_HEIGHT,
} from "../../../../common/constants/NumericalConstants";
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 { ScreenState } from "../../../../common/screen/BaseScreen";
import { ScreenActionTypes } from "../../../../common/screen/ScreenActionTypes";
import styles from "./QuoteOfferScreenStyle";
import QuoteOfferErrorScreen from "./error-screen/QuoteOfferErrorScreen";
import QuoteOfferShimmerScreen from "./shimmer-screen/QuoteOfferShimmerScreen";
import { logToSentry } from "../../../../common/hooks/useSentryLogging";

const QuoteOfferScreen = ({
  ctaData,
  screenData,
  handleActions,
}: {
  ctaData: CtaData;
  screenData: ScreenData | null;
  handleActions: (screenPayload?: GenericActionPayload) => void;
}) => {
  const y = useSharedValue(0);
  // TODO: check and remove below code if it is working fine in release.
  // const onScroll = useAnimatedScrollHandler({
  //   onScroll: (event) => {
  //     y.value = event.contentOffset.y;
  //   },
  // });

  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    y.value = event.nativeEvent.contentOffset.y;
  };

  const headerBgStyle = useAnimatedStyle(() => {
    return {
      backgroundColor:
        y.value > HEADER_LOTTIE_WIDGET_HEIGHT
          ? Colors.grey
          : y.value > HEADER_LOTTIE_TITLE_HEIGHT
          ? Colors.aliceBlue
          : Colors.transparent,
    };
  });

  const screenOverlayStyle =
    screenData?.screenState === ScreenState.OVERLAY
      ? { opacity: 1 }
      : { opacity: 1 };

  let preQuoteId: string | undefined | null = undefined;
  let quoteId: string | undefined | null = undefined;
  ctaData?.parameters?.forEach((item) => {
    if (item.key === "preQuoteId") {
      preQuoteId = item.value;
    }
    if (item.key === "quoteId") {
      quoteId = item.value;
    }
  });

  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}`
      );
    }
  };

  useEffect(() => {
    const screenActionType = preQuoteId
      ? ScreenActionTypes.FETCH_QUOTE_V3
      : ScreenActionTypes.FETCH_INSURANCE_QUOTE_PAGE_FROM_BACKEND;
    const data: QuoteOfferRequest = {
      preQuoteId: preQuoteId ? preQuoteId : undefined,
      quoteId: quoteId ? quoteId : undefined,
    };
    const nativeEventListener = new NativeEventEmitter();
    let reloadPageEventListener = nativeEventListener.addListener(
      NativeEventNameConstants.reloadPage,
      (event) => {
        if (event === true) {
          handleActions({
            baseActionType: BaseActionTypes.SCREEN_ACTION,
            metaData: [
              {
                actionType: screenActionType,
                data: data,
              },
            ],
          });
        }
      }
    );
    handleActions({
      baseActionType: BaseActionTypes.SCREEN_ACTION,
      metaData: [
        {
          actionType: screenActionType,
          data: data,
        },
      ],
    });
    return () => {
      nativeEventListener.removeAllListeners(
        NativeEventNameConstants.reloadPage
      );
    };
  }, [ctaData, preQuoteId, quoteId]);

  useEffect(() => {
    switch (screenData?.screenState) {
      case ScreenState.LOADED:
        const initEvent: AnalyticsEvent = {
          name: HI_RN_QUOTE_PAGE_INIT,
        };
        sendAsAnalyticsEvent(initEvent);
        break;
      case ScreenState.ERROR:
        const errorEvent: AnalyticsEvent = {
          name: HI_RN_QUOTE_PAGE_ERROR_VIEW,
        };
        sendAsAnalyticsEvent(errorEvent);
        break;
      default:
        break;
    }
  }, [screenData?.screenState]);

  useEffect(() => {
    if (
      screenData?.screenState !== ScreenState.ERROR &&
      screenData?.screenState !== ScreenState.LOADING
    ) {
      handleClick(screenData?.screenMetaData?.redirectionCta);
    }
  }, [screenData?.screenMetaData?.redirectionCta]);

  if (screenData?.screenState === ScreenState.LOADING) {
    return <QuoteOfferShimmerScreen handleClick={handleClick} />;
  } else if (screenData?.screenState === ScreenState.ERROR) {
    return (
      <QuoteOfferErrorScreen
        errorMetaData={screenData.errorMetaData}
        handleActions={handleActions}
        handleClick={handleClick}
      />
    );
  } else {
    return (
      <View style={[styles.container, screenData?.screenStyle]}>
        <StatusBar backgroundColor={Colors.white} barStyle="dark-content" />
        <Animated.View style={[styles.header, headerBgStyle]}>
          {getWidgetViews(
            screenData?.screenWidgets?.headerWidgets,
            handleActions,
            screenData?.screenState,
            handleClick
          )}
        </Animated.View>
        <Animated.ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.content}
          scrollEventThrottle={16}
          onScroll={onScroll}
          nestedScrollEnabled={true}
          style={screenOverlayStyle}
          pointerEvents={
            screenData?.screenState === ScreenState.OVERLAY ? "none" : "auto"
          }
        >
          {getWidgetViews(
            screenData?.screenWidgets?.contentWidgets,
            handleActions,
            screenData?.screenState,
            handleClick
          )}
        </Animated.ScrollView>
        <View
          style={[styles.footer, screenOverlayStyle]}
          pointerEvents={
            screenData?.screenState === ScreenState.OVERLAY ? "none" : "auto"
          }
        >
          {getWidgetViews(
            screenData?.screenWidgets?.footerWidgets,
            handleActions,
            screenData?.screenState,
            handleClick
          )}
        </View>
      </View>
    );
  }
};

function getWidgetViews(
  widgetList: Widget[] | undefined,
  handleActions: (screenActionPayload?: GenericActionPayload) => void,
  screenState?: ScreenState | null,
  handleClick?: (ctaData: CtaData) => void
): React.JSX.Element {
  return (
    <View>
      {widgetList?.map((widget, index) => {
        return (
          <BaseWidget
            widget={widget}
            handleScreenActions={handleActions}
            screenState={screenState}
            widgetIndex={index}
            key={index}
            handleClick={handleClick}
          />
        );
      })}
    </View>
  );
}

export default QuoteOfferScreen;