powr-sdk-web 5.3.1 → 5.3.2

package/dist/powrVerify/index.js

@@ -28,7 +28,9 @@ var PowrVerify = function PowrVerify(_ref) {
     _ref$defaultCountryCo = _ref.defaultCountryCode,
     defaultCountryCode = _ref$defaultCountryCo === void 0 ? '91' : _ref$defaultCountryCo,
     _ref$appName = _ref.appName,
-    appName = _ref$appName === void 0 ? 'App' : _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)(''),
     _useState2 = _slicedToArray(_useState, 2),
     phone = _useState2[0],
@@ -57,6 +59,10 @@ var PowrVerify = function PowrVerify(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     success = _useState12[0],
     setSuccess = _useState12[1];
+  var _useState13 = (0, _react.useState)(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    resendTimer = _useState14[0],
+    setResendTimer = _useState14[1];
   var formatPhone = function formatPhone(p) {
     var clean = (p || '').replace(/\D/g, '');
     if (!clean) return '';
@@ -118,6 +124,7 @@ var PowrVerify = function PowrVerify(_ref) {
             setConfirmationResult(confirmation);
             setOtpSent(true);
             setSuccess('OTP sent to ' + phoneNumber);
+            setResendTimer(60);
             _context.n = 9;
             break;
           case 8:
@@ -180,8 +187,17 @@ var PowrVerify = function PowrVerify(_ref) {
             setOtpSent(false);
             setConfirmationResult(null);
             clearRecaptcha();
+            setResendTimer(0);
             if (typeof onVerified === 'function') {
-              onVerified(token);
+              // Pass token and projectId. Keep backward compatibility by
+              // allowing consumers to accept a single token arg.
+              try {
+                onVerified(token, projectId);
+              } catch (e) {
+                try {
+                  onVerified(token);
+                } catch (_) {/* ignore */}
+              }
             }
             _context2.n = 10;
             break;
@@ -203,70 +219,100 @@ var PowrVerify = function PowrVerify(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  (0, _react.useEffect)(function () {
+    if (resendTimer <= 0) return;
+    var id = setInterval(function () {
+      setResendTimer(function (t) {
+        if (t <= 1) {
+          clearInterval(id);
+          return 0;
+        }
+        return t - 1;
+      });
+    }, 1000);
+    return function () {
+      return clearInterval(id);
+    };
+  }, [resendTimer]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: containerStyle
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: cardStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: headerRowStyle
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     style: {
-      margin: 0,
-      marginBottom: 12
+      margin: 0
     }
-  }, appName, " \u2014 Verify Phone"), /*#__PURE__*/_react["default"].createElement("p", {
+  }, appName), /*#__PURE__*/_react["default"].createElement("div", {
+    style: pillStyle
+  }, "Phone Verification")), /*#__PURE__*/_react["default"].createElement("p", {
     style: {
-      marginTop: 0,
-      marginBottom: 16,
-      color: '#666'
+      marginTop: 8,
+      marginBottom: 14,
+      color: '#6b7280'
     }
-  }, "Enter your phone number and verify OTP. Only phone input is required."), /*#__PURE__*/_react["default"].createElement("label", {
+  }, "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("input", {
+  }, "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);
+      return setPhone((e.target.value || '').replace(/\D/g, '').slice(0, 10));
     },
-    placeholder: "e.g. 9876543210",
-    style: inputStyle,
+    placeholder: "0000000000",
+    style: inputFlexStyle,
     disabled: otpSent
-  }), !otpSent && /*#__PURE__*/_react["default"].createElement("button", {
+  })), !otpSent && /*#__PURE__*/_react["default"].createElement("button", {
     onClick: sendOtp,
     style: buttonStyle,
-    disabled: loading
+    disabled: loading || phone.replace(/\D/g, '').length < 10
   }, loading ? 'Sending...' : 'Send OTP'), otpSent && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
     style: _objectSpread(_objectSpread({}, labelStyle), {}, {
       marginTop: 12
     })
-  }, "Enter OTP"), /*#__PURE__*/_react["default"].createElement("input", {
+  }, "Enter OTP"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: phoneRowStyle
+  }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     value: otp,
     onChange: function onChange(e) {
-      return setOtp(e.target.value);
+      return setOtp((e.target.value || '').replace(/\D/g, '').slice(0, 6));
     },
     placeholder: "6-digit code",
