@blocklet/payment-react/lib/components/phone-field.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PhoneField;
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _material = require("@mui/material");
var _reactInternationalPhone = require("react-international-phone");
var _ahooks = require("ahooks");
var _countrySelect = _interopRequireDefault(require("./country-select"));
var _util = require("../libs/util");
var _phoneValidator = require("../libs/phone-validator");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PhoneField({
  value,
  country: externalCountry,
  onChange,
  onCountryChange,
  label,
  error = void 0,
  onBlur = void 0
}) {
  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)(externalCountry) ? externalCountry : "us",
    value: value || "",
    countries: _reactInternationalPhone.defaultCountries,
    onChange: data => {
      safeUpdate(() => {
        onChange(data.phone);
        onCountryChange(data.country);
      });
    }
  });
  (0, _ahooks.useMount)(() => {
    (0, _phoneValidator.getPhoneUtil)().catch(err => {
      console.error("Failed to preload phone validator:", err);
    });
  });
  (0, _react.useEffect)(() => {
    if (!externalCountry || externalCountry === country) return;
    safeUpdate(() => {
      setCountry(externalCountry);
    });
  }, [externalCountry, country, setCountry, safeUpdate]);
  const handleCountryChange = (0, _react.useCallback)(v => {
    safeUpdate(() => {
      setCountry(v);
      onCountryChange(v);
    });
  }, [setCountry, safeUpdate, onCountryChange]);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      mb: 1.5
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      sx: {
        fontSize: 13,
        fontWeight: 600,
        color: "text.primary",
        mb: 0.5
      },
      children: label
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputBase, {
      fullWidth: true,
      value: phone,
      onChange: handlePhoneValueChange,
      onBlur,
      type: "tel",
      inputRef,
      startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
        position: "start",
        sx: {
          mr: 0.25,
          ml: -0.5
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
          value: country,
          onChange: handleCountryChange,
          sx: {
            ".MuiOutlinedInput-notchedOutline": {
              borderColor: "transparent !important"
            },
            "& .MuiSelect-select": {
              py: 0,
              pr: "20px !important"
            }
          },
          showDialCode: true
        })
      }),
      sx: {
        bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
        borderRadius: "8px",
        px: 1.5,
        py: 0.75,
        fontSize: 14,
        "& .MuiInputBase-input": {
          p: 0
        }
      }
    }), error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      sx: {
        fontSize: 12,
        color: "error.main",
        mt: 0.25
      },
      children: error
    })]
  });
}