payment-kit 1.13.18 → 1.13.20

package/src/pages/admin/payments/links/create.tsx

@@ -5,14 +5,16 @@ import Toast from '@arcblock/ux/lib/Toast';
 import type { InferFormType, TPaymentLink } from '@did-pay/types';
 import { AddOutlined } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 
 import DrawerForm from '../../../../components/drawer-form';
 import AfterPay from '../../../../components/payment-link/after-pay';
 import BeforePay from '../../../../components/payment-link/before-pay';
+import PaymentLinkPreview from '../../../../components/payment-link/preview';
 import { ProductsProvider } from '../../../../contexts/products';
+import { useSessionContext } from '../../../../contexts/session';
 import { useSettingsContext } from '../../../../contexts/settings';
 import api from '../../../../libs/api';
 import { formatError } from '../../../../libs/util';
@@ -23,7 +25,9 @@ type PaymentLink = InferFormType<TPaymentLink> & {
 
 export default function CreatePaymentLink() {
   const { t } = useLocaleContext();
+  const { session } = useSessionContext();
   const [current, setCurrent] = useState('beforePay');
+  const [stashed, setStashed] = useState(0);
   const { settings } = useSettingsContext();
 
   const methods = useForm<PaymentLink>({
@@ -65,6 +69,22 @@ export default function CreatePaymentLink() {
     },
   });
 
+  const changes = methods.watch([
+    'line_items',
+    'allow_promotion_codes',
+    'include_free_trial',
+    'subscription_data',
+    'billing_address_collection',
+    'phone_number_collection',
+  ]);
+
+  useEffect(() => {
+    api.post('/api/payment-links/stash', methods.getValues()).then(() => {
+      setStashed(stashed + 1);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(changes)]);
+
   const tabs = [
     { label: t('admin.paymentLink.beforePay'), value: 'beforePay', component: BeforePay },
     { label: t('admin.paymentLink.afterPay'), value: 'afterPay', component: AfterPay },
@@ -104,7 +124,7 @@ export default function CreatePaymentLink() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.paymentLink.add')}
-      maxWidth={1280}
+      width={1280}
       addons={
         // @ts-ignore
         <Button variant="contained" size="small" onClick={methods.handleSubmit(onSubmit)}>
@@ -132,7 +152,7 @@ export default function CreatePaymentLink() {
             <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
               {t('common.preview')}
             </Typography>
-            <pre>FIXME</pre>
+            {stashed && <PaymentLinkPreview id={`plink_${session.user.did}`} version={stashed} />}
           </Stack>
         </Stack>
       </FormProvider>

package/src/pages/admin/payments/links/detail.tsx

@@ -6,7 +6,6 @@ import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import IframeResizer from 'iframe-resizer-react';
 import { isEmpty } from 'lodash';
 import { Link, useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
@@ -17,6 +16,7 @@ import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentLinkActions from '../../../../components/payment-link/actions';
+import PaymentLinkPreview from '../../../../components/payment-link/preview';
 import AddPrice from '../../../../components/product/add-price';
 import SectionHeader from '../../../../components/section/header';
 import Table from '../../../../components/table';
@@ -216,24 +216,32 @@ export default function PaymentLinkDetail(props: { id: string }) {
             </SectionHeader>
             <Stack>
               <InfoRow
+                sizes={[1, 1]}
                 label={t('admin.paymentLink.allowPromotionCodes')}
                 value={data.allow_promotion_codes ? 'Yes' : 'No'}
               />
               <InfoRow
+                sizes={[1, 1]}
                 label={t('admin.paymentLink.requireBillingAddress')}
                 value={data.billing_address_collection ? 'Yes' : 'No'}
               />
               <InfoRow
+                sizes={[1, 1]}
                 label={t('admin.paymentLink.requirePhoneNumber')}
                 value={data.phone_number_collection?.enabled ? 'Yes' : 'No'}
               />
               <InfoRow
+                sizes={[1, 1]}
                 label={t('admin.paymentLink.includeFreeTrail')}
                 value={data.subscription_data?.trial_period_days ? 'Yes' : 'No'}
               />
-              <InfoRow label={t('admin.paymentLink.showConfirmPage')} value={data.after_completion?.type} />
-              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+              <InfoRow
+                sizes={[1, 1]}
+                label={t('admin.paymentLink.showConfirmPage')}
+                value={data.after_completion?.type}
+              />
+              <InfoRow sizes={[1, 1]} label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow sizes={[1, 1]} label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
             </Stack>
           </Box>
           <Box className="section">
@@ -285,19 +293,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('common.preview')} />
             <Box className="section-body">
-              <Chrome>
-                <IframeResizer
-                  style={{
-                    width: '1px',
-                    minWidth: '840px',
-                    minHeight: '840px',
-                    transform: 'scale(0.65)',
-                    transformOrigin: '20% 10%',
-                    border: 'none',
-                  }}
-                  src={`${window.blocklet.prefix}checkout/pay/${data.id}?preview=1`}
-                />
-              </Chrome>
+              <PaymentLinkPreview id={data.id} />
             </Box>
           </Box>
         </Div>
@@ -307,12 +303,3 @@ export default function PaymentLinkDetail(props: { id: string }) {
 }
 
 const Div = styled(Stack)``;
-
-const Chrome = styled(Box)`
-  background-color: #fcfeff;
-  border-radius: 8px;
-  margin-top: 40px;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 20px 44px #32325d1f, 0 -1px 32px #32325d0f, 0 3px 12px #00000014;
-`;

package/src/pages/admin/products/prices/detail.tsx

@@ -16,6 +16,7 @@ import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
 import EditPrice from '../../../../components/product/edit-price';
 import SectionHeader from '../../../../components/section/header';
+import Table from '../../../../components/table';
 import api from '../../../../libs/api';
 import { formatError, formatPrice, formatTime } from '../../../../libs/util';
 import PriceActions from './actions';
@@ -77,15 +78,20 @@ export default function PriceDetail(props: { id: string }) {
 
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
-      {data.active === false && (
-        <Alert severity="warning">
-          <AlertTitle>{t('admin.price.archived')}</AlertTitle>
-          {t('admin.price.archivedTip')}
-        </Alert>
-      )}
       <Box>
+        {data.active === false && (
+          <Alert severity="warning">
+            <AlertTitle>{t('admin.price.archived')}</AlertTitle>
+            {t('admin.price.archivedTip')}
+          </Alert>
+        )}
+        {data.locked && (
+          <Alert severity="warning" sx={{ mb: 1 }}>
+            {t('admin.price.locked')}
+          </Alert>
+        )}
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
-          <Link to="/admin/products">
+          <Link to={`/admin/products/${data.product_id}`}>
             <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
               <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
               <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
@@ -137,10 +143,6 @@ export default function PriceDetail(props: { id: string }) {
             <InfoRow label={t('admin.price.recurring.interval')} value={data.recurring?.interval} />
             <InfoRow label={t('admin.price.nickname.label')} value={data.nickname} />
             <InfoRow label={t('admin.price.lookupKey')} value={data.lookup_key} />
-            <InfoRow
-              label={t('admin.paymentCurrency.name')}
-              value={<Currency logo={data.currency.logo} name={data.currency.symbol} />}
-            />
             <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
             <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
           </Grid>
@@ -190,6 +192,48 @@ export default function PriceDetail(props: { id: string }) {
           )}
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.price.currency.list')} />
+        <Box className="section-body">
+          <Table
+            toolbar={false}
+            footer={false}
+            data={data.currency_options}
+            columns={[
+              {
+                label: t('admin.price.name'),
+                name: 'currency_id',
+                width: 200,
+                options: {
+                  // eslint-disable-next-line react/no-unstable-nested-components
+                  customBodyRenderLite: (_: any, index: number) => {
+                    const item = data.currency_options[index] as any;
+                    return <Currency logo={item.currency.logo} name={item.currency.symbol} />;
+                  },
+                },
+              },
+              {
+                label: t('common.id'),
+                name: 'unit_amount',
+                options: {
+                  customBodyRenderLite: (_: any, index: number) => {
+                    const item = data.currency_options[index] as any;
+                    return formatPrice(
+                      { type: data.type, unit_amount: item.unit_amount, recurring: data.recurring } as TPrice,
+                      item.currency
+                    );
+                  },
+                },
+              },
+            ]}
+            options={{
+              count: data.currency_options.length,
+              page: 0,
+              rowsPerPage: 20,
+            }}
+          />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">

package/src/pages/admin/products/prices/list.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Stack, Typography } from '@mui/material';
+import { LockOutlined } from '@mui/icons-material';
+import { Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
@@ -26,6 +27,11 @@ export default function PricesList({ product, onChange }: { product: Product; on
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
               <Stack direction="row" alignItems="center" spacing={1}>
+                {price.locked && (
+                  <Tooltip title={t('admin.price.locked')}>
+                    <LockOutlined sx={{ color: 'text.secondary' }} />
+                  </Tooltip>
+                )}
                 <Typography component="span">{formatPrice(price, settings.baseCurrency)}</Typography>
                 <Typography component="span">
                   {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}

package/src/pages/admin/products/products/create.tsx

@@ -58,7 +58,7 @@ export default function ProductsCreate() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.product.add')}
-      maxWidth={640}
+      width={640}
       addons={
         <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
           {t('admin.product.save')}

package/src/pages/admin/products/products/detail.tsx

@@ -94,15 +94,22 @@ export default function ProductDetail(props: { id: string }) {
     }
   };
 
+  const isLocked = data.locked || data.prices.some((x) => x.locked);
+
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
-      {data.active === false && (
-        <Alert severity="warning">
-          <AlertTitle>{t('admin.product.archived')}</AlertTitle>
-          {t('admin.product.archivedTip')}
-        </Alert>
-      )}
       <Box>
+        {data.active === false && (
+          <Alert severity="warning">
+            <AlertTitle>{t('admin.product.archived')}</AlertTitle>
+            {t('admin.product.archivedTip')}
+          </Alert>
+        )}
+        {isLocked && (
+          <Alert severity="warning" sx={{ mb: 1 }}>
+            {t('admin.product.locked')}
+          </Alert>
+        )}
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Link to="/admin/products">
             <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
@@ -236,7 +243,7 @@ export default function ProductDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.id} />
+          <EventList features={{ toolbar: false }} object_id={[data.id, ...data.prices.map((x) => x.id)].join(',')} />
         </Box>
       </Box>
     </Root>

package/src/pages/admin/settings/index.tsx

@@ -1,9 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+const PaymentMethodCreate = React.lazy(() => import('./payment-methods/create'));
+
 const pages = {
   paymentMethods: React.lazy(() => import('./payment-methods')),
   branding: React.lazy(() => import('./branding')),
@@ -27,13 +29,21 @@ export default function SettingsIndex() {
     { label: t('admin.business'), value: 'business' },
   ];
 
+  let extra = null;
+  if (page === 'payment-methods') {
+    extra = <PaymentMethodCreate />;
+  }
+
   return (
-    <div>
-      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
-        {t('admin.settings')}
-      </Typography>
+    <>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+          {t('admin.products')}
+        </Typography>
+        {extra}
+      </Stack>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-    </div>
+    </>
   );
 }

package/src/pages/admin/settings/payment-methods/create.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPaymentMethod } from '@did-pay/types';
+import { AddOutlined } from '@mui/icons-material';
+import { Button, Typography } from '@mui/material';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import DrawerForm from '../../../../components/drawer-form';
+import PaymentMethodForm from '../../../../components/payment-method/form';
+import api from '../../../../libs/api';
+import { formatError } from '../../../../libs/util';
+
+export default function PaymentMethodCreate() {
+  const { t } = useLocaleContext();
+
+  const methods = useForm<TPaymentMethod>({
+    defaultValues: {
+      type: 'stripe',
+      name: '',
+      description: '',
+      settings: {
+        arcblock: {
+          chain_id: '',
+          api_host: '',
+          explorer_host: '',
+        },
+        stripe: {
+          publishable_key: '',
+          secret_key: '',
+        },
+        ethereum: {
+          chain_id: 0,
+          api_host: '',
+          explorer_host: '',
+        },
+        bitcoin: {
+          chain_id: 0,
+          api_host: '',
+          explorer_host: '',
+        },
+      },
+    },
+  });
+  const { handleSubmit } = methods;
+
+  const onSubmit = (data: TPaymentMethod) => {
+    api
+      .post('/api/payment-methods', data)
+      .then(() => {
+        Toast.success(t('admin.paymentMethod.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('paymentMethod.created');
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.paymentMethod.add')}
+      width={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+          {t('admin.paymentMethod.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
+          {t('admin.paymentMethod.type')}
+        </Typography>
+        <PaymentMethodForm />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

package/src/pages/admin/settings/{payment-methods.tsx → payment-methods/index.tsx}

@@ -1,12 +1,13 @@
 import type { TPaymentMethodExpanded } from '@did-pay/types';
 import { Alert, Box, CircularProgress, Grid, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
+import useBus from 'use-bus';
 
-import IconCollapse from '../../../components/collapse';
-import InfoCard from '../../../components/info-card';
-import InfoRow from '../../../components/info-row';
-import Switch from '../../../components/switch';
-import api from '../../../libs/api';
+import IconCollapse from '../../../../components/collapse';
+import InfoCard from '../../../../components/info-card';
+import InfoRow from '../../../../components/info-row';
+import Switch from '../../../../components/switch';
+import api from '../../../../libs/api';
 
 const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExpanded[]> => {
   const search = new URLSearchParams();
@@ -27,7 +28,9 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
 };
 
 export default function PaymentMethods() {
-  const { loading, error, data } = useRequest(() => getMethods({}));
+  const { loading, error, data, runAsync } = useRequest(() => getMethods({}));
+
+  useBus('paymentMethod.created', runAsync, []);
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;

package/src/pages/checkout/pay.tsx

@@ -62,8 +62,10 @@ export default function Payment({ id }: Props) {
       }
     } else if (data?.checkoutSession?.success_url) {
       setTimeout(() => {
+        const tmp = new URL(data.checkoutSession.success_url as string);
+        tmp.searchParams.set('checkout_session_id', data.checkoutSession.id);
         // @ts-ignore
-        window.location.href = data?.checkoutSession?.success_url;
+        window.location.href = tmp.href;
       }, 1000);
     }
   };

package/src/pages/customer/index.tsx

@@ -1,10 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
 import type { TCustomerExpanded } from '@did-pay/types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
+import { FlagEmoji } from 'react-international-phone';
 
+import EditCustomer from '../../components/customer/edit';
 import InfoRow from '../../components/info-row';
 import Layout from '../../components/layout';
 import CustomerInvoiceList from '../../components/portal/invoice/list';
@@ -44,6 +47,20 @@ export default function CustomerHome() {
     );
   }
 
+  const onUpdateInfo = async (updates: TCustomerExpanded) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/customers/${data.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
   return (
     <Layout>
       <Grid container spacing={5}>
@@ -81,7 +98,17 @@ export default function CustomerHome() {
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
-                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.country')} value={data.address?.country} />
+                <InfoRow
+                  sizes={[1, 2]}
+                  label={t('admin.customer.address.country')}
+                  value={
+                    data.address?.country ? (
+                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                    ) : (
+                      ''
+                    )
+                  }
+                />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
                 <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
@@ -92,6 +119,14 @@ export default function CustomerHome() {
                   value={data.address?.postal_code}
                 />
               </Stack>
+              {state.editing && (
+                <EditCustomer
+                  data={data}
+                  loading={state.loading}
+                  onSave={onUpdateInfo}
+                  onCancel={() => setState({ editing: false })}
+                />
+              )}
             </Box>
           </Root>
         </Grid>