@popmenu/common-ui 0.125.0 → 0.126.0

package/build/index.es.js

@@ -1116,6 +1116,13 @@ var useStyles$2 = makeStyles(function () { return ({
         gridGap: 16,
     },
 }); });
+var northAmericanPhoneRegex = /^(\()?[2-9]{1}\d{2}(\))?[-\s.]?[2-9]{1}\d{2}[-\s.]?\d{4}$/;
+var ukPhoneRegex = /^((\+?44\s?|0044\s?)(\s?\d{3,5}|\(\d{3,5}\))(\s?\d{3,4})(\s?\d{3,4})$|^07\d{9}$)/;
+var validatePhoneNumber = function (phone) {
+    if (!phone)
+        return false;
+    return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
+};
 var FollowerAuthenticationForm = function () {
     var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
     var classes = useStyles$2();
@@ -1130,24 +1137,33 @@ var FollowerAuthenticationForm = function () {
     var checkFieldValidity = function (e) {
         var _a, _b;
         var fieldName = e.target.name;
-        var fieldValidity = (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem(fieldName)) === null || _b === void 0 ? void 0 : _b.validity.valid;
+        var fieldValue = e.target.value;
         switch (fieldName) {
             case 'phone':
-                setSignUpPhoneValue(e.target.value);
-                setShowPhoneErrorText(!fieldValidity);
+                var isPhoneValid = validatePhoneNumber(fieldValue);
+                setSignUpPhoneValue(fieldValue);
+                setShowPhoneErrorText(!isPhoneValid && fieldValue.length > 0);
                 break;
             case 'email':
-                setSignUpEmailValue(e.target.value);
-                setShowEmailErrorText(!fieldValidity);
+                var emailField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem(fieldName);
+                var isEmailValid = (_b = emailField === null || emailField === void 0 ? void 0 : emailField.validity.valid) !== null && _b !== void 0 ? _b : false;
+                setSignUpEmailValue(fieldValue);
+                setShowEmailErrorText(!isEmailValid && fieldValue.length > 0);
                 break;
             case 'location':
-                setShowLocationErrorText(!e.target.value);
+                setShowLocationErrorText(!fieldValue);
                 break;
         }
     };
     useEffect(function () {
-        setFormValidity(['phone', 'email', 'location'].every(function (fieldName) { var _a, _b; return (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem(fieldName)) === null || _b === void 0 ? void 0 : _b.validity.valid; }));
-    }, [showPhoneErrorText, showEmailErrorText, showLocationErrorText, signUpPhoneValue, signUpEmailValue]);
+        var _a;
+        var hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText;
+        var hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText;
+        var locationField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem('location');
+        var hasValidLocation = locationField ? Boolean(locationField.value) : true;
+        var hasValidContact = hasValidPhone || hasValidEmail;
+        setFormValidity(hasValidContact && hasValidLocation);
+    }, [signUpPhoneValue, signUpEmailValue, showPhoneErrorText, showEmailErrorText, showLocationErrorText]);
     var handleSubmit = function (e) {
         e.preventDefault();
         var form = e.target;
@@ -1170,7 +1186,6 @@ var FollowerAuthenticationForm = function () {
                     e.preventDefault();
                 } }),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", onChange: checkFieldValidity, error: showPhoneErrorText, helperText: showPhoneErrorText && messages.signUpPhoneErrorText, inputProps: {
-                        pattern: '^[0-9]{10}$',
                         required: signUpEmailValue ? false : true,
                     }, defaultValue: state.context.phone }),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", inputProps: { required: true } }),