user cancelled the flow on web fix

payment_sdk/src/assets/languages/en.json

@@ -39,8 +39,10 @@
     "CANCEL_PAYMENT": "Cancel Payment",
     "PAYMENT_SUCCESS": "Payment Success",
     "PAYMENT_FAILED": "Payment Failed",
+    "PAYMENT_CANCELLED": "Payment Canceled",
     "ORDER_THANK_YOU_NOTE": "Thank you for your order",
     "PAYMENT_RE_TRY_MSG": "We tried to charge your card but, something went wrong. Please update your payment method below to continue",
+    "PAYMENT_CANCELLED_MSG": "We noticed that you’ve canceled the payment process. If this was a mistake, you can try again to complete your purchase.",
     "BACK_TO_STORE": "Back to store",
     "UPDATE_PAYMENT_METHOD": "Update payment method",
 

payment_sdk/src/assets/languages/ja.json

@@ -38,9 +38,11 @@
       "NO": "いいえ",  
       "CANCEL_PAYMENT": "支払いのキャンセル",      
       "PAYMENT_SUCCESS": "支払い完了",      
-      "PAYMENT_FAILED": "支払いができませんでした",      
+      "PAYMENT_FAILED": "支払いができませんでした",   
+      "PAYMENT_CANCELLED": "支払いがキャンセルされました",   
       "ORDER_THANK_YOU_NOTE": "ご購入ありがとうございました",      
       "PAYMENT_RE_TRY_MSG": "入力していただいたカードで支払いを行うことができませんでした。別の支払い方法を試してみてください。",
+      "PAYMENT_CANCELLED_MSG": "お支払いプロセスがキャンセルされたことを確認しました。もしこれが誤りであれば、再度お試しいただき、購入を完了してください。",
       "BACK_TO_STORE": "ストアに戻る",      
       "UPDATE_PAYMENT_METHOD": "支払い方法を変更する",    
 

payment_sdk/src/components/PaymentModal.tsx

@@ -82,6 +82,8 @@ const PaymentModal = ({
         return paymentSuccessCtaText;
       case ResponseScreenStatuses.FAILED:
         return paymentFailedCtaText;
+      case ResponseScreenStatuses.CANCELLED:
+        return paymentSuccessCtaText;
       default:
         return "";
     }
@@ -96,6 +98,8 @@ const PaymentModal = ({
           type: Actions.SET_PAYMENT_STATE,
           payload: "",
         });
+      case ResponseScreenStatuses.CANCELLED:
+        return closeSheet(false);
       default:
         return "";
     }
