payment-kit 1.13.20 → 1.13.21

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.20
+version: 1.13.21
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.20",
+  "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.20",
+    "@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": "60955ccbcacc231990e00bacdc271a7c428adaf6"
+  "gitHead": "9a767485dd2e712fdaf1e636d73556c90f20e2bd"
 }

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,

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

@@ -1,5 +1,6 @@
 /* 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';
@@ -13,6 +14,7 @@ export default function PhoneInput({ ...props }) {
 
   const { control, getValues, setValue } = useFormContext();
   const values = getValues();
+
   const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
     defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
     value: values[props.name] || '',
@@ -96,7 +98,7 @@ export default function PhoneInput({ ...props }) {
           </InputAdornment>
         ),
       }}
-      {...props}
+      {...omit(props, ['countryFieldName'])}
     />
   );
 }

package/src/components/customer/edit.tsx

@@ -39,11 +39,12 @@ export default function EditCustomer({
     },
   });
 
-  const { handleSubmit, reset } = methods;
-  const onSubmit = async () => {
-    await handleSubmit(onSave)();
-    reset();
-    onCancel(null);
+  const onSubmit = () => {
+    methods.handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      methods.reset();
+      onCancel(null);
+    })();
   };
 
   return (

package/src/components/customer/form.tsx

@@ -3,6 +3,8 @@ 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';
@@ -12,9 +14,10 @@ const phoneUtil = PhoneNumberUtil.getInstance();
 
 export default function CustomerForm() {
   const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
 
   return (
-    <Stack direction="column" spacing={3}>
+    <Stack direction="column" spacing={1}>
       <Typography component="h6" sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
         {t('checkout.contact')}
       </Typography>
@@ -64,39 +67,50 @@ export default function CustomerForm() {
       <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"
-        rules={{}}
         variant="outlined"
         errorPosition="right"
+        label={t('checkout.billing.state')}
         placeholder={t('checkout.billing.state')}
       />
       <FormInput
         name="address.city"
-        rules={{}}
         variant="outlined"
         errorPosition="right"
+        label={t('checkout.billing.city')}
         placeholder={t('checkout.billing.city')}
       />
       <FormInput
         name="address.line1"
-        rules={{}}
         variant="outlined"
         errorPosition="right"
+        label={t('checkout.billing.line1')}
         placeholder={t('checkout.billing.line1')}
       />
       <FormInput
         name="address.line2"
-        rules={{}}
         variant="outlined"
         errorPosition="right"
+        label={t('checkout.billing.line2')}
         placeholder={t('checkout.billing.line2')}
       />
       <FormInput
         name="address.postal_code"
-        errorPosition="right"
-        rules={{ required: t('checkout.required') }}
         variant="outlined"
+        errorPosition="right"
+        label={t('checkout.billing.postal_code')}
         placeholder={t('checkout.billing.postal_code')}
       />
     </Stack>

package/src/components/metadata/editor.tsx

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

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

@@ -26,10 +26,12 @@ export default function RenamePaymentLink({
   });
 
   const { handleSubmit, reset } = methods;
-  const onSubmit = async () => {
-    await handleSubmit(onSave)();
-    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 (