payment-kit 1.13.111 → 1.13.113

package/src/pages/customer/invoice.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TInvoiceExpanded } from '@did-pay/types';
+import { Status, api, formatError, formatTime } from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
@@ -13,10 +14,8 @@ import Currency from '../../components/currency';
 import InfoRow from '../../components/info-row';
 import InvoiceTable from '../../components/invoice/table';
 import SectionHeader from '../../components/section/header';
-import Status from '../../components/status';
 import { useSessionContext } from '../../contexts/session';
-import api from '../../libs/api';
-import { formatError, formatTime, getInvoiceStatusColor } from '../../libs/util';
+import { getInvoiceStatusColor } from '../../libs/util';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
@@ -42,9 +41,9 @@ export default function CustomerHome() {
         action: 'collect',
         timeout: 5 * 60 * 1000,
         messages: {
-          title: t('customer.invoice.pay'),
-          success: t('customer.invoice.paySuccess'),
-          error: t('customer.invoice.payError'),
+          title: t('payment.customer.invoice.pay'),
+          success: t('payment.customer.invoice.paySuccess'),
+          error: t('payment.customer.invoice.payError'),
         },
         extraParams: { invoiceId: params.id },
         onSuccess: async () => {
@@ -96,7 +95,7 @@ export default function CustomerHome() {
       </Grid>
       <Grid item xs={12} md={5}>
         <Box>
-          <SectionHeader title={t('customer.invoice.summary')} mb={0} />
+          <SectionHeader title={t('payment.customer.invoice.summary')} mb={0} />
           <Stack sx={{ mt: 1 }}>
             <InfoRow label={t('admin.invoice.number')} value={data.number} />
             <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
@@ -134,7 +133,7 @@ export default function CustomerHome() {
         </Box>
       </Grid>
       <Grid item xs={12} md={7}>
-        <SectionHeader title={t('customer.invoice.details')} mb={0}>
+        <SectionHeader title={t('payment.customer.invoice.details')} mb={0}>
           {['open'].includes(data.status) && (
             <Button
               variant="contained"
@@ -142,7 +141,7 @@ export default function CustomerHome() {
               size="small"
               disabled={state.downloading}
               onClick={() => setState({ downloading: true })}>
-              {t('customer.invoice.download')}
+              {t('payment.customer.invoice.download')}
             </Button>
           )}
         </SectionHeader>
@@ -150,7 +149,7 @@ export default function CustomerHome() {
         <Stack direction="row" justifyContent="flex-end" alignItems="center" mt={2}>
           {['open', 'uncollectible'].includes(data.status) && (
             <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
-              {t('customer.invoice.pay')}
+              {t('payment.customer.invoice.pay')}
             </Button>
           )}
         </Stack>

package/src/pages/customer/subscription/detail.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TSubscriptionExpanded } from '@did-pay/types';
+import { api, formatTime } from '@blocklet/payment-react';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -16,8 +17,7 @@ import SectionHeader from '../../../components/section/header';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionStatus from '../../../components/subscription/status';
-import api from '../../../libs/api';
-import { formatSubscriptionProduct, formatTime } from '../../../libs/util';
+import { formatSubscriptionProduct } from '../../../libs/util';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -45,7 +45,7 @@ export default function CustomerSubscriptionDetail() {
             <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', mt: '16px' }}>
               <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
               <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-                {t('customer.subscriptions.title')}
+                {t('payment.customer.subscriptions.title')}
               </Typography>
             </Stack>
           </Link>

package/src/pages/customer/subscription/update.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@did-pay/types';
+import { PricingTable, api, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -10,12 +11,10 @@ import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 
-import PricingTable from '../../../components/checkout/pricing-table';
 import InfoCard from '../../../components/info-card';
 import SectionHeader from '../../../components/section/header';
 import { useSessionContext } from '../../../contexts/session';
-import api from '../../../libs/api';
-import { formatError, formatPrice, formatSubscriptionProduct, formatTime } from '../../../libs/util';
+import { formatSubscriptionProduct } from '../../../libs/util';
 
 const fetchData = async (
   id: string
@@ -73,11 +72,11 @@ export default function CustomerSubscriptionUpdate() {
   }
 
   if (!data.subscription) {
-    return <Alert severity="error">{t('customer.upgrade.subscriptionNotFound')}</Alert>;
+    return <Alert severity="error">{t('payment.customer.upgrade.subscriptionNotFound')}</Alert>;
   }
 
   if (!data.table) {
-    return <Alert severity="error">{t('customer.upgrade.tableNotFound')}</Alert>;
+    return <Alert severity="error">{t('payment.customer.upgrade.tableNotFound')}</Alert>;
   }
 
   const handleSelect = async (priceId: string) => {
@@ -137,7 +136,7 @@ export default function CustomerSubscriptionUpdate() {
       // FIXME: support more proration_behavior
       const result = await api.put(`/api/subscriptions/${id}`, { proration_behavior: 'create_prorations', items });
       if (result.data.status === 'active') {
-        Toast.success(t('customer.upgrade.success'));
+        Toast.success(t('payment.customer.upgrade.success'));
         setState({ paid: true });
         setTimeout(handleBack, 2000);
       } else {
@@ -148,10 +147,10 @@ export default function CustomerSubscriptionUpdate() {
             action: result.data.connectAction,
             timeout: 5 * 60 * 1000,
             messages: {
-              title: t('customer.upgrade.pay'),
-              scan: t('customer.upgrade.scan'),
-              success: t('customer.upgrade.success'),
-              error: t('customer.upgrade.error'),
+              title: t('payment.customer.upgrade.pay'),
+              scan: t('payment.customer.upgrade.scan'),
+              success: t('payment.customer.upgrade.success'),
+              error: t('payment.customer.upgrade.error'),
             },
             extraParams: { invoiceId: result.data.latest_invoice_id, subscriptionId: result.data.id },
             onSuccess: () => {
@@ -190,7 +189,7 @@ export default function CustomerSubscriptionUpdate() {
     if (data.subscription.items.find((y) => y.price_id === x.price_id)) {
       x.is_highlight = true;
       x.is_disabled = true;
-      x.highlight_text = t('customer.upgrade.current');
+      x.highlight_text = t('payment.customer.upgrade.current');
       if (!state.priceId) {
         x.is_selected = true;
       }
@@ -227,15 +226,15 @@ export default function CustomerSubscriptionUpdate() {
         </Link>
       </Stack>
       <Stack direction="column" sx={{ marginTop: 32 }}>
-        <SectionHeader title={t('customer.upgrade.config')} />
+        <SectionHeader title={t('payment.customer.upgrade.config')} />
         <PricingTable mode="select" alignItems="left" interval={interval} table={table} onSelect={handleSelect} />
       </Stack>
       {state.priceId && state.total && state.setup && (
         <Stack direction="column" spacing={3} sx={{ maxWidth: 640 }}>
-          <SectionHeader title={t('customer.upgrade.confirm')} />
+          <SectionHeader title={t('payment.customer.upgrade.confirm')} />
           <Stack direction="column" spacing={2}>
             <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
-              {t('customer.upgrade.summary', {
+              {t('payment.customer.upgrade.summary', {
                 // @ts-ignore
                 date: formatTime(state.setup.period.end * 1000, 'lll', locale),
               })}
@@ -261,12 +260,13 @@ export default function CustomerSubscriptionUpdate() {
           </Stack>
           <Divider />
           <Stack direction="column" spacing={1}>
-            {getInfoRow(t('customer.upgrade.total'), state.total)}
+            {getInfoRow(t('payment.customer.upgrade.total'), state.total)}
             {state.prorations.map((x: any) => getInfoRow(x.description, x.amount))}
-            {state.appliedCredit > '0' && getInfoRow(t('customer.upgrade.appliedCredit'), state.appliedCredit, '-')}
-            {state.newCredit > '0' && getInfoRow(t('customer.upgrade.newCredit'), state.newCredit)}
+            {state.appliedCredit > '0' &&
+              getInfoRow(t('payment.customer.upgrade.appliedCredit'), state.appliedCredit, '-')}
+            {state.newCredit > '0' && getInfoRow(t('payment.customer.upgrade.newCredit'), state.newCredit)}
             <Divider />
-            {getInfoRow(t('customer.upgrade.remaining'), state.remaining)}
+            {getInfoRow(t('payment.customer.upgrade.remaining'), state.remaining)}
             <Divider />
             <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2} sx={{ pt: 2 }}>
               <LoadingButton

package/src/components/checkout/amount.tsx

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

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

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

@@ -1,119 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, Stack, Typography } from '@mui/material';
-import { Controller, useFormContext } from 'react-hook-form';
-import { CountrySelector } from 'react-international-phone';
-
-import FormInput from '../../input';
-
-type Props = {
-  mode: string;
-  stripe: boolean;
-};
-
-export default function AddressForm({ mode, stripe }: Props) {
-  const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
-
-  if (mode === 'required') {
-    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}>
-            <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
-              <FormInput
-                name="billing_address.postal_code"
-                rules={{ required: t('checkout.required') }}
-                errorPosition="right"
-                variant="outlined"
-                placeholder={t('checkout.billing.postal_code')}
-              />
-            </Stack>
-            <FormInput
-              name="billing_address.state"
-              rules={{ required: t('checkout.required') }}
-              errorPosition="right"
-              variant="outlined"
-              placeholder={t('checkout.billing.state')}
-            />
-            <FormInput
-              name="billing_address.line1"
-              rules={{ required: t('checkout.required') }}
-              errorPosition="right"
-              variant="outlined"
-              placeholder={t('checkout.billing.line1')}
-            />
-            <FormInput
-              name="billing_address.city"
-              rules={{ required: t('checkout.required') }}
-              errorPosition="right"
-              variant="outlined"
-              placeholder={t('checkout.billing.city')}
-            />
-          </Stack>
-        </Stack>
-      </Fade>
-    );
-  }
-
-  if (stripe) {
-    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}>
-            <Stack direction="row" spacing={0}>
-              <Controller
-                name="billing_address.country"
-                control={control}
-                render={({ field }) => (
-                  <CountrySelector
-                    selectedCountry={field.value}
-                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                    buttonStyle={{
-                      width: '64px',
-                      height: '40px',
-                      border: '1px solid #ccc',
-                      marginLeft: -1,
-                      marginTop: -1,
-                    }}
-                  />
-                )}
-              />
-              <FormInput
-                name="billing_address.postal_code"
-                rules={{ required: t('checkout.required') }}
-                errorPosition="right"
-                variant="outlined"
-                placeholder={t('checkout.billing.postal_code')}
-              />
-            </Stack>
-          </Stack>
-        </Stack>
-      </Fade>
-    );
-  }
-
-  return null;
-}