degica · tharindu-rhino · Aug 26, 2024 · Aug 26, 2024 · Aug 26, 2024 · Aug 26, 2024
diff --git a/payment_sdk/src/assets/images/awaitingPayment.png b/payment_sdk/src/assets/images/awaitingPayment.png
diff --git a/payment_sdk/src/components/PaymentModal.tsx b/payment_sdk/src/components/PaymentModal.tsx
@@ -79,11 +79,11 @@ const PaymentModal = ({
   const getCtaText = () => {
     switch (paymentState) {
       case ResponseScreenStatuses.SUCCESS:
+      case ResponseScreenStatuses.COMPLETE:
+      case ResponseScreenStatuses.CANCELLED:
         return paymentSuccessCtaText;
       case ResponseScreenStatuses.FAILED:
         return paymentFailedCtaText;
-      case ResponseScreenStatuses.CANCELLED:
-        return paymentSuccessCtaText;
       default:
         return "";
     }
@@ -92,14 +92,14 @@ const PaymentModal = ({
   const ctaOnPress = () => {
     switch (paymentState) {
       case ResponseScreenStatuses.SUCCESS:
+      case ResponseScreenStatuses.COMPLETE:
+      case ResponseScreenStatuses.CANCELLED:
         return closeSheet(false);
       case ResponseScreenStatuses.FAILED:
         return dispatch({
           type: Actions.SET_PAYMENT_STATE,
           payload: "",
         });
-      case ResponseScreenStatuses.CANCELLED:
-        return closeSheet(false);
       default:
         return "";
     }
@@ -110,8 +110,6 @@ const PaymentModal = ({
       !(
         paymentState === ResponseScreenStatuses.SUCCESS ||
         paymentState === ResponseScreenStatuses.CANCELLED ||
-        // TODO: Fix this type error
-        // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'.
         paymentState === ResponseScreenStatuses.COMPLETE
       )
     );
@@ -128,26 +126,24 @@ const PaymentModal = ({
 
       <View style={styles.bottomSheetContainer}>
         <View style={styles.line}>
-          <KomojuText style={styles.headerLabel}>{!paymentState ? 'PAYMENT_OPTIONS' : ''}</KomojuText>
+          <KomojuText style={styles.headerLabel}>
+            {!paymentState ? "PAYMENT_OPTIONS" : ""}
+          </KomojuText>
           <TouchableOpacity style={styles.crossBtn} onPress={onCloseModal}>
             <Image
               source={mode === ThemeModes.light ? closeIcon : closeDMIcon}
             />
           </TouchableOpacity>
         </View>
-        {
-          // TODO: Fix this type error
-          // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'.
-          paymentState && paymentState !== ResponseScreenStatuses.COMPLETE ? (
-            <ResponseScreen
-              status={paymentState}
-              onPress={ctaOnPress}
-              onPressLabel={getCtaText()}
-            />
-          ) : (
-            <SheetContent />
-          )
-        }
+        {paymentState ? (
+          <ResponseScreen
+            status={paymentState}
+            onPress={ctaOnPress}
+            onPressLabel={getCtaText()}
+          />
+        ) : (
+          <SheetContent />
+        )}
       </View>
     </Modal>
   );

diff --git a/payment_sdk/src/components/ResponseScreen.tsx b/payment_sdk/src/components/ResponseScreen.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 
-import { Image, StyleSheet, View } from "react-native";
+import { Image, StyleSheet, View, ImageSourcePropType } from "react-native";
 
 import { ResponseScreenStatuses, ThemeSchemeType } from "@util/types";
 
@@ -10,8 +10,38 @@ import { useCurrentTheme } from "@theme/useCurrentTheme";
 import KomojuText from "./KomojuText";
 import SubmitButton from "./SubmitButton";
 
+type StatusConfig = {
+  title: string;
+  defaultMessage: string;
+  image: ImageSourcePropType;
+};
+
+// Configuration object for all statuses
+const statusConfigs: Partial<Record<ResponseScreenStatuses, StatusConfig>> = {
+  [ResponseScreenStatuses.SUCCESS]: {
+    title: "PAYMENT_SUCCESS",
+    defaultMessage: "ORDER_THANK_YOU_NOTE",
+    image: require("../assets/images/success.png"),
+  },
+  [ResponseScreenStatuses.FAILED]: {
+    title: "PAYMENT_FAILED",
+    defaultMessage: "PAYMENT_RE_TRY_MSG",
+    image: require("../assets/images/error.png"),
+  },
+  [ResponseScreenStatuses.CANCELLED]: {
+    title: "PAYMENT_CANCELLED",
+    defaultMessage: "PAYMENT_CANCELLED_MSG",
+    image: require("../assets/images/error.png"),
+  },
+  [ResponseScreenStatuses.COMPLETE]: {
+    title: "PAYMENT_WAITING",
+    defaultMessage: "PAYMENT_CANCELLED_MSG",
+    image: require("../assets/images/awaitingPayment.png"),
+  },
+};
+
 type Props = {
-  status: ResponseScreenStatuses.SUCCESS | ResponseScreenStatuses.FAILED | ResponseScreenStatuses.CANCELLED;
+  status: ResponseScreenStatuses;
   message?: string;
   onPressLabel: string;
   onPress: () => void;
@@ -21,32 +51,22 @@ const ResponseScreen = ({ status, message, onPress, onPressLabel }: Props) => {
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 
+  const statusConfig = statusConfigs[status];
+
   const renderMessageContent = useMemo(() => {
-    const title =
-      status === ResponseScreenStatuses.SUCCESS
-        ? "PAYMENT_SUCCESS" : status === ResponseScreenStatuses.CANCELLED ?
-          "PAYMENT_CANCELLED" : "PAYMENT_FAILED";
-    const defaultMessage =
-      status === ResponseScreenStatuses.SUCCESS
-        ? "ORDER_THANK_YOU_NOTE" : status === ResponseScreenStatuses.CANCELLED ?
-          "PAYMENT_CANCELLED_MSG" : "PAYMENT_RE_TRY_MSG";
-    const msg = message || defaultMessage;
+    const msg = message || statusConfig?.defaultMessage;
 
     return (
       <View style={styles.container}>
-        <KomojuText style={styles.title}>{title}</KomojuText>
+        <KomojuText style={styles.title}>{statusConfig?.title}</KomojuText>
         <KomojuText style={styles.message}>{msg}</KomojuText>
       </View>
     );
-  }, [status, message]);
+  }, [status, message, statusConfig]);
 
   const renderIcon = useMemo(() => {
-    const source =
-      status === ResponseScreenStatuses.SUCCESS
-        ? require("../assets/images/success.png")
-        : require("../assets/images/error.png");
-    return <Image source={source} style={styles.icon} />;
-  }, [status]);
+    return <Image source={statusConfig?.image} style={styles.icon} />;
+  }, [statusConfig]);
 
   const memoizedOnPress = useCallback(onPress, [onPress]);
 

diff --git a/payment_sdk/src/components/Sheet.tsx b/payment_sdk/src/components/Sheet.tsx
@@ -168,11 +168,11 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
   const getCtaText = () => {
     switch (paymentState) {
       case ResponseScreenStatuses.SUCCESS:
+      case ResponseScreenStatuses.COMPLETE:
+      case ResponseScreenStatuses.CANCELLED:
         return paymentSuccessCtaText;
       case ResponseScreenStatuses.FAILED:
         return paymentFailedCtaText;
-      case ResponseScreenStatuses.CANCELLED:
-        return paymentSuccessCtaText;
       default:
         return "";
     }
@@ -181,14 +181,14 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
   const ctaOnPress = () => {
     switch (paymentState) {
       case ResponseScreenStatuses.SUCCESS:
+      case ResponseScreenStatuses.COMPLETE:
+      case ResponseScreenStatuses.CANCELLED:
         return closeSheet(false);
       case ResponseScreenStatuses.FAILED:
         return dispatch({
           type: Actions.SET_PAYMENT_STATE,
           payload: "",
         });
-      case ResponseScreenStatuses.CANCELLED:
-        return closeSheet(false);
       default:
         return "";
     }
@@ -218,8 +218,6 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
                 !(
                   paymentState === ResponseScreenStatuses.SUCCESS ||
                   paymentState === ResponseScreenStatuses.CANCELLED ||
-                  // TODO: Fix this type error
-                  // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'.
                   paymentState === ResponseScreenStatuses.COMPLETE
                 )
               )
@@ -230,18 +228,15 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
             />
           </TouchableOpacity>
         </RNAnimated.View>
-        {
-          // TODO: Fix this type error
-          paymentState ? (
-            <ResponseScreen
-              status={paymentState}
-              onPress={ctaOnPress}
-              onPressLabel={getCtaText()}
-            />
-          ) : (
-            <SheetContent />
-          )
-        }
+        {paymentState ? (
+          <ResponseScreen
+            status={paymentState}
+            onPress={ctaOnPress}
+            onPressLabel={getCtaText()}
+          />
+        ) : (
+          <SheetContent />
+        )}
       </RNAnimated.View>
     </>
   );

diff --git a/payment_sdk/src/context/MainStateProvider.tsx b/payment_sdk/src/context/MainStateProvider.tsx
@@ -71,12 +71,15 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     setModalVisible(false);
   };
 
-  // when payment is success global state is rest and invoking the success screen
-  const onPaymentSuccess = () => {
+  const resetGlobalStates = () =>
     dispatch({
       type: Actions.RESET_STATES,
       payload: initialState,
     });
+
+  // when payment is success global state is rest and invoking the success screen
+  const onPaymentSuccess = () => {
+    resetGlobalStates();
     dispatch({
       type: Actions.SET_PAYMENT_STATE,
       payload: ResponseScreenStatuses.SUCCESS,
@@ -92,15 +95,21 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
 
   // when payment is cancelled by the user
   const onPaymentCancelled = () => {
+    resetGlobalStates();
     dispatch({
-      type: Actions.RESET_STATES,
-      payload: initialState,
+      type: Actions.SET_PAYMENT_STATE,
+      payload: ResponseScreenStatuses.CANCELLED,
     });
+  };
+
+  // when payment is completed but awaiting payment
+  const onPaymentAwaiting = () => {
+    resetGlobalStates();
     dispatch({
       type: Actions.SET_PAYMENT_STATE,
-      payload: ResponseScreenStatuses.CANCELLED,
+      payload: ResponseScreenStatuses.COMPLETE,
     });
-  }
+  };
 
   const onUserCancel = async () => {
     if (onDismissCallback.current) {
@@ -200,7 +209,10 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     let sessionResponse = await sessionShow(sessionShowPayload);
 
     // Polling until session verification status changes
-    while (sessionResponse?.status === PaymentStatuses.PENDING && sessionResponse?.payment?.status !== PaymentStatuses.CANCELLED) {
+    while (
+      sessionResponse?.status === PaymentStatuses.PENDING &&
+      sessionResponse?.payment?.status !== PaymentStatuses.CANCELLED
+    ) {
       sessionResponse = await sessionShow(sessionShowPayload);
     }
 
@@ -243,14 +255,13 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
 
       if (response?.status === PaymentStatuses.PENDING) {
         openURL(response.redirect_url);
-      } else if (
-        response?.status === PaymentStatuses.SUCCESS &&
-        response?.payment?.payment_details?.instructions_url
-      ) {
-        openURL(response?.payment?.payment_details?.instructions_url);
-        onPaymentSuccess();
       } else if (response?.status === PaymentStatuses.SUCCESS) {
-        onPaymentSuccess();
+        if (response?.payment?.status === PaymentStatuses.SUCCESS) {
+          onPaymentSuccess();
+        } else if (response?.payment?.payment_details?.instructions_url) {
+          openURL(response?.payment?.payment_details?.instructions_url);
+          onPaymentAwaiting();
+        }
       } else {
         onPaymentFailed();
       }
@@ -259,10 +270,7 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
 
   const createPayment = useCallback(
     ({ sessionId, onComplete, onDismiss }: CreatePaymentFuncType) => {
-      dispatch({
-        type: Actions.RESET_STATES,
-        payload: initialState,
-      });
+      resetGlobalStates();
 
       // setting client provided onComplete callback into a ref
       // TODO: Fix this type error

diff --git a/payment_sdk/src/util/types.ts b/payment_sdk/src/util/types.ts
@@ -74,7 +74,7 @@ export enum PaymentStatuses {
   ERROR = "error",
   SUCCESS = "completed",
   PENDING = "pending",
-  CANCELLED = 'cancelled'
+  CANCELLED = "cancelled",
 }
 
 export enum TokenResponseStatuses {
@@ -92,7 +92,7 @@ export enum ResponseScreenStatuses {
   /** For displaying payment instruction screens and disabling the cancel payment popup */
   COMPLETE = "complete",
   /** For displaying payment instruction screens for cancelled by the user */
-  CANCELLED = 'cancelled',
+  CANCELLED = "cancelled",
 }
 
 export enum CurrencySign {
@@ -154,6 +154,7 @@ export type SessionPayResponseType = {
   status: string;
   payment: {
     payment_details: { instructions_url: string };
+    status?: string;
   };
 };
 
@@ -183,7 +184,7 @@ export type SessionShowResponseType = {
     payment_details: {
       instructions_url?: string;
     };
-    status?: string
+    status?: string;
   };
 };
 
@@ -242,6 +243,7 @@ export type State = CardDetailsType &
      */
     paymentState:
       | ResponseScreenStatuses.SUCCESS
+      | ResponseScreenStatuses.COMPLETE
       | ResponseScreenStatuses.FAILED
       | ResponseScreenStatuses.CANCELLED
       | "";