@blocklet/payment-react 1.13.113

package/es/payment/form/address.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Fade, Stack, Typography } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+import { CountrySelector } from "react-international-phone";
+import FormInput from "../../components/input.js";
+export default function AddressForm({ mode, stripe }) {
+  const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+  if (mode === "required") {
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
+          /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "billing_address.country",
+              control,
+              render: ({ field }) => /* @__PURE__ */ jsx(
+                CountrySelector,
+                {
+                  selectedCountry: field.value,
+                  onSelect: ({ iso2 }) => setValue(field.name, iso2),
+                  buttonStyle: {
+                    width: "64px",
+                    height: "40px",
+                    border: "1px solid #ccc",
+                    marginLeft: -1,
+                    marginTop: -1
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              name: "billing_address.postal_code",
+              rules: { required: t("payment.checkout.required") },
+              errorPosition: "right",
+              variant: "outlined",
+              placeholder: t("payment.checkout.billing.postal_code")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.state",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.state")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.line1",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.line1")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.city",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.city")
+          }
+        )
+      ] })
+    ] }) });
+  }
+  if (stripe) {
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
+      /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "billing_address.country",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              CountrySelector,
+              {
+                selectedCountry: field.value,
+                onSelect: ({ iso2 }) => setValue(field.name, iso2),
+                buttonStyle: {
+                  width: "64px",
+                  height: "40px",
+                  border: "1px solid #ccc",
+                  marginLeft: -1,
+                  marginTop: -1
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.postal_code",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.postal_code")
+          }
+        )
+      ] }) })
+    ] }) });
+  }
+  return null;
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import 'react-international-phone/style.css';
+import { CheckoutCallbacks, CheckoutContext } from '../../types';
+type PageData = CheckoutContext & CheckoutCallbacks;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, customer, onPaid, onError, mode, }: PageData): import("react").JSX.Element;
+declare namespace PaymentForm {
+    var defaultProps: {};
+}
+export default PaymentForm;

package/es/payment/form/index.js

