@blocklet/payment-react 1.13.113

package/src/payment/header.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
+import { Avatar, Stack, Typography } from '@mui/material';
+import { useCreation, useLocalStorageState, useSize } from 'ahooks';
+
+import Livemode from '../components/livemode';
+import { getStatementDescriptor } from '../util';
+import UserButtons from './form/addon';
+
+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 isColumnLayout = 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>
+      {isColumnLayout ? <UserButtons /> : null}
+    </Stack>
+  );
+}

package/src/payment/index.tsx

@@ -0,0 +1,367 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TCustomer, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-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 api from '../api';
+import { usePaymentContext } from '../contexts/payment';
+import { CheckoutCallbacks, CheckoutContext } from '../types';
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../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 = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any };
+
+Payment.defaultProps = {
+  completed: false,
+  error: null,
+};
+
+export default function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  error,
+  mode,
+  onPaid,
+  onError,
+}: Props) {
+  const { t } = useLocaleContext();
+  const { refresh, livemode, setLivemode } = usePaymentContext();
+
+  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 (
+      <Root mode={mode}>
+        <Stack className="cko-container">
+          <Stack className="cko-overview">
+            <OverviewSkeleton />
+          </Stack>
+          <Stack className="cko-payment">
+            <PaymentSkeleton />
+          </Stack>
+          <CheckoutFooter className="cko-footer" />
+        </Stack>
+      </Root>
+    );
+  }
+
+  // expired session
+  if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
+    return (
+      <PaymentError
+        title={t('payment.checkout.expired.title')}
+        description={t('payment.checkout.expired.description')}
+      />
+    );
+  }
+
+  // completed session
+  if (checkoutSession.status === 'complete') {
+    return (
+      <PaymentError
+        title={t('payment.checkout.complete.title')}
+        description={t('payment.checkout.complete.description')}
+      />
+    );
+  }
+
+  return (
+    <PaymentInner
+      checkoutSession={checkoutSession}
+      paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+      paymentLink={paymentLink}
+      paymentIntent={paymentIntent}
+      completed={completed}
+      customer={customer as TCustomer}
+      onPaid={onPaid}
+      onError={onError}
+      mode={mode}
+    />
+  );
+}
+
+type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean };
+
+PaymentInner.defaultProps = {
+  completed: false,
+};
+
+export function PaymentInner({
+  checkoutSession,
+  paymentMethods,
+  paymentLink,
+  paymentIntent,
+  customer,
+  completed,
+  mode,
+  onPaid,
+  onError,
+}: MainProps) {
+  const { t } = useLocaleContext();
+  const { settings, session } = usePaymentContext();
+  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}>
+      <Root mode={mode}>
+        <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(`payment.checkout.completed.${state.checkoutSession.mode}`)
+                }
+              />
+            )}
+            {!completed && (
+              <PaymentForm
+                checkoutSession={state.checkoutSession}
+                paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+                paymentIntent={paymentIntent}
+                customer={customer}
+                onPaid={onPaid}
+                onError={onError}
+                mode={mode}
+              />
+            )}
+          </Stack>
+          <CheckoutFooter className="cko-footer" />
+        </Stack>
+      </Root>
+    </FormProvider>
+  );
+}
+
+export const Root = styled(Box)<{ mode: string }>`
+  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-product-summary {
+  }
+
+  .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/payment/product-card.tsx

@@ -0,0 +1,55 @@
+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, textAlign: 'left' }}
+            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,
+};

package/src/payment/product-item.tsx

@@ -0,0 +1,121 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type {
+  PriceRecurring,
+  TCheckoutSessionExpanded,
+  TLineItemExpanded,
+  TPaymentCurrency,
+} from '@blocklet/payment-types';
+import { Stack, Typography } from '@mui/material';
+
+import Status from '../components/status';
+import Switch from '../components/switch';
+import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../util';
+import ProductCard from './product-card';
+
+type Props = {
+  item: TLineItemExpanded;
+  session: TCheckoutSessionExpanded;
+  currency: TPaymentCurrency;
+  onUpsell: Function;
+  onDownsell: Function;
+  mode?: 'normal' | 'cross-sell';
+  children?: React.ReactNode;
+};
+
+ProductItem.defaultProps = {
+  mode: 'normal',
+  children: null,
+};
+
+export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props) {
+  const { t, locale } = useLocaleContext();
+  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
+  const saving = formatUpsellSaving(session, currency);
+  const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
+  const canUpsell = mode === 'normal' && session.line_items.length === 1;
+  return (
+    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
+      <Stack direction="column" alignItems="flex-end" sx={{ width: '100%' }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+          <ProductCard
+            logo={item.price.product?.images[0]}
+            name={item.price.product?.name}
+            description={item.price.product?.description}
+            extra={
+              item.price.type === 'recurring' && item.price.recurring
+                ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
+                : pricing.quantity
+            }
+          />
+          <Stack direction="column" alignItems="flex-end" flex={1}>
+            <Typography sx={{ color: 'text.primary', fontWeight: 500 }} gutterBottom>
+              {pricing.primary}
+            </Typography>
+            {pricing.secondary && (
+              <Typography sx={{ fontSize: '0.85rem', color: 'text.secondary' }}>{pricing.secondary}</Typography>
+            )}
+          </Stack>
+        </Stack>
+        {children}
+      </Stack>
+      {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+          <Typography
+            component="label"
+            htmlFor="upsell-switch"
+            sx={{
+              fontSize: 12,
+              cursor: 'pointer',
+              color: 'text.primary',
+            }}>
+            <Switch
+              id="upsell-switch"
+              sx={{ mr: 1 }}
+              variant="success"
+              checked={false}
+              onChange={() => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)}
+            />
+            {t('payment.checkout.upsell.save', {
+              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring, true, 'per', locale),
+            })}
+            <Status
+              label={t('payment.checkout.upsell.off', { saving })}
+              color="primary"
+              variant="outlined"
+              sx={{ ml: 1 }}
+            />
+          </Typography>
+          <Typography component="span" sx={{ fontSize: 12 }}>
+            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)}
+          </Typography>
+        </Stack>
+      )}
+      {canUpsell && item.upsell_price_id && (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+          <Typography
+            component="label"
+            htmlFor="upsell-switch"
+            sx={{
+              fontSize: 12,
+              cursor: 'pointer',
+              color: 'text.secondary',
+            }}>
+            <Switch
+              id="upsell-switch"
+              sx={{ mr: 1 }}
+              variant="success"
+              checked
+              onChange={() => onDownsell(item.upsell_price_id)}
+            />
+            {t('payment.checkout.upsell.revert', {
+              recurring: t(`common.${formatRecurring(item.price.recurring as PriceRecurring)}`),
+            })}
+          </Typography>
+          <Typography component="span" sx={{ fontSize: 12 }}>
+            {formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale)}
+          </Typography>
+        </Stack>
+      )}
+    </Stack>
+  );
+}

package/src/payment/product-skeleton.tsx

@@ -0,0 +1,39 @@
+import { Fade, Skeleton, Stack, Typography } from '@mui/material';
+
+export default function ProductSkeleton({ count }: { count: number }) {
+  return (
+    <Fade in>
+      <Stack
+        direction="column"
+        alignItems="center"
+        padding={4}
+        spacing={1}
+        sx={{
+          width: 320,
+          border: '1px solid #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: '#ddd',
+            boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+          },
+        }}>
+        <Typography component="div" variant="h4" sx={{ width: '50%' }}>
+          <Skeleton />
+        </Typography>
+        <Skeleton variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        <Typography component="div" variant="h3" sx={{ width: '60%' }}>
+          <Skeleton />
+        </Typography>
+        <Typography component="div" variant="h3" sx={{ width: '100%' }}>
+          <Skeleton />
+        </Typography>
+        {Array.from({ length: count }).map((_, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Skeleton key={i} variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        ))}
+      </Stack>
+    </Fade>
+  );
+}

package/src/payment/skeleton/overview.tsx

@@ -0,0 +1,21 @@
+import { Fade, Skeleton, Stack, Typography } from '@mui/material';
+
+export default function OverviewSkeleton() {
+  return (
+    <Fade in>
+      <Stack direction="column">
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <Skeleton variant="circular" width={32} height={32} />
+          <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        </Stack>
+        <Typography mt={3} component="div" variant="h4">
+          <Skeleton />
+        </Typography>
+        <Typography component="div" variant="h2">
+          <Skeleton />
+        </Typography>
+        <Skeleton sx={{ mt: 3 }} variant="rounded" width={200} height={200} />
+      </Stack>
+    </Fade>
+  );
+}

package/src/payment/skeleton/payment.tsx

@@ -0,0 +1,35 @@
+import { Box, Fade, Skeleton, Stack, Typography } from '@mui/material';
+
+export default function PaymentSkeleton() {
+  return (
+    <Fade in>
+      <Stack direction="column" spacing={3}>
+        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <Box>
+          <Typography component="div" variant="h4">
+            <Skeleton />
+          </Typography>
+          <Typography component="div" variant="h1">
+            <Skeleton />
+          </Typography>
+        </Box>
+        <Box>
+          <Typography component="div" variant="h4">
+            <Skeleton />
+          </Typography>
+          <Typography component="div" variant="h1">
+            <Skeleton />
+          </Typography>
+        </Box>
+        <Box>
+          <Typography component="div" variant="h4">
+            <Skeleton />
+          </Typography>
+          <Typography component="div" variant="h1">
+            <Skeleton />
+          </Typography>
+        </Box>
+      </Stack>
+    </Fade>
+  );
+}