@popmenu/common-ui 0.150.2 → 0.151.0

package/build/cjs/components/FollowerAuthenticationDialog/FollowerAuthenticationContent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const FollowerAuthenticationContent: (props: {
+export declare const FollowerAuthenticationContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { IconProps } from '../Icon/IconProps';
 export type FollowerAuthenticationDialogProps = {
     open: boolean;
     state: ReducerState;
@@ -9,10 +10,16 @@ export type FollowerAuthenticationDialogProps = {
     loading: boolean;
     graphics: Record<`${ReducerStateValue}`, string>;
     logos: Record<'popmenu' | 'facebook' | 'google' | 'apple', ReactNode>;
+    logoUrl?: string;
     showCloseButton?: boolean;
     showAppleButton?: boolean;
     showFacebookButton?: boolean;
     showGoogleButton?: boolean;
+    showV2?: boolean;
+    signUpBackgroundImageUrl?: string;
+    vipBenefitRows?: FollowerAuthenticationVipBenefitRow[];
+    showSubscribeEmail?: boolean;
+    showSubscribeSms?: boolean;
     onActionButtonClick: (eventType: ClickEventType, values?: Record<string, string>) => void;
 };
 export type ReducerState = {
@@ -24,10 +31,14 @@ export type ReducerState = {
     };
 };
 export type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome' | 'requirePhone';
-export 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' | 'sign-in-with-apple';
-export type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | 'requirePhoneInputLabel' | 'requirePhoneCtaButtonLabel' | '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' | 'continueWithAppleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword';
+export 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' | 'sign-in-with-apple' | 'open-terms-of-service' | 'open-privacy-policy';
+export type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | 'requirePhoneInputLabel' | 'requirePhoneCtaButtonLabel' | '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' | 'continueWithAppleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword' | 'termsOfServiceButtonLabel' | 'subscribeEmailCheckboxLabel' | 'subscribeSmsCheckboxLabel' | 'privacyPolicyText' | 'privacyPolicyButtonLabel';
 type LocationOption = {
     label: string;
     value: string;
 };
+type FollowerAuthenticationVipBenefitRow = {
+    icon: IconProps['icon'];
+    text: string;
+};
 export {};

package/build/cjs/components/FollowerAuthenticationDialog/FollowerAuthenticationLogoContainer.d.ts

@@ -0,0 +1 @@
+export declare const FollowerAuthenticationLogoContainer: () => JSX.Element;

package/build/cjs/components/FollowerAuthenticationDialog/FollowerAuthenticationVipBenefitRows.d.ts

@@ -0,0 +1 @@
+export declare const FollowerAuthenticationVipBenefitRows: () => JSX.Element | null;

package/build/cjs/index.js

@@ -426,7 +426,7 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-const useStyles$5 = core.makeStyles((theme) => ({
+const useStyles$7 = core.makeStyles((theme) => ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
@@ -463,7 +463,7 @@ const useStyles$5 = core.makeStyles((theme) => ({
     },
 }));
 const Divider = ({ TypographyProps, className, dividerColor, text, textColor, textTransform = 'lowercase', }) => {
-    const classes = useStyles$5({ dividerColor, textColor, textTransform });
+    const classes = useStyles$7({ dividerColor, textColor, textTransform });
     const casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
     return (React.createElement(core.Box, { className: classNames([classes.dividerRoot, className]), display: "flex", alignItems: "center" },
         React.createElement(core.Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset }),
@@ -483,15 +483,53 @@ const useFollowerAuthenticationDialogContext = () => {
     return context;
 };
 
-const useStyles$4 = core.makeStyles(() => ({
+const useStyles$6 = core.makeStyles((theme) => ({
+    checkboxLabel: {
+        '& > a': {
+            textDecoration: 'underline',
+        },
+        fontSize: '0.75rem',
+    },
     form: {
+        alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
         gridGap: 16,
+        width: '100%',
+    },
+    label: {
+        alignSelf: 'start',
+        fontSize: '0.85rem',
+    },
+    privacyPolicyButton: {
+        fontSize: '0.75rem',
+        margin: theme.spacing(0, 0.5),
+        padding: 0,
+        textDecoration: 'underline',
+        width: 'auto',
+    },
+    privacyPolicyText: {
+        fontSize: '0.75rem',
+        textAlign: 'center',
     },
 }));
+function LocationAndBirthday({ checkFieldValidity, classes, loading, locationOptions, messages, showLocationErrorText, showV2, }) {
+    const locationSelect = (React.createElement(core.TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, id: "location-input", inputProps: { required: true }, name: "location" }, locationOptions.map((locationOption) => (React.createElement(core.MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)))));
+    if (showV2) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(core.Box, { display: "flex", flexDirection: "column", gridGap: 4, style: { width: '100%' } },
+                React.createElement(core.Typography, { className: classes.label }, messages.signUpBirthdaySectionLabel),
+                React.createElement(core.Box, { display: "flex", gridGap: 16 },
+                    React.createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, id: "birthday-month-input", name: "birthdayMonth", style: { flex: 1 } }),
+                    React.createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, id: "birthday-date-input", name: "birthdayDate", style: { flex: 1 } }))),
+            locationSelect));
+    }
+    return (React.createElement(React.Fragment, null,
+        locationSelect,
+        React.createElement(core.Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
+        React.createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, id: "birthday-month-input", name: "birthdayMonth" }),
+        React.createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, id: "birthday-date-input", name: "birthdayDate" })));
+}
 const northAmericanPhoneRegex = /^(\()?[2-9]{1}\d{2}(\))?[-\s.]?[2-9]{1}\d{2}[-\s.]?\d{4}$/;
 const ukPhoneRegex = /^((\+?44\s?|0044\s?)(\s?\d{3,5}|\(\d{3,5}\))(\s?\d{3,4})(\s?\d{3,4})$|^07\d{9}$)/;
 const validatePhoneNumber = (phone) => {
@@ -500,20 +538,27 @@ const validatePhoneNumber = (phone) => {
     return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
 };
 const FollowerAuthenticationForm = () => {
-    const { state, messages, locationOptions, onActionButtonClick, loading } = useFollowerAuthenticationDialogContext();
-    const classes = useStyles$4();
+    const { state, messages, locationOptions, onActionButtonClick, loading, showV2, showSubscribeEmail, showSubscribeSms, } = useFollowerAuthenticationDialogContext();
+    const classes = useStyles$6();
     // sign-up form state
     const formRef = React.useRef(null);
     const [formValidity, setFormValidity] = React.useState(false);
+    const [showNameErrorText, setShowNameErrorText] = React.useState();
     const [showPhoneErrorText, setShowPhoneErrorText] = React.useState();
     const [showEmailErrorText, setShowEmailErrorText] = React.useState();
     const [showLocationErrorText, setShowLocationErrorText] = React.useState();
+    const [signUpNameValue, setSignUpNameValue] = React.useState(state.context.name || '');
     const [signUpPhoneValue, setSignUpPhoneValue] = React.useState(state.context.phone || '');
     const [signUpEmailValue, setSignUpEmailValue] = React.useState(state.context.email || '');
     const checkFieldValidity = (e) => {
         const fieldName = e.target.name;
         const fieldValue = e.target.value;
         switch (fieldName) {
+            case 'name':
+                const isNameValid = fieldValue.length > 0;
+                setSignUpNameValue(fieldValue);
+                setShowNameErrorText(!isNameValid);
+                break;
             case 'phone':
                 const isPhoneValid = validatePhoneNumber(fieldValue);
                 setSignUpPhoneValue(fieldValue);
@@ -531,9 +576,10 @@ const FollowerAuthenticationForm = () => {
         }
     };
     React.useEffect(() => {
+        setSignUpNameValue(state.context.name || '');
         setSignUpPhoneValue(state.context.phone || '');
         setSignUpEmailValue(state.context.email || '');
-    }, [state.context.phone, state.context.email]);
+    }, [state.context.name, state.context.phone, state.context.email]);
     React.useEffect(() => {
         // Validate pre-filled values (only in signUp state)
         if (state.value === 'signUp') {
@@ -547,18 +593,33 @@ const FollowerAuthenticationForm = () => {
                 setShowEmailErrorText(!isEmailValid);
             }
         }
+        const hasValidName = Boolean(signUpNameValue) && !showNameErrorText;
         const hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText;
         const hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText;
         const locationField = formRef.current?.elements.namedItem('location');
         const hasValidLocation = locationField ? Boolean(locationField.value) : true;
-        const hasValidContact = hasValidPhone || hasValidEmail;
+        const hasValidContact = showV2 ? hasValidName && hasValidPhone && hasValidEmail : hasValidPhone || hasValidEmail;
         setFormValidity(hasValidContact && hasValidLocation);
-    }, [state.value, signUpPhoneValue, signUpEmailValue, showPhoneErrorText, showEmailErrorText, showLocationErrorText]);
+    }, [
+        showV2,
+        state.value,
+        signUpPhoneValue,
+        signUpEmailValue,
+        showPhoneErrorText,
+        showEmailErrorText,
+        showLocationErrorText,
+        signUpNameValue,
+        showNameErrorText,
+    ]);
     const handleSubmit = (e) => {
         e.preventDefault();
         const form = e.target;
         const formData = new FormData(form);
         const values = Object.fromEntries(formData.entries());
+        if (state.value === 'signUp') {
+            values.subscribeEmail = String(formData.has('subscribeEmail'));
+            values.subscribeSms = String(formData.has('subscribeSms'));
+        }
         onActionButtonClick('submit-form', values);
     };
     const formProps = {
@@ -576,17 +637,20 @@ const FollowerAuthenticationForm = () => {
                     e.preventDefault();
                 } },
                 React.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: {
-                        required: signUpEmailValue ? false : true,
+                        required: showV2 || !signUpEmailValue,
                     }, defaultValue: state.context.phone }),
