payment-kit 1.13.15

package/src/app.tsx

@@ -0,0 +1,68 @@
+import './global.css';
+
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+import { ThemeProvider, createTheme } from '@arcblock/ux/lib/Theme';
+import { ToastProvider } from '@arcblock/ux/lib/Toast';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { joinURL } from 'ufo';
+
+import ErrorFallback from './components/error-fallback';
+import { SessionProvider } from './contexts/session';
+import { translations } from './locales';
+
+const HomePage = React.lazy(() => import('./pages/home'));
+const CheckoutPage = React.lazy(() => import('./pages/checkout'));
+const AdminPage = React.lazy(() => import('./pages/admin'));
+const CustomerHome = React.lazy(() => import('./pages/customer/index'));
+const CustomerInvoice = React.lazy(() => import('./pages/customer/invoice'));
+
+const theme = createTheme({
+  typography: {
+    fontSize: 14,
+    allVariants: {
+      textTransform: 'none',
+    },
+  },
+});
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <LocaleProvider translations={translations} fallbackLocale="en">
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
+            <Route key="admin-index" path="/admin" element={<AdminPage />} />,
+            <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
+            <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+            <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
+            <Route key="customer-home" path="/customer" element={<CustomerHome />} />,
+            <Route key="customer-invoice" path="/customer/invoice/:id" element={<CustomerInvoice />} />,
+            <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
+            <Route path="*" element={<Navigate to="/" />} />
+          </Routes>
+        </ErrorBoundary>
+      </LocaleProvider>
+    </ThemeProvider>
+  );
+}
+
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const prefix = window?.blocklet?.prefix || '/';
+
+  return (
+    <ToastProvider>
+      <SessionProvider
+        serviceHost={prefix}
+        protectedRoutes={['/admin/*', '/customer/*'].map((item) => joinURL(prefix, item))}>
+        <Router basename={prefix}>
+          <App />
+        </Router>
+      </SessionProvider>
+    </ToastProvider>
+  );
+}

package/src/components/actions.tsx

