@blocklet/payment-react 1.13.113

package/lib/payment/form/address.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = AddressForm;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _reactHookForm = require("react-hook-form");
+var _reactInternationalPhone = require("react-international-phone");
+var _input = _interopRequireDefault(require("../../components/input"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AddressForm({
+  mode,
+  stripe
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    control,
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  if (mode === "required") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-payment-address cko-payment-form",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mb: 1,
+            color: "text.primary",
+            fontWeight: 600
+          },
+          children: t(`payment.checkout.billing.${mode}`)
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "column",
+          className: "cko-payment-form",
+          spacing: 0,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+              name: "billing_address.country",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.CountrySelector, {
+                selectedCountry: field.value,
+                onSelect: ({
+                  iso2
+                }) => setValue(field.name, iso2),
+                buttonStyle: {
+                  width: "64px",
+                  height: "40px",
+                  border: "1px solid #ccc",
+                  marginLeft: -1,
+                  marginTop: -1
+                }
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+              name: "billing_address.postal_code",
+              rules: {
+                required: t("payment.checkout.required")
+              },
+              errorPosition: "right",
+              variant: "outlined",
+              placeholder: t("payment.checkout.billing.postal_code")
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.state",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.state")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.line1",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.line1")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.city",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.city")
+          })]
+        })]
+      })
+    });
+  }
+  if (stripe) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-payment-address cko-payment-form",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mb: 1,
+            color: "text.primary",
+            fontWeight: 600
+          },
+          children: t(`payment.checkout.billing.${mode}`)
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "column",
+          className: "cko-payment-form",
+          spacing: 0,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+              name: "billing_address.country",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.CountrySelector, {
+                selectedCountry: field.value,
+                onSelect: ({
+                  iso2
+                }) => setValue(field.name, iso2),
+                buttonStyle: {
+                  width: "64px",
+                  height: "40px",
+                  border: "1px solid #ccc",
+                  marginLeft: -1,
+                  marginTop: -1
+                }
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+              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/lib/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/lib/payment/form/index.js

@@ -0,0 +1,464 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PaymentForm;
+var _jsxRuntime = require("react/jsx-runtime");
+require("react-international-phone/style.css");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Theme = require("@arcblock/ux/lib/Theme");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _lab = require("@mui/lab");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _googleLibphonenumber = require("google-libphonenumber");
+var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
+var _react = require("react");
+var _reactHookForm = require("react-hook-form");
+var _useBus = require("use-bus");
+var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
+var _api = _interopRequireDefault(require("../../api"));
+var _input = _interopRequireDefault(require("../../components/input"));
+var _payment = require("../../contexts/payment");
+var _util = require("../../util");
+var _addon = _interopRequireDefault(require("./addon"));
+var _address = _interopRequireDefault(require("./address"));
+var _phone = _interopRequireDefault(require("./phone"));
+var _stripe = _interopRequireDefault(require("./stripe"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const phoneUtil = _googleLibphonenumber.PhoneNumberUtil.getInstance();
+const waitForCheckoutComplete = async sessionId => {
+  let result;
+  await (0, _pWaitFor.default)(async () => {
+    const {
+      data
+    } = await _api.default.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 = {};
+function PaymentForm({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  customer,
+  onPaid,
+  onError,
+  mode
+}) {
+  const theme = (0, _Theme.useTheme)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    session,
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const {
+    control,
+    getValues,
+    setValue,
+    handleSubmit
+  } = (0, _reactHookForm.useFormContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    submitting: false,
+    paying: false,
+    paid: false,
+    paymentIntent,
+    stripeContext: void 0,
+    customer,
+    stripePaying: false
+  });
+  (0, _react.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 = (0, _reactHookForm.useWatch)({
+    control,
+    name: "payment_method"
+  });
+  const paymentCurrency = (0, _reactHookForm.useWatch)({
+    control,
+    name: "payment_currency"
+  });
+  const paymentCurrencies = paymentMethods.find(x => x.id === paymentMethod)?.payment_currencies || [];
+  const domSize = (0, _ahooks.useSize)(document.body);
+  const isColumnLayout = (0, _ahooks.useCreation)(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+  const payee = (0, _util.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.default.error((0, _util.formatError)(err));
+    } finally {
+      setState({
+        paying: false
+      });
+    }
+  };
+  const onUserLoggedIn = async () => {
+    const {
+      data: profile
+    } = await _api.default.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.default.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) {
+        (0, _useBus.dispatch)(`error.${err.response?.data?.code}`);
+      }
+      _Toast.default.error((0, _util.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__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-payment-contact",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          sx: {
+            mb: 1
+          },
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              color: "text.primary",
+              fontWeight: 600
+            },
+            children: t("payment.checkout.contact")
+          }), isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_addon.default, {})]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "column",
+          className: "cko-payment-form",
+          spacing: 0,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "customer_name",
+            variant: "outlined",
+            errorPosition: "right",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            InputProps: {
+              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "start",
+                children: t("payment.checkout.customer.name")
+              })
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "customer_email",
+            variant: "outlined",
+            errorPosition: "right",
+            rules: {
+              required: t("payment.checkout.required"),
+              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid")
+            },
+            InputProps: {
+              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "start",
+                children: t("payment.checkout.customer.email")
+              })
+            }
+          }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
+            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__ */(0, _jsxRuntime.jsx)(_address.default, {
+      mode: checkoutSession.billing_address_collection,
+      stripe: method?.type === "stripe"
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "column",
+        alignItems: "flex-start",
+        className: "cko-payment-methods",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mb: 2,
+            color: "text.primary",
+            fontWeight: 600
+          },
+          children: t("payment.checkout.method")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          sx: {
+            width: 1
+          },
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "payment_method",
+            control,
+            render: ({
+              field
+            }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+              ...field,
+              onChange: handleMethodChange,
+              sx: {
+                flex: 1
+              },
+              size: "small",
+              children: paymentMethods.map(x => {
+                const selected = x.id === paymentMethod;
+                return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                  value: x.id,
+                  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: x.logo,
+                      alt: x.name,
+                      sx: {
+                        width: 20,
+                        height: 20
+                      }
+                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                      color: selected ? "text.primary" : "text.secondary",
+                      children: x.name
+                    })]
+                  })
+                }, x.id);
+              })
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "payment_currency",
+            control,
+            render: ({
+              field
+            }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+              ...field,
+              sx: {
+                flex: 1
+              },
+              size: "small",
+              children: paymentCurrencies.map(x => {
+                const selected = x.id === paymentCurrency;
+                return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                  value: x.id,
+                  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: x.logo,
+                      alt: x.name,
+                      sx: {
+                        width: 20,
+                        height: 20
+                      }
+                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                      color: selected ? "text.primary" : "text.secondary",
+                      children: x.symbol
+                    })]
+                  })
+                }, x.id);
+              })
+            })
+          })]
+        }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
+          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__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-payment-submit",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            mt: 1,
+            color: "text.secondary",
+            fontSize: "0.9rem",
+            lineHeight: "1.1rem",
+            textAlign: "center"
+          },
+          children: t("payment.checkout.confirm", {
+            payee
+          })
+        })]
+      })
+    })]
+  });
+}

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

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