@blocklet/payment-react 1.18.35 → 1.18.37

package/src/contexts/payment.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/indent */
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
@@ -74,6 +75,19 @@ const getMethod = (methodId: string, methods: TPaymentMethodExpanded[]) => {
   return methods.find((x) => x.id === methodId);
 };
 
+const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
+  const cacheKey = `sync-space-${userDid}-${spaceDid}`;
+  const cachedRequest = new CachedRequest(cacheKey, () => api.post('/api/customers/sync-to-space'), {
+    ttl: 1000 * 60 * 60, // 1 hour
+  });
+  return cachedRequest.fetch(false).then((res) => {
+    if (!res.success) {
+      cachedRequest.clearCache();
+    }
+    return res;
+  });
+};
+
 function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
   if (baseUrl) {
     // This is hack but efficient to share
@@ -101,6 +115,20 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }: Pay
   } = useRequest(getSettings, {
     refreshDeps: [livemode],
   });
+
+  useEffect(() => {
+    const didSpace = session?.user?.didSpace as
+      | {
+          endpoint: string;
+          did: string;
+        }
+      | undefined;
+    const userDid = session?.user?.did;
+    if (userDid && didSpace && didSpace.endpoint && didSpace.did) {
+      syncToSpaceRequest(userDid, didSpace.did);
+    }
+  }, [session?.user]);
+
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
 

package/src/libs/cached-request.ts

@@ -70,7 +70,7 @@ export class CachedRequest {
     }
   }
 
-  private clearCache() {
+  clearCache() {
     const cache = this.getCache();
     if (this.options.strategy === 'memory') {
       cache.delete(this.cacheKey);

package/src/payment/form/address.tsx

@@ -21,7 +21,7 @@ AddressForm.defaultProps = {
 };
 
 export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
   if (mode === 'required') {
@@ -34,7 +34,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
               name="billing_address.line1"
               rules={{
                 required: t('payment.checkout.required'),
-                ...getFieldValidation('billing_address.line1', fieldValidation),
+                ...getFieldValidation('billing_address.line1', fieldValidation, locale),
               }}
               errorPosition={errorPosition}
               variant="outlined"
@@ -45,7 +45,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
               name="billing_address.city"
               rules={{
                 required: t('payment.checkout.required'),
-                ...getFieldValidation('billing_address.city', fieldValidation),
+                ...getFieldValidation('billing_address.city', fieldValidation, locale),
               }}
               errorPosition={errorPosition}
               variant="outlined"
@@ -56,7 +56,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
               name="billing_address.state"
               rules={{
                 required: t('payment.checkout.required'),
-                ...getFieldValidation('billing_address.state', fieldValidation),
+                ...getFieldValidation('billing_address.state', fieldValidation, locale),
               }}
               errorPosition={errorPosition}
               variant="outlined"
@@ -71,7 +71,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                   const isValid = validatePostalCode(x, country);
                   return isValid ? true : t('payment.checkout.invalid');
                 },
-                ...getFieldValidation('billing_address.postal_code', fieldValidation),
+                ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
               }}
               errorPosition={errorPosition}
               variant="outlined"
@@ -118,7 +118,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                     const isValid = validatePostalCode(x, country);
                     return isValid ? true : t('payment.checkout.invalid');
                   },
-                  ...getFieldValidation('billing_address.postal_code', fieldValidation),
+                  ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
                 }}
                 errorPosition={errorPosition}
                 variant="outlined"

package/src/payment/form/index.tsx

@@ -177,7 +177,7 @@ export default function PaymentForm({
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
-  const formErrorPosition = isMobile ? 'bottom' : 'right';
+  const formErrorPosition = 'bottom';
   const {
     control,
     getValues,

package/src/payment/form/phone.tsx

@@ -93,6 +93,7 @@ export default function PhoneInput({ ...props }) {
                   borderColor: 'transparent',
                 },
               }}
+              showDialCode
             />
           </InputAdornment>
         ),

package/src/payment/form/stripe/form.tsx

@@ -23,6 +23,7 @@ export type StripeCheckoutFormProps = {
 };
 
 const PaymentElementContainer = styled('div')`
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   &.visible {