-                React.createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", inputProps: { required: true } }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", onChange: checkFieldValidity, error: showNameErrorText, inputProps: { required: true }, defaultValue: state.context.name }),
                 React.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,
+                        required: showV2 || !signUpPhoneValue,
                         type: 'email',
                     }, defaultValue: state.context.email }),
-                React.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((locationOption) => (React.createElement(core.MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)))),
-                React.createElement(core.Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
-                React.createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
-                React.createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
+                React.createElement(LocationAndBirthday, { checkFieldValidity: checkFieldValidity, classes: classes, loading: loading, locationOptions: locationOptions, messages: messages, showLocationErrorText: showLocationErrorText, showV2: showV2 }),
+                React.createElement(core.Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gridGap: 2, width: "100%" },
+                    showSubscribeEmail && (React.createElement(core.FormControlLabel, { style: { alignItems: 'flex-start' }, control: React.createElement(core.Checkbox, { id: "subscribe-email", name: "subscribeEmail", disabled: loading, color: "primary" }), label: React.createElement(core.Typography, { className: classes.checkboxLabel }, messages.subscribeEmailCheckboxLabel) })),
+                    showSubscribeSms && (React.createElement(core.FormControlLabel, { style: { alignItems: 'flex-start' }, control: React.createElement(core.Checkbox, { id: "subscribe-sms", name: "subscribeSms", disabled: loading, color: "primary" }), label: React.createElement(core.Typography, { className: classes.checkboxLabel }, messages.subscribeSmsCheckboxLabel) }))),
+                showV2 && messages.privacyPolicyText && (React.createElement(core.Typography, { className: classes.privacyPolicyText },
+                    messages.privacyPolicyText,
+                    React.createElement(core.Button, { className: classes.privacyPolicyButton, onClick: () => onActionButtonClick('open-privacy-policy'), variant: "text" }, messages.privacyPolicyButtonLabel))),
                 React.createElement(core.Button, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
         case 'emailFound':
             return (React.createElement("form", { ...formProps },
@@ -639,7 +703,7 @@ const FollowerAuthenticationForm = () => {
     }
 };
 
-const useStyles$3 = core.makeStyles(() => ({
+const useStyles$5 = core.makeStyles(() => ({
     main: {
         width: '100%',
         display: 'flex',
@@ -647,16 +711,23 @@ const useStyles$3 = core.makeStyles(() => ({
         gridGap: 16,
     },
 }));
+function AltActionsDivider() {
+    const { messages, showV2 } = useFollowerAuthenticationDialogContext();
+    if (!showV2 || !messages.or) {
+        return React.createElement(core.Divider, null);
+    }
+    return React.createElement(Divider, { text: messages.or, textTransform: "uppercase" });
+}
 const FollowerAuthenticationAltActions = () => {
     const { state, messages, logos, loading, onActionButtonClick, showAppleButton, showFacebookButton = true, showGoogleButton = true, } = useFollowerAuthenticationDialogContext();
-    const classes = useStyles$3();
+    const classes = useStyles$5();
     switch (state.value) {
         case 'initial':
             if (!showFacebookButton && !showGoogleButton && !showAppleButton) {
                 return null;
             }
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Divider, null),
+                React.createElement(AltActionsDivider, null),
                 showFacebookButton && (React.createElement(core.Button, { variant: "outlined", startIcon: logos.facebook, onClick: () => {
                         onActionButtonClick('sign-in-with-facebook');
                     } }, messages.continueWithFacebookButtonLabel)),
@@ -670,7 +741,7 @@ const FollowerAuthenticationAltActions = () => {
             return null;
         case 'emailFound':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Divider, null),
+                React.createElement(AltActionsDivider, null),
                 React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         onActionButtonClick('sign-in-with-password');
                     } }, messages.signInWithPassword)));
@@ -684,13 +755,13 @@ const FollowerAuthenticationAltActions = () => {
                     } }, messages.resendAuthCode)));
         case 'indirectUserFound':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Divider, null),
