payment-kit 1.13.15

package/src/components/checkout/pay.tsx

@@ -0,0 +1,222 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type {
+  TCheckoutSessionExpanded,
+  TCustomer,
+  TPaymentIntent,
+  TPaymentLink,
+  TPaymentMethodExpanded,
+} from '@did-pay/types';
+import { Box, Fade, Stack } from '@mui/material';
+import { styled } from '@mui/system';
+import { useEffect } from 'react';
+
+import { useSettingsContext } from '../../contexts/settings';
+import { formatError, getStatementDescriptor } 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 direction="row" 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="Expired Link"
+        description="This link has expired. This means that your payment has already been processed or your session has expired."
+      />
+    );
+  }
+
+  // completed session
+  if (checkoutSession.status === 'complete') {
+    return (
+      <PaymentError
+        title="Checkout Completed"
+        description="This checkout session has completed. This means that your payment has already been successfully processed."
+      />
+    );
+  }
+
+  const brand = getStatementDescriptor(checkoutSession.line_items);
+
+  return (
+    <PaymentRoot>
+      <Stack direction="row" className="cko-container">
+        <Fade in>
+          <Stack className="cko-overview" direction="column">
+            <PaymentHeader checkoutSession={checkoutSession} />
+            <PaymentSummary checkoutSession={checkoutSession} />
+          </Stack>
+        </Fade>
+        <Stack className="cko-payment" direction="column" spacing={4}>
+          {completed && (
+            <PaymentSuccess
+              payee={brand}
+              action={checkoutSession.mode}
+              message={
+                paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
+                t(`checkout.completed.${checkoutSession.mode}`)
+              }
+            />
+          )}
+          {!completed && (
+            <PaymentForm
+              checkoutSession={checkoutSession}
+              paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
+              paymentIntent={paymentIntent}
+              customer={customer}
+              onPaid={onPaid}
+              onError={onError}
+            />
+          )}
+        </Stack>
+        <CheckoutFooter className="cko-footer" />
+      </Stack>
+    </PaymentRoot>
+  );
+}
+
+export const PaymentRoot = styled(Box)`
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  min-height: 0;
+
+  &: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: 920px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    position: relative;
+    transform: translateY(max(48px, calc(50vh - 55%)));
+  }
+
+  .cko-overview {
+    width: 380px;
+  }
+
+  .cko-payment {
+    width: 380px;
+    .MuiInputBase-root {
+      border-radius: 0;
+    }
+  }
+
+  .cko-payment-form {
+    .MuiInputAdornment-positionStart {
+      width: 50px;
+    }
+
+    .MuiBox-root {
+      border: 1px solid #ccc;
+      margin: -1px 0 0 -1px;
+    }
+
+    .MuiOutlinedInput-notchedOutline {
+      border: none;
+    }
+  }
+
+  .cko-payment-methods {
+  }
+
+  .cko-payment-submit {
+    .MuiButtonBase-root {
+      border-radius: 0;
+      font-size: 1.3rem;
+    }
+  }
+
+  .cko-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 12px 0;
+  }
+`;

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

@@ -0,0 +1,56 @@
+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="center" 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 }} color="text.primary" gutterBottom>
+          {name}
+        </Typography>
+        {description && (
+          <Typography
+            variant="body1"
+            sx={{ fontSize: '0.85rem', lineHeight: '120%' }}
+            color="text.secondary"
+            gutterBottom>
+            {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/components/checkout/product-item.tsx

@@ -0,0 +1,37 @@
+import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@did-pay/types';
+import { Stack, Typography } from '@mui/material';
+
+import { formatLineItemPricing, formatRecurring } from '../../libs/util';
+import ProductCard from './product-card';
+
+type Props = {
+  item: TLineItemExpanded;
+  session: TCheckoutSessionExpanded;
+};
+
+export default function ProductItem({ item, session }: Props) {
+  const pricing = formatLineItemPricing(item, session.currency, session.subscription_data?.trial_period_days || 0);
+  const metered = item.price?.recurring?.usage_type === 'metered' ? ' based on usage' : '';
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <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
+            ? `Billed ${formatRecurring(item.price.recurring)} ${metered}`
+            : undefined
+        }
+      />
+      <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>
+  );
+}

package/src/components/checkout/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/components/checkout/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>
+  );
+}

package/src/components/checkout/success.tsx