@@ -0,0 +1,85 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { ExpandMoreOutlined, MoreHorizOutlined } from '@mui/icons-material';
+import { Button, IconButton, ListItemText, Menu, MenuItem } from '@mui/material';
+import React, { useState } from 'react';
+import type { LiteralUnion } from 'type-fest';
+
+type ActionItem = {
+  label: string;
+  handler: Function;
+  color: LiteralUnion<'primary' | 'secondary' | 'error', string>;
+  disabled?: boolean;
+  divider?: boolean;
+  dense?: boolean;
+};
+
+export type ActionsProps = {
+  actions: ActionItem[];
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+  sx?: any;
+};
+
+Actions.defaultProps = {
+  variant: 'compact',
+  sx: {},
+};
+
+export default function Actions(props: ActionsProps) {
+  const { t } = useLocaleContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const onOpen = (e: React.SyntheticEvent<any>) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    setAnchorEl(e.currentTarget);
+  };
+
+  const onClose = (e: React.SyntheticEvent<any>, handler?: Function) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    setAnchorEl(null);
+
+    if (typeof handler === 'function') {
+      handler();
+    }
+  };
+
+  return (
+    <>
+      {props.variant === 'compact' ? (
+        <IconButton aria-label="actions" sx={props.sx} aria-haspopup="true" onClick={onOpen} size="small">
+          <MoreHorizOutlined />
+        </IconButton>
+      ) : (
+        <Button sx={props.sx} onClick={onOpen} size="small" variant="contained" color="primary">
+          {t('common.actions')} <ExpandMoreOutlined fontSize="small" />
+        </Button>
+      )}
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        // @ts-ignore
+        onClose={onClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
+        {props.actions.map((action) => (
+          <MenuItem
+            key={action.label}
+            divider={!!action.divider}
+            dense={!!action.dense}
+            disabled={!!action.disabled}
+            onClick={(e) => onClose(e, action.handler)}>
+            <ListItemText primary={action.label} primaryTypographyProps={{ color: action.color }} />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/src/components/blockchain/tx.tsx

@@ -0,0 +1,29 @@
+import type { TPaymentMethod } from '@did-pay/types';
+import { OpenInNewOutlined } from '@mui/icons-material';
+import { Link, Stack, Typography } from '@mui/material';
+import { joinURL } from 'ufo';
+
+const getTxLink = (method: TPaymentMethod, hash: string) => {
+  if (method.type === 'arcblock') {
+    return joinURL(method.settings.arcblock?.explorer_host as string, '/tx', hash);
+  }
+  if (method.type === 'bitcoin') {
+    return joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', hash);
+  }
+  if (method.type === 'ethereum') {
+    return joinURL(method.settings.ethereum?.explorer_host as string, '/tx', hash);
+  }
+
+  return hash;
+};
+
+export default function TxLink(props: { hash: string; method: TPaymentMethod }) {
+  return (
+    <Link href={getTxLink(props.method, props.hash)} target="_blank" rel="noopener noreferrer">
+      <Stack component="span" direction="row" alignItems="center" spacing={1}>
+        <Typography component="span">{props.hash}</Typography>
+        <OpenInNewOutlined fontSize="small" />
+      </Stack>
+    </Link>
+  );
+}

package/src/components/checkout/amount.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material';
+
+type Props = { amount: string; sx?: any };
+
+export default function PaymentAmount({ amount, sx }: Props) {
+  return (
+    <Typography
+      sx={{
+        my: 0.5,
+        fontWeight: 600,
+        fontSize: '2.5rem',
+        lineHeight: '1.3',
+        letterSpacing: '-0.03rem',
+        fontVariantNumeric: 'tabular-nums',
+        ...sx,
+      }}>
+      {amount}
+    </Typography>
+  );
+}
+
+PaymentAmount.defaultProps = {
+  sx: {},
+};

package/src/components/checkout/error.tsx

@@ -0,0 +1,30 @@
+import { Button, Stack, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+type Props = {
+  title: string;
+  description: string;
+  button?: string;
+};
+
+export default function PaymentError({ title, description, button }: Props) {
+  return (
+    <Stack sx={{ height: '100vh' }} alignItems="center" justifyContent="center">
+      <Stack sx={{ width: '280px' }} direction="column" alignItems="center" justifyContent="center">
+        <Typography variant="h5" sx={{ mb: 2 }}>
+          {title}
+        </Typography>
+        <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
+          {description}
+        </Typography>
+        <Button variant="text" size="small" component={Link} to={window.blocklet.appUrl}>
+          {button}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+PaymentError.defaultProps = {
+  button: 'Back',
+};

package/src/components/checkout/footer.tsx

@@ -0,0 +1,12 @@
+import { Typography } from '@mui/material';
+
+export default function CheckoutFooter({ ...props }) {
+  return (
+    <Typography color="text.secondary" fontSize={12} {...props}>
+      Powered by{' '}
+      <Typography component="span" sx={{ fontWeight: 'bold', fontSize: 12 }}>
+        ArcBlock
+      </Typography>
+    </Typography>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Fade, Stack, Typography } from '@mui/material';
+
+import FormInput from '../../input';
+
+type Props = {
+  mode: string;
+};
+
+export default function AddressForm({ mode }: Props) {
+  const { t } = useLocaleContext();
+  return (
+    <Fade in>
+      <Stack className="cko-payment-address cko-payment-form">
+        <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t(`checkout.billing.${mode}`)}</Typography>
+        <Stack direction="column" className="cko-payment-form" spacing={0}>
+          <FormInput name="billing_address.country" variant="outlined" placeholder={t('checkout.billing.country')} />
+          {mode === 'required' && (
+            <FormInput name="billing_address.state" variant="outlined" placeholder={t('checkout.billing.state')} />
+          )}
+          {mode === 'required' && (
+            <FormInput name="billing_address.line1" variant="outlined" placeholder={t('checkout.billing.line1')} />
+          )}
+          <Stack direction="row" spacing={0}>
+            {mode === 'required' && (
+              <FormInput name="billing_address.city" variant="outlined" placeholder={t('checkout.billing.city')} />
+            )}
+            <FormInput
+              name="billing_address.postal_code"
+              variant="outlined"
+              placeholder={t('checkout.billing.postal_code')}
+            />
+          </Stack>
+        </Stack>
+      </Stack>
+    </Fade>
+  );
+}

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

@@ -0,0 +1,295 @@
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@did-pay/types';
+import { InfoOutlined } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Tooltip, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import pWaitFor from 'p-wait-for';
+import { useEffect } from 'react';
+import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form';
+
+import { useSessionContext } from '../../../contexts/session';
+import api from '../../../libs/api';
+import { formatError, getStatementDescriptor } from '../../../libs/util';
+import FormInput from '../../input';
+import AddressForm from './address';
+
+const waitForCheckoutComplete = (sessionId: string) => {
+  return pWaitFor(
+    async () => {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${sessionId}`);
+      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;
+};
+
+PaymentFormInner.defaultProps = {
+  paymentIntent: null,
+  customer: null,
+};
+
+// FIXME: https://stripe.com/docs/elements/address-element
+// FIXME: https://github.com/goveo/react-international-phone | https://catamphetamine.gitlab.io/react-phone-number-input/
+// TODO: https://github.com/rocktimsaikia/react-country-dropdown
+// TODO: https://country-regions.github.io/react-country-region-selector/
+// FIXME: add form validation
+export function PaymentFormInner({ checkoutSession, paymentMethods, paymentIntent, onPaid, onError }: PageData) {
+  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;
+  }>({
+    submitting: false,
+    paying: false,
+    paid: false,
+    paymentIntent,
+  });
+
+  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 currencies = paymentMethods.find((x) => x.id === getValues().payment_method)?.payment_currencies || [];
+  const payee = getStatementDescriptor(checkoutSession.line_items);
+  const buttonText = session.user
+    ? t(`checkout.${checkoutSession.mode}`)
+    : t('checkout.connect', { action: t(`checkout.${checkoutSession.mode}`) });
+
+  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 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, submitting: false, paying: true });
+      if (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);
+          },
+        });
+      }
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setState({ submitting: false });
+    }
+  };
+
+  const onAction = async () => {
+    if (session.user) {
+      await handleSubmit(onSubmit)();
+    } else {
+      session.login({
+        onSuccess: () => {},
+        extraParams: {},
+      });
+    }
+  };
+
+  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>
+            <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <LocaleSelector showText={false} />
+              <SessionManager session={session} />
+            </Stack>
+          </Stack>
+          <Stack direction="column" className="cko-payment-form" spacing={0}>
+            <FormInput
+              name="customer_name"
+              variant="outlined"
+              InputProps={{
+                startAdornment: <InputAdornment position="start">{t('checkout.customer.name')}</InputAdornment>,
+              }}
+            />
+            <FormInput
+              name="customer_email"
+              variant="outlined"
+              InputProps={{
+                startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,
+              }}
+            />
+            {checkoutSession.phone_number_collection?.enabled && (
+              <FormInput
+                name="customer_phone"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: <InputAdornment position="start">{t('checkout.customer.phone')}</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Tooltip title={t('checkout.customer.phoneTip')} arrow>
+                        <InfoOutlined fontSize="small" sx={{ cursor: 'pointer' }} />
+                      </Tooltip>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            )}
+          </Stack>
+        </Stack>
+      </Fade>
+      <AddressForm mode={checkoutSession.billing_address_collection as string} />
+      <Fade in>
+        <Stack 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} sx={{ flex: 1 }} size="small">
+                  {paymentMethods.map((x) => {
+                    const selected = x.id === getValues().payment_method;
+                    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">
+                  {currencies.map((x) => {
+                    const selected = x.id === getValues().payment_currency;
+                    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>
+        </Stack>
+      </Fade>
+      <Fade in>
+        <Stack className="cko-payment-submit">
+          <LoadingButton
+            variant="contained"
+            color="primary"
+            size="large"
+            onClick={onAction}
+            fullWidth
+            loadingPosition="end"
+            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>
+    </>
+  );
+}
+
+export default function PaymentForm(props: PageData) {
+  const { session } = useSessionContext();
+  const { customer, checkoutSession, paymentMethods } = props;
+
+  const methods = useForm({
+    defaultValues: {
+      customer_name: customer?.name || session.user?.fullName || '',
+      customer_email: customer?.email || session.user?.email || '',
+      customer_phone: customer?.phone || session.user?.phone || '',
+      payment_method: paymentMethods[0]?.id || '', // FIXME: use default payment method
+      payment_currency: checkoutSession.currency_id || '',
+      billing_address: Object.assign(
+        {
+          country: '',
+          state: '',
+          city: '',
+          line1: '',
+          line2: '',
+          postal_code: '',
+        },
+        customer?.address || {}
+      ),
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <PaymentFormInner {...props} />
+    </FormProvider>
+  );
+}
+
+PaymentForm.defaultProps = {
+  paymentIntent: null,
+  customer: null,
+};

package/src/components/checkout/header.tsx

@@ -0,0 +1,23 @@
+import type { TCheckoutSessionExpanded } from '@did-pay/types';
+import { Avatar, Stack, Typography } from '@mui/material';
+import { useLocalStorageState } from 'ahooks';
+
+import { getStatementDescriptor } from '../../libs/util';
+import Livemode from '../livemode';
+
+type Props = {
+  checkoutSession: TCheckoutSessionExpanded;
+};
+
+export default function PaymentHeader({ checkoutSession }: Props) {
+  const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
+  const brand = getStatementDescriptor(checkoutSession.line_items);
+
+  return (
+    <Stack className="cko-header" direction="row" spacing={1} alignItems="center">
+      <Avatar src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
+      <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
+      {!livemode && <Livemode />}
+    </Stack>
+  );
+}