From d09dde77c17463e59a2d32c08c8380ab4c2418d7 Mon Sep 17 00:00:00 2001 From: chathurapathiranage Date: Thu, 22 Aug 2024 14:38:51 +0530 Subject: [PATCH] user cancelled on web fix --- payment_sdk/src/assets/languages/en.json | 2 ++ payment_sdk/src/assets/languages/ja.json | 4 +++- payment_sdk/src/components/PaymentModal.tsx | 7 ++++++- payment_sdk/src/components/ResponseScreen.tsx | 10 +++++----- payment_sdk/src/components/Sheet.tsx | 8 ++++++-- payment_sdk/src/context/MainStateProvider.tsx | 16 +++++++++++++++- payment_sdk/src/util/types.ts | 5 +++++ 7 files changed, 42 insertions(+), 10 deletions(-) diff --git a/payment_sdk/src/assets/languages/en.json b/payment_sdk/src/assets/languages/en.json index 3f515d8..38c850e 100644 --- a/payment_sdk/src/assets/languages/en.json +++ b/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", diff --git a/payment_sdk/src/assets/languages/ja.json b/payment_sdk/src/assets/languages/ja.json index 38e974e..288744c 100644 --- a/payment_sdk/src/assets/languages/ja.json +++ b/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": "支払い方法を変更する", diff --git a/payment_sdk/src/components/PaymentModal.tsx b/payment_sdk/src/components/PaymentModal.tsx index 2a382cd..affa94d 100644 --- a/payment_sdk/src/components/PaymentModal.tsx +++ b/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 = ({ - PAYMENT_OPTIONS + {!paymentState ? 'PAYMENT_OPTIONS' : ''} 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 ( diff --git a/payment_sdk/src/components/Sheet.tsx b/payment_sdk/src/components/Sheet.tsx index d0d2ea4..dfbc945 100644 --- a/payment_sdk/src/components/Sheet.tsx +++ b/payment_sdk/src/components/Sheet.tsx @@ -171,6 +171,8 @@ const Sheet: ForwardRefRenderFunction = ( return paymentSuccessCtaText; case ResponseScreenStatuses.FAILED: return paymentFailedCtaText; + case ResponseScreenStatuses.CANCELLED: + return paymentSuccessCtaText; default: return ""; } @@ -185,6 +187,8 @@ const Sheet: ForwardRefRenderFunction = ( type: Actions.SET_PAYMENT_STATE, payload: "", }); + case ResponseScreenStatuses.CANCELLED: + return closeSheet(false); default: return ""; } @@ -213,6 +217,7 @@ const Sheet: ForwardRefRenderFunction = ( 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 = ( { // TODO: Fix this type error - // @ts-expect-error - Property 'COMPLETE' does not exist on type 'ResponseScreenStatuses'. - paymentState && paymentState !== ResponseScreenStatuses.COMPLETE ? ( + paymentState ? ( { 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(); } diff --git a/payment_sdk/src/util/types.ts b/payment_sdk/src/util/types.ts index 9ae1955..b95a5b2 100644 --- a/payment_sdk/src/util/types.ts +++ b/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.