[付款頁面] 後端回傳錯誤時切換到錯誤訊息頁面 (#1084)

* push toast on known error * Redirect to falsy result on backend provided error * Add back console log * Fix error icon warning * Handle undefined error * Fix destructing values * Rename variables
goodjoblife · May 4, 2023 · 4dfec00 · 4dfec00
1 parent 5730c86
commit 4dfec00
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/src/apis/payment.js b/src/apis/payment.js
@@ -28,7 +28,15 @@ export const checkoutSubscriptionWithPrime = ({
       },
     },
     token,
-  }).then(({ checkoutSubscriptionWithPrime: { paymentUrl } }) => paymentUrl);
+  }).then(
+    ({
+      checkoutSubscriptionWithPrime: {
+        paymentRecord: { id },
+        paymentUrl,
+        error,
+      },
+    }) => [error ? error.message : null, id, paymentUrl],
+  );
 
 const getPaymentRecord = token => paymentRecordId =>
   graphqlClient({

diff --git a/src/components/Buy/PaymentSection/useForm.js b/src/components/Buy/PaymentSection/useForm.js
@@ -1,7 +1,10 @@
 import { useCallback, useState } from 'react';
+import { useHistory } from 'react-router';
 import { useToken } from 'hooks/auth';
 import useTapPay from './useTapPay';
 import { checkoutSubscriptionWithPrime } from '../../../apis/payment';
+import usePushToast from 'hooks/toastNotification/usePushToast';
+import { NOTIFICATION_TYPE } from 'constants/toastNotification';
 
 const useForm = ({ tapPayCard, loadTapPayCard, skuId, isPrimary }) => {
   const [activeCardType, setActiveCardType] = useState('unknown');
@@ -12,23 +15,35 @@ const useForm = ({ tapPayCard, loadTapPayCard, skuId, isPrimary }) => {
     setCanGetPrime(update.canGetPrime);
   }, []);
 
+  const pushToast = usePushToast();
+  const history = useHistory();
+
   const token = useToken();
   const handlePrime = useCallback(
     async prime => {
       try {
-        const paymentUrl = await checkoutSubscriptionWithPrime({
+        const [
+          errorMessage,
+          paymentId,
+          paymentUrl,
+        ] = await checkoutSubscriptionWithPrime({
           token,
           prime,
           skuId,
           isPrimary,
         });
+        if (errorMessage) {
+          // Some error arises.
+          history.push(`/buy/result/${paymentId}`);
+          return;
+        }
         window.location = paymentUrl;
       } catch (error) {
-        // TODO: Error handling
+        pushToast(NOTIFICATION_TYPE.ALERT, '發生未知錯誤。');
         console.error(error);
       }
     },
-    [isPrimary, skuId, token],
+    [history, isPrimary, pushToast, skuId, token],
   );
 
   const submit = useTapPay({

diff --git a/src/components/common/icons/CloseNoCircle.js b/src/components/common/icons/CloseNoCircle.js
@@ -10,8 +10,8 @@ const CloseNoCircle = props => (
     {...props}
   >
     <title>x</title>
-    <g id="icons" stroke="none" stroke-width="1" fill-rule="evenodd">
-      <g id="x" fill-rule="nonzero">
+    <g id="icons" stroke="none" strokeWidth="1" fillRule="evenodd">
+      <g id="x" fillRule="nonzero">
         <path
           d={`M145.29003,2.7097656 C143.570709,0.975547058 141.229771,1.49332653e-16 138.787634,
 0 C136.345497,-1.50064675e-16 134.004559,0.975547058 132.285237,2.7097656 L74,60.9906013 L15.7147626,

diff --git a/src/graphql/payment.js b/src/graphql/payment.js
@@ -1,7 +1,13 @@
 export const checkoutSubscriptionWithPrimeMutation = `
   mutation($input: CheckoutSubscriptionWithPrimeInput!) {
     checkoutSubscriptionWithPrime(input: $input) {
+      paymentRecord {
+        id
+      }
       paymentUrl
+      error {
+        message
+      }
     }
   }
 `;