NTP-8231 | RN Error Screen (#13193)

App/Container/Navi-Insurance/screen/generic-error-screen/GenericErrorScreen.tsx

@@ -28,7 +28,7 @@ const GenericErrorScreen = () => {
         leftIcon={"CROSS"}
       />
       <View style={styles.centerContent}>
-        {AppImage(ImageName.SWW, styles.centerIcon)}
+        <AppImage imageCode={ImageName.SWW} style={styles.centerIcon} />
         <Text style={styles.errorTitle}>{ERROR_TITLE}</Text>
         <Text style={styles.errorSubtitle}>{ERROR_SUBTITLE}</Text>
       </View>

App/Container/Navi-Insurance/screen/quote-apology-screen/QuoteApologyScreen.tsx

@@ -44,7 +44,10 @@ const QuoteApologyScreen = ({
         <View style={styles.headerBorder} />
       </View>
       <View style={styles.centerContent}>
-        {AppImage(ImageName.QUOTE_APOLOGY_ICON, styles.centerIcon)}
+        <AppImage
+          imageCode={ImageName.QUOTE_APOLOGY_ICON}
+          style={styles.centerIcon}
+        />
         <Text style={styles.title}>{QUOTE_APOLOGY_TITLE}</Text>
         <Text style={styles.subtitle}>{QUOTE_APOLOGY_SUBTITLE}</Text>
       </View>

App/Container/Navi-Insurance/screen/quote-offer-screen/error-screen/QuoteOfferErrorScreen.tsx

@@ -1,19 +1,17 @@
-import { View, Text } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
-import { GenericActionPayload } from "../../../../../common/actions/GenericAction";
+import { AppImage } from "../../../../../../components/AppImage";
+import { StaticHeader } from "../../../../../../components/reusable/static-header/StaticHeader";
+import {
+  ErrorMetaData,
+  GenericActionPayload,
+} from "../../../../../common/actions/GenericAction";
+import { RETRY } from "../../../../../common/constants";
 import {
   CtaData,
   StaticHeaderProperties,
 } from "../../../../../common/interface";
-import { StaticHeader } from "../../../../../../components/reusable/static-header/StaticHeader";
+import { getErrorResponseFromStatusCode } from "../../../../../common/utilities/ErrorUtils";
 import { styles } from "./QuoteOfferErrorScreenStyle";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import {
-  ERROR_SUBTITLE,
-  ERROR_TITLE,
-  RETRY,
-  ImageName,
-} from "../../../../../common/constants/StringConstant";
-import { AppImage } from "../../../../../../components/AppImage";
 
 const QuoteOfferErrorScreen = ({
   errorMetaData,
@@ -21,7 +19,7 @@ const QuoteOfferErrorScreen = ({
   handleClick,
   headerProperties,
 }: {
-  errorMetaData?: GenericActionPayload;
+  errorMetaData?: ErrorMetaData;
   handleActions?: (screenPayload?: GenericActionPayload) => void;
   handleClick?: (cta: CtaData) => void;
   headerProperties: StaticHeaderProperties;
@@ -29,7 +27,9 @@ const QuoteOfferErrorScreen = ({
   const onPress = () => {
     handleActions && handleActions(errorMetaData);
   };
-
+  const errorResponse = getErrorResponseFromStatusCode(
+    errorMetaData?.errorStatusCode,
+  );
   return (
     <View style={styles.container}>
       <StaticHeader
@@ -40,9 +40,15 @@ const QuoteOfferErrorScreen = ({
         rightIcon={headerProperties?.rightIcon}
       />
       <View style={styles.centerContent}>
-        {AppImage(ImageName.SWW, styles.centerIcon)}
+        {errorResponse.image && (
-        <Text style={styles.errorTitle}>{ERROR_TITLE}</Text>
+          <AppImage imageCode={errorResponse.image} style={styles.centerIcon} />
-        <Text style={styles.errorSubtitle}>{ERROR_SUBTITLE}</Text>
+        )}
+        {errorResponse.title && (
+          <Text style={styles.errorTitle}>{errorResponse.title}</Text>
+        )}
+        {errorResponse.subtitle && (
+          <Text style={styles.errorSubtitle}>{errorResponse.subtitle}</Text>
+        )}
       </View>
       <TouchableOpacity
         onPress={onPress}

App/common/actions/GenericAction.ts

@@ -14,6 +14,10 @@ export interface GenericActionPayload {
   screenData?: ScreenData | null;
 }
 
+export interface ErrorMetaData extends GenericActionPayload {
+  errorStatusCode?: number;
+}
+
 export interface ActionMetaData {
   actionType?: string;
   // ActionMetaData has some key attributes required to perform any action e.g. critical widget communications i.e. inter/intra widget, screen level API calls, bottom sheet, modal, etc.

App/common/constants/StatusCodeConstant.ts

@@ -0,0 +1,11 @@
+export const STATUS_CODE_NO_INTERNET = 20;
+export const STATUS_CODE_UNAUTHORIZED = 401;
+export const STATUS_CODE_FORBIDDEN = 403;
+export const STATUS_CODE_NOT_FOUND = 404;
+export const STATUS_CODE_INTERNAL_SERVER_ERROR = 500;
+export const STATUS_CODE_BAD_REQUEST = 400;
+export const STATUS_CODE_SERVICE_UNAVAILABLE = 503;
+export const STATUS_CODE_TIMEOUT = 408;
+export const STATUS_CODE_CONFLICT = 409;
+export const STATUS_CODE_GATEWAY_TIMEOUT = 504;
+export const STATUS_CODE_TOO_MANY_REQUESTS = 429;

App/common/constants/StringConstant.ts

@@ -11,6 +11,7 @@ export const Lottie = {
 
 export const ImageName = {
   SWW: "SWW",
+  NO_INTERNET: "NO_INTERNET",
   CROSS: "CROSS",
   BACK_ARROW: "BACK_ARROW",
   HELP: "HELP",
@@ -34,7 +35,10 @@ export enum BundleState {
 
 export const CODEPUSH_METHOD = "onCodepushStatusChange";
 export const ERROR_TITLE = "Something went wrong";
+export const ERROR_INTERNET_TITLE = "No internet connection!";
 export const ERROR_SUBTITLE = "Please try again after some time";
+export const ERROR_INTERNET_SUBTITLE =
+  "Please check your internet connectivity and try again";
 export const RETRY = "Retry";
 export const QUOTE_APOLOGY_TITLE =
   "Sorry, we cannot insure some members with health issues!";

App/common/constants/index.ts

@@ -8,3 +8,4 @@ export * from "./ScreenNameConstants";
 export * from "./SentryConstants";
 export * from "./StringConstant";
 export * from "./WidgetNameConstants";
+export * from "./StatusCodeConstant";

App/common/interface/components/ErrorResponse.ts

@@ -0,0 +1,5 @@
+export interface ErrorResponse {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+}

App/common/interface/widgets/screenData/ErrorMetaData.ts

@@ -1,10 +0,0 @@
-import { ActionMetaData } from "../../../actions/GenericAction";
-import { ButtonData } from "../widgetData/FooterWithCardWidgetData";
-import { TextFieldData, TitleWidgetData } from "../widgetData/TitleWidgetData";
-
-export interface ErrorMetaData {
-    title?: TextFieldData,
-    subTitle?: TextFieldData,
-    errorMeta?: ActionMetaData[] | null,
-    button?: ButtonData
-}

App/common/interface/widgets/screenData/ScreenData.ts

@@ -1,15 +1,15 @@
 import { ViewStyle } from "react-native";
-import { Widget } from "../Widget";
+import { ErrorMetaData } from "../../../actions/GenericAction";
 import { ScreenState } from "../../../screen/BaseScreen";
+import { Widget } from "../Widget";
 import { ScreenMetaData } from "./ScreenMetaData";
-import { GenericActionPayload } from "../../../actions/GenericAction";
 
 export interface ScreenData {
   screenStyle?: ViewStyle;
   screenId?: string;
   screenWidgets?: ScreenWidgets;
   screenState?: ScreenState | null;
-  errorMetaData?: GenericActionPayload;
+  errorMetaData?: ErrorMetaData;
   screenMetaData?: ScreenMetaData;
 }
 

App/common/screen/ScreenActionHandler.tsx

@@ -103,6 +103,7 @@ export const handleErrorData = (
         },
         screenMetaData,
       ],
+      errorStatusCode: error.statusCode,
     },
   };
   setScreenData(updatedScreenData);

App/common/utilities/ErrorUtils.ts

@@ -1,4 +1,13 @@
-import { AnalyticsGlobalErrorTypeConstant } from "../constants";
+import {
+  AnalyticsGlobalErrorTypeConstant,
+  ERROR_INTERNET_SUBTITLE,
+  ERROR_INTERNET_TITLE,
+  ERROR_SUBTITLE,
+  ERROR_TITLE,
+  ImageName,
+  STATUS_CODE_NO_INTERNET,
+} from "../constants";
+import { ErrorResponse } from "../interface/components/ErrorResponse";
 
 export const getErrorTypeFromStatusCode = (statusCode: number) => {
   const statusCodeforGenericError = [20, 23, 24, 401, 404];
@@ -9,3 +18,22 @@ export const getErrorTypeFromStatusCode = (statusCode: number) => {
 
   return AnalyticsGlobalErrorTypeConstant.GLOBAL_INTERNAL_ERRORS;
 };
+
+export const getErrorResponseFromStatusCode = (
+  statusCode?: number,
+): ErrorResponse => {
+  switch (statusCode) {
+    case STATUS_CODE_NO_INTERNET:
+      return {
+        title: ERROR_INTERNET_TITLE,
+        subtitle: ERROR_INTERNET_SUBTITLE,
+        image: ImageName.NO_INTERNET,
+      };
+    default:
+      return {
+        title: ERROR_TITLE,
+        subtitle: ERROR_SUBTITLE,
+        image: ImageName.SWW,
+      };
+  }
+};

components/AppImage.tsx

@@ -1,11 +1,19 @@
 import { Image, ImageStyle, StyleProp } from "react-native";
 import { ImageName } from "../App/common/constants/StringConstant";
-export const AppImage = (imageCode?: string, style?: StyleProp<ImageStyle>) => {
+
+export const AppImage: React.FC<AppImageProps> = ({ imageCode, style }) => {
   switch (imageCode) {
     case ImageName.SWW:
       return (
         <Image source={require("../assets/images/sww.webp")} style={style} />
       );
+    case ImageName.NO_INTERNET:
+      return (
+        <Image
+          source={require("../assets/images/no_internet.webp")}
+          style={style}
+        />
+      );
     case ImageName.CROSS:
       return (
         <Image source={require("../assets/images/cross.webp")} style={style} />
@@ -32,3 +40,8 @@ export const AppImage = (imageCode?: string, style?: StyleProp<ImageStyle>) => {
       return null;
   }
 };
+
+interface AppImageProps {
+  imageCode?: string;
+  style?: StyleProp<ImageStyle>;
+}

components/StyledImage.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ImageFieldData } from "../App/common/interface/widgets/widgetData/TitleWidgetData";
-import { Image } from "react-native";
+import { Image, TouchableOpacity } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
 import { CtaData } from "../App/common/interface";
 import { GenericActionPayload } from "../App/common/actions/GenericAction";
 

components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { FlatList, View } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
 import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { CtaData } from "../../../App/common/interface";
 import {

components/reusable/static-header/StaticHeader.tsx

@@ -40,7 +40,10 @@ export const StaticHeader = ({
           }}
           activeOpacity={1}
         >
-          {AppImage(leftIcon || ImageName.CROSS, styles.leftImageStyle)}
+          <AppImage
+            imageCode={leftIcon || ImageName.CROSS}
+            style={styles.leftImageStyle}
+          />
         </TouchableOpacity>
       )}
       {!!rightIconCta && (
@@ -50,7 +53,10 @@ export const StaticHeader = ({
           }}
           activeOpacity={1}
         >
-          {AppImage(rightIcon || ImageName.HELP, styles.rightImageStyle)}
+          <AppImage
+            imageCode={rightIcon || ImageName.HELP}
+            style={styles.rightImageStyle}
+          />
         </TouchableOpacity>
       )}
     </View>

components/widgets/ButtonTestWidget.tsx

@@ -1,64 +0,0 @@
-import { Text, View, ViewStyle } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import { GenericActionPayload } from "../../App/common/actions/GenericAction";
-import { TitleWidgetData } from "../../App/common/interface/widgets/widgetData/TitleWidgetData";
-import { NativeDeeplinkNavigatorModule } from "../../App/common/native-module/NativeModules";
-
-const ButtonTestWidget = ({
-  widgetData,
-  widgetStyle,
-  handleActions,
-  widgetIndex,
-}: {
-  widgetData: TitleWidgetData;
-  widgetStyle: ViewStyle;
-  handleActions: (
-    value: any | undefined | null,
-    screenActionPayload: GenericActionPayload
-  ) => void;
-  widgetIndex: number;
-}) => {
-  const handleButtonClick = (): void => {
-    NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator(
-      JSON.stringify({
-        url: "gi/fresh_policy_form/form",
-        type: "REDIRECTION_CTA",
-        parameters: [
-          {
-            key: "type",
-            value: "FRESH_POLICY",
-          },
-          {
-            key: "applicationType",
-            value: "FRESH_POLICY",
-          },
-          {
-            key: "landingPageVersion",
-            value: "3",
-          },
-        ],
-      })
-    );
-    // handleActions({
-    //   actionType: WidgetActionTypes.UPDATE_WIDGET_DATA,
-    //   metaData: {
-    //     widgetActionMeta: {
-    //       targetWidgetId: "title_widget_1",
-    //       keyPath: "subtitle.text",
-    //       newValue: "THIS IS THE SUBTITLE"
-    //     }
-    //   }
-    // }
-    // );
-  };
-
-  return (
-    <View style={widgetStyle}>
-      <TouchableOpacity onPress={handleButtonClick}>
-        <Text>Click me</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default ButtonTestWidget;

components/widgets/card-with-icon-widget/CardWithIconWidget.tsx

@@ -1,14 +1,12 @@
-import { View, ViewStyle } from "react-native";
+import { TouchableOpacity, View } from "react-native";
-import { CardWithIconWidgetData } from "../../../App/common/interface/widgets/widgetData/CardWithIconWidgetData";
+import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
-import { styles } from "./CardWithIconWidgetStyle";
+import { CardWithIconWidgetData } from "../../../App/common/interface/widgets/widgetData/CardWithIconWidgetData";
-import { StyledText } from "../styled-text/StyledText";
-import CtaButton from "../../reusable/cta-button/CtaButton";
 import { StyledImage } from "../../StyledImage";
-import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
+import CtaButton from "../../reusable/cta-button/CtaButton";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { StyledText } from "../styled-text/StyledText";
-
+import { styles } from "./CardWithIconWidgetStyle";
 const CardWithIconWidget = ({
   widgetData,
   handleActions,
@@ -17,7 +15,7 @@ const CardWithIconWidget = ({
   widgetData: CardWithIconWidgetData;
   handleActions: (
     value?: any | undefined | null,
-    screenActionPayload?: GenericActionPayload
+    screenActionPayload?: GenericActionPayload,
   ) => void;
   handleClick?: (cta: CtaData) => void;
 }) => {
@@ -31,7 +29,9 @@ const CardWithIconWidget = ({
       activeOpacity={1}
     >
       <View style={styles.columnContainer}>
-        {widgetData.title?.text && <StyledText textFieldData={widgetData.title} />}
+        {widgetData.title?.text && (
+          <StyledText textFieldData={widgetData.title} />
+        )}
         {widgetData.title?.text && widgetData.subtitle && (
           <View style={commonStyles.verticalSpacer4} />
         )}

components/widgets/sum-insured-carousel-widget/component/CarouselItem.tsx

@@ -1,5 +1,4 @@
-import { TextStyle, ViewStyle } from "react-native";
+import { TextStyle, TouchableWithoutFeedback, ViewStyle } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import Animated, { SharedValue } from "react-native-reanimated";
 import {
   SumInsuredData,
@@ -114,7 +113,7 @@ const SubtitleComponent = ({
                 substring: sub.substring,
                 textStyle: substringStyle,
               };
-            }
+            },
           ),
         }}
       />

components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx

@@ -1,7 +1,5 @@
-
 import { useCallback, useMemo } from "react";
-import { View, ViewStyle } from "react-native";
+import { TouchableWithoutFeedback, View, ViewStyle } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
 import { TitleSubtitleWithAssetWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleSubtitleWithAssetWidgetData";
@@ -22,18 +20,17 @@ const TitleSubtitleWithAssetWidget = ({
   widgetStyle: ViewStyle;
   handleActions: (
     value?: any | undefined | null,
-    screenActionPayload?: GenericActionPayload
+    screenActionPayload?: GenericActionPayload,
   ) => void;
   handleClick?: (cta: CtaData) => void;
   widgetIndex: number;
-  }) => {
+}) => {
   const getBackgroundAsset = () => {
     return useMemo(() => {
       if (widgetData?.backgroundImage?.url) {
         return <StyledImage imageFieldData={widgetData.backgroundImage} />;
       } else if (widgetData?.backgroundLottie?.url) {
-        return <StyledLottie
+        return <StyledLottie lottieFieldData={widgetData.backgroundLottie} />;
-          lottieFieldData={widgetData.backgroundLottie} />;
       } else {
         return <View style={styles.background}></View>;
       }
@@ -44,7 +41,7 @@ const TitleSubtitleWithAssetWidget = ({
       leading: true,
       trailing: false,
     }),
-    [widgetData]
+    [widgetData],
   );
   return (
     <TouchableWithoutFeedback onPress={throttledHandleActions}>
@@ -68,4 +65,4 @@ const TitleSubtitleWithAssetWidget = ({
   );
 };
 
-export default TitleSubtitleWithAssetWidget;
+export default TitleSubtitleWithAssetWidget;