powr-sdk-web 6.17.0 → 6.17.2

package/dist/auth/index.js

@@ -53,6 +53,8 @@ var PowrLogin = function PowrLogin(_ref) {
     forgotPasswordChannel = _ref$forgotPasswordCh === void 0 ? null : _ref$forgotPasswordCh,
     _ref$otpApp = _ref.otpApp,
     otpApp = _ref$otpApp === void 0 ? null : _ref$otpApp,
+    _ref$powrAccountUrl = _ref.powrAccountUrl,
+    powrAccountUrl = _ref$powrAccountUrl === void 0 ? 'https://lawazia.tech/#identity' : _ref$powrAccountUrl,
     _ref$otpReset = _ref.otpReset,
     otpReset = _ref$otpReset === void 0 ? false : _ref$otpReset,
     _ref$completeProfileO = _ref.completeProfileOnLogin,
@@ -1147,7 +1149,32 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.subtitleContainer
   }, /*#__PURE__*/_react["default"].createElement("p", {
     style: styles.subtitle
-  }, !isLogin ? 'Create your account' : loginGate === 'password' ? 'Enter your password.' : smsResetStep === 'otp' ? 'Enter the code we sent.' : loginGate === 'help' ? 'WhatsApp us to get in.' : smsResetStep === 'password' ? 'Set a password for next time.' : 'Enter your mobile number.'), showTooltip && /*#__PURE__*/_react["default"].createElement("div", {
+  }, isLogin ? 'Sign in to your ' : 'Create your ', powrAccountUrl ? /*#__PURE__*/_react["default"].createElement("a", {
+    href: powrAccountUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: styles.powrAccountText,
+    onMouseEnter: function onMouseEnter() {
+      return setShowTooltip(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowTooltip(false);
+    }
+  }, "PowrAccount") : /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.powrAccountText,
+    onMouseEnter: function onMouseEnter() {
+      return setShowTooltip(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowTooltip(false);
+    }
+  }, "PowrAccount")), isLogin ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: _objectSpread(_objectSpread({}, styles.subtitle), {}, {
+      marginTop: 6,
+      fontSize: 14,
+      fontWeight: 400
+    })
+  }, loginGate === 'password' ? 'Enter your password.' : smsResetStep === 'otp' ? 'Enter the code we sent.' : loginGate === 'help' ? 'WhatsApp us to get in.' : smsResetStep === 'password' ? 'Set a password for next time.' : 'Enter your mobile number.') : null, showTooltip && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.tooltip
   }, "Secure authentication powered by Lawazia Tech"))), authView === 'add-name' && pendingAuth ? /*#__PURE__*/_react["default"].createElement(_profileNameStep.profileNameStep.Component, {
     ctx: {
@@ -1876,7 +1903,8 @@ var styles = {
   powrAccountText: {
     color: '#ff6b35',
     fontWeight: '600',
-    cursor: 'help'
+    cursor: 'pointer',
+    textDecoration: 'none'
   },
   tooltip: {
     position: 'absolute',

package/dist/components/PhoneInput.js

@@ -61,6 +61,7 @@ var PhoneInput = function PhoneInput(_ref) {
     countryQuery = _useState8[0],
     setCountryQuery = _useState8[1];
   var countryBoxRef = (0, _react.useRef)(null);
+  var numberRef = (0, _react.useRef)(null);
   var countryOptions = (0, _react.useMemo)(function () {
     return (0, _phone.getCountryOptions)(allowedCountries);
   }, [allowedCountries]);
@@ -105,6 +106,15 @@ var PhoneInput = function PhoneInput(_ref) {
     setCountryQuery('');
     if (typeof onCountryChange === 'function') onCountryChange(nextCountry);
     emitChange(nextCountry, localNumber);
+    if (numberRef.current) numberRef.current.focus();
+  };
+  var applyIngested = function applyIngested(ingested) {
+    setCountry(ingested.country);
+    setLocalNumber(ingested.localNumber);
+    if (ingested.country !== country && typeof onCountryChange === 'function') {
+      onCountryChange(ingested.country);
+    }
+    emitChange(ingested.country, ingested.localNumber);
   };
   var emitChange = function emitChange(nextCountry, nextLocal) {
     var e164 = (0, _phone.buildPhoneFromParts)(nextLocal, nextCountry);
@@ -120,29 +130,45 @@ var PhoneInput = function PhoneInput(_ref) {
     }
   };
   var handleLocalChange = function handleLocalChange(e) {
-    var ingested = (0, _phone.ingestPhoneInput)(e.target.value || '', country);
-    setCountry(ingested.country);
-    setLocalNumber(ingested.localNumber);
-    if (ingested.country !== country && typeof onCountryChange === 'function') {
-      onCountryChange(ingested.country);
-    }
-    emitChange(ingested.country, ingested.localNumber);
+    applyIngested((0, _phone.ingestPhoneInput)(e.target.value || '', country));
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: _objectSpread(_objectSpread({}, styles.row), rowStyle)
   }, international ? /*#__PURE__*/_react["default"].createElement("div", {
     ref: countryBoxRef,
     style: styles.countryBox
-  }, /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    value: countryOpen ? countryQuery : countryLabel,
-    onFocus: function onFocus() {
-      setCountryOpen(true);
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    disabled: disabled,
+    "aria-label": "Country code",
+    "aria-expanded": countryOpen,
+    onClick: function onClick() {
+      setCountryOpen(function (open) {
+        return !open;
+      });
       setCountryQuery('');
     },
+    style: _objectSpread(_objectSpread({}, styles.select), selectStyle)
+  }, countryLabel), countryOpen ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.menu
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    value: countryQuery,
+    autoFocus: true,
+    placeholder: "IN or 91",
+    autoComplete: "off",
+    "aria-label": "Search country",
     onChange: function onChange(e) {
-      setCountryQuery(e.target.value);
-      setCountryOpen(true);
+      var next = e.target.value;
+      var digits = next.replace(/\D/g, '');
+      if (digits.length >= 6) {
+        applyIngested((0, _phone.ingestPhoneInput)(next, country));
+        setCountryOpen(false);
+        setCountryQuery('');
+        if (numberRef.current) numberRef.current.focus();
+        return;
+      }
+      setCountryQuery(next);
     },
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && filteredCountries[0]) {
@@ -154,14 +180,9 @@ var PhoneInput = function PhoneInput(_ref) {
         setCountryQuery('');
       }
     },
-    disabled: disabled,
-    placeholder: "IN or 91",
-    autoComplete: "off",
-    "aria-label": "Country code",
-    "aria-expanded": countryOpen,
-    style: _objectSpread(_objectSpread({}, styles.select), selectStyle)
-  }), countryOpen ? /*#__PURE__*/_react["default"].createElement("ul", {
-    style: styles.menu,
+    style: styles.menuSearch
+  }), /*#__PURE__*/_react["default"].createElement("ul", {
+    style: styles.menuList,
     role: "listbox"
   }, filteredCountries.length === 0 ? /*#__PURE__*/_react["default"].createElement("li", {
     style: styles.menuEmpty
@@ -179,16 +200,18 @@ var PhoneInput = function PhoneInput(_ref) {
       },
       style: _objectSpread(_objectSpread({}, styles.menuItem), opt.code === country ? styles.menuItemActive : {})
     }, opt.label));
-  })) : null) : /*#__PURE__*/_react["default"].createElement("div", {
+  }))) : null) : /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.prefix
   }, "+", callingCode), /*#__PURE__*/_react["default"].createElement("input", {
+    ref: numberRef,
     type: "tel",
     value: localNumber,
     onChange: handleLocalChange,
     placeholder: placeholder,
     disabled: disabled,
     style: _objectSpread(_objectSpread({}, styles.input), inputStyle),
-    autoComplete: "tel-national"
+    autoComplete: "tel-national",
+    autoFocus: true
   }));
 };
 var styles = {
@@ -221,26 +244,41 @@ var styles = {
     border: '2px solid #e5e7eb',
     borderRadius: 8,
     fontSize: 13,
+    fontWeight: 700,
     background: '#fff',
     boxSizing: 'border-box',
-    height: 48
+    height: 48,
+    cursor: 'pointer'
   },
   menu: {
     position: 'absolute',
     zIndex: 20,
     left: 0,
-    right: 0,
+    minWidth: 220,
     top: '100%',
     margin: 0,
-    padding: 4,
-    listStyle: 'none',
-    maxHeight: 220,
-    overflowY: 'auto',
+    padding: 8,
     background: '#fff',
     border: '1px solid #e5e7eb',
     borderRadius: 8,
     boxShadow: '0 8px 24px rgba(0,0,0,0.12)'
   },
+  menuSearch: {
+    width: '100%',
+    boxSizing: 'border-box',
+    padding: '8px 10px',
+    marginBottom: 6,
+    border: '1px solid #e5e7eb',
+    borderRadius: 6,
+    fontSize: 14
+  },
+  menuList: {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    maxHeight: 200,
+    overflowY: 'auto'
+  },
   menuItem: {
     display: 'block',
     width: '100%',

package/dist/utils/phone.js

@@ -188,14 +188,6 @@ function ingestPhoneInput(raw) {
       };
     }
   }
-  var parsed = parsePhone(trimmed, currentCountry) || parsePhone(digits, currentCountry);
-  if (parsed !== null && parsed !== void 0 && parsed.nationalNumber) {
-    var nextCountry = parsed.country || currentCountry;
-    return {
-      country: nextCountry,
-      localNumber: capNationalDigits(String(parsed.nationalNumber), nextCountry)
-    };
-  }
   var local = digits;
   try {
     var calling = String((0, _libphonenumberJs.getCountryCallingCode)(currentCountry));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "6.17.0",
+    "version": "6.17.2",
     "main": "dist/index.js",
     "files": [
         "dist"