payment-kit 1.13.19 → 1.13.21

package/api/src/routes/customers.ts

@@ -1,13 +1,24 @@
 import { user } from '@blocklet/sdk/lib/middlewares';
 import { Router } from 'express';
 import Joi from 'joi';
+import pick from 'lodash/pick';
 import type { WhereOptions } from 'sequelize';
 
 import { authenticate } from '../libs/security';
+import { formatMetadata } from '../libs/util';
 import { Customer } from '../store/models/customer';
 
 const router = Router();
 const auth = authenticate<Customer>({ component: true, roles: ['owner', 'admin'] });
+const authPortal = authenticate<Customer>({
+  component: true,
+  roles: ['owner', 'admin'],
+  record: {
+    // @ts-ignore
+    model: Customer,
+    field: 'id',
+  },
+});
 
 const schema = Joi.object<{
   page: number;
@@ -67,4 +78,25 @@ router.get('/:id', auth, async (req, res) => {
   }
 });
 
+// eslint-disable-next-line consistent-return
+router.put('/:id', authPortal, async (req, res) => {
+  try {
+    const doc = await Customer.findByPkOrDid(req.params.id as string);
+    if (!doc) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+
+    const raw = pick(req.body, ['metadata', 'name', 'email', 'phone', 'address']);
+    if (raw.metadata) {
+      raw.metadata = formatMetadata(raw.metadata);
+    }
+
+    await doc.update(raw);
+    res.json(doc);
+  } catch (err) {
+    console.error(err);
+    res.json(null);
+  }
+});
+
 export default router;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.19
+version: 1.13.21
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.19",
+  "version": "1.13.21",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -100,7 +100,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.19",
+    "@did-pay/types": "1.13.21",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -137,5 +137,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ffc58582731d2f1c1057346cee8127b26266ccd8"
+  "gitHead": "9a767485dd2e712fdaf1e636d73556c90f20e2bd"
 }

package/src/components/checkout/form/address.tsx

