@popmenu/common-ui 0.105.0 → 0.107.0

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

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 export declare type FollowerAuthenticationDialogProps = {
     open: boolean;
     state: ReducerState;
-    dispatch: (event: ReducerEvent) => void;
     messages: Record<MessageKey, ReactNode> & {
         closeButtonLabel: string;
     };
@@ -10,61 +9,18 @@ export declare type FollowerAuthenticationDialogProps = {
     loading: boolean;
     graphics: Record<`${ReducerStateValue}`, string>;
     logos: Record<'popmenu' | 'facebook' | 'google', ReactNode>;
+    onActionButtonClick: (eventType: ClickEventType, values?: Record<string, string>) => void;
 };
 export declare type ReducerState = {
     value: ReducerStateValue;
-    effects: string[];
-    formValues: Record<string, string>;
-    defaultFormValues: Record<string, string>;
-};
-export declare type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome';
-export declare type ReducerEvent = {
-    type: 'submit-form';
     context: {
-        values: Record<string, string>;
+        email?: string;
+        phone?: string;
+        name?: string;
     };
-} | {
-    type: 'click-password-continue';
-} | {
-    type: 'click-facebook-continue';
-} | {
-    type: 'click-google-continue';
-} | {
-    type: 'click-sign-up';
-} | {
-    type: 'click-email-sign-up';
-} | {
-    type: 'click-phone-sign-up';
-} | {
-    type: 'click-get-code';
-    context: {
-        values: Record<string, string>;
-    };
-} | {
-    type: 'click-done';
-} | {
-    type: 'click-close';
-} | {
-    type: 'reset';
-} | {
-    type: 'dialog-closed';
-} | {
-    type: 'user-found';
-} | {
-    type: 'indirect-user-found';
-} | {
-    type: 'user-not-found';
-} | {
-    type: 'sign-in-success';
-} | {
-    type: 'sign-in-failed';
-} | {
-    type: 'code-sent';
-} | {
-    type: 'start-google-auth';
-} | {
-    type: 'start-facebook-auth';
 };
+export declare type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome';
+export declare type ClickEventType = 'submit-form' | 'click-close' | 'code-sent' | 'request-auth-code-email' | 'request-auth-code-sms' | 'close' | 'use-different-account' | 'sign-in-with-password' | 'sign-in-with-facebook' | 'sign-in-with-google';
 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' | 'resendAuthCode' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword';
 declare type LocationOption = {
     label: string;

package/build/index.es.js

@@ -1103,7 +1103,7 @@ 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 _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
     var classes = useStyles$2();
     // sign-up form state
     var formRef = useRef(null);
@@ -1111,8 +1111,8 @@ var FollowerAuthenticationForm = function () {
     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 _f = useState(state.context.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
+    var _g = useState(state.context.email || ''), signUpEmailValue = _g[0], setSignUpEmailValue = _g[1];
     var checkFieldValidity = function (e) {
         var _a, _b;
         var fieldName = e.target.name;
@@ -1139,7 +1139,7 @@ var FollowerAuthenticationForm = function () {
         var form = e.target;
         var formData = new FormData(form);
         var values = Object.fromEntries(formData.entries());
-        dispatch({ type: 'submit-form', context: { values: values } });
+        onActionButtonClick('submit-form', values);
     };
     var formProps = {
         id: 'follower-authentication-form',
@@ -1158,12 +1158,12 @@ var FollowerAuthenticationForm = function () {
                 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 } }),
                 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',
-                    } }),
+                    }, defaultValue: state.context.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" }),
@@ -1171,7 +1171,7 @@ var FollowerAuthenticationForm = function () {
                 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 }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
         case 'emailAuthCode':
             return (React__default.createElement("form", __assign({}, formProps),
@@ -1179,16 +1179,16 @@ var FollowerAuthenticationForm = function () {
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'indirectUserFound':
             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 }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
         case 'emailPasswordSignIn':
             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, InputLabelProps: { shrink: true } }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phoneFound':
             return (React__default.createElement("form", __assign({}, formProps),
-                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
         case 'phoneAuthCode':
             return (React__default.createElement("form", __assign({}, formProps),
@@ -1196,7 +1196,7 @@ var FollowerAuthenticationForm = function () {
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phonePasswordSignIn':
             return (React__default.createElement("form", __assign({}, formProps),
-                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone, InputLabelProps: { shrink: true } }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
                 React__default.createElement(TextField$1, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'welcome':
@@ -1215,17 +1215,17 @@ var useStyles$1 = makeStyles(function () { return ({
     },
 }); });
 var FollowerAuthenticationAltActions = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, dispatch = _a.dispatch, messages = _a.messages, logos = _a.logos, loading = _a.loading;
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, logos = _a.logos, loading = _a.loading, onActionButtonClick = _a.onActionButtonClick;
     var classes = useStyles$1();
     switch (state.value) {
         case 'initial':
             return (React__default.createElement(Box, { className: classes.main },
                 React__default.createElement(Divider$1, null),
                 React__default.createElement(Button$1, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
-                        dispatch({ type: 'click-facebook-continue' });
+                        onActionButtonClick('sign-in-with-facebook');
                     } }, messages.continueWithFacebookButtonLabel),
                 React__default.createElement(Button$1, { variant: "outlined", startIcon: logos.google, onClick: function () {
-                        dispatch({ type: 'click-google-continue' });
+                        onActionButtonClick('sign-in-with-google');
                     } }, messages.continueWithGoogleButtonLabel)));
         case 'signUp':
             return null;
@@ -1233,7 +1233,7 @@ var FollowerAuthenticationAltActions = function () {
             return (React__default.createElement(Box, { className: classes.main },
                 React__default.createElement(Divider$1, null),
                 React__default.createElement(Button$1, { variant: "outlined", onClick: function () {
-                        dispatch({ type: 'click-password-continue' });
+                        onActionButtonClick('sign-in-with-password');
                     } }, messages.signInWithPassword)));
         case 'emailAuthCode':
             return (React__default.createElement(Box, { className: classes.main },
@@ -1241,13 +1241,13 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-email', values);
                     } }, messages.resendAuthCode)));
         case 'indirectUserFound':
             return (React__default.createElement(Box, { className: classes.main },
                 React__default.createElement(Divider$1, null),
                 React__default.createElement(Button$1, { variant: "outlined", onClick: function () {
-                        dispatch({ type: 'click-sign-up' });
+                        onActionButtonClick('use-different-account');
                     } }, messages.indirectUserFoundCtaButtonLabelAlt)));
         case 'emailPasswordSignIn':
             return (React__default.createElement(Box, { className: classes.main },
@@ -1256,7 +1256,7 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-email', values);
                     } }, messages.emailFoundCtaButtonLabel)));
         case 'phoneFound':
             return null;
@@ -1266,7 +1266,7 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.resendAuthCode)));
         case 'phonePasswordSignIn':
             return (React__default.createElement(Box, { className: classes.main },
@@ -1275,11 +1275,11 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
             return (React__default.createElement(Button$1, { onClick: function () {
-                    dispatch({ type: 'click-done' });
+                    onActionButtonClick('close');
                 } }, messages.done));
         default:
             return null;
@@ -1323,10 +1323,10 @@ var useStyles = makeStyles(function () { return ({
     },
 }); });
 var FollowerAuthenticationCloseButton = function () {
-    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, dispatch = _a.dispatch;
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, onActionButtonClick = _a.onActionButtonClick;
     var classes = useStyles();
     var handleClose = function () {
-        dispatch({ type: 'click-close' });
+        onActionButtonClick('close');
     };
     return (React__default.createElement(IconButton$1, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
         React__default.createElement(SvgX, null)));
@@ -1374,7 +1374,7 @@ var FollowerAuthenticationDialog = function (props) {
         return breakpoints.down('sm');
     });
     var handleClose = function () {
-        props.dispatch({ type: 'click-close' });
+        restProps.onActionButtonClick('close');
     };
     return (React__default.createElement(ThemeProvider, { theme: theme$1 },
         React__default.createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },

package/build/index.js

@@ -1170,7 +1170,7 @@ 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 _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
     var classes = useStyles$2();
     // sign-up form state
     var formRef = React.useRef(null);
@@ -1178,8 +1178,8 @@ var FollowerAuthenticationForm = function () {
     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 _f = React.useState(state.context.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
+    var _g = React.useState(state.context.email || ''), signUpEmailValue = _g[0], setSignUpEmailValue = _g[1];
     var checkFieldValidity = function (e) {
         var _a, _b;
         var fieldName = e.target.name;
@@ -1206,7 +1206,7 @@ var FollowerAuthenticationForm = function () {
         var form = e.target;
         var formData = new FormData(form);
         var values = Object.fromEntries(formData.entries());
-        dispatch({ type: 'submit-form', context: { values: values } });
+        onActionButtonClick('submit-form', values);
     };
     var formProps = {
         id: 'follower-authentication-form',
@@ -1225,12 +1225,12 @@ var FollowerAuthenticationForm = function () {
                 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,
-                    } }),
+                    }, defaultValue: state.context.phone }),
                 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',
-                    } }),
+                    }, defaultValue: state.context.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" }),
@@ -1238,7 +1238,7 @@ var FollowerAuthenticationForm = function () {
                 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 }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
         case 'emailAuthCode':
             return (React__default['default'].createElement("form", __assign({}, formProps),
@@ -1246,16 +1246,16 @@ var FollowerAuthenticationForm = function () {
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'indirectUserFound':
             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 }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
         case 'emailPasswordSignIn':
             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, InputLabelProps: { shrink: true } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phoneFound':
             return (React__default['default'].createElement("form", __assign({}, formProps),
-                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
         case 'phoneAuthCode':
             return (React__default['default'].createElement("form", __assign({}, formProps),
@@ -1263,7 +1263,7 @@ var FollowerAuthenticationForm = function () {
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phonePasswordSignIn':
             return (React__default['default'].createElement("form", __assign({}, formProps),
-                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone, InputLabelProps: { shrink: true } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
                 React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'welcome':
@@ -1282,17 +1282,17 @@ var useStyles$1 = core.makeStyles(function () { return ({
     },
 }); });
 var FollowerAuthenticationAltActions = function () {
-    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, dispatch = _a.dispatch, messages = _a.messages, logos = _a.logos, loading = _a.loading;
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, logos = _a.logos, loading = _a.loading, onActionButtonClick = _a.onActionButtonClick;
     var classes = useStyles$1();
     switch (state.value) {
         case 'initial':
             return (React__default['default'].createElement(core.Box, { className: classes.main },
                 React__default['default'].createElement(core.Divider, null),
                 React__default['default'].createElement(core.Button, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
-                        dispatch({ type: 'click-facebook-continue' });
+                        onActionButtonClick('sign-in-with-facebook');
                     } }, messages.continueWithFacebookButtonLabel),
                 React__default['default'].createElement(core.Button, { variant: "outlined", startIcon: logos.google, onClick: function () {
-                        dispatch({ type: 'click-google-continue' });
+                        onActionButtonClick('sign-in-with-google');
                     } }, messages.continueWithGoogleButtonLabel)));
         case 'signUp':
             return null;
@@ -1300,7 +1300,7 @@ var FollowerAuthenticationAltActions = function () {
             return (React__default['default'].createElement(core.Box, { className: classes.main },
                 React__default['default'].createElement(core.Divider, null),
                 React__default['default'].createElement(core.Button, { variant: "outlined", onClick: function () {
-                        dispatch({ type: 'click-password-continue' });
+                        onActionButtonClick('sign-in-with-password');
                     } }, messages.signInWithPassword)));
         case 'emailAuthCode':
             return (React__default['default'].createElement(core.Box, { className: classes.main },
@@ -1308,13 +1308,13 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-email', values);
                     } }, messages.resendAuthCode)));
         case 'indirectUserFound':
             return (React__default['default'].createElement(core.Box, { className: classes.main },
                 React__default['default'].createElement(core.Divider, null),
                 React__default['default'].createElement(core.Button, { variant: "outlined", onClick: function () {
-                        dispatch({ type: 'click-sign-up' });
+                        onActionButtonClick('use-different-account');
                     } }, messages.indirectUserFoundCtaButtonLabelAlt)));
         case 'emailPasswordSignIn':
             return (React__default['default'].createElement(core.Box, { className: classes.main },
@@ -1323,7 +1323,7 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-email', values);
                     } }, messages.emailFoundCtaButtonLabel)));
         case 'phoneFound':
             return null;
@@ -1333,7 +1333,7 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.resendAuthCode)));
         case 'phonePasswordSignIn':
             return (React__default['default'].createElement(core.Box, { className: classes.main },
@@ -1342,11 +1342,11 @@ var FollowerAuthenticationAltActions = function () {
                         var form = document.querySelector('#follower-authentication-form');
                         var formData = new FormData(form);
                         var values = Object.fromEntries(formData.entries());
-                        dispatch({ type: 'click-get-code', context: { values: values } });
+                        onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
             return (React__default['default'].createElement(core.Button, { onClick: function () {
-                    dispatch({ type: 'click-done' });
+                    onActionButtonClick('close');
                 } }, messages.done));
         default:
             return null;
@@ -1390,10 +1390,10 @@ var useStyles = core.makeStyles(function () { return ({
     },
 }); });
 var FollowerAuthenticationCloseButton = function () {
-    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, dispatch = _a.dispatch;
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, onActionButtonClick = _a.onActionButtonClick;
     var classes = useStyles();
     var handleClose = function () {
-        dispatch({ type: 'click-close' });
+        onActionButtonClick('close');
     };
     return (React__default['default'].createElement(core.IconButton, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
         React__default['default'].createElement(SvgX, null)));
@@ -1441,7 +1441,7 @@ var FollowerAuthenticationDialog = function (props) {
         return breakpoints.down('sm');
     });
     var handleClose = function () {
-        props.dispatch({ type: 'click-close' });
+        restProps.onActionButtonClick('close');
     };
     return (React__default['default'].createElement(core.ThemeProvider, { theme: theme$1 },
         React__default['default'].createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/common-ui",
-  "version": "0.105.0",
+  "version": "0.107.0",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React components for all Popmenu apps on the web.",
@@ -30,5 +30,5 @@
     "@types/classnames": "^2.3.1"
   },
   "sideEffects": false,
-  "gitHead": "568039eb9a71cf45d6a1a0ee245b433a11441222"
+  "gitHead": "ee9615fc131617cfd33658df991addf188c3f7ce"
 }