@popmenu/common-ui 0.98.0 → 0.100.0

package/build/index.js

@@ -1172,6 +1172,35 @@ var useStyles$2 = core.makeStyles(function () { return ({
 var FollowerAuthenticationForm = function () {
     var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, dispatch = _a.dispatch, loading = _a.loading;
     var classes = useStyles$2();
+    // sign-up form state
+    var formRef = React.useRef(null);
+    var _b = React.useState(false), formValidity = _b[0], setFormValidity = _b[1];
+    var _c = React.useState(), showPhoneErrorText = _c[0], setShowPhoneErrorText = _c[1];
+    var _d = React.useState(), showEmailErrorText = _d[0], setShowEmailErrorText = _d[1];
+    var _e = React.useState(), showLocationErrorText = _e[0], setShowLocationErrorText = _e[1];
+    var _f = React.useState(state.defaultFormValues.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
+    var _g = React.useState(state.defaultFormValues.email || ''), signUpEmailValue = _g[0], setSignUpEmailValue = _g[1];
+    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;
+        switch (fieldName) {
+            case 'phone':
+                setSignUpPhoneValue(e.target.value);
+                setShowPhoneErrorText(!fieldValidity);
+                break;
+            case 'email':
+                setSignUpEmailValue(e.target.value);
+                setShowEmailErrorText(!fieldValidity);
+                break;
+            case 'location':
+                setShowLocationErrorText(!e.target.value);
+                break;
+        }
+    };
+    React.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 handleSubmit = function (e) {
         e.preventDefault();
         var form = e.target;
@@ -1190,15 +1219,23 @@ var FollowerAuthenticationForm = function () {
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
         case 'signUp':
-            return (React__default['default'].createElement("form", __assign({}, formProps),
-                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone" }),
-                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name" }),
-                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email" }),
-                React__default['default'].createElement(core.TextField, { disabled: loading, select: true, label: messages.signUpLocationInputLabel, key: "location-input", id: "location-input", name: "location" }, locationOptions.map(function (locationOption) { return (React__default['default'].createElement(core.MenuItem, { key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+            return (React__default['default'].createElement("form", __assign({ ref: formRef }, formProps, { onInvalid: function (e) {
+                    e.preventDefault();
+                } }),
+                React__default['default'].createElement(core.TextField, { 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,
+                    } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", inputProps: { required: true } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email", error: showEmailErrorText, helperText: showEmailErrorText && messages.signUpEmailErrorText, onChange: checkFieldValidity, inputProps: {
+                        required: signUpPhoneValue ? false : true,
+                        type: 'email',
+                    } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, key: "location-input", id: "location-input", inputProps: { required: true }, name: "location" }, locationOptions.map(function (locationOption) { return (React__default['default'].createElement(core.MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
                 React__default['default'].createElement(core.Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
-                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signUp)));
+                React__default['default'].createElement(core.Button, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
         case 'emailFound':
             return (React__default['default'].createElement("form", __assign({}, formProps),
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email }),
@@ -1297,7 +1334,7 @@ var FollowerAuthenticationAltActions = function () {
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
             return (React__default['default'].createElement(core.Button, { onClick: function () {
-                    dispatch({ type: 'click-sign-up' });
+                    dispatch({ type: 'click-done' });
                 } }, messages.done));
         default:
             return null;