@popmenu/common-ui 0.153.0 → 0.155.0

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

@@ -1,5 +1,14 @@
 import { ReactNode } from 'react';
 import { IconProps } from '../Icon/IconProps';
+export type SignUpFieldSetting = {
+    enabled?: boolean;
+    required?: boolean;
+};
+export type SignUpSetting = {
+    phone?: SignUpFieldSetting;
+    birthday?: SignUpFieldSetting;
+    weddingAnniversary?: SignUpFieldSetting;
+};
 export type FollowerAuthenticationDialogProps = {
     open: boolean;
     state: ReducerState;
@@ -20,6 +29,7 @@ export type FollowerAuthenticationDialogProps = {
     vipBenefitRows?: FollowerAuthenticationVipBenefitRow[];
     showSubscribeEmail?: boolean;
     showSubscribeSms?: boolean;
+    signUpSetting?: SignUpSetting;
     onActionButtonClick: (eventType: ClickEventType, values?: Record<string, string>) => void;
 };
 export type ReducerState = {
@@ -28,11 +38,16 @@ export type ReducerState = {
         email?: string;
         phone?: string;
         name?: string;
+        favoriteLocationId?: number;
+        birthMonth?: number;
+        birthDay?: number;
+        weddingMonth?: number;
+        weddingDay?: number;
     };
 };
-export type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailMagicLinkSent' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome' | 'requirePhone';
+export type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailMagicLinkSent' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome' | 'requirePhone' | 'completeProfile';
 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' | 'emailMagicLinkSentCtaButtonLabel' | 'phoneAuthCodeInputLabel' | 'resendAuthCode' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'continueWithAppleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword' | 'termsOfServiceButtonLabel' | 'subscribeEmailCheckboxLabel' | 'subscribeSmsCheckboxLabel' | 'privacyPolicyText' | 'privacyPolicyButtonLabel';
+export type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | 'requirePhoneInputLabel' | 'requirePhoneCtaButtonLabel' | 'indirectUserFoundLabel' | 'indirectUserFoundCtaButtonLabel' | 'indirectUserFoundCtaButtonLabelAlt' | 'signUpPhoneErrorText' | 'signUpPhoneInputLabel' | 'signUpNameInputLabel' | 'signUpNameErrorText' | 'signUpEmailErrorText' | 'signUpEmailInputLabel' | 'signUpLocationErrorText' | 'signUpLocationInputLabel' | 'signUpBirthdaySectionLabel' | 'signUpMonthInputLabel' | 'signUpMonthJanuary' | 'signUpMonthFebruary' | 'signUpMonthMarch' | 'signUpMonthApril' | 'signUpMonthMay' | 'signUpMonthJune' | 'signUpMonthJuly' | 'signUpMonthAugust' | 'signUpMonthSeptember' | 'signUpMonthOctober' | 'signUpMonthNovember' | 'signUpMonthDecember' | 'signUpDayInputLabel' | 'signUpWeddingAnniversarySectionLabel' | 'signUp' | 'signUpFinePrint' | 'emailFoundInputLabel' | 'emailFoundCtaButtonLabel' | 'phoneFoundInputLabel' | 'phoneFoundCtaButtonLabel' | 'emailAuthCodeInputLabel' | 'emailMagicLinkSentCtaButtonLabel' | 'phoneAuthCodeInputLabel' | 'resendAuthCode' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'continueWithAppleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword' | 'termsOfServiceButtonLabel' | 'subscribeEmailCheckboxLabel' | 'subscribeSmsCheckboxLabel' | 'privacyPolicyText' | 'privacyPolicyButtonLabel' | 'completeProfileCtaButtonLabel';
 type LocationOption = {
     label: string;
     value: string;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const validatePhoneNumber: (phone: string) => boolean;
+export declare const formatPhoneNumber: (value: string) => string;

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$7 = core.makeStyles((theme) => ({
+const useStyles$9 = core.makeStyles((theme) => ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
@@ -463,7 +463,7 @@ const useStyles$7 = core.makeStyles((theme) => ({
     },
 }));
 const Divider = ({ TypographyProps, className, dividerColor, text, textColor, textTransform = 'lowercase', }) => {
-    const classes = useStyles$7({ dividerColor, textColor, textTransform });
+    const classes = useStyles$9({ 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,7 +483,252 @@ const useFollowerAuthenticationDialogContext = () => {
     return context;
 };
 
-const useStyles$6 = core.makeStyles((theme) => ({
+const northAmericanPhoneRegex = /^(\+?1[\s.-]?)?(\([2-9]\d{2}\)|[2-9]\d{2})[-\s.]?[2-9]\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{3}\s?\d{6}$)/;
+const validatePhoneNumber = (phone) => {
+    if (!phone)
+        return false;
+    return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
+};
+const formatPatterns = [
+    { pattern: /^(1)([2-9]\d{2})(\d{3})(\d{4})$/, format: '+{1} ({2}) {3}-{4}', international: true },
+    { pattern: /^([2-9]\d{2})(\d{3})(\d{4})$/, format: '({1}) {2}-{3}', international: false },
+    { pattern: /^(44)(\d{4})(\d{6})$/, format: '+{1} {2} {3}', international: true },
+    { pattern: /^(07\d{3})(\d{6})$/, format: '{1} {2}', international: false },
+];
+const formatPhoneNumber = (value) => {
+    if (!value)
+        return '';
+    const isInternational = value.startsWith('+');
+    const digits = value.replace(/\D/g, '');
+    if (!digits)
+        return isInternational ? '+' : '';
+    for (const { pattern, format, international } of formatPatterns) {
+        if (isInternational && !international)
+            continue;
+        const m = digits.match(pattern);
+        if (m)
+            return m.slice(1).reduce((result, match, i) => result.replace(`{${i + 1}}`, match), format);
+    }
+    return isInternational ? `+${digits}` : digits;
+};
+
+const useStyles$8 = core.makeStyles((theme) => ({
+    button: {
+        fontSize: '0.75rem',
+        margin: theme.spacing(0, 0.5),
+        padding: 0,
+        textDecoration: 'underline',
+        width: 'auto',
+    },
+    text: {
+        fontSize: '0.75rem',
+        textAlign: 'center',
+    },
+}));
+const FollowerAuthenticationPrivacyPolicy = () => {
+    const classes = useStyles$8();
+    const { messages, onActionButtonClick, showV2 } = useFollowerAuthenticationDialogContext();
+    if (!showV2 || !messages.privacyPolicyText)
+        return null;
+    return (React.createElement(core.Typography, { className: classes.text },
+        messages.privacyPolicyText,
+        React.createElement(core.Button, { className: classes.button, onClick: () => onActionButtonClick('open-privacy-policy'), variant: "text" }, messages.privacyPolicyButtonLabel)));
+};
+
+const getDaysInMonth = (month) => {
+    const m = parseInt(month, 10);
+    if (!m)
+        return 31;
+    // Allow 29 for Feb to support leap year birthdays/anniversaries
+    const days = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+    return days[m - 1];
+};
+const useStyles$7 = core.makeStyles((theme) => ({
+    form: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+        width: '100%',
+    },
+    sectionLabel: {
+        alignSelf: 'start',
+        fontSize: '0.75rem',
+    },
+    divider: {
+        width: '100%',
+    },
+    pickerContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: theme.spacing(1),
+        width: '100%',
+    },
+    pickerFieldsRow: {
+        display: 'flex',
+        gridGap: theme.spacing(2),
+        width: '100%',
+    },
+    pickerField: {
+        flex: 1,
+    },
+}));
+const MonthDayPicker = ({ sectionLabel, monthLabel, dayLabel, monthId, dayId, monthName, dayName, monthValue, dayValue, onMonthChange, onDayChange, required, disabled, monthOptions, }) => {
+    const classes = useStyles$7();
+    const dayOptions = React.useMemo(() => Array.from({ length: getDaysInMonth(monthValue) }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })), [monthValue]);
+    return (React.createElement(core.Box, { className: classes.pickerContainer },
+        React.createElement(core.Typography, { className: classes.sectionLabel }, sectionLabel),
+        React.createElement(core.Box, { className: classes.pickerFieldsRow },
+            React.createElement(core.TextField, { disabled: disabled, select: true, label: monthLabel, id: monthId, name: monthName, value: monthValue, onChange: (e) => {
+                    const newMonth = e.target.value;
+                    onMonthChange(newMonth);
+                    if (dayValue && parseInt(dayValue, 10) > getDaysInMonth(newMonth)) {
+                        onDayChange('');
+                    }
+                }, required: required || Boolean(dayValue), className: classes.pickerField }, monthOptions.map((option) => (React.createElement(core.MenuItem, { key: option.value, value: option.value }, option.label)))),
+            React.createElement(core.TextField, { disabled: disabled, select: true, label: dayLabel, id: dayId, name: dayName, value: dayValue, onChange: (e) => onDayChange(e.target.value), required: required || Boolean(monthValue), className: classes.pickerField }, dayOptions.map((option) => (React.createElement(core.MenuItem, { key: option.value, value: option.value }, option.label)))))));
+};
+const FollowerAuthenticationUserForm = () => {
+    const { state, messages, locationOptions, onActionButtonClick, loading, signUpSetting } = useFollowerAuthenticationDialogContext();
+    const showPhone = signUpSetting?.phone?.enabled !== false;
+    const phoneRequired = signUpSetting?.phone?.required ?? false;
+    const showBirthday = signUpSetting?.birthday?.enabled !== false;
+    const birthdayRequired = signUpSetting?.birthday?.required ?? false;
+    const showWeddingAnniversary = signUpSetting?.weddingAnniversary?.enabled !== false;
+    const weddingAnniversaryRequired = signUpSetting?.weddingAnniversary?.required ?? false;
+    const classes = useStyles$7();
+    const formRef = React.useRef(null);
+    const [showNameErrorText, setShowNameErrorText] = React.useState(false);
+    const [showEmailErrorText, setShowEmailErrorText] = React.useState(false);
+    const [showPhoneErrorText, setShowPhoneErrorText] = React.useState(false);
+    const [showLocationErrorText, setShowLocationErrorText] = React.useState(false);
+    const [nameValue, setNameValue] = React.useState(state.context.name || '');
+    const [emailValue, setEmailValue] = React.useState(state.context.email || '');
+    const [phoneValue, setPhoneValue] = React.useState(formatPhoneNumber(state.context.phone || ''));
+    const [locationValue, setLocationValue] = React.useState(state.context.favoriteLocationId ? String(state.context.favoriteLocationId) : '');
+    const [selectedBirthMonth, setSelectedBirthMonth] = React.useState(state.context.birthMonth ? String(state.context.birthMonth) : '');
+    const [selectedBirthDay, setSelectedBirthDay] = React.useState(state.context.birthDay ? String(state.context.birthDay) : '');
+    const [selectedWeddingMonth, setSelectedWeddingMonth] = React.useState(state.context.weddingMonth ? String(state.context.weddingMonth) : '');
+    const [selectedWeddingDay, setSelectedWeddingDay] = React.useState(state.context.weddingDay ? String(state.context.weddingDay) : '');
+    const checkFieldValidity = (e) => {
+        const fieldName = e.target.name;
+        const fieldValue = e.target.value;
+        switch (fieldName) {
+            case 'name': {
+                setNameValue(fieldValue);
+                setShowNameErrorText(fieldValue.length === 0);
+                break;
+            }
+            case 'email': {
+                const emailField = formRef.current?.elements.namedItem(fieldName);
+                const isEmailValid = emailField?.validity.valid ?? false;
+                setEmailValue(fieldValue);
+                setShowEmailErrorText(!isEmailValid && fieldValue.length > 0);
+                break;
+            }
+            case 'phone': {
+                const formatted = formatPhoneNumber(fieldValue);
+                setPhoneValue(formatted);
+                setShowPhoneErrorText(formatted.length > 0 && !validatePhoneNumber(formatted));
+                break;
+            }
+            case 'location': {
+                setLocationValue(fieldValue);
+                setShowLocationErrorText(!fieldValue);
+                break;
+            }
+        }
+    };
+    const isFormValid = React.useMemo(() => {
+        const hasValidName = Boolean(nameValue) && !showNameErrorText;
+        const hasValidEmail = Boolean(emailValue) && !showEmailErrorText;
+        const hasValidPhone = showPhone
+            ? state.context.phone
+                ? true
+                : phoneRequired
+                    ? validatePhoneNumber(phoneValue)
+                    : !phoneValue || validatePhoneNumber(phoneValue)
+            : true;
+        const hasValidLocation = locationOptions.length > 0 ? Boolean(locationValue) : true;
+        // A partial date (only month or only day) requires completing the pair
+        const hasValidBirthday = !showBirthday ||
+            (birthdayRequired || selectedBirthMonth || selectedBirthDay
+                ? Boolean(selectedBirthMonth) && Boolean(selectedBirthDay)
+                : true);
+        const hasValidWeddingAnniversary = !showWeddingAnniversary ||
+            (weddingAnniversaryRequired || selectedWeddingMonth || selectedWeddingDay
+                ? Boolean(selectedWeddingMonth) && Boolean(selectedWeddingDay)
+                : true);
+        return (hasValidName &&
+            hasValidEmail &&
+            hasValidPhone &&
+            hasValidLocation &&
+            hasValidBirthday &&
+            hasValidWeddingAnniversary);
+    }, [
+        nameValue,
+        emailValue,
+        phoneValue,
+        state.context.phone,
+        locationValue,
+        locationOptions.length,
+        showNameErrorText,
+        showEmailErrorText,
+        showPhone,
+        phoneRequired,
+        showBirthday,
+        birthdayRequired,
+        selectedBirthMonth,
+        selectedBirthDay,
+        showWeddingAnniversary,
+        weddingAnniversaryRequired,
+        selectedWeddingMonth,
+        selectedWeddingDay,
+    ]);
+    const monthOptions = React.useMemo(() => [
+        { label: messages.signUpMonthJanuary, value: '1' },
+        { label: messages.signUpMonthFebruary, value: '2' },
+        { label: messages.signUpMonthMarch, value: '3' },
+        { label: messages.signUpMonthApril, value: '4' },
+        { label: messages.signUpMonthMay, value: '5' },
+        { label: messages.signUpMonthJune, value: '6' },
+        { label: messages.signUpMonthJuly, value: '7' },
+        { label: messages.signUpMonthAugust, value: '8' },
+        { label: messages.signUpMonthSeptember, value: '9' },
+        { label: messages.signUpMonthOctober, value: '10' },
+        { label: messages.signUpMonthNovember, value: '11' },
+        { label: messages.signUpMonthDecember, value: '12' },
+    ], [messages]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const values = Object.fromEntries(formData.entries());
+        // Disabled fields are excluded from FormData — restore pre-filled values from context
+        if (state.context.email && !values.email)
+            values.email = state.context.email;
+        if (state.context.phone && !values.phone)
+            values.phone = state.context.phone;
+        // Strip display formatting so the submitted value is consistent with the disabled-field path
+        if (values.phone) {
+            values.phone = values.phone.replace(/[^\d+]/g, '');
+        }
+        onActionButtonClick('submit-form', values);
+    };
+    return (React.createElement("form", { ref: formRef, id: "follower-authentication-user-form", className: classes.form, onSubmit: handleSubmit, onInvalid: (e) => e.preventDefault() },
+        React.createElement(core.TextField, { disabled: loading || Boolean(state.context.email), label: messages.signUpEmailInputLabel, id: "email-input", name: "email", onChange: checkFieldValidity, error: showEmailErrorText, helperText: showEmailErrorText && messages.signUpEmailErrorText, inputProps: { type: 'email', required: true }, value: emailValue, fullWidth: true }),
+        React.createElement(Divider, { className: classes.divider }),
+        React.createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, id: "name-input", name: "name", onChange: checkFieldValidity, error: showNameErrorText, helperText: showNameErrorText && messages.signUpNameErrorText, inputProps: { required: true }, value: nameValue, fullWidth: true }),
+        showPhone && (React.createElement(core.TextField, { disabled: loading || Boolean(state.context.phone), label: messages.signUpPhoneInputLabel, id: "phone-input", name: "phone", onChange: checkFieldValidity, error: showPhoneErrorText, helperText: showPhoneErrorText && messages.signUpPhoneErrorText, inputProps: { required: phoneRequired }, value: phoneValue, fullWidth: true })),
+        locationOptions.length > 0 && (React.createElement(core.TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, id: "location-input", name: "location", value: locationValue, fullWidth: true }, locationOptions.map((option) => (React.createElement(core.MenuItem, { "data-cy": "option", key: option.value, value: option.value }, option.label))))),
+        (showBirthday || showWeddingAnniversary) && React.createElement(Divider, { className: classes.divider }),
+        showBirthday && (React.createElement(MonthDayPicker, { sectionLabel: messages.signUpBirthdaySectionLabel, monthLabel: messages.signUpMonthInputLabel, dayLabel: messages.signUpDayInputLabel, monthId: "birthday-month-input", dayId: "birthday-date-input", monthName: "birthMonth", dayName: "birthDay", monthValue: selectedBirthMonth, dayValue: selectedBirthDay, onMonthChange: setSelectedBirthMonth, onDayChange: setSelectedBirthDay, required: birthdayRequired, disabled: loading, monthOptions: monthOptions })),
+        showWeddingAnniversary && (React.createElement(MonthDayPicker, { sectionLabel: messages.signUpWeddingAnniversarySectionLabel, monthLabel: messages.signUpMonthInputLabel, dayLabel: messages.signUpDayInputLabel, monthId: "wedding-month-input", dayId: "wedding-date-input", monthName: "weddingMonth", dayName: "weddingDay", monthValue: selectedWeddingMonth, dayValue: selectedWeddingDay, onMonthChange: setSelectedWeddingMonth, onDayChange: setSelectedWeddingDay, required: weddingAnniversaryRequired, disabled: loading, monthOptions: monthOptions })),
+        React.createElement(FollowerAuthenticationPrivacyPolicy, null),
+        React.createElement(core.Button, { disabled: loading || !isFormValid, type: "submit" }, messages.completeProfileCtaButtonLabel)));
+};
+
+const useStyles$6 = core.makeStyles({
     checkboxLabel: {
         '& > a': {
             textDecoration: 'underline',
@@ -501,18 +746,7 @@ const useStyles$6 = core.makeStyles((theme) => ({
         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) {
@@ -530,13 +764,6 @@ function LocationAndBirthday({ checkFieldValidity, classes, loading, locationOpt
         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) => {
-    if (!phone)
-        return false;
-    return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
-};
 const FollowerAuthenticationForm = () => {
     const { state, messages, locationOptions, onActionButtonClick, loading, showV2, showSubscribeEmail, showSubscribeSms, } = useFollowerAuthenticationDialogContext();
     const classes = useStyles$6();
@@ -623,6 +850,7 @@ const FollowerAuthenticationForm = () => {
         onActionButtonClick('submit-form', values);
     };
     const formProps = {
+        key: state.value,
         id: 'follower-authentication-form',
         className: classes.form,
         onSubmit: handleSubmit,
@@ -630,17 +858,17 @@ const FollowerAuthenticationForm = () => {
     switch (state.value) {
         case 'initial':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.initialInputLabel, id: "identifier-input", name: "identifier" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
         case 'signUp':
             return (React.createElement("form", { ref: formRef, ...formProps, onInvalid: (e) => {
                     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: {
+                React.createElement(core.TextField, { disabled: loading, label: messages.signUpPhoneInputLabel, id: "phone-input", name: "phone", onChange: checkFieldValidity, error: showPhoneErrorText, helperText: showPhoneErrorText && messages.signUpPhoneErrorText, inputProps: {
                         required: showV2 || !signUpEmailValue,
                     }, defaultValue: state.context.phone }),
-                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: {
+                React.createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, 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, id: "email-input", name: "email", error: showEmailErrorText, helperText: showEmailErrorText && messages.signUpEmailErrorText, onChange: checkFieldValidity, inputProps: {
                         required: showV2 || !signUpPhoneValue,
                         type: 'email',
                     }, defaultValue: state.context.email }),
@@ -648,58 +876,53 @@ const FollowerAuthenticationForm = () => {
                 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(FollowerAuthenticationPrivacyPolicy, null),
                 React.createElement(core.Button, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
         case 'emailFound':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, id: "email-input", name: "email", value: state.context.email }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
         case 'emailAuthCode':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.emailAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.emailAuthCodeInputLabel, id: "code-input", name: "code" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'emailMagicLinkSent':
             return (React.createElement(core.Button, { disabled: loading, onClick: () => {
                     onActionButtonClick('close');
                 } }, messages.emailMagicLinkSentCtaButtonLabel));
         case 'indirectUserFound': {
-            if (state.context.email) {
-                return (React.createElement("form", { ...formProps },
-                    React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
-                    React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
-            }
-            else if (state.context.phone) {
-                return (React.createElement("form", { ...formProps },
-                    React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
-                    React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
-            }
-            else
+            const isEmail = Boolean(state.context.email);
+            const isPhone = Boolean(state.context.phone);
+            if (!isEmail && !isPhone)
                 return null;
+            return (React.createElement("form", { ...formProps },
+                React.createElement(core.TextField, { disabled: loading, label: isEmail ? messages.emailFoundInputLabel : messages.phoneFoundInputLabel, id: isEmail ? 'email-input' : 'phone-input', name: isEmail ? 'email' : 'phone', value: isEmail ? state.context.email : state.context.phone }),
+                React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
         }
         case 'emailPasswordSignIn':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
-                React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phoneFound':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, id: "phone-input", name: "phone", value: state.context.phone }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
         case 'phoneAuthCode':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.phoneAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code", autoComplete: "one-time-code" }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.phoneAuthCodeInputLabel, id: "code-input", name: "code", autoComplete: "one-time-code" }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'phonePasswordSignIn':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
-                React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, id: "password-input", name: "password", inputProps: { type: 'password' } }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
         case 'requirePhone':
             return (React.createElement("form", { ...formProps },
-                React.createElement(core.TextField, { disabled: loading, label: messages.requirePhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
+                React.createElement(core.TextField, { disabled: loading, label: messages.requirePhoneInputLabel, id: "phone-input", name: "phone", value: state.context.phone }),
                 React.createElement(core.Button, { disabled: loading, type: "submit" }, messages.requirePhoneCtaButtonLabel)));
+        case 'completeProfile':
+            return React.createElement(FollowerAuthenticationUserForm, null);
         case 'welcome':
             return null;
         default:
@@ -858,7 +1081,7 @@ const FollowerAuthenticationFooter = () => {
 
 const FollowerAuthenticationGraphic = () => {
     const { state, graphics, showV2 } = useFollowerAuthenticationDialogContext();
-    if (showV2 && state.value === 'signUp')
+    if (showV2 && (state.value === 'signUp' || state.value === 'completeProfile'))
         return null;
     const graphic = graphics[state.value];
     if (!graphic)
@@ -869,7 +1092,7 @@ const FollowerAuthenticationGraphic = () => {
 
 const FollowerAuthenticationInfo = () => {
     const { state, messages, showV2 } = useFollowerAuthenticationDialogContext();
-    if (showV2 && state.value === 'signUp')
+    if (showV2 && (state.value === 'signUp' || state.value === 'completeProfile'))
         return null;
     const info = messages[`${state.value}Info`];
     const last4Digits = state.context.phone?.slice(-4);
@@ -930,7 +1153,7 @@ const useStyles$1 = core.makeStyles((theme) => ({
 const FollowerAuthenticationVipBenefitRows = () => {
     const classes = useStyles$1();
     const { vipBenefitRows, showV2, state } = useFollowerAuthenticationDialogContext();
-    const isInitialOrSignUpState = state.value === 'initial' || state.value === 'signUp';
+    const isInitialOrSignUpState = state.value === 'initial' || state.value === 'signUp' || state.value === 'completeProfile';
     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 },