-    style: inputStyle,
-    maxLength: 6
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: inputFlexStyle,
+    maxLength: 6,
+    autoFocus: true
+  }), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: verifyOtp,
+    style: _objectSpread({}, buttonSmallStyle),
+    disabled: loading || otp.length !== 6
+  }, loading ? 'Verifying...' : 'Verify')), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       display: 'flex',
-      gap: 8
+      gap: 8,
+      marginTop: 10
     }
   }, /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: verifyOtp,
-    style: _objectSpread(_objectSpread({}, buttonStyle), {}, {
-      flex: 1
-    }),
-    disabled: loading || otp.length < 4
-  }, loading ? 'Verifying...' : 'Verify OTP'), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       setOtpSent(false);
       setConfirmationResult(null);
       clearRecaptcha();
       setOtp('');
+      setSuccess('');
+      setError('');
     },
     style: _objectSpread({}, secondaryButtonStyle),
     disabled: loading
-  }, "Cancel"))), error && /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: sendOtp,
+    style: _objectSpread({}, tertiaryButtonStyle),
+    disabled: resendTimer > 0 || loading
+  }, resendTimer > 0 ? "Resend in ".concat(resendTimer, "s") : 'Resend OTP'))), error && /*#__PURE__*/_react["default"].createElement("div", {
     style: errorStyle
   }, error), success && /*#__PURE__*/_react["default"].createElement("div", {
     style: successStyle
@@ -287,6 +333,40 @@ var cardStyle = {
   boxShadow: '0 6px 18px rgba(0,0,0,0.08)',
   background: 'white'
 };
+var headerRowStyle = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+var pillStyle = {
+  background: '#ffedd5',
+  color: '#7c2d12',
+  padding: '6px 10px',
+  borderRadius: 20,
+  fontSize: 12,
+  fontWeight: 700
+};
+var phoneRowStyle = {
+  display: 'flex',
+  gap: 8,
+  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,
+  borderRadius: 8,
+  border: '1px solid #e5e7eb',
+  boxSizing: 'border-box'
+};
 var labelStyle = {
   fontSize: 13,
   fontWeight: 600,
@@ -308,8 +388,26 @@ var buttonStyle = {
   border: 'none',
   borderRadius: 8,
   cursor: 'pointer',
-  fontWeight: 600,
-  marginBottom: 8
+  fontWeight: 700,
+  marginTop: 8
+};
+var buttonSmallStyle = {
+  padding: '10px 14px',
+  background: '#ff6b35',
+  color: 'white',
+  border: 'none',
+  borderRadius: 8,
+  cursor: 'pointer',
+  fontWeight: 700
+};
+var tertiaryButtonStyle = {
+  padding: 12,
+  background: '#fff7ed',
+  color: '#7c2d12',
+  border: 'none',
+  borderRadius: 8,
+  cursor: 'pointer',
+  fontWeight: 700
 };
 var secondaryButtonStyle = {
   padding: 12,
@@ -318,7 +416,7 @@ var secondaryButtonStyle = {
   border: 'none',
   borderRadius: 8,
   cursor: 'pointer',
-  fontWeight: 600
+  fontWeight: 700
 };
 var errorStyle = {
   marginTop: 8,

package/dist/utils/firebase.js

@@ -45,14 +45,14 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
 // };
 
 var firebaseConfig = {
-  apiKey: process.env.REACT_APP_FIREBASE_API_KEY || "AIzaSyDat2fOUObvO2VYjLmFCw6rEtXJ2ifgVes",
-  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN || "urbanstall-a4c7b.firebaseapp.com",
-  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID || "urbanstall-a4c7b",
-  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET || "urbanstall-a4c7b.appspot.com",
-  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID || "215923273605",
-  appId: process.env.REACT_APP_FIREBASE_APP_ID || "1:215923273605:web:7b60fd3f961efbd0be9eec",
-  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID || "G-KQ36ZTNCD5",
-  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL || "https://urbanstall-a4c7b.firebaseio.com"
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY || "AIzaSyAYsrxbOH6-qHvaDVa_JBf52lFzfriJzf8",
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN || "powrapp-f19f4.firebaseapp.com",
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID || "powrapp-f19f4",
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET || "powrapp-f19f4.firebasestorage.app",
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID || "594348480000",
+  appId: process.env.REACT_APP_FIREBASE_APP_ID || "1:594348480000:web:c8dfee7db251523b99aae5",
+  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID || "G-VGMYP6B1QL",
+  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL || undefined
 };
 var app = exports.app = (0, _app.initializeApp)(firebaseConfig);
 var functions = exports.functions = (0, _functions.getFunctions)(app);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.3.1",
+    "version": "5.3.2",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",