payment-kit 1.13.111 → 1.13.113

package/src/components/checkout/form/user-buttons.tsx

@@ -1,24 +0,0 @@
-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 { Stack, Tooltip } from '@mui/material';
-
-import { useSessionContext } from '../../../contexts/session';
-
-export default function UserButtons() {
-  const { t } = useLocaleContext();
-  const { session } = useSessionContext();
-
-  return (
-    <Stack direction="row" alignItems="center" justifyContent="space-between">
-      <LocaleSelector showText={false} />
-      {session.user ? (
-        <SessionManager session={session} />
-      ) : (
-        <Tooltip title={t('checkout.login')} arrow>
-          <SessionManager session={session} />
-        </Tooltip>
-      )}
-    </Stack>
-  );
-}

package/src/components/checkout/header.tsx

@@ -1,40 +0,0 @@
-import { useTheme } from '@arcblock/ux/lib/Theme';
-import type { TCheckoutSessionExpanded } from '@did-pay/types';
-import { Avatar, Stack, Typography } from '@mui/material';
-import { useCreation, useLocalStorageState, useSize } from 'ahooks';
-
-import { getStatementDescriptor } from '../../libs/util';
-import Livemode from '../livemode';
-import UserButtons from './form/user-buttons';
-
-type Props = {
-  checkoutSession: TCheckoutSessionExpanded;
-};
-
-export default function PaymentHeader({ checkoutSession }: Props) {
-  const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
-  const brand = getStatementDescriptor(checkoutSession.line_items);
-  const theme = useTheme();
-
-  const domSize = useSize(document.body);
-
-  const isCloumnLayout = useCreation(() => {
-    if (domSize) {
-      if (domSize?.width <= theme.breakpoints.values.md) {
-        return true;
-      }
-    }
-    return false;
-  }, [domSize, theme]);
-
-  return (
-    <Stack className="cko-header" direction="row" spacing={1} alignItems="center" justifyContent="space-between">
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
-        <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
-        {!livemode && <Livemode />}
-      </Stack>
-      {isCloumnLayout ? <UserButtons /> : null}
-    </Stack>
-  );
-}

package/src/components/checkout/pay.tsx

