payment-kit 1.13.20 → 1.13.22

package/api/src/routes/integrations/stripe.ts

@@ -43,14 +43,14 @@ const handleEvent = async (req: Request, res: Response) => {
 
   if (STRIPE_EVENTS.includes(stripeEvent.type) === false) {
     logger.debug('webhook event not interested', { id: stripeEvent.id, type: stripeEvent.type });
-    return res.status(400).json({ error: 'Not implemented' });
+    return res.json({ skipped: true });
   }
 
   // only events from this app should be processed
   const appPid = get(stripeEvent, 'data.object.metadata.appPid');
   if (appPid && appPid !== env.appPid) {
     logger.debug('webhook event for other app', { id: stripeEvent.id, type: stripeEvent.type });
-    return res.json({ received: true });
+    return res.json({ skipped: true });
   }
 
   logger.debug('webhook received event', { id: stripeEvent.id, type: stripeEvent.type });

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.22
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.20",
+  "version": "1.13.22",
   "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.22",
     "@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": "c8b53669ddb7118a2e43596548f031547b2d3da3"
 }

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,18 +1,19 @@
 /* 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 { isValidCountry } from '../../../libs/util';
 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: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
     value: values[props.name] || '',
@@ -96,7 +97,7 @@ export default function PhoneInput({ ...props }) {
           </InputAdornment>
         ),
       }}
-      {...props}
+      {...omit(props, ['countryFieldName'])}
     />
   );
 }

package/src/components/checkout/pay.tsx

@@ -14,7 +14,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { useSessionContext } from '../../contexts/session';
 import { useSettingsContext } from '../../contexts/settings';
-import { findCurrency, formatError, getStatementDescriptor } from '../../libs/util';
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../../libs/util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
@@ -175,7 +175,7 @@ export function CheckoutPayMain({
           postal_code: '',
         },
         customer?.address || {},
-        { country: customer?.address?.country || 'us' }
+        { country: isValidCountry(customer?.address?.country || '') ? customer?.address?.country : 'us' }
       ),
     },
   });

package/src/components/customer/edit.tsx

@@ -5,6 +5,7 @@ import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { isValidCountry } from '../../libs/util';
 import CustomerForm from './form';
 
 export default function EditCustomer({
@@ -34,16 +35,17 @@ export default function EditCustomer({
           postal_code: '',
         },
         data.address || {},
-        { country: data.address?.country || 'us' }
+        { country: isValidCountry(data.address?.country || '') ? data.address?.country : 'us' }
       ),
     },
   });
 
-  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/metadata/form.tsx

@@ -1,7 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
-import { Box, Button, IconButton, Stack, TextField, Typography } from '@mui/material';
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import FormInput from '../input';
 
 export default function MetadataForm({ title, actions }: { title?: string; actions?: React.ReactNode }) {
   const { t } = useLocaleContext();
@@ -13,15 +15,19 @@ export default function MetadataForm({ title, actions }: { title?: string; actio
       {metadata.fields.map((meta, index) => (
         <Stack key={meta.id} mt={2} spacing={2} direction="row" alignItems="center">
           <Stack direction="row" spacing={2}>
-            <Controller
-              render={({ field }) => <TextField {...field} sx={{ flex: 1 }} placeholder="Key" size="small" />}
+            <FormInput
+              sx={{ flex: 1 }}
+              size="small"
               name={`metadata.${index}.key`}
-              control={control}
+              rules={{ required: t('checkout.required') }}
+              placeholder="Key"
             />
-            <Controller
-              render={({ field }) => <TextField {...field} sx={{ flex: 2 }} placeholder="Value" size="small" />}
+            <FormInput
+              sx={{ flex: 2 }}
+              size="small"
               name={`metadata.${index}.value`}
-              control={control}
+              placeholder="Value"
+              rules={{ required: t('checkout.required') }}
             />
           </Stack>
           <IconButton size="small" onClick={() => metadata.remove(index)}>

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 (

package/src/libs/util.ts

@@ -15,6 +15,7 @@ import type {
 import { BN, fromUnitToToken } from '@ocap/util';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
+import { defaultCountries } from 'react-international-phone';
 
 import dayjs from './dayjs';
 
@@ -567,3 +568,7 @@ export function getSupportedPaymentCurrencies(items: TLineItemExpanded[]) {
   }, []);
   return Array.from(new Set(currencies));
 }
+
+export function isValidCountry(code: string) {
+  return defaultCountries.some((x) => x[1] === code);
+}