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

Reusable react components for payment kit v2

"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 _input = _interopRequireDefault(require("../../components/input"));
var _label = _interopRequireDefault(require("../../components/label"));
var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
var _validator = require("../../libs/validator");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function AddressForm({
  mode,
  sx = {},
  fieldValidation = {},
  errorPosition = "right"
}) {
  const {
    t,
    locale
  } = (0, _context.useLocaleContext)();
  const {
    control
  } = (0, _reactHookForm.useFormContext)();
  const country = (0, _reactHookForm.useWatch)({
    control,
    name: "billing_address.country"
  });
  if (mode === "required") {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
      in: true,
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
        className: "cko-payment-address cko-payment-form",
        sx,
        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "column",
          className: "cko-payment-form",
          spacing: 0,
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            className: "base-label",
            children: t("payment.checkout.billing.line1")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
            name: "billing_address.line1",
            rules: {
              required: t("payment.checkout.required"),
              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation, locale)
            },
            errorPosition,
            variant: "outlined",
            placeholder: t("payment.checkout.billing.line1")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            className: "base-label",
            children: t("payment.checkout.billing.city")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
            name: "billing_address.city",
            rules: {
              required: t("payment.checkout.required"),
              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation, locale)
            },
            errorPosition,
            variant: "outlined",
            placeholder: t("payment.checkout.billing.city")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            className: "base-label",
            children: t("payment.checkout.billing.state")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
            name: "billing_address.state",
            rules: {
              required: t("payment.checkout.required"),
              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
            },
            errorPosition,
            variant: "outlined",
            placeholder: t("payment.checkout.billing.state")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
            className: "base-label",
            children: t("payment.checkout.billing.postal_code")
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
            name: "billing_address.postal_code",
            rules: {
              required: t("payment.checkout.required"),
              validate: x => {
                const isValid = (0, _validator.validatePostalCode)(x, country);
                return isValid ? true : t("payment.checkout.invalid");
              },
              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
            },
            errorPosition,
            variant: "outlined",
            placeholder: t("payment.checkout.billing.postal_code"),
            InputProps: {
              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                position: "start",
                style: {
                  marginRight: "2px",
                  marginLeft: "-8px"
                },
                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
                  name: "billing_address.country",
                  control,
                  render: ({
                    field
                  }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                    ...field,
                    ref: field.ref,
                    sx: {
                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                        borderColor: "transparent"
                      }
                    }
                  })
                })
              })
            }
          })]
        })
      })
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
    in: true,
    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
      className: "cko-payment-address cko-payment-form",
      sx,
      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "column",
        className: "cko-payment-form",
        spacing: 0,
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
          className: "base-label",
          children: t("payment.checkout.billing.state")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
          name: "billing_address.state",
          rules: {
            required: t("payment.checkout.required"),
            ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
          },
          errorPosition,
          variant: "outlined",
          placeholder: t("payment.checkout.billing.state")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
          className: "base-label",
          children: t("payment.checkout.billing.postal_code")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
          direction: "row",
          spacing: 0,
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
            name: "billing_address.postal_code",
            rules: {
              required: t("payment.checkout.required"),
              validate: x => {
                const isValid = (0, _validator.validatePostalCode)(x, country);
                return isValid ? true : t("payment.checkout.invalid");
              },
              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
            },
            errorPosition,
            variant: "outlined",
            placeholder: t("payment.checkout.billing.postal_code"),
            InputProps: {
              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                position: "start",
                style: {
                  marginRight: "2px",
                  marginLeft: "-8px"
                },
                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
                  name: "billing_address.country",
                  control,
                  render: ({
                    field
                  }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                    ...field,
                    ref: field.ref,
                    sx: {
                      ".MuiOutlinedInput-notchedOutline": {
                        borderColor: "transparent !important"
                      }
                    }
                  })
                })
              })
            }
          })
        })]
      })
    })
  });
}