@blocklet/payment-react 1.18.33 → 1.18.34

package/src/payment/form/index.tsx

@@ -13,8 +13,11 @@ import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
+import { fromUnitToToken } from '@ocap/util';
+import DID from '@arcblock/ux/lib/DID';
 
 import isEmpty from 'lodash/isEmpty';
+import { HelpOutline } from '@mui/icons-material';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -37,6 +40,7 @@ import { formatPhone, validatePhoneNumber } from '../../libs/phone-validator';
 import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
+import ConfirmDialog from '../../components/confirm';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -101,6 +105,14 @@ type UserInfo = {
   };
 };
 
+type FastCheckoutInfo = {
+  open: boolean;
+  loading: boolean;
+  sourceType: 'balance' | 'delegation';
+  amount: string;
+  payer?: string;
+};
+
 const setUserFormValues = (
   userInfo: UserInfo,
   currentValues: any,
@@ -159,7 +171,7 @@ export default function PaymentForm({
   isDonation = false,
 }: PageData) {
   // const theme = useTheme();
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
@@ -194,6 +206,7 @@ export default function PaymentForm({
     customer?: TCustomer;
     customerLimited?: boolean;
     stripePaying: boolean;
+    fastCheckoutInfo: FastCheckoutInfo | null;
   }>({
     submitting: false,
     paying: false,
@@ -203,6 +216,7 @@ export default function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
+    fastCheckoutInfo: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -288,6 +302,7 @@ export default function PaymentForm({
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
+  const paymentCurrencyId = useWatch({ control, name: 'payment_currency' });
 
   // const domSize = useSize(document.body);
 
@@ -327,6 +342,9 @@ export default function PaymentForm({
   buttonText = session?.user || isDonation ? buttonText : t('payment.checkout.connect', { action: buttonText });
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
+  const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
+  const showStake = method.type === 'arcblock' && !checkoutSession.subscription_data?.no_stake;
+
   const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
   const showForm = !!session?.user;
   const skipBindWallet = method.type === 'stripe';
@@ -364,6 +382,84 @@ export default function PaymentForm({
     }
   };
 
+  const handleFastCheckoutConfirm = async () => {
+    if (!state.fastCheckoutInfo) return;
+
+    setState({
+      fastCheckoutInfo: {
+        ...state.fastCheckoutInfo,
+        loading: true,
+      },
+    });
+
+    try {
+      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      if (result.data.fastPaid) {
+        setState({
+          fastCheckoutInfo: null,
+          paying: true,
+        });
+        await handleConnected();
+      } else {
+        Toast.error(t('payment.checkout.fastPay.failed'));
+        setState({
+          fastCheckoutInfo: null,
+          paying: true,
+        });
+        openConnect();
+      }
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({
+        fastCheckoutInfo: null,
+      });
+    }
+  };
+
+  const handleFastCheckoutCancel = () => {
+    setState({ fastCheckoutInfo: null });
+  };
+
+  const openConnect = () => {
+    try {
+      if (!['arcblock', 'ethereum', 'base'].includes(method.type)) {
+        return;
+      }
+      setState({ paying: true });
+      connect.open({
+        locale,
+        containerEl: undefined as unknown as Element,
+        action: checkoutSession.mode,
+        prefix: joinURL(getPrefix(), '/api/did'),
+        saveConnect: false,
+        useSocket: isCrossOrigin() === false,
+        extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
+        onSuccess: async () => {
+          connect.close();
+          await handleConnected();
+        },
+        onClose: () => {
+          connect.close();
+          setState({ submitting: false, paying: false });
+        },
+        onError: (err: any) => {
+          console.error(err);
+          setState({ submitting: false, paying: false });
+          onError(err);
+        },
+        messages: {
+          title: t('payment.checkout.connectModal.title', { action: buttonText }),
+          scan: t('payment.checkout.connectModal.scan'),
+          confirm: t('payment.checkout.connectModal.confirm'),
+          cancel: t('payment.checkout.connectModal.cancel'),
+        },
+      } as any);
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
   const onFormSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
@@ -383,36 +479,22 @@ export default function PaymentForm({
       });
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
-        setState({ paying: true });
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
-          await handleConnected();
-        } else {
-          connect.open({
-            containerEl: undefined as unknown as Element,
-            action: checkoutSession.mode,
-            prefix: joinURL(getPrefix(), '/api/did'),
-            saveConnect: false,
-            useSocket: isCrossOrigin() === false,
-            extraParams: { checkoutSessionId: checkoutSession.id, sessionUserDid: session?.user?.did },
-            onSuccess: async () => {
-              connect.close();
-              await handleConnected();
+        if (
+          (result.data.balance?.sufficient || result.data.delegation?.sufficient) &&
+          !isDonationMode &&
+          result.data.fastPayInfo
+        ) {
+          setState({
+            fastCheckoutInfo: {
+              open: true,
+              loading: false,
+              sourceType: result.data.fastPayInfo.type,
+              amount: result.data.fastPayInfo.amount,
+              payer: result.data.fastPayInfo.payer,
             },
-            onClose: () => {
-              connect.close();
-              setState({ submitting: false, paying: false });
-            },
-            onError: (err: any) => {
-              console.error(err);
-              setState({ submitting: false, paying: false });
-              onError(err);
-            },
-            messages: {
-              title: 'DID Connect',
-              scan: 'Use following methods to complete this payment',
-              confirm: 'Confirm',
-            },
-          } as any);
+          });
+        } else {
+          openConnect();
         }
       }
       if (['stripe'].includes(method.type)) {
@@ -514,6 +596,40 @@ export default function PaymentForm({
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
+    <ConfirmDialog
+      onConfirm={handleFastCheckoutConfirm}
+      onCancel={handleFastCheckoutCancel}
+      title={t('payment.checkout.fastPay.title')}
+      message={
+        <Stack>
+          <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+          <Typography>{t('payment.checkout.fastPay.confirmPrompt')}</Typography>
+          <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+          <Stack spacing={1}>
+            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
+              <Typography color="text.primary" sx={{ whiteSpace: 'nowrap' }}>
+                {t('payment.checkout.fastPay.payer')}
+              </Typography>
+              <Typography>
+                <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
+              </Typography>
+            </Stack>
+            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
+              <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
+              <Typography>
+                {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                {paymentCurrency?.symbol}
+              </Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+      }
+      loading={state.fastCheckoutInfo.loading}
+      color="primary"
+    />
+  );
+
   if (onlyShowBtn) {
     return (
       <>
@@ -565,6 +681,7 @@ export default function PaymentForm({
             }}
           />
         )}
+        {FastCheckoutConfirmDialog}
       </>
     );
   }
@@ -695,9 +812,21 @@ export default function PaymentForm({
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
             <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
-              {t('payment.checkout.confirm', { payee })}
+              {showStake
+                ? t('payment.checkout.confirm.withStake', { payee })
+                : t('payment.checkout.confirm.withoutStake', { payee })}
             </Typography>
           )}
+          {checkoutSession.metadata?.page_info?.form_purpose_description && (
+            <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              <HelpOutline sx={{ color: 'text.lighter', fontSize: '0.75rem' }} />
+              <Typography variant="body2" sx={{ fontSize: '0.75rem', color: 'text.lighter' }}>
+                {locale === 'zh'
+                  ? checkoutSession.metadata.page_info.form_purpose_description.zh
+                  : checkoutSession.metadata.page_info.form_purpose_description.en}
+              </Typography>
+            </Box>
+          )}
         </Stack>
       </Fade>
       {state.customerLimited && (
@@ -725,6 +854,7 @@ export default function PaymentForm({
           }}
         />
       )}
+      {FastCheckoutConfirmDialog}
     </>
   );
 }