@blocklet/payment-react 1.18.35 → 1.18.37

package/es/contexts/payment.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
 import { CachedRequest } from "../libs/cached-request.js";
@@ -33,6 +33,19 @@ const getCurrency = (currencyId, methods) => {
 const getMethod = (methodId, methods) => {
   return methods.find((x) => x.id === methodId);
 };
+const syncToSpaceRequest = (userDid, spaceDid) => {
+  const cacheKey = `sync-space-${userDid}-${spaceDid}`;
+  const cachedRequest = new CachedRequest(cacheKey, () => api.post("/api/customers/sync-to-space"), {
+    ttl: 1e3 * 60 * 60
+    // 1 hour
+  });
+  return cachedRequest.fetch(false).then((res) => {
+    if (!res.success) {
+      cachedRequest.clearCache();
+    }
+    return res;
+  });
+};
 function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
   if (baseUrl) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
@@ -56,6 +69,13 @@ function PaymentProvider({ session, connect, children, baseUrl, authToken }) {
   } = useRequest(getSettings, {
     refreshDeps: [livemode]
   });
+  useEffect(() => {
+    const didSpace = session?.user?.didSpace;
+    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);
   if (error) {

package/es/libs/cached-request.d.ts

@@ -11,7 +11,7 @@ export declare class CachedRequest {
     private getCache;
     private getCachedData;
     private setCachedData;
-    private clearCache;
+    clearCache(): void;
     fetch(forceRefresh?: boolean): Promise<any>;
 }
 export {};

package/es/payment/form/address.js

@@ -11,7 +11,7 @@ AddressForm.defaultProps = {
   errorPosition: "right"
 };
 export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: "billing_address.country" });
   if (mode === "required") {
@@ -23,7 +23,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,
           variant: "outlined",
@@ -37,7 +37,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,
           variant: "outlined",
@@ -51,7 +51,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,
           variant: "outlined",
@@ -69,7 +69,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,
           variant: "outlined",
@@ -111,7 +111,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,
           variant: "outlined",

package/es/payment/form/index.js

@@ -106,7 +106,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/es/payment/form/phone.js

@@ -82,7 +82,8 @@ export default function PhoneInput({ ...props }) {
                 "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                   borderColor: "transparent"
                 }
-              }
+              },
+              showDialCode: true
             }
           ) })
         },

package/es/payment/form/stripe/form.js

