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 { GenericActionPayload } from "../../../../../common/actions/GenericAction";
+import { Text, TouchableOpacity, View } from "react-native";
+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)}
-        <Text style={styles.errorTitle}>{ERROR_TITLE}</Text>
-        <Text style={styles.errorSubtitle}>{ERROR_SUBTITLE}</Text>
+        {errorResponse.image && (
+          <AppImage imageCode={errorResponse.image} style={styles.centerIcon} />
+        )}
+        {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,
+      };
+  }
+};