@@ -0,0 +1,183 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Grow, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { Link } from 'react-router-dom';
+
+type Props = {
+  message: string;
+  action: string;
+  payee: string;
+};
+
+export default function PaymentSuccess({ message, action, payee }: Props) {
+  const { t } = useLocaleContext();
+  return (
+    <Grow in>
+      <Stack direction="column" alignItems="center" justifyContent="center" sx={{ height: 360 }}>
+        <Div>
+          <div className="check-icon">
+            <span className="icon-line line-tip" />
+            <span className="icon-line line-long" />
+            <div className="icon-circle" />
+            <div className="icon-fix" />
+          </div>
+        </Div>
+        <Typography variant="h5" color="text.primary" mb={3}>
+          {message}
+        </Typography>
+        <Typography variant="body1" color="text.secondary" textAlign="center">
+          {t('checkout.completed.tip', { payee })}
+        </Typography>
+        {['subscription', 'setup'].includes(action) && (
+          <Typography textAlign="center" sx={{ mt: 2 }}>
+            <Link to="/customer">{t('checkout.portal', { payee })}</Link>
+          </Typography>
+        )}
+      </Stack>
+    </Grow>
+  );
+}
+
+const Div = styled('div')`
+  width: 80px;
+  height: 115px;
+
+  .check-icon {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid ${(props) => props.theme.palette.success.main};
+  }
+  .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+  }
+  .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+  }
+  .check-icon::before,
+  .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    background: #ffffff;
+    transform: rotate(-45deg);
+  }
+  .check-icon .icon-line {
+    height: 5px;
+    background-color: ${(props) => props.theme.palette.success.main};
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+  }
+  .check-icon .icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+  }
+  .check-icon .icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+  }
+  .check-icon .icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid rgba(76, 175, 80, 0.5);
+  }
+  .check-icon .icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+    background-color: #ffffff;
+  }
+
+  @keyframes rotate-circle {
+    0% {
+      transform: rotate(-45deg);
+    }
+    5% {
+      transform: rotate(-45deg);
+    }
+    12% {
+      transform: rotate(-405deg);
+    }
+    100% {
+      transform: rotate(-405deg);
+    }
+  }
+  @keyframes icon-line-tip {
+    0% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    54% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    70% {
+      width: 50px;
+      left: -8px;
+      top: 37px;
+    }
+    84% {
+      width: 17px;
+      left: 21px;
+      top: 48px;
+    }
+    100% {
+      width: 25px;
+      left: 14px;
+      top: 45px;
+    }
+  }
+  @keyframes icon-line-long {
+    0% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    65% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    84% {
+      width: 55px;
+      right: 0px;
+      top: 35px;
+    }
+    100% {
+      width: 47px;
+      right: 8px;
+      top: 38px;
+    }
+  }
+`;

package/src/components/checkout/summary.tsx

@@ -0,0 +1,34 @@
+import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@did-pay/types';
+import { Fade, Stack, Typography } from '@mui/material';
+
+import { formatCheckoutHeadlines } from '../../libs/util';
+import PaymentAmount from './amount';
+import ProductItem from './product-item';
+
+type Props = {
+  checkoutSession: TCheckoutSessionExpanded;
+};
+
+export default function PaymentSummary({ checkoutSession }: Props) {
+  const headlines = formatCheckoutHeadlines(checkoutSession);
+  return (
+    <Fade in>
+      <Stack className="cko-product" direction="column" sx={{ mt: 4 }}>
+        <Stack className="cko-product-summary" sx={{ mb: 4 }}>
+          <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
+            {headlines.action}
+          </Typography>
+          <PaymentAmount amount={headlines.amount} />
+          {headlines.then && (
+            <Typography sx={{ fontSize: '0.9rem', color: 'text.secondary' }}>{headlines.then}</Typography>
+          )}
+        </Stack>
+        <Stack spacing={2}>
+          {checkoutSession.line_items.map((x: TLineItemExpanded) => (
+            <ProductItem key={x.price_id} item={x} session={checkoutSession} />
+          ))}
+        </Stack>
+      </Stack>
+    </Fade>
+  );
+}

package/src/components/collapse.tsx

@@ -0,0 +1,50 @@
+import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
+import { Box, Collapse, Stack } from '@mui/material';
+import { useState } from 'react';
+
+type Props = {
+  trigger: string | Function | React.ReactNode;
+  children: React.ReactNode;
+  expanded?: boolean;
+  addons?: React.ReactNode;
+  style?: Record<string, any>;
+};
+
+export default function IconCollapse(props: Props) {
+  const [expanded, setExpanded] = useState(props.expanded || false);
+  const toggleExpanded = () => {
+    setExpanded((prev) => !prev);
+  };
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        onClick={toggleExpanded}
+        sx={{
+          width: 1,
+          cursor: 'pointer',
+          fontWeight: 500,
+          color: 'text.primary',
+          '& :hover': { color: 'primary.main' },
+          ...props.style,
+        }}>
+        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger} </Box>
+        <Stack direction="row" alignItems="center" spacing={2}>
+          {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
+        </Stack>
+      </Stack>
+      <Collapse in={expanded}>
+        <Box>{props.children}</Box>
+      </Collapse>
+    </>
+  );
+}
+
+IconCollapse.defaultProps = {
+  expanded: false,
+  addons: null,
+  style: {},
+};

package/src/components/confirm.tsx

@@ -0,0 +1,55 @@
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Typography } from '@mui/material';
+import type { EventHandler } from 'react';
+
+export default function ConfirmDialog({
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  loading,
+}: {
+  onConfirm: EventHandler<any>;
+  onCancel: EventHandler<any>;
+  title: string | React.ReactNode;
+  message: string | React.ReactNode;
+  loading?: boolean;
+}) {
+  const { t } = useLocaleContext();
+  const handleConfirm = (e: any) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    onConfirm(e);
+  };
+  const handleCancel = (e: any) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    onCancel(e);
+  };
+
+  return (
+    <Confirm
+      open
+      title={title}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+      confirmButton={{
+        text: t('common.confirm'),
+        props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },
+      }}
+      cancelButton={{ text: t('common.cancel'), props: { color: 'inherit', size: 'small' } }}>
+      <Typography>{message}</Typography>
+    </Confirm>
+  );
+}
+
+ConfirmDialog.defaultProps = {
+  loading: false,
+};