@popmenu/common-ui 0.98.0 → 0.100.0

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationDialogProps.d.ts

@@ -31,6 +31,10 @@ export declare type ReducerEvent = {
     type: 'click-google-continue';
 } | {
     type: 'click-sign-up';
+} | {
+    type: 'click-email-sign-up';
+} | {
+    type: 'click-phone-sign-up';
 } | {
     type: 'click-get-code';
     context: {
@@ -59,7 +63,7 @@ export declare type ReducerEvent = {
 } | {
     type: 'start-facebook-auth';
 };
-declare type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | `${ReducerStateValue}GraphicAlt` | 'indirectUserFoundLabel' | 'indirectUserFoundCtaButtonLabel' | 'indirectUserFoundCtaButtonLabelAlt' | 'signUpPhoneInputLabel' | 'signUpNameInputLabel' | 'signUpEmailInputLabel' | 'signUpLocationInputLabel' | 'signUpBirthdaySectionLabel' | 'signUpMonthInputLabel' | 'signUpDayInputLabel' | 'signUp' | 'signUpFinePrint' | 'emailFoundInputLabel' | 'emailFoundCtaButtonLabel' | 'phoneFoundInputLabel' | 'phoneFoundCtaButtonLabel' | 'emailAuthCodeInputLabel' | 'phoneAuthCodeInputLabel' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword';
+declare type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | `${ReducerStateValue}GraphicAlt` | 'indirectUserFoundLabel' | 'indirectUserFoundCtaButtonLabel' | 'indirectUserFoundCtaButtonLabelAlt' | 'signUpPhoneErrorText' | 'signUpPhoneInputLabel' | 'signUpNameInputLabel' | 'signUpEmailErrorText' | 'signUpEmailInputLabel' | 'signUpLocationErrorText' | 'signUpLocationInputLabel' | 'signUpBirthdaySectionLabel' | 'signUpMonthInputLabel' | 'signUpDayInputLabel' | 'signUp' | 'signUpFinePrint' | 'emailFoundInputLabel' | 'emailFoundCtaButtonLabel' | 'phoneFoundInputLabel' | 'phoneFoundCtaButtonLabel' | 'emailAuthCodeInputLabel' | 'phoneAuthCodeInputLabel' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword';
 declare type LocationOption = {
     label: string;
     value: string;

package/build/index.es.js

@@ -1105,6 +1105,35 @@ var useStyles$2 = 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 = useRef(null);
+    var _b = useState(false), formValidity = _b[0], setFormValidity = _b[1];
+    var _c = useState(), showPhoneErrorText = _c[0], setShowPhoneErrorText = _c[1];
+    var _d = useState(), showEmailErrorText = _d[0], setShowEmailErrorText = _d[1];
+    var _e = useState(), showLocationErrorText = _e[0], setShowLocationErrorText = _e[1];
+    var _f = useState(state.defaultFormValues.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
+    var _g = 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;
+        }
+    };
+    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;
@@ -1123,15 +1152,23 @@ var FollowerAuthenticationForm = function () {
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
         case 'signUp':
-            return (React__default.createElement("form", __assign({}, formProps),
-                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone" }),
-                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name" }),
-                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email" }),
-                React__default.createElement(TextField$1, { disabled: loading, select: true, label: messages.signUpLocationInputLabel, key: "location-input", id: "location-input", name: "location" }, locationOptions.map(function (locationOption) { return (React__default.createElement(MenuItem, { key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+            return (React__default.createElement("form", __assign({ ref: formRef }, formProps, { onInvalid: function (e) {
+                    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,
+                    } }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", inputProps: { required: true } }),
+                React__default.createElement(TextField$1, { 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.createElement(TextField$1, { 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.createElement(MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
                 React__default.createElement(Typography$1, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
-                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signUp)));
+                React__default.createElement(Button$1, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
         case 'emailFound':
             return (React__default.createElement("form", __assign({}, formProps),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email }),
@@ -1230,7 +1267,7 @@ var FollowerAuthenticationAltActions = function () {
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
             return (React__default.createElement(Button$1, { onClick: function () {
-                    dispatch({ type: 'click-sign-up' });
+                    dispatch({ type: 'click-done' });
                 } }, messages.done));
         default:
             return null;