@@ -10,6 +10,7 @@ import { useMobile } from "../../../hooks/mobile.js";
 import LoadingButton from "../../../components/loading-button.js";
 const { Elements, PaymentElement, useElements, useStripe, loadStripe, LinkAuthenticationElement } = globalThis.__STRIPE_COMPONENTS__;
 const PaymentElementContainer = styled("div")`
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   &.visible {

package/lib/components/country-select.d.ts

@@ -5,6 +5,7 @@ export type CountrySelectProps = {
     onChange: (value: CountryIso2) => void;
     name: string;
     sx?: SxProps;
+    showDialCode?: boolean;
 };
 declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/lib/components/country-select.js

@@ -10,11 +10,20 @@ var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _mobile = require("../hooks/mobile");
+const Transition = (0, _react.forwardRef)(function Transition2(props, ref) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Slide, {
+    direction: "up",
+    ref,
+    timeout: 200,
+    ...props
+  });
+});
 const CountrySelect = (0, _react.forwardRef)(({
   value,
   onChange,
   name,
-  sx
+  sx,
+  showDialCode = false
 }, ref) => {
   const {
     setValue
@@ -121,10 +130,6 @@ const CountrySelect = (0, _react.forwardRef)(({
       name: ""
     };
   }, [value]);
-  const onCountryChange = e => {
-    onChange(e.target.value);
-    setValue(name, e.target.value);
-  };
   const handleCountryClick = code => {
     onChange(code);
     setValue(name, code);
@@ -169,79 +174,7 @@ const CountrySelect = (0, _react.forwardRef)(({
       handleCountryClick(country.iso2);
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Select, {
-    ref,
-    open,
-    onOpen: () => setOpen(true),
-    onClose: () => setOpen(false),
-    MenuProps: {
-      style: {
-        maxHeight: "300px",
-        top: "10px"
-      },
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      PaperProps: {
-        ref: menuRef,
-        sx: {
-          display: "flex",
-          "& .MuiList-root": {
-            pt: 0,
-            display: "flex",
-            flexDirection: "column",
-            overflowY: "hidden"
-          }
-        }
-      }
-    },
-    sx: {
-      width: "100%",
-      minWidth: "60px",
-      fieldset: {
-        display: "none"
-      },
-      '&.Mui-focused:has(div[aria-expanded="false"])': {
-        fieldset: {
-          display: "block"
-        }
-      },
-      ".MuiSelect-select": {
-        padding: "8px",
-        paddingRight: "24px !important"
-      },
-      svg: {
-        right: 0
-      },
-      ".MuiMenuItem-root": {
-        justifyContent: "flex-start"
-      },
-      ...sx
-    },
-    value,
-    onChange: onCountryChange,
-    renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "nowrap",
-      gap: 0.5,
-      sx: {
-        cursor: "pointer"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-        iso2: code,
-        style: {
-          display: "flex"
-        }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        children: countryDetail?.name
-      })]
-    }),
+  const countryListContent = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {
         position: "sticky",
@@ -271,7 +204,7 @@ const CountrySelect = (0, _react.forwardRef)(({
         flex: 1,
         overflowY: "auto",
         overflowX: "hidden",
-        maxHeight: "calc(300px - 65px)",
+        maxHeight: isMobile ? "calc(60vh - 80px)" : "calc(300px - 65px)",
         scrollBehavior: "smooth"
       },
       children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
@@ -282,6 +215,8 @@ const CountrySelect = (0, _react.forwardRef)(({
           selected: parsed.iso2 === value,
           onClick: () => handleCountryClick(parsed.iso2),
           sx: {
+            display: "flex",
+            alignItems: "center",
             "&.Mui-selected": {
               backgroundColor: "rgba(0, 0, 0, 0.04)"
             },
@@ -300,6 +235,12 @@ const CountrySelect = (0, _react.forwardRef)(({
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: parsed.name
+          }), showDialCode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              ml: 1
+            },
+            color: "text.secondary",
+            children: `+${parsed.dialCode}`
           })]
         }, parsed.iso2);
       }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
@@ -311,8 +252,175 @@ const CountrySelect = (0, _react.forwardRef)(({
       })
     })]
   });
+  if (!isMobile) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+      ref,
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
+      MenuProps: {
+        style: {
+          maxHeight: "300px",
+          top: "10px"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          ref: menuRef,
+          sx: {
+            display: "flex",
+            "& .MuiList-root": {
+              pt: 0,
+              display: "flex",
+              flexDirection: "column",
+              overflowY: "hidden"
+            }
+          }
+        }
+      },
+      sx: {
+        width: "100%",
+        minWidth: "60px",
+        fieldset: {
+          display: "none"
+        },
+        '&.Mui-focused:has(div[aria-expanded="false"])': {
+          fieldset: {
+            display: "block"
+          }
+        },
+        ".MuiSelect-select": {
+          padding: "8px",
+          paddingRight: "24px !important"
+        },
+        svg: {
+          right: 0
+        },
+        ".MuiMenuItem-root": {
+          justifyContent: "flex-start"
+        },
+        ...sx
+      },
+      value,
+      onChange: e => {
+        onChange(e.target.value);
+        setValue(name, e.target.value);
+      },
+      renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
+        sx: {
+          cursor: "pointer"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: code,
+          style: {
+            display: "flex"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: countryDetail?.name
+        })]
+      }),
+      children: countryListContent
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref,
+    sx: {
+      ...sx
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      onClick: () => setOpen(true),
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      gap: 0.5,
+      sx: {
+        cursor: "pointer",
+        padding: "8px",
+        paddingRight: "24px",
+        position: "relative",
+        border: "none",
+        "-webkit-tap-highlight-color": "transparent",
+        userSelect: "none",
+        background: "none",
+        "&:hover, &:focus, &:active": {
+          backgroundColor: "transparent",
+          outline: "none"
+        },
+        touchAction: "manipulation"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+        iso2: value,
+        style: {
+          display: "flex"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: countryDetail?.name
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          position: "absolute",
+          right: "8px",
+          width: 0,
+          height: 0,
+          borderLeft: "5px solid transparent",
+          borderRight: "5px solid transparent",
+          borderTop: "5px solid currentColor"
+        }
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open,
+      onClose: () => setOpen(false),
+      fullWidth: true,
+      maxWidth: "xs",
+      TransitionComponent: Transition,
+      PaperProps: {
+        sx: {
+          position: "absolute",
+          bottom: 0,
+          m: 0,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          width: "100%"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          p: 2,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          children: "Select Country"
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          onClick: () => setOpen(false),
+          sx: {
+            "-webkit-tap-highlight-color": "transparent"
+          },
+          children: "\u2715"
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        sx: {
+          p: 0
+        },
+        children: countryListContent
+      })]
+    })]
+  });
 });
 CountrySelect.defaultProps = {
-  sx: {}
+  sx: {},
+  showDialCode: false
 };
 module.exports = CountrySelect;

package/lib/contexts/payment.js

@@ -53,6 +53,20 @@ const getCurrency = (currencyId, methods) => {
 const getMethod = (methodId, methods) => {
   return methods.find(x => x.id === methodId);
 };
+const syncToSpaceRequest = (userDid, spaceDid) => {
+  const cacheKey = `sync-space-${userDid}-${spaceDid}`;
+  const cachedRequest = new _cachedRequest.CachedRequest(cacheKey, () => _api.default.post("/api/customers/sync-to-space"), {
+    ttl: 1e3 * 60 * 60
+    // 1 hour
+  });
+
+  return cachedRequest.fetch(false).then(res => {
+    if (!res.success) {
+      cachedRequest.clearCache();
+    }
+    return res;
+  });
+};
 function PaymentProvider({
   session,
   connect,
@@ -84,6 +98,13 @@ function PaymentProvider({
   } = (0, _ahooks.useRequest)(getSettings, {
     refreshDeps: [livemode]
   });
+  (0, _react.useEffect)(() => {
+    const didSpace = session?.user?.didSpace;
+    const userDid = session?.user?.did;
+    if (userDid && didSpace && didSpace.endpoint && didSpace.did) {
+      syncToSpaceRequest(userDid, didSpace.did);
+    }
+  }, [session?.user]);
   const prefix = (0, _util.getPrefix)();
   const [payable, setPayable] = (0, _react.useState)(true);
   if (error) {

package/lib/libs/cached-request.d.ts

@@ -11,7 +11,7 @@ export declare class CachedRequest {
     private getCache;
     private getCachedData;
     private setCachedData;
-    private clearCache;
+    clearCache(): void;
     fetch(forceRefresh?: boolean): Promise<any>;
 }
 export {};

package/lib/payment/form/address.js

@@ -25,7 +25,8 @@ function AddressForm({
   errorPosition
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     control
@@ -51,7 +52,7 @@ function AddressForm({
             name: "billing_address.line1",
             rules: {
               required: t("payment.checkout.required"),
-              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation)
+              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation, locale)
             },
             errorPosition,
             variant: "outlined",
@@ -63,7 +64,7 @@ function AddressForm({
             name: "billing_address.city",
             rules: {
               required: t("payment.checkout.required"),
-              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation)
+              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation, locale)
             },
             errorPosition,
             variant: "outlined",
@@ -75,7 +76,7 @@ function AddressForm({
             name: "billing_address.state",
             rules: {
               required: t("payment.checkout.required"),
-              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation)
+              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
             },
             errorPosition,
             variant: "outlined",
@@ -91,7 +92,7 @@ function AddressForm({
                 const isValid = (0, _validator.validatePostalCode)(x, country);
                 return isValid ? true : t("payment.checkout.invalid");
               },
-              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
+              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
             },
             errorPosition,
             variant: "outlined",
@@ -148,7 +149,7 @@ function AddressForm({
                   const isValid = (0, _validator.validatePostalCode)(x, country);
                   return isValid ? true : t("payment.checkout.invalid");
                 },
-                ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
+                ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
               },
               errorPosition,
               variant: "outlined",

package/lib/payment/form/index.js

@@ -124,7 +124,7 @@ function PaymentForm({
     payable
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
-  const formErrorPosition = isMobile ? "bottom" : "right";
+  const formErrorPosition = "bottom";
   const {
     control,
     getValues,

package/lib/payment/form/phone.js

@@ -103,7 +103,8 @@ function PhoneInput({
               "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                 borderColor: "transparent"
               }
-            }
+            },
+            showDialCode: true
           })
         })
       },

package/lib/payment/form/stripe/form.js

@@ -24,6 +24,7 @@ const {
   LinkAuthenticationElement
 } = globalThis.__STRIPE_COMPONENTS__;
 const PaymentElementContainer = (0, _system.styled)("div")`
+  width: 100%;
   opacity: 0;
   transition: opacity 300ms ease;
   &.visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.35",
+  "version": "1.18.37",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.12",
-    "@arcblock/ux": "^2.13.12",
+    "@arcblock/did-connect": "^2.13.13",
+    "@arcblock/ux": "^2.13.13",
     "@arcblock/ws": "^1.20.2",
-    "@blocklet/ui-react": "^2.13.12",
+    "@blocklet/ui-react": "^2.13.13",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.35",
+    "@blocklet/payment-types": "1.18.37",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "802a98b5ca81475f8cd7b9dcbb77fce7240b9788"
+  "gitHead": "ea43bad3259d340da14fc0dd0e5b02f2c88c5093"
 }