@blocklet/payment-react/es/payment/form/address.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Fade, InputAdornment, Stack } from "@mui/material";
import { Controller, useFormContext, useWatch } from "react-hook-form";
import FormInput from "../../components/input.js";
import FormLabel from "../../components/label.js";
import CountrySelect from "../../components/country-select.js";
import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = "right" }) {
  const { t, locale } = useLocaleContext();
  const { control } = useFormContext();
  const country = useWatch({ control, name: "billing_address.country" });
  if (mode === "required") {
    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
      /* @__PURE__ */ jsx(
        FormInput,
        {
          name: "billing_address.line1",
          rules: {
            required: t("payment.checkout.required"),
            ...getFieldValidation("billing_address.line1", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.line1")
        }
      ),
      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
      /* @__PURE__ */ jsx(
        FormInput,
        {
          name: "billing_address.city",
          rules: {
            required: t("payment.checkout.required"),
            ...getFieldValidation("billing_address.city", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.city")
        }
      ),
      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
      /* @__PURE__ */ jsx(
        FormInput,
        {
          name: "billing_address.state",
          rules: {
            required: t("payment.checkout.required"),
            ...getFieldValidation("billing_address.state", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.state")
        }
      ),
      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
      /* @__PURE__ */ jsx(
        FormInput,
        {
          name: "billing_address.postal_code",
          rules: {
            required: t("payment.checkout.required"),
            validate: (x) => {
              const isValid = validatePostalCode(x, country);
              return isValid ? true : t("payment.checkout.invalid");
            },
            ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.postal_code"),
          InputProps: {
            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
              Controller,
              {
                name: "billing_address.country",
                control,
                render: ({ field }) => /* @__PURE__ */ jsx(
                  CountrySelect,
                  {
                    ...field,
                    ref: field.ref,
                    sx: {
                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                        borderColor: "transparent"
                      }
                    }
                  }
                )
              }
            ) })
          }
        }
      )
    ] }) }) });
  }
  if (stripe) {
    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
      /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
        FormInput,
        {
          name: "billing_address.postal_code",
          rules: {
            required: t("payment.checkout.required"),
            validate: (x) => {
              const isValid = validatePostalCode(x, country);
              return isValid ? true : t("payment.checkout.invalid");
            },
            ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.postal_code"),
          InputProps: {
            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
              Controller,
              {
                name: "billing_address.country",
                control,
                render: ({ field }) => /* @__PURE__ */ jsx(
                  CountrySelect,
                  {
                    ...field,
                    ref: field.ref,
                    sx: {
                      ".MuiOutlinedInput-notchedOutline": {
                        borderColor: "transparent !important"
                      }
                    }
                  }
                )
              }
            ) })
          }
        }
      ) })
    ] }) }) });
  }
  return null;
}