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

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PhoneInput;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _omit = _interopRequireDefault(require("lodash/omit"));
var _react = require("react");
var _reactHookForm = require("react-hook-form");
var _reactInternationalPhone = require("react-international-phone");
var _ahooks = require("ahooks");
var _input = _interopRequireDefault(require("../../components/input"));
var _util = require("../../libs/util");
var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
var _phoneValidator = require("../../libs/phone-validator");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PhoneInput({
  ...props
}) {
  const countryFieldName = props.countryFieldName || "billing_address.country";
  const {
    control,
    getValues,
    setValue,
    trigger
  } = (0, _reactHookForm.useFormContext)();
  const values = getValues();
  const isUpdatingRef = (0, _react.useRef)(false);
  const safeUpdate = (0, _react.useCallback)(callback => {
    if (isUpdatingRef.current) return;
    try {
      isUpdatingRef.current = true;
      callback();
    } finally {
      requestAnimationFrame(() => {
        isUpdatingRef.current = false;
      });
    }
  }, []);
  const {
    phone,
    handlePhoneValueChange,
    inputRef,
    country,
    setCountry
  } = (0, _reactInternationalPhone.usePhoneInput)({
    defaultCountry: (0, _util.isValidCountry)(values[countryFieldName]) ? values[countryFieldName] : "us",
    value: values[props.name] || "",
    countries: _reactInternationalPhone.defaultCountries,
    onChange: data => {
      safeUpdate(() => {
        setValue(props.name, data.phone);
        setValue(countryFieldName, data.country);
      });
    }
  });
  const userCountry = (0, _reactHookForm.useWatch)({
    control,
    name: countryFieldName
  });
  (0, _react.useEffect)(() => {
    if (!userCountry || userCountry === country) return;
    safeUpdate(() => {
      setCountry(userCountry);
    });
  }, [userCountry, country, setCountry, safeUpdate]);
  (0, _ahooks.useMount)(() => {
    (0, _phoneValidator.getPhoneUtil)().catch(err => {
      console.error("Failed to preload phone validator:", err);
    });
  });
  const onCountryChange = (0, _react.useCallback)(v => {
    safeUpdate(() => {
      setCountry(v);
    });
  }, [setCountry, safeUpdate]);
  const handleBlur = (0, _react.useCallback)(() => {
    trigger(props.name);
  }, [props.name]);
  return (
    // @ts-ignore
    /* @__PURE__ */
    (0, _jsxRuntime.jsx)(_input.default, {
      value: phone,
      onChange: handlePhoneValueChange,
      type: "tel",
      inputRef,
      onBlur: handleBlur,
      InputProps: {
        startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
          position: "start",
          style: {
            marginRight: "2px",
            marginLeft: "-8px"
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
            value: country,
            onChange: onCountryChange,
            name: countryFieldName,
            sx: {
              "&.MuiOutlinedInput-notchedOutline": {
                borderColor: "transparent !important"
              }
            },
            showDialCode: true
          })
        })
      },
      ...(0, _omit.default)(props, ["countryFieldName"])
    })
  );
}