payment-kit 1.13.111 → 1.13.113

package/src/components/checkout/form/index.tsx

@@ -1,400 +0,0 @@
-import 'react-international-phone/style.css';
-
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useTheme } from '@arcblock/ux/lib/Theme';
-import Toast from '@arcblock/ux/lib/Toast';
-import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@did-pay/types';
-import { LoadingButton } from '@mui/lab';
-import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from '@mui/material';
-import { useCreation, useSetState, useSize } from 'ahooks';
-import { PhoneNumberUtil } from 'google-libphonenumber';
-import pWaitFor from 'p-wait-for';
-import { useEffect } from 'react';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
-import { dispatch } from 'use-bus';
-import isEmail from 'validator/es/lib/isEmail';
-
-import { useSessionContext } from '../../../contexts/session';
-import api from '../../../libs/api';
-import { formatError, getStatementDescriptor } from '../../../libs/util';
-import FormInput from '../../input';
-import AddressForm from './address';
-import PhoneInput from './phone';
-import StripeCheckout from './stripe';
-import UserButtons from './user-buttons';
-
-const phoneUtil = PhoneNumberUtil.getInstance();
-
-const waitForCheckoutComplete = (sessionId: string) => {
-  return pWaitFor(
-    async () => {
-      const { data } = await api.get(`/api/checkout-sessions/retrieve/${sessionId}`);
-      if (
-        data.paymentIntent &&
-        data.paymentIntent.status === 'requires_action' &&
-        data.paymentIntent.last_payment_error
-      ) {
-        throw new Error(data.paymentIntent.last_payment_error.message);
-      }
-
-      return (
-        data.checkoutSession?.status === 'complete' &&
-        ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status)
-      );
-    },
-    { interval: 2000, timeout: 3 * 60 * 1000 }
-  );
-};
-
-type PageData = {
-  onPaid: Function;
-  onError: Function;
-  checkoutSession: TCheckoutSessionExpanded;
-  paymentMethods: TPaymentMethodExpanded[];
-  paymentIntent?: TPaymentIntent;
-  customer?: TCustomer;
-};
-
-PaymentForm.defaultProps = {
-  paymentIntent: null,
-  customer: null,
-};
-
-// FIXME: https://stripe.com/docs/elements/address-element
-// TODO: https://country-regions.github.io/react-country-region-selector/
-// https://www.npmjs.com/package/postal-codes-js
-// https://www.npmjs.com/package/val-zip
-// https://npm.runkit.com/zips
-export default function PaymentForm({
-  checkoutSession,
-  paymentMethods,
-  paymentIntent,
-  customer,
-  onPaid,
-  onError,
-}: PageData) {
-  const theme = useTheme();
-  const { t } = useLocaleContext();
-  const { session, connectApi } = useSessionContext();
-  const { control, getValues, setValue, handleSubmit } = useFormContext();
-  const [state, setState] = useSetState<{
-    submitting: boolean;
-    paying: boolean;
-    paid: boolean;
-    paymentIntent?: TPaymentIntent;
-    stripeContext?: {
-      client_secret: string;
-      intent_type: string;
-      status: string;
-    };
-    customer?: TCustomer;
-    stripePaying: boolean;
-  }>({
-    submitting: false,
-    paying: false,
-    paid: false,
-    paymentIntent,
-    stripeContext: undefined,
-    customer,
-    stripePaying: false,
-  });
-
-  useEffect(() => {
-    if (session.user) {
-      const values = getValues();
-      if (!values.customer_name) {
-        setValue('customer_name', session.user.fullName);
-      }
-      if (!values.customer_email) {
-        setValue('customer_email', session.user.email);
-      }
-      if (!values.customer_phone) {
-        setValue('customer_phone', session.user.phone);
-      }
-    }
-  }, [session.user, getValues, setValue]);
-
-  const paymentMethod = useWatch({ control, name: 'payment_method' });
-  const paymentCurrency = useWatch({ control, name: 'payment_currency' });
-  const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
-
-  const domSize = useSize(document.body);
-
-  const isColumnLayout = useCreation(() => {
-    if (domSize) {
-      if (domSize?.width <= theme.breakpoints.values.md) {
-        return true;
-      }
-    }
-    return false;
-  }, [domSize, theme]);
-
-  const payee = getStatementDescriptor(checkoutSession.line_items);
-  const buttonText = session.user
-    ? t(`checkout.${checkoutSession.mode}`)
-    : t('checkout.connect', { action: t(`checkout.${checkoutSession.mode}`) });
-
-  const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
-
-  const handleMethodChange = (e: any) => {
-    setValue('payment_method', e.target.value);
-    const currencies = paymentMethods.find((x) => x.id === e.target.value)?.payment_currencies || [];
-    if (currencies.some((x) => x.id === paymentCurrency) === false) {
-      setValue('payment_currency', currencies[0]?.id);
-    }
-  };
-
-  const handleConnected = async () => {
-    try {
-      await waitForCheckoutComplete(checkoutSession.id);
-      setState({ paid: true, paying: false });
-      onPaid();
-    } catch (err) {
-      Toast.error(formatError(err));
-    } finally {
-      setState({ paying: false });
-    }
-  };
-
-  const onUserLoggedIn = async () => {
-    const { data: profile } = await api.get('/api/customers/me');
-    if (profile) {
-      const values = getValues();
-      if (!values.customer_name) {
-        setValue('customer_name', profile.name);
-      }
-      if (!values.customer_email) {
-        setValue('customer_email', profile.email);
-      }
-      if (!values.customer_phone) {
-        setValue('customer_phone', profile.phone);
-      }
-      if (profile.address?.country) {
-        setValue('billing_address.country', profile.address.country);
-      }
-      if (profile.address?.state) {
-        setValue('billing_address.state', profile.address.state);
-      }
-      if (profile.address?.line1) {
-        setValue('billing_address.line1', profile.address.line1);
-      }
-      if (profile.address?.line2) {
-        setValue('billing_address.line2', profile.address.line2);
-      }
-      if (profile.address?.city) {
-        setValue('billing_address.city', profile.address.city);
-      }
-      if (profile.address?.postal_code) {
-        setValue('billing_address.postal_code', profile.address.postal_code);
-      }
-    }
-  };
-
-  const onSubmit = async (data: any) => {
-    setState({ submitting: true });
-    try {
-      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
-
-      setState({
-        paymentIntent: result.data.paymentIntent,
-        stripeContext: result.data.stripeContext,
-        customer: result.data.customer,
-        submitting: false,
-      });
-
-      if (['arcblock', 'ethereum'].includes(method.type)) {
-        setState({ paying: true });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
-          await handleConnected();
-        } else {
-          connectApi.open({
-            action: checkoutSession.mode,
-            timeout: 5 * 60 * 1000,
-            extraParams: { checkoutSessionId: checkoutSession.id },
-            onSuccess: async () => {
-              connectApi.close();
-              await handleConnected();
-            },
-            onClose: () => {
-              connectApi.close();
-              setState({ submitting: false, paying: false });
-            },
-            onError: (err: any) => {
-              setState({ submitting: false, paying: false });
-              onError(err);
-            },
-          });
-        }
-      }
-      if (['stripe'].includes(method.type)) {
-        if (result.data.stripeContext?.status === 'succeeded') {
-          setState({ paying: true });
-        } else {
-          setState({ stripePaying: true });
-        }
-      }
-    } catch (err) {
-      if (err.response?.data?.code) {
-        dispatch(`error.${err.response?.data?.code}`);
-      }
-      Toast.error(formatError(err));
-    } finally {
-      setState({ submitting: false });
-    }
-  };
-
-  const onAction = () => {
-    if (session.user) {
-      handleSubmit(onSubmit)();
-    } else {
-      session.login({
-        onSuccess: onUserLoggedIn,
-        extraParams: {},
-      });
-    }
-  };
-
-  const onStripeConfirm = async () => {
-    setState({ stripePaying: false, paying: true });
-    await handleConnected();
-  };
-
-  const onStripeCancel = () => {
-    setState({ stripePaying: false });
-  };
-
-  return (
-    <>
-      <Fade in>
-        <Stack className="cko-payment-contact">
-          <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
-            <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('checkout.contact')}</Typography>
-            {isColumnLayout ? null : <UserButtons />}
-          </Stack>
-          <Stack direction="column" className="cko-payment-form" spacing={0}>
-            <FormInput
-              name="customer_name"
-              variant="outlined"
-              errorPosition="right"
-              rules={{
-                required: t('checkout.required'),
-              }}
-              InputProps={{
-                startAdornment: <InputAdornment position="start">{t('checkout.customer.name')}</InputAdornment>,
-              }}
-            />
-            <FormInput
-              name="customer_email"
-              variant="outlined"
-              errorPosition="right"
-              rules={{
-                required: t('checkout.required'),
-                validate: (x) => (isEmail(x) ? true : t('checkout.invalid')),
-              }}
-              InputProps={{
-                startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,
-              }}
-            />
-            {checkoutSession.phone_number_collection?.enabled && (
-              <PhoneInput
-                name="customer_phone"
-                variant="outlined"
-                errorPosition="right"
-                placeholder="Phone number"
-                rules={{
-                  required: t('checkout.required'),
-                  validate: (x: string) => {
-                    try {
-                      const parsed = phoneUtil.parseAndKeepRawInput(x);
-                      return phoneUtil.isValidNumber(parsed) ? true : t('checkout.invalid');
-                    } catch {
-                      return t('checkout.invalid');
-                    }
-                  },
-                }}
-              />
-            )}
-          </Stack>
-        </Stack>
-      </Fade>
-      <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
-      <Fade in>
-        <Stack direction="column" className="cko-payment-methods">
-          <Typography sx={{ mb: 2, color: 'text.primary', fontWeight: 600 }}>{t('checkout.method')}</Typography>
-          <Stack direction="row" spacing={1}>
-            <Controller
-              name="payment_method"
-              control={control}
-              render={({ field }) => (
-                <Select {...field} onChange={handleMethodChange} sx={{ flex: 1 }} size="small">
-                  {paymentMethods.map((x) => {
-                    const selected = x.id === paymentMethod;
-                    return (
-                      <MenuItem key={x.id} value={x.id}>
-                        <Stack direction="row" spacing={1}>
-                          <Avatar src={x.logo} alt={x.name} sx={{ width: 20, height: 20 }} />
-                          <Typography color={selected ? 'text.primary' : 'text.secondary'}>{x.name}</Typography>
-                        </Stack>
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              )}
-            />
-            <Controller
-              name="payment_currency"
-              control={control}
-              render={({ field }) => (
-                <Select {...field} sx={{ flex: 1 }} size="small">
-                  {paymentCurrencies.map((x) => {
-                    const selected = x.id === paymentCurrency;
-                    return (
-                      <MenuItem key={x.id} value={x.id}>
-                        <Stack direction="row" spacing={1}>
-                          <Avatar src={x.logo} alt={x.name} sx={{ width: 20, height: 20 }} />
-                          <Typography color={selected ? 'text.primary' : 'text.secondary'}>{x.symbol}</Typography>
-                        </Stack>
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              )}
-            />
-          </Stack>
-          {state.stripePaying && state.stripeContext && (
-            <StripeCheckout
-              clientSecret={state.stripeContext.client_secret}
-              intentType={state.stripeContext.intent_type}
-              publicKey={method.settings.stripe?.publishable_key as string}
-              customer={state.customer as TCustomer}
-              mode={checkoutSession.mode}
-              onConfirm={onStripeConfirm}
-              onCancel={onStripeCancel}
-            />
-          )}
-        </Stack>
-      </Fade>
-      <Fade in>
-        <Stack className="cko-payment-submit">
-          <LoadingButton
-            variant="contained"
-            color="primary"
-            size="large"
-            onClick={onAction}
-            fullWidth
-            loadingPosition="end"
-            disabled={state.submitting || state.paying || state.stripePaying}
-            loading={state.submitting || state.paying}>
-            {state.submitting || state.paying ? t('checkout.processing') : buttonText}
-          </LoadingButton>
-          {['subscription', 'setup'].includes(checkoutSession.mode) && (
-            <Typography
-              sx={{ mt: 1, color: 'text.secondary', fontSize: '0.9rem', lineHeight: '1.1rem', textAlign: 'center' }}>
-              {t('checkout.confirm', { payee })}
-            </Typography>
-          )}
-        </Stack>
-      </Fade>
-    </>
-  );
-}

package/src/components/checkout/form/phone.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable react/prop-types */
-import { InputAdornment, MenuItem, Select, Typography } from '@mui/material';
-import omit from 'lodash/omit';
-import { useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
-
-import { isValidCountry } from '../../../libs/util';
-import FormInput from '../../input';
-
-export default function PhoneInput({ ...props }) {
-  const countryFieldName = props.countryFieldName || 'billing_address.country';
-
-  const { control, getValues, setValue } = useFormContext();
-  const values = getValues();
-
-  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
-    defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
-    value: values[props.name] || '',
-    countries: defaultCountries,
-    onChange: (data) => {
-      setValue(props.name, data.phone);
-    },
-  });
-
-  const userCountry = useWatch({ control, name: countryFieldName });
-
-  useEffect(() => {
-    if (userCountry !== country) {
-      setCountry(userCountry);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userCountry]);
-
-  const onCountryChange = (e: any) => {
-    setCountry(e.target.value as CountryIso2);
-    setValue(countryFieldName, e.target.value);
-  };
-
-  return (
-    // @ts-ignore
-    <FormInput
-      value={phone}
-      onChange={handlePhoneValueChange}
-      type="tel"
-      inputRef={inputRef}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-            <Select
-              MenuProps={{
-                style: {
-                  height: '300px',
-                  width: '360px',
-                  top: '10px',
-                  left: '-34px',
-                },
-                transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'left',
-                },
-              }}
-              sx={{
-                width: 'max-content',
-                // Remove default outline (display only on focus)
-                fieldset: {
-                  display: 'none',
-                },
-                '&.Mui-focused:has(div[aria-expanded="false"])': {
-                  fieldset: {
-                    display: 'block',
-                  },
-                },
-                // Update default spacing
-                '.MuiSelect-select': {
-                  padding: '8px',
-                  paddingRight: '24px !important',
-                },
-                svg: {
-                  right: 0,
-                },
-              }}
-              value={country}
-              onChange={onCountryChange}
-              renderValue={(code) => <FlagEmoji iso2={code} style={{ display: 'flex' }} />}>
-              {defaultCountries.map((c) => {
-                const parsed = parseCountry(c);
-                return (
-                  <MenuItem key={parsed.iso2} value={parsed.iso2}>
-                    <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
-                    <Typography marginRight="8px">{parsed.name}</Typography>
-                    <Typography color="gray">+{parsed.dialCode}</Typography>
-                  </MenuItem>
-                );
-              })}
-            </Select>
-          </InputAdornment>
-        ),
-      }}
-      {...omit(props, ['countryFieldName'])}
-    />
-  );
-}

package/src/components/checkout/form/stripe.tsx

@@ -1,195 +0,0 @@
-import Center from '@arcblock/ux/lib/Center';
-import Dialog from '@arcblock/ux/lib/Dialog';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TCustomer } from '@did-pay/types';
-import { LoadingButton } from '@mui/lab';
-import { CircularProgress, Typography } from '@mui/material';
-import { styled } from '@mui/system';
-import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
-import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
-
-type StripeCheckoutFormProps = {
-  clientSecret: string;
-  intentType: string;
-  customer: TCustomer;
-  mode: string;
-  onConfirm: Function;
-};
-
-// @doc https://stripe.com/docs/js/elements_object/create_payment_element
-function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }: StripeCheckoutFormProps) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const { t } = useLocaleContext();
-
-  const [state, setState] = useSetState({
-    message: '',
-    confirming: false,
-    loaded: false,
-  });
-
-  useEffect(() => {
-    if (!stripe) {
-      return;
-    }
-
-    if (!clientSecret) {
-      return;
-    }
-
-    const method = intentType === 'payment_intent' ? 'retrievePaymentIntent' : 'retrieveSetupIntent';
-    stripe[method](clientSecret).then(({ paymentIntent, setupIntent }: any) => {
-      const intent = paymentIntent || setupIntent;
-      switch (intent?.status) {
-        case 'succeeded':
-          setState({ message: t('paymentCredit.preparePayMessage.succeeded') });
-          break;
-        case 'processing':
-          setState({ message: t('paymentCredit.preparePayMessage.processing') });
-          break;
-        case 'requires_payment_method': // 忽略该状态
-        default:
-          break;
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stripe, clientSecret]);
-
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-
-    if (!stripe || !elements) {
-      return;
-    }
-
-    try {
-      setState({ confirming: true });
-      const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
-      const { error } = await stripe[method]({
-        elements,
-        redirect: 'if_required',
-        confirmParams: {
-          payment_method_data: {
-            billing_details: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address,
-            },
-          },
-        },
-      });
-
-      setState({ confirming: false });
-      if (error) {
-        if (error.type === 'validation_error') {
-          return;
-        }
-
-        setState({ message: error.message as string });
-        return;
-      }
-
-      onConfirm();
-    } catch (err) {
-      console.error(err);
-      setState({ confirming: false, message: err.message as string });
-    }
-  };
-
-  return (
-    <Content onSubmit={handleSubmit}>
-      <PaymentElement
-        options={{ layout: 'auto', fields: { billingDetails: 'never' }, readOnly: state.confirming }}
-        onReady={() => setState({ loaded: true })}
-      />
-      {(!stripe || !elements || !state.loaded) && (
-        <Center relative="parent">
-          <CircularProgress />
-        </Center>
-      )}
-      {stripe && elements && state.loaded && (
-        <LoadingButton
-          fullWidth
-          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '1.1rem' }}
-          type="submit"
-          disabled={state.confirming || !state.loaded}
-          loading={state.confirming}
-          loadingPosition="end"
-          variant="contained"
-          color="primary"
-          size="large">
-          {t('checkout.continue', { action: mode })}
-        </LoadingButton>
-      )}
-      {state.message && <Typography sx={{ mt: 1, color: 'error.main' }}>{state.message}</Typography>}
-    </Content>
-  );
-}
-
-const Content = styled('form')`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 320px;
-`;
-
-type StripeCheckoutProps = {
-  clientSecret: string;
-  intentType: string;
-  publicKey: string;
-  mode: string;
-  customer: TCustomer;
-  onConfirm: Function;
-  onCancel: Function;
-};
-
-export default function StripeCheckout({
-  clientSecret,
-  intentType,
-  publicKey,
-  mode,
-  customer,
-  onConfirm,
-  onCancel,
-}: StripeCheckoutProps) {
-  const stripePromise = loadStripe(publicKey);
-  const { t } = useLocaleContext();
-  const [state, setState] = useSetState({
-    open: true,
-    closable: true,
-  });
-
-  const handleClose = (_: any, reason: string) => {
-    if (reason === 'backdropClick') {
-      return;
-    }
-
-    setState({ open: false });
-    onCancel();
-  };
-
-  return (
-    <Dialog
-      title={t('checkout.cardPay', { action: t(`checkout.${mode}`) })}
-      showCloseButton={state.closable}
-      open={state.open}
-      onClose={handleClose}
-      disableEscapeKeyDown>
-      <Elements options={{ clientSecret }} stripe={stripePromise}>
-        <StripeCheckoutForm
-          clientSecret={clientSecret}
-          intentType={intentType}
-          mode={mode}
-          customer={customer}
-          onConfirm={onConfirm}
-        />
-      </Elements>
-    </Dialog>
-  );
-}