@@ -1,385 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
-import type {
-  TCheckoutSessionExpanded,
-  TCustomer,
-  TPaymentCurrency,
-  TPaymentIntent,
-  TPaymentLink,
-  TPaymentMethodExpanded,
-} from '@did-pay/types';
-import { Box, Fade, Stack } from '@mui/material';
-import { styled } from '@mui/system';
-import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-
-import { useSessionContext } from '../../contexts/session';
-import { useSettingsContext } from '../../contexts/settings';
-import api from '../../libs/api';
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../../libs/util';
-import PaymentError from './error';
-import CheckoutFooter from './footer';
-import PaymentForm from './form';
-import PaymentHeader from './header';
-import OverviewSkeleton from './skeleton/overview';
-import PaymentSkeleton from './skeleton/payment';
-import PaymentSuccess from './success';
-import PaymentSummary from './summary';
-
-type Props = {
-  onPaid: (res: any, paymentIntent: TPaymentIntent) => void;
-  onError: (err: any) => void;
-  checkoutSession?: TCheckoutSessionExpanded;
-  paymentMethods?: TPaymentMethodExpanded[];
-  paymentLink?: TPaymentLink;
-  paymentIntent?: TPaymentIntent;
-  customer?: TCustomer;
-  completed?: boolean;
-  error?: any;
-};
-
-CheckoutPay.defaultProps = {
-  checkoutSession: null,
-  paymentMethods: [],
-  paymentLink: null,
-  paymentIntent: null,
-  customer: null,
-  completed: false,
-  error: null,
-};
-
-export default function CheckoutPay({
-  checkoutSession,
-  paymentMethods,
-  paymentIntent,
-  paymentLink,
-  customer,
-  completed,
-  error,
-  onPaid,
-  onError,
-}: Props) {
-  const { t } = useLocaleContext();
-  const { refresh, livemode, setLivemode } = useSettingsContext();
-
-  useEffect(() => {
-    if (checkoutSession) {
-      if (livemode !== checkoutSession.livemode) {
-        setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
-      }
-    }
-  }, [checkoutSession, livemode, setLivemode, refresh]);
-
-  if (error) {
-    return <PaymentError title="Oops" description={formatError(error)} />;
-  }
-
-  if (!checkoutSession) {
-    return (
-      <PaymentRoot>
-        <Stack className="cko-container">
-          <Stack className="cko-overview">
-            <OverviewSkeleton />
-          </Stack>
-          <Stack className="cko-payment">
-            <PaymentSkeleton />
-          </Stack>
-          <CheckoutFooter className="cko-footer" />
-        </Stack>
-      </PaymentRoot>
-    );
-  }
-
-  // expired session
-  if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
-    return <PaymentError title={t('checkout.expired.title')} description={t('checkout.expired.description')} />;
-  }
-
-  // completed session
-  if (checkoutSession.status === 'complete') {
-    return <PaymentError title={t('checkout.complete.title')} description={t('checkout.complete.description')} />;
-  }
-
-  return (
-    <CheckoutPayMain
-      checkoutSession={checkoutSession}
-      paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-      paymentLink={paymentLink}
-      paymentIntent={paymentIntent}
-      completed={completed}
-      customer={customer as TCustomer}
-      onPaid={onPaid}
-      onError={onError}
-    />
-  );
-}
-
-type MainProps = {
-  onPaid: Function;
-  onError: Function;
-  checkoutSession: TCheckoutSessionExpanded;
-  paymentMethods: TPaymentMethodExpanded[];
-  paymentLink?: TPaymentLink;
-  paymentIntent?: TPaymentIntent;
-  customer: TCustomer;
-  completed?: boolean;
-};
-
-CheckoutPayMain.defaultProps = {
-  paymentLink: null,
-  paymentIntent: null,
-  completed: false,
-};
-
-export function CheckoutPayMain({
-  checkoutSession,
-  paymentMethods,
-  paymentLink,
-  paymentIntent,
-  customer,
-  completed,
-  onPaid,
-  onError,
-}: MainProps) {
-  const { t } = useLocaleContext();
-  const { session } = useSessionContext();
-  const { settings } = useSettingsContext();
-  const [state, setState] = useSetState({ checkoutSession });
-
-  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
-  const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
-
-  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: defaultMethodId,
-      payment_currency: defaultCurrencyId,
-      billing_address: Object.assign(
-        {
-          country: '',
-          state: '',
-          city: '',
-          line1: '',
-          line2: '',
-          postal_code: '',
-        },
-        customer?.address || {},
-        { country: isValidCountry(customer?.address?.country || '') ? customer?.address?.country : 'us' }
-      ),
-    },
-  });
-
-  const currencyId = methods.watch('payment_currency') as string;
-  const currency =
-    (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
-    settings.baseCurrency;
-
-  const onUpsell = async (from: string, to: string) => {
-    try {
-      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });
-      setState({ checkoutSession: data });
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
-
-  const onDownsell = async (from: string) => {
-    try {
-      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, { from });
-      setState({ checkoutSession: data });
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
-
-  const onApplyCrossSell = async (to: string) => {
-    try {
-      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, { to });
-      setState({ checkoutSession: data });
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
-
-  const onCancelCrossSell = async () => {
-    try {
-      const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
-      setState({ checkoutSession: data });
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
-
-  return (
-    <FormProvider {...methods}>
-      <PaymentRoot>
-        <Stack className="cko-container">
-          <Fade in>
-            <Stack className="cko-overview" direction="column">
-              <PaymentHeader checkoutSession={state.checkoutSession} />
-              <PaymentSummary
-                checkoutSession={state.checkoutSession}
-                currency={currency}
-                onUpsell={onUpsell}
-                onDownsell={onDownsell}
-                onApplyCrossSell={onApplyCrossSell}
-                onCancelCrossSell={onCancelCrossSell}
-              />
-            </Stack>
-          </Fade>
-          <Stack className="cko-payment" direction="column" spacing={4}>
-            {completed && (
-              <PaymentSuccess
-                payee={getStatementDescriptor(state.checkoutSession.line_items)}
-                action={state.checkoutSession.mode}
-                message={
-                  paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
-                  t(`checkout.completed.${state.checkoutSession.mode}`)
-                }
-              />
-            )}
-            {!completed && (
-              <PaymentForm
-                checkoutSession={state.checkoutSession}
-                paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
-                paymentIntent={paymentIntent}
-                customer={customer}
-                onPaid={onPaid}
-                onError={onError}
-              />
-            )}
-          </Stack>
-          <CheckoutFooter className="cko-footer" />
-        </Stack>
-      </PaymentRoot>
-    </FormProvider>
-  );
-}
-
-export const PaymentRoot = styled(Box)`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  position: relative;
-
-  &:before {
-    animation-fill-mode: both;
-    background: #ffffff;
-    content: '';
-    height: 100%;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transform-origin: right;
-    width: 50%;
-    box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }
-
-  .cko-container {
-    width: 100%;
-    max-width: 1000px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    position: relative;
-    padding: 0 16px;
-  }
-
-  .cko-overview {
-    width: 400px;
-    min-height: 540px;
-    position: relative;
-  }
-  .cko-header {
-    left: 0;
-    margin-bottom: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
-  }
-
-  .cko-payment {
-    width: 400px;
-    .MuiInputBase-root {
-      border-radius: 0;
-    }
-  }
-
-  .cko-payment-form {
-    .MuiInputAdornment-positionStart {
-      width: 50px;
-    }
-
-    .MuiBox-root {
-      border: 1px solid #ccc;
-      margin: -1px 0 0 -1px;
-    }
-
-    .MuiFormHelperText-root {
-      margin-left: 14px;
-    }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-  }
-
-  .cko-payment-methods {
-  }
-
-  .cko-payment-submit {
-    .MuiButtonBase-root {
-      border-radius: 0;
-      font-size: 1.3rem;
-    }
-  }
-
-  .cko-header {
-  }
-
-  .cko-footer {
-    position: absolute;
-    bottom: 0;
-    left: 12px;
-    margin: 12px 0;
-  }
-
-  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    &:before {
-      display: none;
-    }
-    .cko-container {
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-      min-width: 350px;
-      max-width: 400px;
-    }
-    .cko-overview {
-      width: 100%;
-      min-height: auto;
-    }
-    .cko-payment {
-      width: 100%;
-    }
-
-    .cko-footer {
-      position: static;
-      margin-top: 0;
-    }
-  }
-`;

package/src/components/checkout/pricing-table.tsx

@@ -1,205 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
-import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@did-pay/types';
-import { CheckOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
-import {
-  Box,
-  Chip,
-  Fade,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Stack,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-} from '@mui/material';
-import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
-
-import { formatError, formatPriceAmount, formatRecurring } from '../../libs/util';
-import PaymentAmount from './amount';
-
-const groupItemsByRecurring = (items: TPricingTableItem[]) => {
-  const grouped: { [key: string]: TPricingTableItem[] } = {};
-  const recurring: { [key: string]: PriceRecurring } = {};
-
-  items.forEach((x) => {
-    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
-    recurring[key] = x.price.recurring as PriceRecurring;
-
-    if (!grouped[key]) {
-      grouped[key] = [];
-    }
-
-    // @ts-ignore
-    grouped[key].push(x);
-  });
-
-  return { recurring, grouped };
-};
-
-type Props = {
-  table: TPricingTableExpanded;
-  onSelect: (priceId: string) => void;
-  alignItems?: 'center' | 'left';
-  mode?: 'checkout' | 'select';
-  interval?: string;
-};
-
-PricingTable.defaultProps = {
-  alignItems: 'center',
-  mode: 'checkout',
-  interval: '',
-};
-
-export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
-  const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ interval, loading: '' });
-  const { recurring, grouped } = groupItemsByRecurring(table.items);
-
-  useEffect(() => {
-    if (table) {
-      if (!state.interval || !grouped[state.interval]) {
-        const keys = Object.keys(recurring);
-        if (keys[0]) {
-          setState({ interval: keys[0] });
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table]);
-
-  const handleSelect = async (priceId: string) => {
-    try {
-      setState({ loading: priceId });
-      await onSelect(priceId);
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    } finally {
-      setState({ loading: '' });
-    }
-  };
-
-  return (
-    <Stack
-      direction="column"
-      alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
-      sx={{
-        pt: {
-          xs: 4,
-          sm: 2,
-        },
-        gap: {
-          xs: 3,
-          sm: mode === 'select' ? 3 : 5,
-        },
-      }}>
-      {Object.keys(recurring).length > 1 && (
-        <ToggleButtonGroup
-          color="primary"
-          value={state.interval}
-          onChange={(_, value) => {
-            if (value !== null) {
-              setState({ interval: value });
-            }
-          }}
-          exclusive>
-          {Object.keys(recurring).map((x) => (
-            <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-              {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-            </ToggleButton>
-          ))}
-        </ToggleButtonGroup>
-      )}
-      <Stack
-        flexWrap="wrap"
-        direction="row"
-        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
-        justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
-        {grouped[state.interval as string]?.map((x: TPricingTableItem) => {
-          let action = x.subscription_data?.trial_period_days ? t('checkout.try') : t('checkout.subscription');
-          if (mode === 'select') {
-            action = x.is_selected ? t('checkout.selected') : t('checkout.select');
-          }
-
-          return (
-            <Fade key={x.price_id} in>
-              <Stack
-                padding={4}
-                spacing={2}
-                direction="column"
-                alignItems="center"
-                sx={{
-                  width: 320,
-                  cursor: 'pointer',
-                  borderWidth: '1px',
-                  borderStyle: 'solid',
-                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
-                  borderRadius: 1,
-                  transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                  boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
-                  '&:hover': {
-                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
-                  },
-                }}>
-                <Box textAlign="center">
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <Typography variant="h5" color="text.primary" fontWeight={600}>
-                      {x.product.name}
-                    </Typography>
-                    {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
-                  </Stack>
-                  <Typography color="text.secondary">{x.product.description}</Typography>
-                </Box>
-                <Stack direction="row" alignItems="center" spacing={1}>
-                  <PaymentAmount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
-                  <Stack direction="column" alignItems="flex-start">
-                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                      {t('checkout.per')}
-                    </Typography>
-                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                      {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
-                    </Typography>
-                  </Stack>
-                </Stack>
-                <LoadingButton
-                  fullWidth
-                  size="large"
-                  loadingPosition="end"
-                  variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
-                  color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
-                  sx={{ fontSize: '1.2rem' }}
-                  loading={state.loading === x.price_id}
-                  disabled={x.is_disabled}
-                  onClick={() => handleSelect(x.price_id)}>
-                  {action}
-                </LoadingButton>
-                {x.product.features.length > 0 && (
-                  <Box>
-                    <Typography>{t('checkout.include')}</Typography>
-                    <List dense>
-                      {x.product.features.map((f: any) => (
-                        <ListItem key={f.name} disableGutters disablePadding>
-                          <ListItemIcon sx={{ minWidth: 25 }}>
-                            <CheckOutlined color="success" fontSize="small" />
-                          </ListItemIcon>
-                          <ListItemText primary={f.name} />
-                        </ListItem>
-                      ))}
-                    </List>
-                  </Box>
-                )}
-              </Stack>
-            </Fade>
-          );
-        })}
-      </Stack>
-    </Stack>
-  );
-}

package/src/components/checkout/product-card.tsx

@@ -1,52 +0,0 @@
-import { Avatar, Stack, Typography } from '@mui/material';
-import type { LiteralUnion } from 'type-fest';
-
-type Props = {
-  name: string;
-  description?: string;
-  logo?: string;
-  size?: number;
-  extra?: React.ReactNode;
-  variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
-};
-
-// FIXME: @wangshijun add image filter for logo
-export default function ProductCard({ size, variant, name, logo, description, extra }: Props) {
-  const s = { width: size, height: size };
-  return (
-    <Stack direction="row" alignItems="flex-start" spacing={1} flex={2}>
-      {logo ? (
-        // @ts-ignore
-        <Avatar src={logo} alt={name} variant={variant} sx={s} />
-      ) : (
-        // @ts-ignore
-        <Avatar variant={variant} sx={s}>
-          {name.slice(0, 1)}
-        </Avatar>
-      )}
-      <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-        <Typography variant="body1" sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1 }} color="text.primary">
-          {name}
-        </Typography>
-        {description && (
-          <Typography variant="body1" sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1 }} color="text.secondary">
-            {description}
-          </Typography>
-        )}
-        {extra && (
-          <Typography variant="body1" sx={{ fontSize: '0.85rem' }} color="text.secondary">
-            {extra}
-          </Typography>
-        )}
-      </Stack>
-    </Stack>
-  );
-}
-
-ProductCard.defaultProps = {
-  logo: '',
-  size: 48,
-  description: '',
-  variant: 'rounded',
-  extra: undefined,
-};