@@ -105,6 +109,7 @@ const PaymentModal = ({
     closeSheet(
       !(
         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
@@ -123,7 +128,7 @@ const PaymentModal = ({
 
       <View style={styles.bottomSheetContainer}>
         <View style={styles.line}>
-          <KomojuText style={styles.headerLabel}>PAYMENT_OPTIONS</KomojuText>
+          <KomojuText style={styles.headerLabel}>{!paymentState ? 'PAYMENT_OPTIONS' : ''}</KomojuText>
           <TouchableOpacity style={styles.crossBtn} onPress={onCloseModal}>
             <Image
               source={mode === ThemeModes.light ? closeIcon : closeDMIcon}

payment_sdk/src/components/ResponseScreen.tsx

@@ -11,7 +11,7 @@ import KomojuText from "./KomojuText";
 import SubmitButton from "./SubmitButton";
 
 type Props = {
-  status: ResponseScreenStatuses.SUCCESS | ResponseScreenStatuses.FAILED;
+  status: ResponseScreenStatuses.SUCCESS | ResponseScreenStatuses.FAILED | ResponseScreenStatuses.CANCELLED;
   message?: string;
   onPressLabel: string;
   onPress: () => void;
@@ -24,12 +24,12 @@ const ResponseScreen = ({ status, message, onPress, onPressLabel }: Props) => {
   const renderMessageContent = useMemo(() => {
     const title =
       status === ResponseScreenStatuses.SUCCESS
-        ? "PAYMENT_SUCCESS"
-        : "PAYMENT_FAILED";
+        ? "PAYMENT_SUCCESS" : status === ResponseScreenStatuses.CANCELLED ?
+          "PAYMENT_CANCELLED" : "PAYMENT_FAILED";
     const defaultMessage =
       status === ResponseScreenStatuses.SUCCESS
-        ? "ORDER_THANK_YOU_NOTE"
-        : "PAYMENT_RE_TRY_MSG";
+        ? "ORDER_THANK_YOU_NOTE" : status === ResponseScreenStatuses.CANCELLED ?
+          "PAYMENT_CANCELLED_MSG" : "PAYMENT_RE_TRY_MSG";
     const msg = message || defaultMessage;
 
     return (

payment_sdk/src/components/Sheet.tsx

@@ -171,6 +171,8 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
         return paymentSuccessCtaText;
       case ResponseScreenStatuses.FAILED:
         return paymentFailedCtaText;
+      case ResponseScreenStatuses.CANCELLED:
+        return paymentSuccessCtaText;
       default:
         return "";
     }
@@ -185,6 +187,8 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
           type: Actions.SET_PAYMENT_STATE,
           payload: "",
         });
+      case ResponseScreenStatuses.CANCELLED:
+        return closeSheet(false);
       default:
         return "";
     }
@@ -213,6 +217,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
               closeSheet(
                 !(
                   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
@@ -227,8 +232,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
         </RNAnimated.View>
         {
           // TODO: Fix this type error
-          // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'.
-          paymentState && paymentState !== ResponseScreenStatuses.COMPLETE ? (
+          paymentState ? (
             <ResponseScreen
               status={paymentState}
               onPress={ctaOnPress}

payment_sdk/src/context/MainStateProvider.tsx

@@ -90,6 +90,18 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
       payload: ResponseScreenStatuses.FAILED,
     });
 
+  // when payment is cancelled by the user
+  const onPaymentCancelled = () => {
+    dispatch({
+      type: Actions.RESET_STATES,
+      payload: initialState,
+    });
+    dispatch({
+      type: Actions.SET_PAYMENT_STATE,
+      payload: ResponseScreenStatuses.CANCELLED,
+    });
+  }
+
   const onUserCancel = async () => {
     if (onDismissCallback.current) {
       const sessionShowPayload = {
@@ -188,7 +200,7 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
     let sessionResponse = await sessionShow(sessionShowPayload);
 
     // Polling until session verification status changes
-    while (sessionResponse?.status === PaymentStatuses.PENDING) {
+    while (sessionResponse?.status === PaymentStatuses.PENDING && sessionResponse?.payment?.status !== PaymentStatuses.CANCELLED) {
       sessionResponse = await sessionShow(sessionShowPayload);
     }
 
@@ -203,6 +215,8 @@ export const MainStateProvider = (props: KomojuProviderIprops) => {
         // TODO: Fix this type error
         // @ts-expect-error - Argument of type 'PaymentSessionResponse' is not assignable to parameter of type 'string'.
         onCompleteCallback.current(sessionResponse);
+    } else if (sessionResponse?.payment?.status === PaymentStatuses.CANCELLED) {
+      onPaymentCancelled();
     } else {
       onPaymentFailed();
     }

payment_sdk/src/util/types.ts

@@ -74,6 +74,7 @@ export enum PaymentStatuses {
   ERROR = "error",
   SUCCESS = "completed",
   PENDING = "pending",
+  CANCELLED = 'cancelled'
 }
 
 export enum TokenResponseStatuses {
@@ -90,6 +91,8 @@ export enum ResponseScreenStatuses {
   FAILED = "failed",
   /** 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',
 }
 
 export enum CurrencySign {
@@ -180,6 +183,7 @@ export type SessionShowResponseType = {
     payment_details: {
       instructions_url?: string;
     };
+    status?: string
   };
 };
 
@@ -239,6 +243,7 @@ export type State = CardDetailsType &
     paymentState:
       | ResponseScreenStatuses.SUCCESS
       | ResponseScreenStatuses.FAILED
+      | ResponseScreenStatuses.CANCELLED
       | "";
     /**
      * States of the Bank transfer and Pay Easy fields.