powr-sdk-web 6.17.2 → 6.18.1

package/dist/auth/index.js

@@ -11,6 +11,7 @@ var _AddPhonePanel = _interopRequireDefault(require("../onboarding/AddPhonePanel
 var _PhoneInput = _interopRequireDefault(require("../components/PhoneInput"));
 var _utils = require("../onboarding/utils");
 var _profileNameStep = require("../onboarding/steps/profileNameStep");
+var _libphonenumberJs = require("libphonenumber-js");
 var _phone = require("../utils/phone");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var cache;
@@ -32,6 +33,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var config = require('../config');
+var DEFAULT_WHATSAPP_HELP_URL = 'https://wa.me/919833189399';
 var PowrLogin = function PowrLogin(_ref) {
   var apiUrl = _ref.apiUrl,
     onLogin = _ref.onLogin,
@@ -46,7 +48,7 @@ var PowrLogin = function PowrLogin(_ref) {
     _ref$showForgotPasswo = _ref.showForgotPassword,
     showForgotPassword = _ref$showForgotPasswo === void 0 ? true : _ref$showForgotPasswo,
     _ref$passwordResetHel = _ref.passwordResetHelpUrl,
-    passwordResetHelpUrl = _ref$passwordResetHel === void 0 ? null : _ref$passwordResetHel,
+    passwordResetHelpUrl = _ref$passwordResetHel === void 0 ? DEFAULT_WHATSAPP_HELP_URL : _ref$passwordResetHel,
     _ref$passwordResetHel2 = _ref.passwordResetHelpLabel,
     passwordResetHelpLabel = _ref$passwordResetHel2 === void 0 ? 'Forgot password? WhatsApp us' : _ref$passwordResetHel2,
     _ref$forgotPasswordCh = _ref.forgotPasswordChannel,
@@ -73,6 +75,7 @@ var PowrLogin = function PowrLogin(_ref) {
   var projectId = projectIdProp || config.projectId;
   var resolvedDefaultCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
   var resetChannel = forgotPasswordChannel || (otpReset ? 'otp' : 'whatsapp');
+  var helpUrl = passwordResetHelpUrl || DEFAULT_WHATSAPP_HELP_URL;
   var _useState = (0, _react.useState)(function () {
       switch (mode) {
         case 'login':
@@ -544,28 +547,36 @@ var PowrLogin = function PowrLogin(_ref) {
             setLoginGate('password');
             return _context4.a(2);
           case 8:
-            if (!(ok && (!data.exists || !data.hasPassword))) {
+            if (!(ok && !data.exists)) {
               _context4.n = 9;
               break;
             }
-            setLoginGate('help');
+            setIsLogin(false);
+            setLoginGate('password');
             return _context4.a(2);
           case 9:
-            setLoginGate('password');
-            _context4.n = 11;
-            break;
+            if (!(ok && data.exists && !data.hasPassword)) {
+              _context4.n = 10;
+              break;
+            }
+            setLoginGate('help');
+            return _context4.a(2);
           case 10:
-            _context4.p = 10;
-            _t5 = _context4.v;
             setLoginGate('password');
+            _context4.n = 12;
+            break;
           case 11:
             _context4.p = 11;
-            setLoading(false);
-            return _context4.f(11);
+            _t5 = _context4.v;
+            setLoginGate('password');
           case 12:
+            _context4.p = 12;
+            setLoading(false);
+            return _context4.f(12);
+          case 13:
             return _context4.a(2);
         }
-      }, _callee4, null, [[2, 10, 11, 12]]);
+      }, _callee4, null, [[2, 11, 12, 13]]);
     }));
     return function continuePhone() {
       return _ref6.apply(this, arguments);
@@ -788,6 +799,22 @@ var PowrLogin = function PowrLogin(_ref) {
     }
     setError('Your session timed out. Sign in again to add your phone number.');
   };
+  var changeNumber = function changeNumber() {
+    setIsLogin(true);
+    setLoginGate('phone');
+    setSmsResetStep(null);
+    setError('');
+    setSuccess('');
+    setFieldErrors({});
+    setFormData(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        password: '',
+        confirmPassword: '',
+        fullName: ''
+      });
+    });
+  };
+  var numberLocked = !isLogin || loginGate !== 'phone' || Boolean(smsResetStep);
   var smsMobile = function smsMobile() {
     var digits = formData.phoneOrEmail.replace(/\D/g, '');
     if (digits.length === 10) return digits;
@@ -1168,13 +1195,13 @@ var PowrLogin = function PowrLogin(_ref) {
     onMouseLeave: function onMouseLeave() {
       return setShowTooltip(false);
     }
-  }, "PowrAccount")), isLogin ? /*#__PURE__*/_react["default"].createElement("p", {
+  }, "PowrAccount")), isLogin && (loginGate === 'password' || loginGate === 'help' || smsResetStep) ? /*#__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", {
+  }, smsResetStep === 'otp' ? 'Enter the code we sent.' : smsResetStep === 'password' ? 'Set a password for next time.' : loginGate === 'help' ? 'WhatsApp us to reset.' : 'Enter your password.') : 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: {
@@ -1204,28 +1231,18 @@ var PowrLogin = function PowrLogin(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("form", {
     onSubmit: handleSubmit,
     style: styles.form
-  }, !isLogin && /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.formGroup
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "fullName",
-    style: styles.label
-  }, "Full Name"), /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    id: "fullName",
-    name: "fullName",
-    value: formData.fullName,
-    onChange: handleInputChange,
-    style: _objectSpread(_objectSpread({}, styles.input), fieldErrors.fullName ? styles.inputError : {}),
-    placeholder: "Enter your full name",
-    required: true
-  }), fieldErrors.fullName && /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.fieldError
-  }, fieldErrors.fullName)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.formGroup
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "phoneOrEmail",
     style: styles.label
-  }, "Mobile"), /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
+  }, "Mobile"), numberLocked ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.lockedPhone
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "+", (0, _libphonenumberJs.getCountryCallingCode)(phoneCountry), " ", formData.phoneOrEmail), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: changeNumber,
+    style: styles.changeNumber
+  }, "Change")) : /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
     value: formData.phoneOrEmail,
     country: phoneCountry,
     onChange: handleRegisterPhoneChange,
@@ -1250,7 +1267,23 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.successText
   }, "Phone number verified successfully!"), /*#__PURE__*/_react["default"].createElement("div", {
     id: "recaptcha-container"
-  })), (!isLogin || loginGate === 'password') && smsResetStep !== 'otp' && smsResetStep !== 'password' && /*#__PURE__*/_react["default"].createElement("div", {
+  })), !isLogin && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.formGroup
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "fullName",
+    style: styles.label
+  }, "Full Name"), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: "fullName",
+    name: "fullName",
+    value: formData.fullName,
+    onChange: handleInputChange,
+    style: _objectSpread(_objectSpread({}, styles.input), fieldErrors.fullName ? styles.inputError : {}),
+    placeholder: "Enter your full name",
+    required: true
+  }), fieldErrors.fullName && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.fieldError
+  }, fieldErrors.fullName)), (!isLogin || loginGate === 'password') && smsResetStep !== 'otp' && smsResetStep !== 'password' && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.formGroup
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "password",
@@ -1334,8 +1367,8 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.otpSection
   }, /*#__PURE__*/_react["default"].createElement("p", {
     style: styles.otpText
-  }, "No password on this number yet. WhatsApp us to create an account or reset."), passwordResetHelpUrl ? /*#__PURE__*/_react["default"].createElement("a", {
-    href: passwordResetHelpUrl,
+  }, "This number already has a PowrAccount but no password yet. WhatsApp us to reset."), /*#__PURE__*/_react["default"].createElement("a", {
+    href: helpUrl,
     target: "_blank",
     rel: "noopener noreferrer",
     style: _objectSpread(_objectSpread({}, styles.otpButton), {}, {
@@ -1343,9 +1376,7 @@ var PowrLogin = function PowrLogin(_ref) {
       textAlign: 'center',
       textDecoration: 'none'
     })
-  }, passwordResetHelpLabel) : /*#__PURE__*/_react["default"].createElement("p", {
-    style: styles.otpText
-  }, "WhatsApp the app\u2019s support number."), /*#__PURE__*/_react["default"].createElement("button", {
+  }, "WhatsApp us"), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
       setLoginGate('password');
@@ -1434,14 +1465,12 @@ var PowrLogin = function PowrLogin(_ref) {
     onClick: handleSmsForgotStart,
     disabled: otpLoading,
     style: styles.forgotPasswordLink
-  }, otpLoading ? 'Sending a code…' : 'Forgot password? Get a code') : passwordResetHelpUrl ? /*#__PURE__*/_react["default"].createElement("a", {
-    href: passwordResetHelpUrl,
+  }, otpLoading ? 'Sending a code…' : 'Forgot password? Get a code') : /*#__PURE__*/_react["default"].createElement("a", {
+    href: helpUrl,
     target: "_blank",
     rel: "noopener noreferrer",
     style: styles.forgotPasswordLink
-  }, passwordResetHelpLabel) : /*#__PURE__*/_react["default"].createElement("span", {
-    style: styles.forgotPasswordLink
-  }, "Forgot password? WhatsApp us"))))), showOtpModal && /*#__PURE__*/_react["default"].createElement("div", {
+  }, passwordResetHelpLabel))))), showOtpModal && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.modalOverlay
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.modalContent
@@ -1561,6 +1590,30 @@ var styles = {
     flexDirection: 'column',
     gap: '8px'
   },
+  lockedPhone: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    height: 48,
+    padding: '0 14px',
+    border: '2px solid #e5e7eb',
+    borderRadius: 8,
+    background: '#f9fafb',
+    fontSize: 16,
+    fontWeight: 600,
+    color: '#111827'
+  },
+  changeNumber: {
+    border: 'none',
+    background: 'transparent',
+    color: '#ff6b35',
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: 'pointer',
+    padding: 0,
+    flex: '0 0 auto'
+  },
   label: {
     fontSize: '14px',
     fontWeight: '600',

package/package.json

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