@@ -0,0 +1,337 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react-international-phone/style.css";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import Toast from "@arcblock/ux/lib/Toast";
+import { LoadingButton } from "@mui/lab";
+import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { useCreation, useSetState, useSize } from "ahooks";
+import { PhoneNumberUtil } from "google-libphonenumber";
+import pWaitFor from "p-wait-for";
+import { useEffect } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { dispatch } from "use-bus";
+import isEmail from "validator/es/lib/isEmail";
+import api from "../../api.js";
+import FormInput from "../../components/input.js";
+import { usePaymentContext } from "../../contexts/payment.js";
+import { formatError, getStatementDescriptor } from "../../util.js";
+import UserButtons from "./addon.js";
+import AddressForm from "./address.js";
+import PhoneInput from "./phone.js";
+import StripeCheckout from "./stripe.js";
+const phoneUtil = PhoneNumberUtil.getInstance();
+const waitForCheckoutComplete = async (sessionId) => {
+  let result;
+  await pWaitFor(
+    async () => {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${sessionId}`);
+      if (data.paymentIntent && data.paymentIntent.status === "requires_action" && data.paymentIntent.last_payment_error) {
+        throw new Error(data.paymentIntent.last_payment_error.message);
+      }
+      result = data;
+      return data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status);
+    },
+    { interval: 2e3, timeout: 3 * 60 * 1e3 }
+  );
+  return result;
+};
+PaymentForm.defaultProps = {};
+export default function PaymentForm({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  customer,
+  onPaid,
+  onError,
+  mode
+}) {
+  const theme = useTheme();
+  const { t } = useLocaleContext();
+  const { session, connect } = usePaymentContext();
+  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const [state, setState] = useSetState({
+    submitting: false,
+    paying: false,
+    paid: false,
+    paymentIntent,
+    stripeContext: void 0,
+    customer,
+    stripePaying: false
+  });
+  useEffect(() => {
+    if (session.user) {
+      const values = getValues();
+      if (!values.customer_name) {
+        setValue("customer_name", session.user.fullName);
+      }
+      if (!values.customer_email) {
+        setValue("customer_email", session.user.email);
+      }
+      if (!values.customer_phone) {
+        setValue("customer_phone", session.user.phone);
+      }
+    }
+  }, [session.user, getValues, setValue]);
+  const paymentMethod = useWatch({ control, name: "payment_method" });
+  const paymentCurrency = useWatch({ control, name: "payment_currency" });
+  const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
+  const domSize = useSize(document.body);
+  const isColumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+  const payee = getStatementDescriptor(checkoutSession.line_items);
+  const buttonText = session.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", { action: t(`payment.checkout.${checkoutSession.mode}`) });
+  const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const handleMethodChange = (e) => {
+    setValue("payment_method", e.target.value);
+    const currencies = paymentMethods.find((x) => x.id === e.target.value)?.payment_currencies || [];
+    if (currencies.some((x) => x.id === paymentCurrency) === false) {
+      setValue("payment_currency", currencies[0]?.id);
+    }
+  };
+  const handleConnected = async () => {
+    try {
+      const result = await waitForCheckoutComplete(checkoutSession.id);
+      setState({ paid: true, paying: false });
+      onPaid(result);
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setState({ paying: false });
+    }
+  };
+  const onUserLoggedIn = async () => {
+    const { data: profile } = await api.get("/api/customers/me");
+    if (profile) {
+      const values = getValues();
+      if (!values.customer_name) {
+        setValue("customer_name", profile.name);
+      }
+      if (!values.customer_email) {
+        setValue("customer_email", profile.email);
+      }
+      if (!values.customer_phone) {
+        setValue("customer_phone", profile.phone);
+      }
+      if (profile.address?.country) {
+        setValue("billing_address.country", profile.address.country);
+      }
+      if (profile.address?.state) {
+        setValue("billing_address.state", profile.address.state);
+      }
+      if (profile.address?.line1) {
+        setValue("billing_address.line1", profile.address.line1);
+      }
+      if (profile.address?.line2) {
+        setValue("billing_address.line2", profile.address.line2);
+      }
+      if (profile.address?.city) {
+        setValue("billing_address.city", profile.address.city);
+      }
+      if (profile.address?.postal_code) {
+        setValue("billing_address.postal_code", profile.address.postal_code);
+      }
+    }
+  };
+  const onSubmit = async (data) => {
+    setState({ submitting: true });
+    try {
+      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      setState({
+        paymentIntent: result.data.paymentIntent,
+        stripeContext: result.data.stripeContext,
+        customer: result.data.customer,
+        submitting: false
+      });
+      if (["arcblock", "ethereum"].includes(method.type)) {
+        setState({ paying: true });
+        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+          await handleConnected();
+        } else {
+          connect.open({
+            action: checkoutSession.mode,
+            timeout: 5 * 60 * 1e3,
+            extraParams: { checkoutSessionId: checkoutSession.id },
+            onSuccess: async () => {
+              connect.close();
+              await handleConnected();
+            },
+            onClose: () => {
+              connect.close();
+              setState({ submitting: false, paying: false });
+            },
+            onError: (err) => {
+              setState({ submitting: false, paying: false });
+              onError(err);
+            }
+          });
+        }
+      }
+      if (["stripe"].includes(method.type)) {
+        if (result.data.stripeContext?.status === "succeeded") {
+          setState({ paying: true });
+        } else {
+          setState({ stripePaying: true });
+        }
+      }
+    } catch (err) {
+      if (err.response?.data?.code) {
+        dispatch(`error.${err.response?.data?.code}`);
+      }
+      Toast.error(formatError(err));
+    } finally {
+      setState({ submitting: false });
+    }
+  };
+  const onAction = () => {
+    if (session.user) {
+      handleSubmit(onSubmit)();
+    } else {
+      session.login({
+        onSuccess: onUserLoggedIn,
+        extraParams: {}
+      });
+    }
+  };
+  const onStripeConfirm = async () => {
+    setState({ stripePaying: false, paying: true });
+    await handleConnected();
+  };
+  const onStripeCancel = () => {
+    setState({ stripePaying: false });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-contact", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
+        isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */ jsx(UserButtons, {})
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "customer_name",
+            variant: "outlined",
+            errorPosition: "right",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: t("payment.checkout.customer.name") })
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "customer_email",
+            variant: "outlined",
+            errorPosition: "right",
+            rules: {
+              required: t("payment.checkout.required"),
+              validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
+            },
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: t("payment.checkout.customer.email") })
+            }
+          }
+        ),
+        checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsx(
+          PhoneInput,
+          {
+            name: "customer_phone",
+            variant: "outlined",
+            errorPosition: "right",
+            placeholder: "Phone number",
+            rules: {
+              required: t("payment.checkout.required"),
+              validate: (x) => {
+                try {
+                  const parsed = phoneUtil.parseAndKeepRawInput(x);
+                  return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
+                } catch {
+                  return t("payment.checkout.invalid");
+                }
+              }
+            }
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
+    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { mb: 2, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { width: 1 }, spacing: 1, children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "payment_method",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(Select, { ...field, onChange: handleMethodChange, sx: { flex: 1 }, size: "small", children: paymentMethods.map((x) => {
+              const selected = x.id === paymentMethod;
+              return /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+                /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 20, height: 20 } }),
+                /* @__PURE__ */ jsx(Typography, { color: selected ? "text.primary" : "text.secondary", children: x.name })
+              ] }) }, x.id);
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "payment_currency",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(Select, { ...field, sx: { flex: 1 }, size: "small", children: paymentCurrencies.map((x) => {
+              const selected = x.id === paymentCurrency;
+              return /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+                /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 20, height: 20 } }),
+                /* @__PURE__ */ jsx(Typography, { color: selected ? "text.primary" : "text.secondary", children: x.symbol })
+              ] }) }, x.id);
+            }) })
+          }
+        )
+      ] }),
+      state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
+        StripeCheckout,
+        {
+          clientSecret: state.stripeContext.client_secret,
+          intentType: state.stripeContext.intent_type,
+          publicKey: method.settings.stripe?.publishable_key,
+          customer: state.customer,
+          mode: checkoutSession.mode,
+          onConfirm: onStripeConfirm,
+          onCancel: onStripeCancel
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
+      /* @__PURE__ */ jsx(
+        LoadingButton,
+        {
+          variant: "contained",
+          color: "primary",
+          size: "large",
+          onClick: onAction,
+          fullWidth: true,
+          loadingPosition: "end",
+          disabled: state.submitting || state.paying || state.stripePaying,
+          loading: state.submitting || state.paying,
+          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+        }
+      ),
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: { mt: 1, color: "text.secondary", fontSize: "0.9rem", lineHeight: "1.1rem", textAlign: "center" },
+          children: t("payment.checkout.confirm", { payee })
+        }
+      )
+    ] }) })
+  ] });
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function PhoneInput({ ...props }: {
+    [x: string]: any;
+}): import("react").JSX.Element;

package/es/payment/form/phone.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
+import FormInput from "../../components/input.js";
+import { isValidCountry } from "../../util.js";
+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] || "",
+    countries: defaultCountries,
+    onChange: (data) => {
+      setValue(props.name, data.phone);
+    }
+  });
+  const userCountry = useWatch({ control, name: countryFieldName });
+  useEffect(() => {
+    if (userCountry !== country) {
+      setCountry(userCountry);
+    }
+  }, [userCountry]);
+  const onCountryChange = (e) => {
+    setCountry(e.target.value);
+    setValue(countryFieldName, e.target.value);
+  };
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        value: phone,
+        onChange: handlePhoneValueChange,
+        type: "tel",
+        inputRef,
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              MenuProps: {
+                style: {
+                  height: "300px",
+                  width: "360px",
+                  top: "10px",
+                  left: "-34px"
+                },
+                transformOrigin: {
+                  vertical: "top",
+                  horizontal: "left"
+                }
+              },
+              sx: {
+                width: "max-content",
+                // Remove default outline (display only on focus)
+                fieldset: {
+                  display: "none"
+                },
+                '&.Mui-focused:has(div[aria-expanded="false"])': {
+                  fieldset: {
+                    display: "block"
+                  }
+                },
+                // Update default spacing
+                ".MuiSelect-select": {
+                  padding: "8px",
+                  paddingRight: "24px !important"
+                },
+                svg: {
+                  right: 0
+                }
+              },
+              value: country,
+              onChange: onCountryChange,
+              renderValue: (code) => /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+              children: defaultCountries.map((c) => {
+                const parsed = parseCountry(c);
+                return /* @__PURE__ */ jsxs(MenuItem, { value: parsed.iso2, children: [
+                  /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
+                  /* @__PURE__ */ jsx(Typography, { marginRight: "8px", children: parsed.name }),
+                  /* @__PURE__ */ jsxs(Typography, { color: "gray", children: [
+                    "+",
+                    parsed.dialCode
+                  ] })
+                ] }, parsed.iso2);
+              })
+            }
+          ) })
+        },
+        ...omit(props, ["countryFieldName"])
+      }
+    )
+  );
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { TCustomer } from '@blocklet/payment-types';
+type StripeCheckoutProps = {
+    clientSecret: string;
+    intentType: string;
+    publicKey: string;
+    mode: string;
+    customer: TCustomer;
+    onConfirm: Function;
+    onCancel: Function;
+};
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, }: StripeCheckoutProps): import("react").JSX.Element;
+export {};