payment-kit 1.13.111 → 1.13.113

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

@@ -1,111 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
-import { Stack, Typography } from '@mui/material';
-
-import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../../libs/util';
-import Status from '../status';
-import Switch from '../switch';
-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('checkout.upsell.save', {
-              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring, true, 'per', locale),
-            })}
-            <Status label={t('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('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/components/checkout/skeleton/overview.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

@@ -1,198 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
-import { LoadingButton } from '@mui/lab';
-import { Fade, Grow, Stack, Typography, keyframes } from '@mui/material';
-import { useRequest, useSetState } from 'ahooks';
-import noop from 'lodash/noop';
-import useBus from 'use-bus';
-
-import api from '../../libs/api';
-import { formatCheckoutHeadlines } from '../../libs/util';
-import Status from '../status';
-import PaymentAmount from './amount';
-import ProductItem from './product-item';
-
-const shake = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(2deg);
-  }
-  50% {
-    transform: rotate(0eg);
-  }
-  75% {
-    transform: rotate(-2deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-`;
-
-type Props = {
-  checkoutSession: TCheckoutSessionExpanded;
-  currency: TPaymentCurrency;
-  onUpsell: Function;
-  onDownsell: Function;
-  onApplyCrossSell: Function;
-  onCancelCrossSell: Function;
-};
-
-async function fetchCrossSell(id: string) {
-  try {
-    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
-    if (!data.error) {
-      return data;
-    }
-
-    return null;
-  } catch (err) {
-    return null;
-  }
-}
-
-export default function PaymentSummary({
-  checkoutSession,
-  currency,
-  onUpsell,
-  onDownsell,
-  onApplyCrossSell,
-  onCancelCrossSell,
-}: Props) {
-  const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false, shake: false });
-  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
-  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
-
-  useBus(
-    'error.REQUIRE_CROSS_SELL',
-    () => {
-      setState({ shake: true });
-      setTimeout(() => {
-        setState({ shake: false });
-      }, 1000);
-    },
-    []
-  );
-
-  const handleUpsell = async (from: string, to: string) => {
-    await onUpsell(from, to);
-    runAsync();
-  };
-
-  const handleDownsell = async (from: string) => {
-    await onDownsell(from);
-    runAsync();
-  };
-
-  const handleApplyCrossSell = async () => {
-    if (data) {
-      try {
-        setState({ loading: true });
-        await onApplyCrossSell(data.id);
-      } catch (err) {
-        console.error(err);
-      } finally {
-        setState({ loading: false });
-      }
-    }
-  };
-
-  const handleCancelCrossSell = async () => {
-    try {
-      setState({ loading: true });
-      await onCancelCrossSell();
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setState({ loading: false });
-    }
-  };
-
-  return (
-    <Fade in>
-      <Stack
-        className="cko-product"
-        direction="column"
-        sx={{
-          mt: 8,
-        }}>
-        <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}
-              currency={currency}
-              onUpsell={handleUpsell}
-              onDownsell={handleDownsell}>
-              {x.cross_sell && (
-                <LoadingButton
-                  size="small"
-                  loadingPosition="end"
-                  color="error"
-                  variant="text"
-                  loading={state.loading}
-                  onClick={handleCancelCrossSell}>
-                  {t('checkout.cross_sell.remove')}
-                </LoadingButton>
-              )}
-            </ProductItem>
-          ))}
-        </Stack>
-        {data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && (
-          <Grow in>
-            <Stack
-              direction="column"
-              alignItems="flex-end"
-              spacing={0.5}
-              sx={{
-                border: '1px solid #eee',
-                borderRadius: 1,
-                padding: 1,
-                animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
-                mt: {
-                  xs: 4,
-                  md: 8,
-                },
-              }}>
-              <ProductItem
-                item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
-                session={checkoutSession}
-                currency={currency}
-                onUpsell={noop}
-                onDownsell={noop}
-              />
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
-                <Typography>
-                  {checkoutSession.cross_sell_behavior === 'required' && (
-                    <Status label={t('checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
-                  )}
-                </Typography>
-                <LoadingButton
-                  size="small"
-                  loadingPosition="end"
-                  color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
-                  variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
-                  loading={state.loading}
-                  onClick={handleApplyCrossSell}>
-                  {t('checkout.cross_sell.add')}
-                </LoadingButton>
-              </Stack>
-            </Stack>
-          </Grow>
-        )}
-      </Stack>
-    </Fade>
-  );
-}

package/src/components/input.tsx

@@ -1,58 +0,0 @@
-import { Box, FormLabel, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
-import get from 'lodash/get';
-import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
-
-type InputProps = TextFieldProps & {
-  name: string;
-  label?: string;
-  placeholder?: string;
-  errorPosition?: 'right' | 'bottom';
-  rules?: RegisterOptions;
-};
-
-FormInput.defaultProps = {
-  label: '',
-  placeholder: '',
-  errorPosition: 'bottom',
-  rules: {},
-};
-
-export function FormInputError({ error }: { error: string }) {
-  return (
-    <InputAdornment position="end">
-      <Typography component="span" color="error">
-        {error}
-      </Typography>
-    </InputAdornment>
-  );
-}
-
-export default function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps) {
-  const { control, formState } = useFormContext();
-  const error = get(formState.errors, name)?.message as string;
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field }) => (
-        <Box sx={{ width: '100%' }}>
-          {!!label && <FormLabel>{label}</FormLabel>}
-          <TextField
-            fullWidth
-            error={!!get(formState.errors, name)}
-            helperText={errorPosition === 'bottom' && error ? error : ''}
-            placeholder={placeholder}
-            size="small"
-            {...field}
-            {...rest}
-            InputProps={Object.assign(
-              rest.InputProps || {},
-              errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
-            )}
-          />
-        </Box>
-      )}
-    />
-  );
-}

package/src/components/livemode.tsx

@@ -1,23 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Chip } from '@mui/material';
-
-export default function Livemode() {
-  const { t } = useLocaleContext();
-  return (
-    <Chip
-      label={t('common.livemode')}
-      size="small"
-      sx={{
-        ml: 2,
-        height: 18,
-        lineHeight: 1,
-        textTransform: 'uppercase',
-        fontSize: '0.8rem',
-        fontWeight: 'bold',
-        borderRadius: '4px',
-        backgroundColor: '#ffde92',
-        color: '#bb5504',
-      }}
-    />
-  );
-}

package/src/components/pricing-table/product-skeleton.tsx

@@ -1,39 +0,0 @@
-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/components/status.tsx

@@ -1,19 +0,0 @@
-import { Chip, ChipProps } from '@mui/material';
-
-export default function Status(props: ChipProps) {
-  return (
-    <Chip
-      size="small"
-      variant="outlined"
-      {...props}
-      sx={{
-        ...(props.sx || {}),
-        borderRadius: '4px',
-        height: 20,
-        lineHeight: 1,
-        textTransform: 'capitalize',
-        marginRight: '10px',
-      }}
-    />
-  );
-}