powr-sdk-web 5.7.1 → 5.8.0

package/dist/powrVerify/index.js

@@ -7,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _firebase = require("../utils/firebase");
+var _phone = require("../utils/phone");
+var _PhoneInput = _interopRequireDefault(require("../components/PhoneInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t5 in e) "default" !== _t5 && {}.hasOwnProperty.call(e, _t5) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t5)) && (i.get || i.set) ? o(f, _t5, i) : f[_t5] = e[_t5]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25,52 +28,63 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var PowrVerify = function PowrVerify(_ref) {
   var onVerified = _ref.onVerified,
+    _ref$defaultCountry = _ref.defaultCountry,
+    defaultCountry = _ref$defaultCountry === void 0 ? _phone.DEFAULT_COUNTRY : _ref$defaultCountry,
     _ref$defaultCountryCo = _ref.defaultCountryCode,
-    defaultCountryCode = _ref$defaultCountryCo === void 0 ? '91' : _ref$defaultCountryCo,
+    defaultCountryCode = _ref$defaultCountryCo === void 0 ? _phone.DEFAULT_COUNTRY_CODE : _ref$defaultCountryCo,
+    _ref$international = _ref.international,
+    international = _ref$international === void 0 ? false : _ref$international,
+    _ref$allowedCountries = _ref.allowedCountries,
+    allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries,
     _ref$appName = _ref.appName,
     appName = _ref$appName === void 0 ? 'App' : _ref$appName,
     _ref$projectId = _ref.projectId,
     projectId = _ref$projectId === void 0 ? undefined : _ref$projectId;
-  var _useState = (0, _react.useState)(''),
+  var resolvedCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
+  var _useState = (0, _react.useState)(resolvedCountry),
     _useState2 = _slicedToArray(_useState, 2),
-    phone = _useState2[0],
-    setPhone = _useState2[1];
+    phoneCountry = _useState2[0],
+    setPhoneCountry = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    otp = _useState4[0],
-    setOtp = _useState4[1];
+    localNumber = _useState4[0],
+    setLocalNumber = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    phoneValid = _useState6[0],
+    setPhoneValid = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    otpSent = _useState8[0],
-    setOtpSent = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
+    e164 = _useState8[0],
+    setE164 = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
     _useState0 = _slicedToArray(_useState9, 2),
-    confirmationResult = _useState0[0],
-    setConfirmationResult = _useState0[1];
-  var _useState1 = (0, _react.useState)(''),
+    otp = _useState0[0],
+    setOtp = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    error = _useState10[0],
-    setError = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    success = _useState12[0],
-    setSuccess = _useState12[1];
-  var _useState13 = (0, _react.useState)(0),
+    otpSent = _useState12[0],
+    setOtpSent = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    resendTimer = _useState14[0],
-    setResendTimer = _useState14[1];
-  var formatPhone = function formatPhone(p) {
-    var clean = (p || '').replace(/\D/g, '');
-    if (!clean) return '';
-    if (!clean.startsWith(defaultCountryCode)) {
-      clean = defaultCountryCode + clean;
-    }
-    return '+' + clean;
-  };
+    confirmationResult = _useState14[0],
+    setConfirmationResult = _useState14[1];
+  var _useState15 = (0, _react.useState)(''),
+    _useState16 = _slicedToArray(_useState15, 2),
+    error = _useState16[0],
+    setError = _useState16[1];
+  var _useState17 = (0, _react.useState)(''),
+    _useState18 = _slicedToArray(_useState17, 2),
+    success = _useState18[0],
+    setSuccess = _useState18[1];
+  var _useState19 = (0, _react.useState)(0),
+    _useState20 = _slicedToArray(_useState19, 2),
+    resendTimer = _useState20[0],
+    setResendTimer = _useState20[1];
   var clearRecaptcha = function clearRecaptcha() {
     if (window.recaptchaVerifier) {
       try {
@@ -81,8 +95,18 @@ var PowrVerify = function PowrVerify(_ref) {
       window.recaptchaVerifier = null;
     }
   };
+  var handlePhoneChange = function handlePhoneChange(_ref2) {
+    var country = _ref2.country,
+      local = _ref2.localNumber,
+      formatted = _ref2.e164,
+      isValid = _ref2.isValid;
+    setPhoneCountry(country);
+    setLocalNumber(local);
+    setE164(formatted);
+    setPhoneValid(isValid);
+  };
   var sendOtp = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var phoneNumber, appVerifier, confirmation, _t, _t2;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
@@ -91,8 +115,8 @@ var PowrVerify = function PowrVerify(_ref) {
             setError('');
             setSuccess('');
             _context.p = 1;
-            phoneNumber = formatPhone(phone);
-            if (phoneNumber) {
+            phoneNumber = e164 || (0, _phone.formatPhoneForSms)(localNumber, phoneCountry);
+            if (!(!phoneValid || !phoneNumber)) {
               _context.n = 2;
               break;
             }
@@ -100,7 +124,6 @@ var PowrVerify = function PowrVerify(_ref) {
             setLoading(false);
             return _context.a(2);
           case 2:
-            // clear existing
             clearRecaptcha();
             window.recaptchaVerifier = new _firebase.RecaptchaVerifier(_firebase.auth, 'recaptcha-container-powrbase', {
               size: 'invisible',
@@ -143,11 +166,11 @@ var PowrVerify = function PowrVerify(_ref) {
       }, _callee, null, [[3, 5], [1, 8, 9, 10]]);
     }));
     return function sendOtp() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var verifyOtp = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var result, token, _t3, _t4;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
@@ -189,8 +212,6 @@ var PowrVerify = function PowrVerify(_ref) {
             clearRecaptcha();
             setResendTimer(0);
             if (typeof onVerified === 'function') {
-              // Pass token and projectId. Keep backward compatibility by
-              // allowing consumers to accept a single token arg.
               try {
                 onVerified(token, projectId);
               } catch (e) {
@@ -216,11 +237,11 @@ var PowrVerify = function PowrVerify(_ref) {
       }, _callee2, null, [[5, 7], [1, 9, 10, 11]]);
     }));
     return function verifyOtp() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
-    if (resendTimer <= 0) return;
+    if (resendTimer <= 0) return undefined;
     var id = setInterval(function () {
       setResendTimer(function (t) {
         if (t <= 1) {
@@ -254,23 +275,19 @@ var PowrVerify = function PowrVerify(_ref) {
     }
   }, "Tell us your phone and we'll send a one-time code."), /*#__PURE__*/_react["default"].createElement("label", {
     style: labelStyle
-  }, "Phone number"), /*#__PURE__*/_react["default"].createElement("div", {
-    style: phoneRowStyle
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: prefixBox
-  }, defaultCountryCode), /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    value: phone,
-    onChange: function onChange(e) {
-      return setPhone((e.target.value || '').replace(/\D/g, '').slice(0, 10));
-    },
-    placeholder: "0000000000",
-    style: inputFlexStyle,
-    disabled: otpSent
-  })), !otpSent && /*#__PURE__*/_react["default"].createElement("button", {
+  }, "Phone number"), /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
+    value: localNumber,
+    country: phoneCountry,
+    onChange: handlePhoneChange,
+    international: international,
+    allowedCountries: allowedCountries,
+    defaultCountry: resolvedCountry,
+    disabled: otpSent,
+    placeholder: international ? 'Phone number' : 'Mobile number'
+  }), !otpSent && /*#__PURE__*/_react["default"].createElement("button", {
     onClick: sendOtp,
     style: buttonStyle,
-    disabled: loading || phone.replace(/\D/g, '').length < 10
+    disabled: loading || !phoneValid
   }, loading ? 'Sending...' : 'Send OTP'), otpSent && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
     style: _objectSpread(_objectSpread({}, labelStyle), {}, {
       marginTop: 12
@@ -352,14 +369,6 @@ var phoneRowStyle = {
   alignItems: 'center',
   width: '100%'
 };
-var prefixBox = {
-  background: '#fff7ed',
-  color: '#7c2d12',
-  padding: '10px 12px',
-  borderRadius: 8,
-  fontWeight: 700,
-  border: '1px solid #ffedd5'
-};
 var inputFlexStyle = {
   flex: 1,
   padding: 10,
@@ -372,14 +381,6 @@ var labelStyle = {
   fontWeight: 600,
   marginBottom: 6
 };
-var inputStyle = {
-  width: '100%',
-  padding: 10,
-  borderRadius: 8,
-  border: '1px solid #e5e7eb',
-  marginBottom: 12,
-  boxSizing: 'border-box'
-};
 var buttonStyle = {
   width: '100%',
   padding: 12,

package/dist/utils/phone.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PRIORITY_COUNTRIES = exports.DEFAULT_COUNTRY_CODE = exports.DEFAULT_COUNTRY = void 0;
+exports.buildPhoneFromParts = buildPhoneFromParts;
+exports.digitsOnly = digitsOnly;
+exports.formatPhoneForSms = formatPhoneForSms;
+exports.getCountryOptions = getCountryOptions;
+exports.getLocalPhoneNumber = getLocalPhoneNumber;
+exports.getPhoneLookupVariants = getPhoneLookupVariants;
+exports.hasValidPhone = hasValidPhone;
+exports.isValidPhone = isValidPhone;
+exports.normalizePhone = normalizePhone;
+exports.parsePhone = parsePhone;
+exports.resolveCountry = resolveCountry;
+var _libphonenumberJs = require("libphonenumber-js");
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var DEFAULT_COUNTRY = exports.DEFAULT_COUNTRY = 'IN';
+/** @deprecated Use DEFAULT_COUNTRY ('IN') or defaultCountry prop */
+var DEFAULT_COUNTRY_CODE = exports.DEFAULT_COUNTRY_CODE = '91';
+var CALLING_CODE_TO_COUNTRY = {
+  '91': 'IN',
+  '1': 'US',
+  '44': 'GB',
+  '971': 'AE',
+  '65': 'SG',
+  '61': 'AU',
+  '49': 'DE',
+  '33': 'FR',
+  '81': 'JP'
+};
+var PRIORITY_COUNTRIES = exports.PRIORITY_COUNTRIES = ['US', 'IN', 'GB', 'CA', 'AU', 'AE', 'SG', 'DE', 'FR', 'NL', 'NZ', 'JP'];
+function resolveCountry(defaultCountry, defaultCountryCode) {
+  if (defaultCountry) return defaultCountry;
+  if (defaultCountryCode) {
+    return CALLING_CODE_TO_COUNTRY[String(defaultCountryCode)] || DEFAULT_COUNTRY;
+  }
+  return DEFAULT_COUNTRY;
+}
+function digitsOnly(value) {
+  return (value || '').replace(/\D/g, '');
+}
+function parsePhone(input) {
+  var _parsed, _parsed2, _parsed3;
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  if (!input || typeof input !== 'string' || input.includes('@')) return null;
+  var trimmed = input.trim();
+  if (!trimmed) return null;
+  var parsed = (0, _libphonenumberJs.parsePhoneNumberFromString)(trimmed);
+  if (!((_parsed = parsed) !== null && _parsed !== void 0 && _parsed.isValid())) {
+    parsed = (0, _libphonenumberJs.parsePhoneNumberFromString)(trimmed, defaultCountry);
+  }
+  if (!((_parsed2 = parsed) !== null && _parsed2 !== void 0 && _parsed2.isValid()) && !trimmed.startsWith('+')) {
+    parsed = (0, _libphonenumberJs.parsePhoneNumberFromString)("+".concat(digitsOnly(trimmed)));
+  }
+  return (_parsed3 = parsed) !== null && _parsed3 !== void 0 && _parsed3.isValid() ? parsed : null;
+}
+function normalizePhone(input) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  if (!input || typeof input !== 'string') return '';
+  if (input.includes('@')) return input.trim();
+  var parsed = parsePhone(input, defaultCountry);
+  return parsed ? parsed.format('E.164') : '';
+}
+function isValidPhone(input) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  if (!input || typeof input !== 'string' || input.includes('@')) return false;
+  return !!parsePhone(input, defaultCountry);
+}
+function hasValidPhone(phone) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  return isValidPhone(phone, defaultCountry);
+}
+function getLocalPhoneNumber(input) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  var parsed = parsePhone(input, defaultCountry);
+  return parsed ? parsed.nationalNumber : digitsOnly(input).slice(-15);
+}
+function formatPhoneForSms(input) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  return normalizePhone(input, defaultCountry);
+}
+function legacyIndiaVariants(input) {
+  var digits = digitsOnly(input);
+  if (!digits) return [];
+  var variants = new Set();
+  if (digits.length === 10) {
+    variants.add(digits);
+    variants.add("91".concat(digits));
+    variants.add("+91".concat(digits));
+    variants.add("0".concat(digits));
+  }
+  if (digits.length === 12 && digits.startsWith('91')) {
+    var local = digits.slice(2);
+    variants.add(local);
+    variants.add("+".concat(digits));
+    variants.add(digits);
+    variants.add("0".concat(local));
+  }
+  return _toConsumableArray(variants);
+}
+function getPhoneLookupVariants(input) {
+  var defaultCountry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  if (!input || typeof input !== 'string') return [];
+  if (input.includes('@')) return [input.trim()];
+  var variants = new Set([input.trim()]);
+  var parsed = parsePhone(input, defaultCountry);
+  if (parsed) {
+    var e164 = parsed.format('E.164');
+    variants.add(e164);
+    variants.add(e164.replace(/^\+/, ''));
+    variants.add(parsed.nationalNumber);
+    variants.add("+".concat(parsed.countryCallingCode).concat(parsed.nationalNumber));
+    variants.add("".concat(parsed.countryCallingCode).concat(parsed.nationalNumber));
+  }
+  legacyIndiaVariants(input).forEach(function (v) {
+    return variants.add(v);
+  });
+  return _toConsumableArray(variants).filter(Boolean);
+}
+function getCountryOptions() {
+  var allowedCountries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var pool = allowedCountries && allowedCountries.length > 0 ? allowedCountries.filter(function (c) {
+    return (0, _libphonenumberJs.getCountries)().includes(c);
+  }) : (0, _libphonenumberJs.getCountries)();
+  var ordered = [].concat(_toConsumableArray(PRIORITY_COUNTRIES.filter(function (c) {
+    return pool.includes(c);
+  })), _toConsumableArray(pool.filter(function (c) {
+    return !PRIORITY_COUNTRIES.includes(c);
+  }).sort()));
+  return ordered.map(function (code) {
+    return {
+      code: code,
+      callingCode: (0, _libphonenumberJs.getCountryCallingCode)(code),
+      label: "".concat(code, " (+").concat((0, _libphonenumberJs.getCountryCallingCode)(code), ")")
+    };
+  });
+}
+function buildPhoneFromParts(localNumber) {
+  var country = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COUNTRY;
+  var digits = digitsOnly(localNumber);
+  if (!digits) return '';
+  return normalizePhone(digits, country);
+}

package/package.json

@@ -1,43 +1,44 @@
-{
-    "name": "powr-sdk-web",
-    "version": "5.7.1",
-    "main": "dist/index.js",
-    "scripts": {
-        "build": "babel src -d dist --copy-files",
-        "prepublishOnly": "npm run build"
-    },
-    "keywords": [
-        "react",
-        "component",
-        "npm",
-        "file-upload",
-        "powrbase",
-        "comments"
-    ],
-    "author": "Lawazia Tech",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/lawaziatech/powr-sdk-web.git"
-    },
-    "peerDependencies": {
-        "filepond": "*",
-        "react": "*",
-        "react-dom": "*",
-        "react-toastify": "*"
-    },
-    "dependencies": {
-        "axios": "^1.7.7",
-        "filepond": "*",
-        "firebase": "^12.2.1",
-        "react-filepond": "^7.1.2",
-        "react-hook-form": "^7.58.0"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.24.1",
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
-        "@babel/preset-react": "^7.24.1",
-        "prop-types": "^15.8.1"
-    }
-}
+{
+    "name": "powr-sdk-web",
+    "version": "5.8.0",
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "babel src -d dist --copy-files",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react",
+        "component",
+        "npm",
+        "file-upload",
+        "powrbase",
+        "comments"
+    ],
+    "author": "Lawazia Tech",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lawaziatech/powr-sdk-web.git"
+    },
+    "peerDependencies": {
+        "filepond": "*",
+        "react": "*",
+        "react-dom": "*",
+        "react-toastify": "*"
+    },
+    "dependencies": {
+        "axios": "^1.7.7",
+        "filepond": "*",
+        "firebase": "^12.2.1",
+        "libphonenumber-js": "^1.12.9",
+        "react-filepond": "^7.1.2",
+        "react-hook-form": "^7.58.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/preset-react": "^7.24.1",
+        "prop-types": "^15.8.1"
+    }
+}