@@ -61,15 +61,13 @@ export default function AddressForm({ mode }: Props) {
               variant="outlined"
               placeholder={t('checkout.billing.line1')}
             />
-            <Stack direction="row" spacing={0}>
-              <FormInput
-                name="billing_address.city"
-                rules={{ required: t('checkout.required') }}
-                errorPosition="right"
-                variant="outlined"
-                placeholder={t('checkout.billing.city')}
-              />
-            </Stack>
+            <FormInput
+              name="billing_address.city"
+              rules={{ required: t('checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('checkout.billing.city')}
+            />
           </Stack>
         </Stack>
       </Fade>

package/src/components/checkout/form/index.tsx

@@ -215,9 +215,9 @@ export default function PaymentForm({
     }
   };
 
-  const onAction = async () => {
+  const onAction = () => {
     if (session.user) {
-      await handleSubmit(onSubmit)();
+      handleSubmit(onSubmit)();
     } else {
       session.login({
         onSuccess: onUserLoggedIn,
@@ -270,7 +270,7 @@ export default function PaymentForm({
               errorPosition="right"
               rules={{
                 required: t('checkout.required'),
-                validate: (x) => (isEmail(x) ? true : t('checkout.customer.emailInvalid')),
+                validate: (x) => (isEmail(x) ? true : t('checkout.invalid')),
               }}
               InputProps={{
                 startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,

package/src/components/checkout/form/phone.tsx

@@ -1,22 +1,30 @@
+/* eslint-disable react/prop-types */
 import { InputAdornment, MenuItem, Select, Typography } from '@mui/material';
+import omit from 'lodash/omit';
 import { useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
 
 import FormInput from '../../input';
 
+const isValidCountry = (code: string) => defaultCountries.some((x) => x[1] === code);
+
 export default function PhoneInput({ ...props }) {
+  const countryFieldName = props.countryFieldName || 'billing_address.country';
+
   const { control, getValues, setValue } = useFormContext();
+  const values = getValues();
+
   const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
-    defaultCountry: 'us',
-    value: getValues().customer_phone || '',
+    defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
+    value: values[props.name] || '',
     countries: defaultCountries,
     onChange: (data) => {
-      setValue('customer_phone', data.phone);
+      setValue(props.name, data.phone);
     },
   });
 
-  const userCountry = useWatch({ control, name: 'billing_address.country' });
+  const userCountry = useWatch({ control, name: countryFieldName });
 
   useEffect(() => {
     if (userCountry !== country) {
@@ -27,7 +35,7 @@ export default function PhoneInput({ ...props }) {
 
   const onCountryChange = (e: any) => {
     setCountry(e.target.value as CountryIso2);
-    setValue('billing_address.country', e.target.value);
+    setValue(countryFieldName, e.target.value);
   };
 
   return (
@@ -90,7 +98,7 @@ export default function PhoneInput({ ...props }) {
           </InputAdornment>
         ),
       }}
-      {...props}
+      {...omit(props, ['countryFieldName'])}
     />
   );
 }

package/src/components/customer/edit.tsx

@@ -0,0 +1,74 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TCustomer } from '@did-pay/types';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import CustomerForm from './form';
+
+export default function EditCustomer({
+  data,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  data: TCustomer;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<TCustomer>({
+    defaultValues: {
+      name: data.name || '',
+      email: data.email || '',
+      phone: data.phone || '',
+      address: Object.assign(
+        {
+          country: '',
+          state: '',
+          city: '',
+          line1: '',
+          line2: '',
+          postal_code: '',
+        },
+        data.address || {},
+        { country: data.address?.country || 'us' }
+      ),
+    },
+  });
+
+  const onSubmit = () => {
+    methods.handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      methods.reset();
+      onCancel(null);
+    })();
+  };
+
+  return (
+    <Dialog
+      open
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="sm"
+      onClose={() => onCancel(null)}
+      showCloseButton={false}
+      title={t('customer.update')}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
+            {loading && <CircularProgress size="small" />} {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <CustomerForm />
+      </FormProvider>
+    </Dialog>
+  );
+}

package/src/components/customer/form.tsx

@@ -0,0 +1,118 @@
+import 'react-international-phone/style.css';
+
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { InputAdornment, Stack, Typography } from '@mui/material';
+import { PhoneNumberUtil } from 'google-libphonenumber';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CountrySelector } from 'react-international-phone';
+import isEmail from 'validator/es/lib/isEmail';
+
+import PhoneInput from '../checkout/form/phone';
+import FormInput from '../input';
+
+const phoneUtil = PhoneNumberUtil.getInstance();
+
+export default function CustomerForm() {
+  const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+
+  return (
+    <Stack direction="column" spacing={1}>
+      <Typography component="h6" sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
+        {t('checkout.contact')}
+      </Typography>
+      <FormInput
+        name="name"
+        variant="outlined"
+        errorPosition="right"
+        rules={{
+          required: t('checkout.required'),
+        }}
+        InputProps={{
+          startAdornment: <InputAdornment position="start">{t('checkout.customer.name')}</InputAdornment>,
+        }}
+      />
+      <FormInput
+        name="email"
+        variant="outlined"
+        errorPosition="right"
+        rules={{
+          required: t('checkout.required'),
+          validate: (x) => (isEmail(x) ? true : t('checkout.invalid')),
+        }}
+        InputProps={{
+          startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,
+        }}
+      />
+      <PhoneInput
+        name="phone"
+        variant="outlined"
+        countryFieldName="address.country"
+        errorPosition="right"
+        placeholder={t('checkout.customer.phonePlaceholder')}
+        rules={{
+          required: t('checkout.required'),
+          validate: (x: string) => {
+            try {
+              const parsed = phoneUtil.parseAndKeepRawInput(x);
+              return phoneUtil.isValidNumber(parsed) ? true : t('checkout.invalid');
+            } catch (err) {
+              console.error(err, x);
+              return t('checkout.invalid');
+            }
+          },
+        }}
+      />
+
+      <Typography component="h6" sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
+        {t('checkout.billing.required')}
+      </Typography>
+      <Controller
+        name="address.country"
+        control={control}
+        render={({ field }) => (
+          <CountrySelector
+            selectedCountry={field.value}
+            onSelect={({ iso2 }) => setValue(field.name, iso2)}
+            buttonStyle={{}}
+          />
+        )}
+      />
+      <FormInput
+        name="address.state"
+        variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.state')}
+        placeholder={t('checkout.billing.state')}
+      />
+      <FormInput
+        name="address.city"
+        variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.city')}
+        placeholder={t('checkout.billing.city')}
+      />
+      <FormInput
+        name="address.line1"
+        variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.line1')}
+        placeholder={t('checkout.billing.line1')}
+      />
+      <FormInput
+        name="address.line2"
+        variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.line2')}
+        placeholder={t('checkout.billing.line2')}
+      />
+      <FormInput
+        name="address.postal_code"
+        variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.postal_code')}
+        placeholder={t('checkout.billing.postal_code')}
+      />
+    </Stack>
+  );
+}

package/src/components/metadata/editor.tsx

@@ -31,11 +31,12 @@ export default function MetadataEditor({
     reset();
     onCancel(e);
   };
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
   };
 
   return (

package/src/components/payment-link/after-pay.tsx

@@ -9,7 +9,7 @@ export default function AfterPay() {
   const type = useWatch({ control, name: 'after_completion.type' });
 
   return (
-    <Stack spacing={2}>
+    <Stack spacing={2} sx={{ width: '100%' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {t('admin.paymentLink.confirmPage')}
       </Typography>

package/src/components/payment-link/rename.tsx

@@ -26,10 +26,12 @@ export default function RenamePaymentLink({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
   };
 
   return (
@@ -54,6 +56,7 @@ export default function RenamePaymentLink({
       <FormProvider {...methods}>
         <TextInput
           name="name"
+          rules={{ required: true }}
           label={t('admin.paymentLink.name.label')}
           placeholder={t('admin.paymentLink.name.placeholder')}
           autoFocus

package/src/components/product/add-price.tsx

@@ -26,10 +26,12 @@ export default function AddPrice({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
   };
 
   return (

package/src/components/product/create.tsx

@@ -57,10 +57,12 @@ export default function CreateProduct({
       });
   };
 
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onCreate)(data);
-    await reset();
-    await onSave(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onCreate(formData);
+      await reset();
+      await onSave(null);
+    })();
   };
 
   return (

package/src/components/product/edit-price.tsx

@@ -46,10 +46,12 @@ export default function EditPrice({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
   };
 
   return (

package/src/components/product/edit.tsx

@@ -34,10 +34,12 @@ export default function EditProduct({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async (data: any) => {
-    await handleSubmit(onSave)(data);
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      reset();
+      onCancel(null);
+    })();
   };
 
   return (

package/src/locales/en.tsx

@@ -423,6 +423,7 @@ export default flat({
       name: 'Name',
       email: 'Email',
       phone: 'Phone',
+      phonePlaceholder: 'Phone number',
       phoneTip: 'In case we need to contact you about your order',
     },
   },

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

@@ -13,6 +13,7 @@ import { Link, useNavigate } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
 import CustomerActions from '../../../../components/customer/actions';
+import EditCustomer from '../../../../components/customer/edit';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
@@ -37,12 +38,11 @@ export default function CustomerDetail(props: { id: string }) {
     },
     editing: {
       metadata: false,
-      product: false,
+      customer: false,
     },
     loading: {
       metadata: false,
-      price: false,
-      product: false,
+      customer: false,
     },
   });
 
@@ -56,9 +56,9 @@ export default function CustomerDetail(props: { id: string }) {
     return <CircularProgress />;
   }
 
-  const createUpdater = (key: string) => async (updates: TCustomerExpanded) => {
+  const onUpdateMetadata = async (updates: TCustomerExpanded) => {
     try {
-      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      setState((prev) => ({ loading: { ...prev.loading, metadata: true } }));
       await api.put(`/api/customers/${props.id}`, updates).then((res) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
@@ -66,11 +66,24 @@ export default function CustomerDetail(props: { id: string }) {
       console.error(err);
       Toast.error(formatError(err));
     } finally {
-      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+      setState((prev) => ({ loading: { ...prev.loading, metadata: false } }));
+    }
+  };
+
+  const onUpdateInfo = async (updates: TCustomerExpanded) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, customer: true } }));
+      await api.put(`/api/customers/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, customer: false } }));
     }
   };
 
-  const onUpdateMetadata = createUpdater('metadata');
   const onChange = (action: string) => {
     if (action === 'remove') {
       navigate('/admin/customers');
@@ -122,7 +135,8 @@ export default function CustomerDetail(props: { id: string }) {
             variant="outlined"
             color="inherit"
             size="small"
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+            disabled={state.editing.customer}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, customer: true } }))}>
             <Edit fontSize="small" sx={{ mr: 0.5 }} />
             {t('common.edit')}
           </Button>
@@ -157,6 +171,14 @@ export default function CustomerDetail(props: { id: string }) {
               </Stack>
             }
           />
+          {state.editing.customer && (
+            <EditCustomer
+              data={data}
+              loading={state.loading.customer}
+              onSave={onUpdateInfo}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
+            />
+          )}
         </Stack>
       </Box>
       <Box className="section">

package/src/pages/customer/index.tsx

@@ -1,4 +1,5 @@
 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';
@@ -6,6 +7,7 @@ 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';
@@ -45,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}>
@@ -103,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>