@blocklet/payment-react 1.18.34 → 1.18.36

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/libs/util.d.ts

@@ -120,3 +120,4 @@ export declare function parseMarkedText(text: string): Array<{
     type: 'text' | 'marked';
     content: string;
 }>;
+export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;

package/es/libs/util.js

@@ -979,3 +979,16 @@ export function parseMarkedText(text) {
   }
   return result.filter((p) => p.content !== "");
 }
+export function getTokenBalanceLink(method, address) {
+  if (!method || !address) {
+    return "";
+  }
+  const explorerHost = method?.settings?.[method?.type]?.explorer_host || "";
+  if (method.type === "arcblock" && address) {
+    return joinURL(explorerHost, "accounts", address, "tokens");
+  }
+  if (["ethereum", "base"].includes(method.type) && address) {
+    return joinURL(explorerHost, "address", address);
+  }
+  return "";
+}

package/es/libs/validator.d.ts

@@ -1 +1,2 @@
 export declare function validatePostalCode(postalCode: string, country?: string): boolean;
+export declare function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale?: string): Record<string, any>;

package/es/libs/validator.js

@@ -1,4 +1,5 @@
 import isPostalCode from "validator/lib/isPostalCode";
+import { t } from "../locales/index.js";
 const POSTAL_CODE_SUPPORTED_COUNTRIES = [
   "AD",
   "AT",
@@ -68,3 +69,16 @@ export function validatePostalCode(postalCode, country) {
     return false;
   }
 }
+export function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName])
+    return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || t("payment.checkout.invalid", locale)
+    };
+  }
+  return rules;
+}

package/es/locales/en.js

@@ -232,7 +232,8 @@ export default flat({
         confirmPrompt: "Please confirm the details before proceeding.",
         payer: "Account",
         amount: "Amount",
-        failed: "Account changed, please pay manually."
+        failed: "Account changed, please pay manually.",
+        balanceLink: "View Balance"
       }
     },
     customer: {

package/es/locales/zh.js

@@ -232,7 +232,8 @@ export default flat({
         confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
-        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
+        balanceLink: "\u67E5\u770B\u4F59\u989D"
       }
     },
     customer: {

package/es/payment/form/address.d.ts

@@ -3,11 +3,15 @@ type Props = {
     mode: string;
     stripe: boolean;
     sx?: SxProps;
+    fieldValidation?: Record<string, any>;
+    errorPosition?: 'right' | 'bottom';
 };
-declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
 declare namespace AddressForm {
     var defaultProps: {
         sx: {};
+        fieldValidation: {};
+        errorPosition: string;
     };
 }
 export default AddressForm;

package/es/payment/form/address.js

@@ -4,12 +4,14 @@ import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import FormInput from "../../components/input.js";
 import CountrySelect from "../../components/country-select.js";
-import { validatePostalCode } from "../../libs/validator.js";
+import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 AddressForm.defaultProps = {
-  sx: {}
+  sx: {},
+  fieldValidation: {},
+  errorPosition: "right"
 };
-export default function AddressForm({ mode, stripe, sx = {} }) {
-  const { t } = useLocaleContext();
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }) {
+  const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: "billing_address.country" });
   if (mode === "required") {
@@ -19,8 +21,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.line1",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.line1", fieldValidation, locale)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.line1")
         }
@@ -30,8 +35,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.city",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.city", fieldValidation, locale)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.city")
         }
@@ -41,8 +49,11 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
         FormInput,
         {
           name: "billing_address.state",
-          rules: { required: t("payment.checkout.required") },
-          errorPosition: "right",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...getFieldValidation("billing_address.state", fieldValidation, locale)
+          },
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.state")
         }
@@ -57,9 +68,10 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             validate: (x) => {
               const isValid = validatePostalCode(x, country);
               return isValid ? true : t("payment.checkout.invalid");
-            }
+            },
+            ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
           },
-          errorPosition: "right",
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),
           InputProps: {
@@ -98,9 +110,10 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
             validate: (x) => {
               const isValid = validatePostalCode(x, country);
               return isValid ? true : t("payment.checkout.invalid");
-            }
+            },
+            ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
           },
-          errorPosition: "right",
+          errorPosition,
           variant: "outlined",
           placeholder: t("payment.checkout.billing.postal_code"),
           wrapperStyle: { height: "40px" },

package/es/payment/form/index.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useRef } from "react";
@@ -13,7 +13,7 @@ import isEmail from "validator/es/lib/isEmail";
 import { fromUnitToToken } from "@ocap/util";
 import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
-import { HelpOutline } from "@mui/icons-material";
+import { HelpOutline, OpenInNew } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -24,6 +24,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
@@ -36,6 +37,7 @@ import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 import { saveCurrencyPreference } from "../../libs/currency.js";
 import ConfirmDialog from "../../components/confirm.js";
+import { getFieldValidation } from "../../libs/validator.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -104,6 +106,7 @@ export default function PaymentForm({
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
+  const formErrorPosition = "bottom";
   const {
     control,
     getValues,
@@ -456,6 +459,7 @@ export default function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */ jsx(
     ConfirmDialog,
     {
@@ -469,7 +473,23 @@ export default function PaymentForm({
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
           /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx(Typography, { color: "text.primary", sx: { whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
-            /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }) })
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }),
+              balanceLink && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.fastPay.balanceLink"), placement: "top", children: /* @__PURE__ */ jsx(
+                OpenInNew,
+                {
+                  sx: {
+                    color: "text.lighter",
+                    fontSize: "0.85rem",
+                    cursor: "pointer",
+                    "&:hover": { color: "text.primary" }
+                  },
+                  onClick: () => {
+                    window.open(balanceLink, "_blank");
+                  }
+                }
+              ) })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: t("payment.checkout.fastPay.amount") }),
@@ -609,9 +629,10 @@ export default function PaymentForm({
               {
                 name: "customer_name",
                 variant: "outlined",
-                errorPosition: "right",
+                errorPosition: formErrorPosition,
                 rules: {
-                  required: t("payment.checkout.required")
+                  required: t("payment.checkout.required"),
+                  ...getFieldValidation("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
                 }
               }
             ),
@@ -621,10 +642,15 @@ export default function PaymentForm({
               {
                 name: "customer_email",
                 variant: "outlined",
-                errorPosition: "right",
+                errorPosition: formErrorPosition,
                 rules: {
                   required: t("payment.checkout.required"),
-                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
+                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid"),
+                  ...getFieldValidation(
+                    "customer_email",
+                    checkoutSession.metadata?.page_info?.field_validation,
+                    locale
+                  )
                 }
               }
             ),
@@ -635,14 +661,19 @@ export default function PaymentForm({
                 {
                   name: "customer_phone",
                   variant: "outlined",
-                  errorPosition: "right",
+                  errorPosition: formErrorPosition,
                   placeholder: "Phone number",
                   rules: {
                     required: t("payment.checkout.required"),
                     validate: async (x) => {
                       const isValid = await validatePhoneNumber(x);
                       return isValid ? true : t("payment.checkout.invalid");
-                    }
+                    },
+                    ...getFieldValidation(
+                      "customer_phone",
+                      checkoutSession.metadata?.page_info?.field_validation,
+                      locale
+                    )
                   }
                 }
               )
@@ -652,7 +683,9 @@ export default function PaymentForm({
               {
                 mode: checkoutSession.billing_address_collection,
                 stripe: method?.type === "stripe",
-                sx: { marginTop: "0 !important" }
+                sx: { marginTop: "0 !important" },
+                fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
+                errorPosition: formErrorPosition
               }
             )
           ]

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;