+                React.createElement(AltActionsDivider, null),
                 React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         onActionButtonClick('use-different-account');
                     } }, messages.indirectUserFoundCtaButtonLabelAlt)));
         case 'emailPasswordSignIn':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Divider, null),
+                React.createElement(AltActionsDivider, null),
                 React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         const form = document.querySelector('#follower-authentication-form');
                         const formData = new FormData(form);
@@ -709,7 +780,7 @@ const FollowerAuthenticationAltActions = () => {
                     } }, messages.resendAuthCode)));
         case 'phonePasswordSignIn':
             return (React.createElement(core.Box, { className: classes.main },
-                React.createElement(core.Divider, null),
+                React.createElement(AltActionsDivider, null),
                 React.createElement(core.Button, { variant: "outlined", onClick: () => {
                         const form = document.querySelector('#follower-authentication-form');
                         const formData = new FormData(form);
@@ -731,7 +802,7 @@ const FollowerAuthenticationBody = () => {
         React.createElement(FollowerAuthenticationAltActions, null)));
 };
 
-const useStyles$2 = core.makeStyles(() => ({
+const useStyles$4 = core.makeStyles(() => ({
     root: {
         position: 'absolute',
         top: 0,
@@ -740,7 +811,7 @@ const useStyles$2 = core.makeStyles(() => ({
 }));
 const FollowerAuthenticationCloseButton = ({ show }) => {
     const { messages, onActionButtonClick } = useFollowerAuthenticationDialogContext();
-    const classes = useStyles$2();
+    const classes = useStyles$4();
     const handleClose = () => {
         onActionButtonClick('close');
     };
@@ -751,42 +822,82 @@ const FollowerAuthenticationCloseButton = ({ show }) => {
         React.createElement(webIcons.X, null)));
 };
 
-const useStyles$1 = core.makeStyles(() => ({
+const useStyles$3 = core.makeStyles((theme) => ({
     root: {
+        alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
         gridGap: 16,
     },
+    padding: {
+        [theme.breakpoints.up('sm')]: {
+            padding: theme.spacing(4),
+        },
+    },
 }));
-const FollowerAuthenticationContent = (props) => {
-    const classes = useStyles$1();
-    return React.createElement(core.DialogContent, { classes: classes }, props.children);
+const FollowerAuthenticationContent = ({ children }) => {
+    const { showV2 } = useFollowerAuthenticationDialogContext();
+    const classes = useStyles$3();
+    return React.createElement(core.DialogContent, { className: classNames(classes.root, showV2 && classes.padding) }, children);
 };
 
 const FollowerAuthenticationFooter = () => {
-    const { messages, logos } = useFollowerAuthenticationDialogContext();
-    return (React.createElement(core.Box, { display: "flex", gridGap: 8 },
-        React.createElement(core.Typography, { variant: "body2" }, messages.poweredBy),
-        logos.popmenu));
+    const { messages, logos, onActionButtonClick, showV2 } = useFollowerAuthenticationDialogContext();
+    return (React.createElement(core.Box, { display: "flex", flexDirection: "column", gridGap: 4 },
+        React.createElement(core.Box, { display: "flex", justifyContent: "center", gridGap: 8 },
+            React.createElement(core.Typography, { variant: showV2 ? 'caption' : 'body2' }, messages.poweredBy),
+            logos.popmenu),
+        showV2 && (React.createElement(core.Button, { onClick: () => onActionButtonClick('open-terms-of-service'), style: { textDecoration: 'underline', fontSize: '0.75rem' }, variant: "text" }, messages.termsOfServiceButtonLabel))));
 };
 
 const FollowerAuthenticationGraphic = () => {
-    const { state, graphics } = useFollowerAuthenticationDialogContext();
+    const { state, graphics, showV2 } = useFollowerAuthenticationDialogContext();
+    if (showV2 && state.value === 'signUp')
+        return null;
     const graphic = graphics[state.value];
     if (!graphic)
         return null;
     return (React.createElement(core.Box, null,
-        React.createElement("img", { src: graphic, alt: "" })));
+        React.createElement("img", { src: graphic, alt: "", style: showV2 ? { width: 95, height: 95 } : undefined })));
 };
 
 const FollowerAuthenticationInfo = () => {
-    const { state, messages } = useFollowerAuthenticationDialogContext();
+    const { state, messages, showV2 } = useFollowerAuthenticationDialogContext();
+    if (showV2 && state.value === 'signUp')
+        return null;
     const info = messages[`${state.value}Info`];
+    const last4Digits = state.context.phone?.slice(-4);
     if (!info)
         return null;
     return (React.createElement(core.Box, null,
-        React.createElement(core.Typography, { align: "center" }, info)));
+        React.createElement(core.Typography, { align: "center" }, info),
+        showV2 && state.value === 'phoneAuthCode' && (React.createElement(core.Typography, { align: "center", variant: "h5", style: { marginTop: 16 } },
+            "***-***-",
+            last4Digits))));
+};
+
+const useStyles$2 = core.makeStyles((theme) => ({
+    main: {
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+        backgroundColor: theme.palette.common.white,
+        backgroundPosition: 'center top',
+        backgroundSize: 'cover',
+        height: '100%',
+        padding: theme.spacing(5),
+        width: '100%',
+    },
+    logo: {
+        maxWidth: '100%',
+    },
+}));
+const FollowerAuthenticationLogoContainer = () => {
+    const classes = useStyles$2();
+    const { logoUrl, signUpBackgroundImageUrl } = useFollowerAuthenticationDialogContext();
+    return (React.createElement(core.Box, { className: classes.main, style: {
+            backgroundImage: signUpBackgroundImageUrl ? `url(${JSON.stringify(signUpBackgroundImageUrl)})` : 'none',
+        } }, logoUrl && React.createElement("img", { alt: "", className: classes.logo, src: logoUrl })));
 };
 
 const FollowerAuthenticationTitle = () => {
@@ -796,6 +907,31 @@ const FollowerAuthenticationTitle = () => {
         React.createElement(core.Typography, { variant: "h1", align: "center" }, title)));
 };
 
+const useStyles$1 = core.makeStyles((theme) => ({
+    main: {
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: theme.spacing(1.5),
+        width: '100%',
+    },
+    vipBenefitRows: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        gridGap: theme.spacing(2),
+    },
+}));
+const FollowerAuthenticationVipBenefitRows = () => {
+    const classes = useStyles$1();
+    const { vipBenefitRows, showV2, state } = useFollowerAuthenticationDialogContext();
+    const isInitialOrSignUpState = state.value === 'initial' || state.value === 'signUp';
+    if (!showV2 || !vipBenefitRows || !isInitialOrSignUpState)
+        return null;
+    return (React.createElement(core.Box, { className: classes.main }, vipBenefitRows.map((row, index) => (React.createElement(core.Box, { key: index, className: classes.vipBenefitRows },
+        React.createElement(Icon, { icon: row.icon, size: "large", "aria-hidden": "true" }),
+        React.createElement(Typography, null, row.text))))));
+};
+
 const theme = {
     palette: {
         primary: { main: '#2E3042' },
@@ -838,19 +974,27 @@ const FollowerAuthenticationDialog = (props) => {
         restProps.onActionButtonClick('close');
     };
     const initialTitle = typeof restProps.messages.initialTitle === 'string' ? restProps.messages.initialTitle : undefined;
+    const showV2 = !!restProps.showV2;
+    const showSidebar = showV2 && (typeof restProps.logoUrl === 'string' || typeof restProps.signUpBackgroundImageUrl === 'string');
+    const dialogInner = (React.createElement(FollowerAuthenticationContent, null,
+        React.createElement(FollowerAuthenticationCloseButton, { show: showCloseButton }),
+        React.createElement(FollowerAuthenticationGraphic, null),
+        React.createElement(FollowerAuthenticationTitle, null),
+        React.createElement(FollowerAuthenticationInfo, null),
+        React.createElement(FollowerAuthenticationVipBenefitRows, null),
+        React.createElement(FollowerAuthenticationBody, null),
+        React.createElement(FollowerAuthenticationFooter, null)));
+    const dialogContent = showSidebar ? (React.createElement(core.Grid, { container: true },
+        React.createElement(core.Grid, { item: true, lg: 4, md: 3, xs: 12 },
+            React.createElement(FollowerAuthenticationLogoContainer, null)),
+        React.createElement(core.Grid, { item: true, lg: 8, md: 9, xs: 12 }, dialogInner))) : (dialogInner);
     return (React.createElement(core.ThemeProvider, { theme: theme$1 },
         React.createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },
-            React.createElement(core.Dialog, { open: open, fullScreen: fullScreen, onClose: handleClose, PaperProps: {
+            React.createElement(core.Dialog, { open: open, fullScreen: fullScreen, maxWidth: showV2 ? false : undefined, onClose: handleClose, PaperProps: {
                     'aria-label': initialTitle,
                     'aria-modal': 'true',
-                } },
-                React.createElement(FollowerAuthenticationContent, null,
-                    React.createElement(FollowerAuthenticationCloseButton, { show: showCloseButton }),
-                    React.createElement(FollowerAuthenticationGraphic, null),
-                    React.createElement(FollowerAuthenticationTitle, null),
-                    React.createElement(FollowerAuthenticationInfo, null),
-                    React.createElement(FollowerAuthenticationBody, null),
-                    React.createElement(FollowerAuthenticationFooter, null))))));
+                    style: showV2 ? { maxWidth: showSidebar ? 800 : 540, width: '100%' } : undefined,
+                } }, dialogContent))));
 };
 
 const IconButton = React.forwardRef((props, ref) => {