@sheerid/jslib 1.109.0 → 1.112.0

package/sheerides6.js

@@ -696,6 +696,7 @@ var StateEnum;
     StateEnum["AL"] = "AL";
     StateEnum["AR"] = "AR";
     StateEnum["AZ"] = "AZ";
+    StateEnum["AS"] = "AS";
     StateEnum["CA"] = "CA";
     StateEnum["CO"] = "CO";
     StateEnum["CT"] = "CT";
@@ -703,6 +704,7 @@ var StateEnum;
     StateEnum["DE"] = "DE";
     StateEnum["FL"] = "FL";
     StateEnum["GA"] = "GA";
+    StateEnum["GU"] = "GU";
     StateEnum["HI"] = "HI";
     StateEnum["IA"] = "IA";
     StateEnum["ID"] = "ID";
@@ -731,6 +733,7 @@ var StateEnum;
     StateEnum["OK"] = "OK";
     StateEnum["OR"] = "OR";
     StateEnum["PA"] = "PA";
+    StateEnum["PR"] = "PR";
     StateEnum["RI"] = "RI";
     StateEnum["SC"] = "SC";
     StateEnum["SD"] = "SD";
@@ -738,6 +741,7 @@ var StateEnum;
     StateEnum["TX"] = "TX";
     StateEnum["UT"] = "UT";
     StateEnum["VA"] = "VA";
+    StateEnum["VI"] = "VI";
     StateEnum["VT"] = "VT";
     StateEnum["WA"] = "WA";
     StateEnum["WI"] = "WI";
@@ -1132,6 +1136,7 @@ const iframeClassNames = {
     CLOSE_TEXT: "sid-modal__close-text",
     CLOSE_ICON: "sid-modal__close-icon",
 };
+const iframeTitle = "SheerID Verification Form";
 const iframeConstants = {
     CLASS_NAMES: iframeClassNames,
     DEFAULT_MOBILE_THRESHOLD_WIDTH: 620,
@@ -2265,6 +2270,7 @@ var enUSMessages = {
 	"defaultMessages.states.AK": "Alaska",
 	"defaultMessages.states.AL": "Alabama",
 	"defaultMessages.states.AR": "Arkansas",
+	"defaultMessages.states.AS": "American Samoa",
 	"defaultMessages.states.AZ": "Arizona",
 	"defaultMessages.states.CA": "California",
 	"defaultMessages.states.CO": "Colorado",
@@ -2273,6 +2279,7 @@ var enUSMessages = {
 	"defaultMessages.states.DE": "Delaware",
 	"defaultMessages.states.FL": "Florida",
 	"defaultMessages.states.GA": "Georgia",
+	"defaultMessages.states.GU": "Guam",
 	"defaultMessages.states.HI": "Hawaii",
 	"defaultMessages.states.IA": "Iowa",
 	"defaultMessages.states.ID": "Idaho",
@@ -2281,7 +2288,7 @@ var enUSMessages = {
 	"defaultMessages.states.KS": "Kansas",
 	"defaultMessages.states.KY": "Kentucky",
 	"defaultMessages.states.LA": "Louisiana",
-	"defaultMessages.states.MA": "Massachusettes",
+	"defaultMessages.states.MA": "Massachusetts",
 	"defaultMessages.states.MD": "Maryland",
 	"defaultMessages.states.ME": "Maine",
 	"defaultMessages.states.MI": "Michigan",
@@ -2301,6 +2308,7 @@ var enUSMessages = {
 	"defaultMessages.states.OK": "Oklahoma",
 	"defaultMessages.states.OR": "Oregon",
 	"defaultMessages.states.PA": "Pennsylvania",
+	"defaultMessages.states.PR": "Puerto Rico",
 	"defaultMessages.states.RI": "Rhode Island",
 	"defaultMessages.states.SC": "South Carolina",
 	"defaultMessages.states.SD": "South Dakota",
@@ -2308,6 +2316,7 @@ var enUSMessages = {
 	"defaultMessages.states.TX": "Texas",
 	"defaultMessages.states.UT": "Utah",
 	"defaultMessages.states.VA": "Virginia",
+	"defaultMessages.states.VI": "Virgin Islands",
 	"defaultMessages.states.VT": "Vermont",
 	"defaultMessages.states.WA": "Washington",
 	"defaultMessages.states.WI": "Wisconsin",
@@ -2768,154 +2777,154 @@ const getMessagesModuleByLocale = async (locale) => {
     switch (locale) {
         case "ar":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ar" */ './es6/ar-4956061a.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ar" */ './es6/ar-3ae39586.es.js').then((m) => m.default);
             break;
         case "bg":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_bg" */ './es6/bg-d6354db2.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_bg" */ './es6/bg-6620ee13.es.js').then((m) => m.default);
             break;
         case "cs":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_cs" */ './es6/cs-1de96b4c.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_cs" */ './es6/cs-9acf0460.es.js').then((m) => m.default);
             break;
         case "da":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_da" */ './es6/da-8f1dfa43.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_da" */ './es6/da-0b0465fd.es.js').then((m) => m.default);
             break;
         case "de":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_de" */ './es6/de-1aa4e429.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_de" */ './es6/de-e370c535.es.js').then((m) => m.default);
             break;
         case "el":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_el" */ './es6/el-2d5e12dd.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_el" */ './es6/el-98e713da.es.js').then((m) => m.default);
             break;
         case "en-GB":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-20967dc5.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-4c9b2809.es.js').then((m) => m.default);
             break;
         case "en-US":
             localizedMessages = enUSMessages;
             break;
         case "es-ES":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_es-ES" */ './es6/es-ES-4bd1e82e.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_es-ES" */ './es6/es-ES-ad689109.es.js').then((m) => m.default);
             break;
         case "es":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_es" */ './es6/es-8e86100a.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_es" */ './es6/es-29447ba1.es.js').then((m) => m.default);
             break;
         case "fi":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fi" */ './es6/fi-1d11aab4.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fi" */ './es6/fi-9a9cfb4b.es.js').then((m) => m.default);
             break;
         case "fr-CA":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-5adbcd22.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fr-CA" */ './es6/fr-CA-6318fdae.es.js').then((m) => m.default);
             break;
         case "fr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_fr" */ './es6/fr-d80e65df.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_fr" */ './es6/fr-bbb1ff16.es.js').then((m) => m.default);
             break;
         case "ga":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ga" */ './es6/ga-06830697.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ga" */ './es6/ga-1ef386d0.es.js').then((m) => m.default);
             break;
         case "hr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_hr" */ './es6/hr-4684ff5d.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_hr" */ './es6/hr-3a56687e.es.js').then((m) => m.default);
             break;
         case "hu":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_hu" */ './es6/hu-7a4f3a78.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_hu" */ './es6/hu-a70ecd9a.es.js').then((m) => m.default);
             break;
         case "id":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_id" */ './es6/id-b6fe2fcd.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_id" */ './es6/id-66daacc1.es.js').then((m) => m.default);
             break;
         case "it":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_it" */ './es6/it-18fd5526.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_it" */ './es6/it-2032b91e.es.js').then((m) => m.default);
             break;
         case "iw":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_iw" */ './es6/iw-b1f73ffa.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_iw" */ './es6/iw-7c41f1f9.es.js').then((m) => m.default);
             break;
         case "ja":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ja" */ './es6/ja-05eb217d.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ja" */ './es6/ja-fb4128c9.es.js').then((m) => m.default);
             break;
         case "ko":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ko" */ './es6/ko-6026fe32.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ko" */ './es6/ko-54d59d72.es.js').then((m) => m.default);
             break;
         case "lo":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_lo" */ './es6/lo-30da01da.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_lo" */ './es6/lo-0b09b49c.es.js').then((m) => m.default);
             break;
         case "lt":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_lt" */ './es6/lt-a08f94d6.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_lt" */ './es6/lt-85367514.es.js').then((m) => m.default);
             break;
         case "ms":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ms" */ './es6/ms-4b69e218.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ms" */ './es6/ms-0decdf24.es.js').then((m) => m.default);
             break;
         case "nl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_nl" */ './es6/nl-9acf82f8.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_nl" */ './es6/nl-06109373.es.js').then((m) => m.default);
             break;
         case "no":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_no" */ './es6/no-443dff87.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_no" */ './es6/no-a26a72a5.es.js').then((m) => m.default);
             break;
         case "pl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pl" */ './es6/pl-0b4902db.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pl" */ './es6/pl-dc0c2f70.es.js').then((m) => m.default);
             break;
         case "pt-BR":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-afd2234b.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pt-BR" */ './es6/pt-BR-80d5ee2f.es.js').then((m) => m.default);
             break;
         case "pt":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_pt" */ './es6/pt-eefd6a76.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_pt" */ './es6/pt-c72dbd5e.es.js').then((m) => m.default);
             break;
         case "ru":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_ru" */ './es6/ru-55b959b7.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_ru" */ './es6/ru-18843366.es.js').then((m) => m.default);
             break;
         case "sk":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sk" */ './es6/sk-1751ddd2.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sk" */ './es6/sk-1cd8142d.es.js').then((m) => m.default);
             break;
         case "sl":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sl" */ './es6/sl-3d874685.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sl" */ './es6/sl-626bf398.es.js').then((m) => m.default);
             break;
         case "sr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sr" */ './es6/sr-9449946e.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sr" */ './es6/sr-81bca4d0.es.js').then((m) => m.default);
             break;
         case "sv":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_sv" */ './es6/sv-b3117f27.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_sv" */ './es6/sv-98cd630e.es.js').then((m) => m.default);
             break;
         case "th":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_th" */ './es6/th-1fb295d2.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_th" */ './es6/th-36130f7a.es.js').then((m) => m.default);
             break;
         case "tr":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_tr" */ './es6/tr-b7aed90b.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_tr" */ './es6/tr-b8f5e402.es.js').then((m) => m.default);
             break;
         case "zh-HK":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-8bc1767d.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_zh-HK" */ './es6/zh-HK-f2672873.es.js').then((m) => m.default);
             break;
         case "zh":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_zh" */ './es6/zh-6c863e80.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_zh" */ './es6/zh-866fc64f.es.js').then((m) => m.default);
             break;
         default:
             logger.warn(`getMessagesModuleByLocale: Unable to load messages for ${locale}, falling back to en-US`);
@@ -4184,6 +4193,7 @@ const DECIMAL_RADIX = 10;
 const ADOLESCENT_AGE = 16;
 const MIN_BIRTHYEAR = 1900;
 const MAX_BIRTHYEAR = 3000;
+const MAX_METADATA_KEYS = 50;
 const VALID_PHONE_NUMBER_REGEXPS = [
     /^\+?0*\d{10,}(x[0-9]{0,5})?$/,
     /(^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$)/,
@@ -4191,8 +4201,8 @@ const VALID_PHONE_NUMBER_REGEXPS = [
 const validateMetadata = (metadata) => {
     const metadataKeyCount = Object.keys(metadata).length;
     // TOOD: Other metadata restrictions?
-    if (metadataKeyCount > 20) {
-        logger.error("Invalid number of metadata keys (max 20)", "metadata keys");
+    if (metadataKeyCount > MAX_METADATA_KEYS) {
+        logger.error(`Invalid number of metadata keys (max ${MAX_METADATA_KEYS})`, "metadata keys");
         return false;
     }
     return true;
@@ -5021,11 +5031,12 @@ const InputText = ({ id, isErrored, className = undefined, hidePlaceholder = tru
 // DO NOT INJECT INTL. Localize your strings pass them down as props
 const InputTextComponent = InputText;
 
+const isEmptyText = (allegedNode) => !React.isValidElement(allegedNode) && allegedNode === "";
 const FieldLabel = ({ text, htmlForLabel, id, displayClasses, isRequired, children, }) => (React.createElement("label", { htmlFor: htmlForLabel },
     React.createElement("div", { id: id, className: `sid-field__label sid-l-space-btm-sm ${displayClasses}` },
         React.createElement("span", { className: "sid-field__label-name", "aria-hidden": "true" },
             text,
-            isRequired && (React.createElement("span", { "aria-hidden": "true", className: "sid-field__label--required" }, "*"))),
+            isRequired && !isEmptyText(text) && (React.createElement("span", { "aria-hidden": "true", className: "sid-field__label--required" }, "*"))),
         children && React.createElement("div", { className: "sid-field__label-explanation" }, children))));
 FieldLabel.defaultProps = {
     id: "",
@@ -9702,8 +9713,10 @@ suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef,
             onKeyDown(event);
         }
     };
+    const inputRef = React.createRef();
     return (React.createElement(Downshift, { id: inputId, onChange: onChange, itemToString: itemToString, selectedItem: value && value.value && value.label ? value : "", defaultHighlightedIndex: 0 }, ({ clearSelection, getInputProps, getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, inputValue, isOpen, openMenu, selectedItem, selectHighlightedItem, }) => (React.createElement("div", { className: `sid-input-select-list ${className}` },
         React.createElement("input", Object.assign({}, getInputProps({
+            ref: inputRef,
             onClick: () => openMenu(),
             onBlur: (event) => handleOnBlur(event, selectHighlightedItem, selectedItem),
             onKeyDown: (event) => handleOnKeyDown(event),
@@ -9712,9 +9725,9 @@ suppressPlaceholder = true, value, autoFocus, ariaLabel, isRequired, buttonRef,
             // eslint-disable-next-line
             autoFocus: autoFocus, id: inputId, className: `sid-l-full-width sid-text-input ${suppressPlaceholder ? "sid-hidden-placeholder" : ""} ${isErrored ? "sid-text-input--error" : ""}`, disabled: disabled, placeholder: placeholder, ref: (input) => setRef(fieldId, input), "aria-required": isRequired, "aria-labelledby": fieldLabelId, role: role })),
         React.createElement(InputSelectButtonComponent, { disabled: disabled, getToggleButtonProps: getToggleButtonProps, isOpen: isOpen, clearSelection: selectedItem ? clearSelection : undefined, buttonRef: buttonRef }),
-        isOpen ? (React.createElement("div", null, filterOptions(options, inputValue).length > 0 ? (React.createElement(InputSelectListComponent, { highlightedIndex: highlightedIndex, itemToString: itemToString, options: filterOptions(options, inputValue), getItemProps: getItemProps, getMenuProps: getMenuProps })) : (React.createElement("div", Object.assign({ className: "sid-input-select-list__menu" }, getMenuProps({ "aria-label": ariaLabel })),
+        React.createElement("div", Object.assign({}, getMenuProps()), isOpen ? (React.createElement("div", null, filterOptions(options, inputValue).length > 0 ? (React.createElement(InputSelectListComponent, { highlightedIndex: highlightedIndex, itemToString: itemToString, options: filterOptions(options, inputValue), getItemProps: getItemProps, getMenuProps: getMenuProps })) : (React.createElement("div", Object.assign({ className: "sid-input-select-list__menu" }, getMenuProps({ "aria-label": ariaLabel })),
             React.createElement("div", { className: "sid-input-select-list__message" },
-                React.createElement(FormattedHTMLMessage, { id: "noOptions", defaultMessage: "No Options" })))))) : null))));
+                React.createElement(FormattedHTMLMessage, { id: "noOptions", defaultMessage: "No Options" })))))) : null)))));
 };
 InputSelect.defaultProps = {
     className: undefined,
@@ -9806,7 +9819,25 @@ const ChangeLocale = ({ value, options, onChange, intl, }) => {
             } }),
         React.createElement("div", { className: "sid-l-space-btm-sm" })));
 };
-const ChangeLocaleComponent = injectIntl(ChangeLocale);
+const ChangeLocaleComponent = injectIntl(ChangeLocale);
+const ChangeLocaleV2 = ({ verificationService, intl }) => {
+    const localeChoices = getAvailableLocaleChoices(verificationService.programTheme, intl);
+    const defaultLocaleChoice = {
+        value: "en-US",
+        label: "English",
+    };
+    const updateLocale = (localeChoice) => {
+        const nextState = fn(verificationService.viewModel, (draft) => {
+            draft.localeChoice = localeChoice;
+        });
+        verificationService.updateLocale(nextState, verificationService.programTheme, verificationService.verificationResponse.segment);
+    };
+    if (localeChoices.length <= 1) {
+        return null;
+    }
+    return (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: verificationService.viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) }));
+};
+const ChangeLocaleV2Component = injectIntl(ChangeLocaleV2);
 
 const LoadingSpinnerComponent = () => (React.createElement("div", { className: "sid-spinner" },
     React.createElement("div", { className: "sid-spinner__frame" }),
@@ -10983,9 +11014,13 @@ const getRedirectUrlOverride = () => {
 const getErrorStepMockResponseOverrides = (mockResponse) => {
     const mockResponseClone = deepClone(mockResponse);
     const errorMock = getErrorIdOverride();
+    const redirectUrlMock = getRedirectUrlOverride();
     if (errorMock) {
         mockResponseClone.errorIds = [errorMock];
     }
+    if (redirectUrlMock) {
+        mockResponseClone.redirectUrl = redirectUrlMock;
+    }
     return mockResponseClone;
 };
 const getSuccessStepMockResponseOverrides = (mockResponse) => {
@@ -14619,6 +14654,7 @@ const verificationServiceReducer = (state = getInitialState(), action) => {
         case "RESET_STATE":
             return {
                 ...deepClone(getInitialState()),
+                programId: state.programId,
             };
         case "FORCE_UPDATE":
             return deepClone(state);
@@ -14653,7 +14689,7 @@ const store$1 = getStore();
 /**
  * @description Set the viewModel for the form or reset it by passing an empty object
  */
-const setViewModel = (newViewModel, options = { partial: false }) => {
+const setViewModel = (newViewModel, options = { partial: true }) => {
     const state = store$1.getState();
     const doSet = () => {
         const updatedViewModel = deepClone(newViewModel);
@@ -17812,9 +17848,12 @@ var rtlDetect_1 = {
 rtlDetect_1.isRtlLang;
 rtlDetect_1.getLangDir;
 
-const OptInInput = ({ id = "new", isErrored, onChange, value }) => (React.createElement("div", { className: "sid-checkbox" },
-    React.createElement("input", { className: "sid-checkbox__input", id: `sid-opt-in__${id}`, name: "sid-opt-in", type: "checkbox", checked: value, ref: (ref) => setRef("optIn", ref), onChange: (e) => onChange(e.target.checked) }),
-    React.createElement("span", { className: `sid-checkbox__input-like ${isErrored ? "sid-checkbox__input-like--error" : ""}` })));
+const OptInInput = ({ id = "new", isErrored, onChange, value, ariaLabelledby, }) => {
+    const a = ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : {};
+    return (React.createElement("div", { className: "sid-checkbox" },
+        React.createElement("input", { className: "sid-checkbox__input", id: `sid-opt-in__${id}`, name: "sid-opt-in", type: "checkbox", checked: value, ref: (ref) => setRef("optIn", ref), onChange: (e) => onChange(e.target.checked), "aria-hidden": true }),
+        React.createElement("span", Object.assign({}, a, { className: `sid-checkbox__input-like ${isErrored ? "sid-checkbox__input-like--error" : ""}`, onClick: onChange, onKeyUp: onChange, role: "checkbox", "aria-checked": value, tabIndex: 0, "data-testid": "stylable-checkbox-input" }))));
+};
 const OptInInputComponent = OptInInput;
 
 const OptInComponent = ({ isErrored, isRequired, onChange, value, verificationService, }) => {
@@ -17976,7 +18015,7 @@ var debounce_1 = debounce;
 var debounce_2 = debounce_1.debounce;
 
 const ROW_HEIGHT = 42;
-const MAX_ITEMS = 25;
+const MAX_ITEMS = 26;
 const OrganizationList = ({ getItemProps, highlightedIndex, organizations, itemToString, children, maxItemsToDisplay = MAX_ITEMS, }) => {
     const fullHeight = organizations.length * ROW_HEIGHT;
     const item = (organization, index) => (React.createElement("div", Object.assign({ className: `sid-organization-list__item ${highlightedIndex === index ? "sid-organization-list__item--highlighted" : ""}`, key: index }, getItemProps({
@@ -17984,10 +18023,11 @@ const OrganizationList = ({ getItemProps, highlightedIndex, organizations, itemT
         item: organization,
     })), itemToString(organization)));
     return (React.createElement("div", { className: "sid-organization-list__menu", tabIndex: -1 },
-        React.createElement("div", { style: { height: Math.min(fullHeight, 280) } }, organizations
-            .filter((_, index) => index <= maxItemsToDisplay - 1)
-            .map((organization, index) => item(organization, index))),
-        children));
+        React.createElement("div", { style: { height: Math.min(fullHeight, 280) } },
+            organizations
+                .filter((_, index) => index <= maxItemsToDisplay - 1)
+                .map((organization, index) => item(organization, index)),
+            children)));
 };
 const OrganizationListComponent = OrganizationList;
 
@@ -18068,7 +18108,7 @@ class FetchOrganizations extends React.Component {
             return (React.createElement(OrganizationListComponent, { getItemProps: getItemProps, getMenuProps: getMenuProps, highlightedIndex: highlightedIndex, itemToString: itemToString, organizations: organizations }, searchValue &&
                 !openOrgSearchEnabled &&
                 urlAddSchoolForm &&
-                (!organizations || organizations.length <= 5) && (React.createElement(AddSchoolRequestRow, { urlAddSchoolForm: urlAddSchoolForm, programId: programId, locale: locale }))));
+                (!organizations || organizations.length < 26) && (React.createElement(AddSchoolRequestRow, { urlAddSchoolForm: urlAddSchoolForm, programId: programId, locale: locale }))));
         }
         if (searchValue &&
             !openOrgSearchEnabled &&
@@ -18367,7 +18407,7 @@ const FormFooterComponent = ({ verificationService, children }) => {
         }
         const privacyPolicyText = privacyPolicyRef.current.innerHTML.replace(cleanupCommonTags, "");
         const updatedViewModel = { metadata: { submissionOptIn: privacyPolicyText } };
-        setViewModel(updatedViewModel, { partial: true });
+        setViewModel(updatedViewModel);
     }, [privacyPolicyRef, locale]);
     return (React.createElement("div", { className: "sid-footer sid-h-small-text sid-l-space-top-md" },
         !children && (React.createElement("div", { className: "sid-footer__shield" },
@@ -18478,14 +18518,20 @@ const HowDoesVerifyingWorkComponent = ({ verificationService, initialVisibility
                 React.createElement(FaqLinkComponent, { verificationService: verificationService })))) : null));
 };
 
-const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, viewModelDraftDecorator, }) => {
+const BaseCountryComponentWrapper = ({ verificationService, viewModelDraftDecorator = undefined, intl, viewModel = undefined, nextFocusField = undefined, }) => {
+    if (viewModel) {
+        logger.warn("viewModel prop is deprecated, use verificationService.viewModel instead");
+    }
+    if (nextFocusField) {
+        logger.warn("nextFocusField prop is deprecated");
+    }
     const countryChoices = getAvailableCountryChoices(verificationService.programTheme, intl);
     const defaultCountryChoice = getDefaultCountryChoice(countryChoices);
     const { fieldValidationErrors } = verificationService;
     const hasMultipleCountries = countryChoices.length > 1;
     const [firstRender, setFirstRender] = React.useState(true);
     const updateCountryChoice = (countryChoice) => {
-        const nextState = fn(viewModel, (draft) => {
+        const nextState = fn(verificationService.viewModel, (draft) => {
             draft.countryChoice = countryChoice || undefined;
             // Adds backwards compatibility with Age and Employment programs
             draft.country = countryChoice ? countryChoice.value : undefined;
@@ -18498,8 +18544,8 @@ const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, vie
     React.useEffect(() => {
         if (firstRender) {
             setFirstRender(false);
-            const countryChoice = viewModel.countryChoice
-                ? viewModel.countryChoice
+            const countryChoice = verificationService.viewModel.countryChoice
+                ? verificationService.viewModel.countryChoice
                 : defaultCountryChoice;
             updateCountryChoice(countryChoice);
         }
@@ -18507,27 +18553,28 @@ const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, vie
     React.useEffect(() => {
         const includesUS = countryChoices.some((choice) => choice.value === "US");
         if (!hasMultipleCountries && !includesUS) {
-            const fieldsToSkip = viewModel.fieldsToSkipValidation
-                ? [...viewModel.fieldsToSkipValidation, "country"]
+            const fieldsToSkip = verificationService.viewModel.fieldsToSkipValidation
+                ? [...verificationService.viewModel.fieldsToSkipValidation, "country"]
                 : ["country", "address1", "postalCode", "state", "city"];
-            verificationService.updateViewModel(produceDraftViewModel(viewModel, "fieldsToSkipValidation", fieldsToSkip));
+            verificationService.updateViewModel(produceDraftViewModel(verificationService.viewModel, "fieldsToSkipValidation", fieldsToSkip));
         }
     }, [hasMultipleCountries]);
     React.useEffect(() => {
         const updatedFieldValidationErrors = fn(verificationService.fieldValidationErrors, (draft) => {
             if (draft.country) {
-                draft.country = validateFieldById("country", viewModel.countryChoice, verificationService.formValidationOptions);
+                draft.country = validateFieldById("country", verificationService.viewModel.countryChoice, verificationService.formValidationOptions);
             }
-            if ("postalCode" in viewModel && viewModel.postalCode) {
-                draft.postalCode = validateFieldById("postalCode", viewModel.postalCode, verificationService.formValidationOptions);
+            if ("postalCode" in verificationService.viewModel &&
+                verificationService.viewModel.postalCode) {
+                draft.postalCode = validateFieldById("postalCode", verificationService.viewModel.postalCode, verificationService.formValidationOptions);
             }
         });
         updateFieldValidationErrors(updatedFieldValidationErrors, verificationService);
-    }, [viewModel.countryChoice]);
+    }, [verificationService.viewModel.countryChoice]);
     if (!hasMultipleCountries) {
         return null;
     }
-    return (React.createElement(CountryComponent, { isRequired: true, options: countryChoices, value: viewModel.countryChoice, isErrored: Boolean(fieldValidationErrors.country), onChange: async (countryChoice) => {
+    return (React.createElement(CountryComponent, { isRequired: true, options: countryChoices, value: verificationService.viewModel.countryChoice, isErrored: Boolean(fieldValidationErrors.country), onChange: async (countryChoice) => {
             const countryValue = countryChoice ? countryChoice.value : undefined;
             updateCountryChoice(countryChoice);
             updateFieldValidationErrorsByFieldId("country", countryValue, verificationService);
@@ -18546,13 +18593,25 @@ const RewardsRemainingComponent = ({ verificationService, }) => {
     return null;
 };
 
+const FormFieldCheckbox = ({ fieldId, value, onChange, label, errorMessage, }) => {
+    const labelIntlId = `${fieldId}Label`;
+    const labelHtmlId = `sid-${dashed(labelIntlId)}`;
+    const setOppositeValue = () => onChange(!value);
+    return (React.createElement("div", { className: `sid-field sid-${dashed(fieldId)}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement("div", { className: "sid-checkbox-flex" },
+            React.createElement(OptInInputComponent, { id: dashed(fieldId), isErrored: !!errorMessage, value: value, onChange: setOppositeValue, ariaLabelledby: labelHtmlId }),
+            React.createElement("div", { className: "sid-checkbox__label", onClick: setOppositeValue, onKeyPress: setOppositeValue, role: "button", tabIndex: 0, id: labelHtmlId }, label)),
+        errorMessage && React.createElement("div", { className: "sid-field-error" }, errorMessage)));
+};
+
 /**
  * Custom form field component.
  * Implementors can render a form field passing in config using setOptions, rather than
  * having to create an entire React project and override component(s).
  */
 const FormFieldCustom = injectIntl(({ config, verificationService, intl }) => {
-    const currentValue = getSafe(() => verificationService.viewModel.metadata[config.fieldId]) || "";
+    const currentValue = getSafe(() => verificationService.viewModel.metadata[config.fieldId]);
     const errorId = getSafe(() => verificationService.fieldValidationErrors[config.fieldId]);
     const onChange = (value) => {
         verificationService.updateViewModel(fn(verificationService.viewModel, (draft) => {
@@ -18567,23 +18626,39 @@ const FormFieldCustom = injectIntl(({ config, verificationService, intl }) => {
             // Don't set error. Only do that when submit is clicked, same as jslib's built-in fields
         }));
     };
-    return (React.createElement(FormFieldText, { fieldId: config.fieldId, value: `${currentValue}`, onChange: onChange, placeholder: intl.formatHTMLMessage({
-            id: `${config.fieldId}Placeholder`,
-            defaultMessage: config.fieldId,
-        }), label: React.createElement(FormattedHTMLMessage, { id: `${config.fieldId}Label`, defaultMessage: config.fieldId }), errorMessage: errorId && (React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: `Invalid ${config.fieldId}` })), showPlaceholderAndHideLabel: config.showPlaceholderAndHideLabel, required: config.required }));
+    switch (config.fieldType) {
+        case "text":
+            return (React.createElement(FormFieldText, { fieldId: config.fieldId, value: `${currentValue || ""}`, onChange: onChange, placeholder: intl.formatHTMLMessage({
+                    id: `${config.fieldId}Placeholder`,
+                    defaultMessage: config.fieldId,
+                }), label: React.createElement(FormattedHTMLMessage, { id: `${config.fieldId}Label`, defaultMessage: config.fieldId }), errorMessage: errorId && (React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: `Invalid ${config.fieldId}` })), showPlaceholderAndHideLabel: config.showPlaceholderAndHideLabel, required: config.required }));
+        case "checkbox":
+            return (React.createElement(FormFieldCheckbox, { fieldId: config.fieldId, value: typeof currentValue === "boolean" ? currentValue : false, onChange: onChange, label: React.createElement(FormattedHTMLMessage, { id: `${config.fieldId}Label`, defaultMessage: config.fieldId }), errorMessage: errorId && (React.createElement(FormattedHTMLMessage, { id: `errorId.${errorId}`, defaultMessage: `Invalid ${config.fieldId}` })) }));
+        default:
+            logger.warn(`Unknown field type: ${config.fieldType}`);
+            return null;
+    }
 });
 
+/**
+ * Extra message component
+ *
+ * Easily register extra messages to specific spots in the form using this component
+ *
+ * These new regions do NOT have a message by default, but messages can be added simply by specifying the messageId + value
+ * either in my.sheerid.com or via setOptions(). No need to override a component just to add a message as long as the ExtraMessage
+ * appears in a desirable spot.
+ */
+const ExtraMessage = ({ verificationService, suffix }) => verificationService.messages[`extraMessage${suffix}`] ? (React.createElement("div", { className: `sid-extra-message sid-extra-message-${suffix}` },
+    React.createElement("div", { className: "sid-l-space-top-md" }),
+    React.createElement(FormattedHTMLMessage, { id: `extraMessage${suffix}`, defaultMessage: " " }))) : null;
+
 /**
  * TODO - preamble
  */
-const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
+const StepStudentPersonalInfo = ({ verificationService, }) => {
     const viewModel = verificationService.viewModel;
     const { fieldValidationErrors } = verificationService;
-    const localeChoices = getAvailableLocaleChoices(verificationService.programTheme, intl);
-    const defaultLocaleChoice = {
-        value: "en-US",
-        label: "English",
-    };
     const verificationResponse = verificationService.verificationResponse;
     const failedInstantMatch = hasFailedInstantMatch(verificationResponse);
     const updateStudentViewModel = (key, value) => {
@@ -18592,12 +18667,6 @@ const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
         });
         verificationService.updateViewModel(nextState);
     };
-    const updateLocale = (localeChoice) => {
-        const nextState = fn(viewModel, (draft) => {
-            draft.localeChoice = localeChoice;
-        });
-        verificationService.updateLocale(nextState, verificationService.programTheme, verificationService.verificationResponse.segment);
-    };
     return (React.createElement("div", { id: "sid-step-student-personal-info", className: "sid-l-container" },
         failedInstantMatch ? (React.createElement("div", { className: "sid-header" },
             React.createElement("div", { className: "sid-l-horz-center" },
@@ -18615,8 +18684,8 @@ const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        localeChoices.length > 1 ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) })) : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(CollegeNameComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, isRequired: true, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId("organization", choice, verificationService);
@@ -18651,6 +18720,7 @@ const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-wrapper__collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectStudentPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -18659,7 +18729,7 @@ const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
                     React.createElement("span", { id: "verify-status-text" }, failedInstantMatch ? (React.createElement(FormattedHTMLMessage, { id: "tryAgain", defaultMessage: "Try Again" })) : (React.createElement(FormattedHTMLMessage, { id: "verifyMyStudentStatus", defaultMessage: "Verify My Student Status" })))))),
         React.createElement(FormFooterComponent, { verificationService: verificationService })));
 };
-const StepStudentPersonalInfoComponent = injectIntl(StepStudentPersonalInfo);
+const StepStudentPersonalInfoComponent = StepStudentPersonalInfo;
 
 const PostalCodeInput = ({ onChange, value, isValid, intl, placeholder = "", ariaLabelledBy, }) => (React.createElement(InputTextComponent, { id: "postal-code", isErrored: !isValid, onChange: (e) => onChange(e.target.value), pattern: "[a-zA-Z0-9 ]*", placeholder: placeholder ||
         intl.formatHTMLMessage({ id: "postalCodePlaceholder", defaultMessage: "Postal Code" }), refId: "postalCode", value: value, required: true, "aria-labelledby": ariaLabelledBy }));
@@ -18689,7 +18759,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
         });
         verificationService.updateViewModel(nextState);
     };
-    return (React.createElement("div", { id: "sid-step-student-personal-info", className: "sid-l-container" },
+    return (React.createElement("div", { id: "sid-step-senior-personal-info", className: "sid-l-container" },
         failedInstantMatch ? (React.createElement("div", { className: "sid-header" },
             React.createElement("div", { className: "sid-l-horz-center" },
                 React.createElement(LogoComponent, { verificationService: verificationService })),
@@ -18706,6 +18776,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
         React.createElement("div", { className: "sid-names" },
             React.createElement(FirstNameComponent, { value: viewModel.firstName, isErrored: !!fieldValidationErrors.firstName, onChange: (newValue) => {
                     updateSeniorViewModel("firstName", newValue);
@@ -18740,6 +18811,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectSeniorPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -18854,7 +18926,8 @@ const StepAgePersonalInfo = ({ verificationService, intl }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, viewModelDraftDecorator: (draft, countryChoice) => {
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModelDraftDecorator: (draft, countryChoice) => {
                 const viewModelDraft = draft;
                 const country = countryChoice ? countryChoice.value : undefined;
                 if (!displayPhoneNumber(country, smsLoopEnabled)) {
@@ -18902,6 +18975,7 @@ const StepAgePersonalInfo = ({ verificationService, intl }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectAgePersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -18936,32 +19010,17 @@ const TeacherSchool = ({ value, isErrored, onChange, verificationService, intl,
 };
 const TeacherSchoolComponent = injectIntl(TeacherSchool);
 
-/**
- * Step Teacher Personal Info Component
- * TODO - We need to import more from es6
- */
-const StepTeacherPersonalInfo = ({ intl, verificationService, }) => {
+const StepTeacherPersonalInfo = ({ verificationService, }) => {
     const viewModel = verificationService.viewModel;
     const { fieldValidationErrors } = verificationService;
     const verificationResponse = verificationService.verificationResponse;
     const failedInstantMatch = hasFailedInstantMatch(verificationResponse);
-    const localeChoices = getAvailableLocaleChoices(verificationService.programTheme, intl);
-    const defaultLocaleChoice = {
-        value: "en-US",
-        label: "English",
-    };
     const updateTeacherViewModel = (key, value) => {
         const nextState = fn(viewModel, (draft) => {
             draft[key] = value;
         });
         verificationService.updateViewModel(nextState);
     };
-    const updateLocale = (localeChoice) => {
-        const nextState = fn(viewModel, (draft) => {
-            draft.localeChoice = localeChoice;
-        });
-        verificationService.updateLocale(nextState, verificationService.programTheme, verificationService.verificationResponse.segment);
-    };
     // Don't validate DOB if ID Check is not enabled
     useEffect(() => {
         if (!verificationService.programTheme.idCheckAddOnEnabled) {
@@ -18989,8 +19048,8 @@ const StepTeacherPersonalInfo = ({ intl, verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        localeChoices.length > 1 ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) })) : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(TeacherSchoolComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId("organization", choice, verificationService);
@@ -19029,6 +19088,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectTeacherPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19037,7 +19097,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService, }) => {
                     React.createElement("span", { id: "verify-status-text" }, failedInstantMatch ? (React.createElement(FormattedHTMLMessage, { id: "tryAgain", defaultMessage: "Try Again" })) : (React.createElement(FormattedHTMLMessage, { id: "verifyMyTeacherStatus", defaultMessage: "Verify My Teacher Status" })))))),
         React.createElement(FormFooterComponent, { verificationService: verificationService })));
 };
-const StepTeacherPersonalInfoComponent = injectIntl(StepTeacherPersonalInfo);
+const StepTeacherPersonalInfoComponent = StepTeacherPersonalInfo;
 
 const MemberId = ({ value, isErrored, onChange, explanation, intl, placeholder = "", isRequired = false, label, }) => {
     const getDefaultExplanation = () => !isRequired ? React.createElement(FormattedHTMLMessage, { id: "optional", defaultMessage: "Optional" }) : "";
@@ -19066,31 +19126,17 @@ const MembershipOrganization = ({ value, isErrored, onChange, verificationServic
 };
 const MembershipOrganizationComponent = injectIntl(MembershipOrganization);
 
-/**
- * Step Member Personal Info Component
- */
-const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
+const StepMemberPersonalInfo = ({ verificationService }) => {
     const viewModel = verificationService.viewModel;
     const { fieldValidationErrors } = verificationService;
     const verificationResponse = verificationService.verificationResponse;
     const failedInstantMatch = hasFailedInstantMatch(verificationResponse);
-    const localeChoices = getAvailableLocaleChoices(verificationService.programTheme, intl);
-    const defaultLocaleChoice = {
-        value: "en-US",
-        label: "English",
-    };
     const updateMemberViewModel = (key, value) => {
         const nextState = fn(viewModel, (draft) => {
             draft[key] = value;
         });
         verificationService.updateViewModel(nextState);
     };
-    const updateLocale = (localeChoice) => {
-        const nextState = fn(viewModel, (draft) => {
-            draft.localeChoice = localeChoice;
-        });
-        verificationService.updateLocale(nextState, verificationService.programTheme, verificationService.verificationResponse.segment);
-    };
     return (React.createElement("div", { id: "sid-step-member-personal-info", className: "sid-l-container" },
         failedInstantMatch ? (React.createElement("div", { className: "sid-header" },
             React.createElement("div", { className: "sid-l-horz-center" },
@@ -19108,8 +19154,8 @@ const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        localeChoices.length > 1 ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) })) : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(MembershipOrganizationComponent, { value: verificationService.viewModel.organization, verificationService: verificationService, isErrored: !!fieldValidationErrors.organization, onChange: (choice) => {
                 updateViewModelOrganization(choice, verificationService);
                 updateFieldValidationErrorsByFieldId("organization", choice, verificationService);
@@ -19148,6 +19194,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectMemberPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19156,7 +19203,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
                     React.createElement("span", { id: "verify-status-text" }, failedInstantMatch ? (React.createElement(FormattedHTMLMessage, { id: "tryAgain", defaultMessage: "Try Again" })) : (React.createElement(FormattedHTMLMessage, { id: "verifyMyMembershipStatus", defaultMessage: "Verify My Membership Status" })))))),
         React.createElement(FormFooterComponent, { verificationService: verificationService })));
 };
-const StepMemberPersonalInfoComponent = injectIntl(StepMemberPersonalInfo);
+const StepMemberPersonalInfoComponent = StepMemberPersonalInfo;
 
 const compareLabel = (a, b) => {
     let sortValue;
@@ -19299,7 +19346,8 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         availableStatuses ? (React.createElement(MilitaryStatusComponent, { value: {
                 value: viewModel.status,
                 label: getStatusLabel(intl, viewModel.status, MilitaryStatusDefaultMessagesEnum),
@@ -19348,6 +19396,7 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectActiveMilitaryPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19508,7 +19557,8 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         availableStatuses ? (React.createElement(MilitaryStatusComponent, { value: {
                 value: viewModel.status,
                 label: getStatusLabel(intl, viewModel.status, MilitaryStatusDefaultMessagesEnum),
@@ -19559,6 +19609,7 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectInactiveMilitaryPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19646,7 +19697,8 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService, }) => {
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(FirstResponderStatusComponent, { value: {
                 value: viewModel.status,
                 label: getStatusLabel(intl, viewModel.status, FirstResponderStatusDefaultMessagesEnum),
@@ -19692,6 +19744,7 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectFirstResponderPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19800,7 +19853,8 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService, }) =>
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(MedicalStatusComponent, { value: {
                 value: viewModel.status,
                 label: getStatusLabel(intl, viewModel.status, MedicalProfessionalStatusDefaultMessagesEnum),
@@ -19850,6 +19904,7 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService, }) =>
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectMedicalProfessionalPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19860,13 +19915,33 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService, }) =>
 };
 const StepMedicalProfessionalPersonalInfoComponent = injectIntl(StepMedicalProfessionalPersonalInfo);
 
-const State = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-state" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State" }), htmlForLabel: "sid-state", id: "sid-state-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-    React.createElement(InputTextComponent, { id: "state", isErrored: isErrored, onChange: (e) => onChange(e.target.value), onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatHTMLMessage({ id: "statePlaceholder", defaultMessage: "State" }), value: value, "aria-labelledby": "sid-state-label" }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
-const StateComponent = injectIntl(State);
+const StateSelect = ({ value, isErrored, options, onChange, intl, placeholder = "", label = "", isRequired = false, }) => {
+    const stateFieldId = "sid-state";
+    const handleOnKeyDown = (event) => {
+        if (event.key === "Tab" && !event.shiftKey) {
+            event.preventDefault();
+            setFocus("inputSelectButtonState");
+        }
+    };
+    return (React.createElement("div", { className: `sid-field ${stateFieldId}__select` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: label || React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State where you live" }), htmlForLabel: stateFieldId, id: `${stateFieldId}-label`, displayClasses: placeholder && "sid-h-screen-reader-only", isRequired: isRequired }),
+        React.createElement(InputSelectComponent, { fieldId: "state", inputId: stateFieldId, fieldLabelId: `${stateFieldId}-label`, isErrored: isErrored, options: options, onChange: (state) => onChange(state), onKeyDown: (event) => handleOnKeyDown(event), placeholder: intl.formatHTMLMessage({
+                id: "statePlaceholder",
+                defaultMessage: "State",
+            }), value: value
+                ? {
+                    value,
+                    label: intl.formatHTMLMessage({
+                        id: `states.${value}`,
+                        defaultMessage: value.label || value,
+                    }),
+                }
+                : undefined, suppressPlaceholder: false, isRequired: isRequired, buttonRef: "inputSelectButtonState" }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
+};
+const StateSelectComponent = injectIntl(StateSelect);
 
 const Company = ({ onChange, value, isErrored, verificationService, intl, placeholder = "", }) => {
     const { programId } = verificationService;
@@ -19883,7 +19958,7 @@ const CompanyComponent = injectIntl(Company);
 /**
  * TODO - preamble
  */
-const StepEmploymentPersonalInfo = ({ verificationService, }) => {
+const StepEmploymentPersonalInfo = ({ intl, verificationService, }) => {
     const viewModel = verificationService.viewModel;
     const { fieldValidationErrors } = verificationService;
     const updateEmploymentViewModel = (key, value) => {
@@ -19903,7 +19978,8 @@ const StepEmploymentPersonalInfo = ({ verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService }))),
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel, viewModelDraftDecorator: (draft, countryChoice) => {
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModelDraftDecorator: (draft, countryChoice) => {
                 const viewModel = draft;
                 viewModel.shouldCollectAddress = shouldCollectAddressFields(countryChoice, verificationService.programTheme.config.countries);
                 if (!viewModel.shouldCollectAddress) {
@@ -19939,10 +20015,11 @@ const StepEmploymentPersonalInfo = ({ verificationService, }) => {
                     updateEmploymentViewModel("city", newValue);
                     updateFieldValidationErrorsByFieldId("city", newValue, verificationService);
                 }, value: viewModel.city, isRequired: true }),
-            React.createElement(StateComponent, { isErrored: !!fieldValidationErrors.state, errorId: fieldValidationErrors.state, onChange: (newValue) => {
-                    updateEmploymentViewModel("state", newValue);
-                    updateFieldValidationErrorsByFieldId("state", newValue, verificationService);
-                }, value: viewModel.state }),
+            React.createElement(StateSelectComponent, { isRequired: true, options: getAvailableStateChoices(verificationService.programTheme, intl), value: viewModel.state || undefined, isErrored: Boolean(fieldValidationErrors.state), onChange: async (stateChoice) => {
+                    const stateValue = stateChoice ? stateChoice.value : undefined;
+                    updateEmploymentViewModel("state", stateValue);
+                    updateFieldValidationErrorsByFieldId("state", stateValue, verificationService);
+                }, label: React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State" }) }),
             React.createElement(PostalCodeComponent, { isErrored: !!fieldValidationErrors.postalCode, onChange: (newValue) => {
                     updateEmploymentViewModel("postalCode", newValue);
                     updateFieldValidationErrorsByFieldId("postalCode", newValue, verificationService);
@@ -19964,6 +20041,7 @@ const StepEmploymentPersonalInfo = ({ verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-wrapper__collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectEmployeePersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -19991,29 +20069,6 @@ const DriverLicenseNumber = ({ value, isErrored, onChange, explanation, intl, pl
 };
 const DriverLicenseNumberComponent = injectIntl(DriverLicenseNumber);
 
-const StateSelect = ({ value, isErrored, options, onChange, onKeyDown, intl, placeholder = "", label = "", isRequired = false, }) => {
-    const inputId = "sid-state";
-    return (React.createElement("div", { className: `sid-field ${inputId}` },
-        React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement(FieldLabel, { text: label || React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State where you live" }), htmlForLabel: inputId, id: `${inputId}-label`, displayClasses: placeholder && "sid-h-screen-reader-only", isRequired: isRequired }),
-        React.createElement(InputSelectComponent, { fieldId: "state", inputId: inputId, fieldLabelId: `${inputId}-label`, isErrored: isErrored, options: options, onChange: (state) => onChange(state), onKeyDown: onKeyDown, placeholder: placeholder ||
-                intl.formatHTMLMessage({
-                    id: "statePlaceholder",
-                    defaultMessage: "State",
-                }), value: value
-                ? {
-                    value: value.value,
-                    label: intl.formatHTMLMessage({
-                        id: `states.${value.value}`,
-                        defaultMessage: value.label || value.value,
-                    }),
-                }
-                : undefined }),
-        isErrored ? (React.createElement("div", { className: "sid-field-error" },
-            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
-};
-const StateSelectComponent = injectIntl(StateSelect);
-
 /**
  * TODO - preamble
  */
@@ -20047,6 +20102,7 @@ const StepDriverLicensePersonalInfo = ({ intl, verificationService, }) => {
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
         React.createElement("div", { className: "sid-names" },
             React.createElement(FirstNameComponent, { value: viewModel.firstName, isErrored: !!fieldValidationErrors.firstName, onChange: (newValue) => {
                     updateIdentityViewModel("firstName", newValue);
@@ -20082,6 +20138,7 @@ const StepDriverLicensePersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectDriverLicensePersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -20125,6 +20182,7 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService, }) => {
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
         React.createElement("div", { className: "sid-names" },
             React.createElement(FirstNameComponent, { value: viewModel.firstName, isErrored: !!fieldValidationErrors.firstName, onChange: (newValue) => {
                     updateIdentityViewModel("firstName", newValue);
@@ -20173,6 +20231,7 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectGeneralIdentityPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -20216,6 +20275,7 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService, }) => {
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
         React.createElement("div", { className: "sid-names" },
             React.createElement(FirstNameComponent, { value: viewModel.firstName, isErrored: !!fieldValidationErrors.firstName, onChange: (newValue) => {
                     updateIdentityViewModel("firstName", newValue);
@@ -20268,6 +20328,7 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService, }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectHybridIdentityPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -20343,7 +20404,9 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) =>
         return availableStatuses;
     };
     return (React.createElement("div", { id: "sid-step-licensed-professional-personal-info", className: "sid-l-container" },
-        failedInstantMatch ? (React.createElement("p", null, "Failied instant match")) : (React.createElement("div", { className: "sid-header" },
+        failedInstantMatch ? (
+        // TODO localize this message
+        React.createElement("p", null, "Failied instant match")) : (React.createElement("div", { className: "sid-header" },
             React.createElement("div", { className: "sid-l-horz-center" },
                 React.createElement(LogoComponent, { verificationService: verificationService })),
             React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
@@ -20353,6 +20416,8 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) =>
             React.createElement("div", { className: "sid-header__how-verifying-works sid-l-horz-center" },
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(StatusComponent, { segmentId: SEGMENT_ID$1, value: {
                 value: viewModel.statuses ? viewModel.statuses[0] : "",
                 label: viewModel.statuses ? getStatusLabel(viewModel.statuses[0]) : "",
@@ -20399,6 +20464,7 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) =>
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-btn-collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectLicensedProfessionalPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -20441,6 +20507,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
                 React.createElement("br", null),
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
         React.createElement("div", { className: "sid-names" },
             React.createElement(FirstNameComponent, { value: viewModel.firstName, isErrored: !!fieldValidationErrors.firstName, onChange: (newValue) => {
                     updateMoverViewModel("firstName", newValue);
@@ -20475,6 +20542,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
                 });
                 updateFieldValidationErrorsByFieldId("marketConsentValue", newValue, verificationService);
             }, viewModel: viewModel }),
+        React.createElement(ExtraMessage, { verificationService: verificationService, suffix: "CollectAboveSubmit" }),
         React.createElement("div", { className: "sid-form-region sid-submit-wrapper sid-l-space-top-md" },
             React.createElement("div", { className: "sid-submit" },
                 React.createElement("button", { id: "sid-submit-wrapper__collect-info", onClick: () => submitForm(viewModel, verificationService, VerificationStepsEnum.collectMoverPersonalInfo), type: "submit", className: `sid-btn sid-btn--dark sid-l-full-width ${!isFormFilled(viewModel, verificationService.formValidationOptions)
@@ -20514,11 +20582,6 @@ const StepLowIncomePersonalInfo = ({ intl, verificationService, }) => {
     const { fieldValidationErrors } = verificationService;
     const verificationResponse = verificationService.verificationResponse;
     const failedInstantMatch = hasFailedInstantMatch(verificationResponse);
-    const localeChoices = getAvailableLocaleChoices(verificationService.programTheme, intl);
-    const defaultLocaleChoice = {
-        value: "en-US",
-        label: "English",
-    };
     const selectedStatus = viewModel.statuses[0] ? viewModel.statuses[0] : undefined;
     const isSelectedStatusSnapBenefits = selectedStatus === "SNAP_BENEFITS";
     const updateLowIncomeViewModel = (key, value) => {
@@ -20546,16 +20609,10 @@ const StepLowIncomePersonalInfo = ({ intl, verificationService, }) => {
         }
         return availableStatuses;
     };
-    const updateLocale = (localeChoice) => {
-        const nextState = fn(viewModel, (draft) => {
-            draft.localeChoice = localeChoice;
-        });
-        verificationService.updateLocale(nextState, verificationService.programTheme, verificationService.verificationResponse.segment);
-    };
     React.useEffect(() => {
         if (isSelectedStatusSnapBenefits) {
             const updatedViewModel = { fieldsToSkipValidation: ["organization"] };
-            setViewModel(updatedViewModel, { partial: true });
+            setViewModel(updatedViewModel);
         }
     }, [isSelectedStatusSnapBenefits]);
     return (React.createElement("div", { id: "sid-step-low-income-personal-info", className: "sid-l-container" },
@@ -20575,8 +20632,8 @@ const StepLowIncomePersonalInfo = ({ intl, verificationService, }) => {
                 "\u00A0",
                 React.createElement(HowDoesVerifyingWorkComponent, { verificationService: verificationService }),
                 React.createElement(RewardsRemainingComponent, { verificationService: verificationService })))),
-        localeChoices.length > 1 ? (React.createElement(ChangeLocaleComponent, { options: localeChoices, value: viewModel.localeChoice || defaultLocaleChoice, isErrored: false, onChange: (localeChoice) => updateLocale(localeChoice) })) : null,
-        React.createElement(CountryComponentWrapper, { verificationService: verificationService, viewModel: viewModel }),
+        React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
+        React.createElement(CountryComponentWrapper, { verificationService: verificationService }),
         React.createElement(StatusComponent, { segmentId: SEGMENT_ID, value: {
                 value: viewModel.statuses ? viewModel.statuses[0] : "",
                 label: viewModel.statuses ? getStatusLabel(viewModel.statuses[0]) : "",
@@ -20722,6 +20779,7 @@ const Step = ({ verificationService }) => {
                 React.createElement(LogoComponent, { verificationService: verificationService })),
             React.createElement("div", { className: "sid-header__title sid-l-horz-center" },
                 React.createElement(FormattedHTMLMessage, { id: "step.collectSocialSecurityNumber.title", defaultMessage: "Enter your social security number" })),
+            React.createElement(ChangeLocaleV2Component, { verificationService: verificationService }),
             React.createElement("div", { className: "sid-ssn-wrapper" },
                 React.createElement(SocialSecurityNumber, { value: viewModel.socialSecurityNumber, onChange: (value) => {
                         updateSSNViewModel("socialSecurityNumber", value);
@@ -23325,7 +23383,7 @@ class NewVerification extends React.Component {
         maintainFocusInLightbox();
         listenToInstallPage((event) => {
             if (event.data.action === "setViewModel") {
-                setViewModel(event.data.viewModel, { partial: true });
+                setViewModel(event.data.viewModel);
             }
         });
         // Special-case, mocking the loading psuedo-step
@@ -23405,6 +23463,14 @@ const VerificationForm = React.forwardRef(({ programId, trackingId = undefined }
                 React.createElement(NewVerificationComponent, { programId: programId, trackingId: trackingId })))));
 });
 
+const State = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-state" },
+    React.createElement("div", { className: "sid-l-space-top-md" }),
+    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "state", defaultMessage: "State" }), htmlForLabel: "sid-state", id: "sid-state-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
+    React.createElement(InputTextComponent, { id: "state", isErrored: isErrored, onChange: (e) => onChange(e.target.value), onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatHTMLMessage({ id: "statePlaceholder", defaultMessage: "State" }), value: value, "aria-labelledby": "sid-state-label" }),
+    isErrored ? (React.createElement("div", { className: "sid-field-error" },
+        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidState", defaultMessage: "Invalid state" }))) : null));
+const StateComponent = injectIntl(State);
+
 const PrivacyPolicyLink = ({ verificationService, includeCompanyName, intl, }) => {
     const { programTheme } = verificationService;
     const privacyPolicyHref = getPrivacyPolicyUrl(programTheme);
@@ -23460,6 +23526,7 @@ class Iframe {
         if (Iframe.isValidHttpUrl(url)) {
             const options = {
                 className: iframeConstants.CLASS_NAMES.INLINE_IFRAME_CONTENT,
+                title: iframeTitle,
             };
             this.containerElement = containerElement;
             this.verificationUrl = new URL(getVerificationUrl(url));
@@ -23486,7 +23553,7 @@ class Iframe {
     createIframe(options) {
         this.iframe = document.createElement("iframe");
         this.iframe.classList.add(options.className);
-        this.iframe.title = this.verificationUrl.href;
+        this.iframe.title = options.title;
         let mark = "?";
         if (this.verificationUrl.search) {
             mark = "&";
@@ -23611,6 +23678,7 @@ class Modal {
         this.iframeInstance = new Iframe(wrapper, this.verificationUrl);
         const options = {
             className: iframeConstants.CLASS_NAMES.MODAL_IFRAME,
+            title: iframeTitle,
         };
         this.iframeInstance.createIframe(options);
         wrapper.appendChild(this.iframeInstance.iframe);
@@ -23706,5 +23774,5 @@ const collectDeviceProfile = async (verificationId, programId) => {
     includeIPQSDeviceFingerprintScript(programTheme, verificationId);
 };
 
-export { ACCEPTED_DOC_MIME_TYPES, AcceptableUploadsComponent, AddressComponent, BirthDateComponent, BranchOfServiceComponent, ChangeLocaleComponent, CityComponent, CollegeNameComponent, CompanyComponent, CopyToClipboard, CountDownComponent, CountryComponent, CountryComponentWrapper, DEFAULT_LOCALE, DEFAULT_MINIMUM_ORG_SEARCH_VALUE_LENGTH, DEFAULT_PRIVACY_POLICY_URL, DeleteJson, DischargeDateComponent, DriverLicenseNumberComponent, EmailComponent, FaqLinkComponent, FetchOrganizationsComponent, FieldIdEnum, FieldIds, FieldLabel, FirstNameComponent, FirstResponderOrganizationComponent, FirstResponderStatusComponent, FirstResponderStatusDefaultMessagesEnum, FormFieldCustom, FormFieldLayout, FormFieldText, FormFooterComponent, GetEmptyTheme, GetJson, GetResponse, HTTP_REQUEST_TIMEOUT, HookNameEnum, HookNames, HowDoesVerifyingWorkComponent, InputSelectButtonComponent, InputSelectComponent, InputSelectListComponent, InputTextComponent, LastNameComponent, LinkExternal, LoadingSpinnerComponent, Locales, LogoComponent, LowIncomeOrganizationComponent, LowIncomeStatusDefaultMessagesEnum, MAX_DOC_UPLOAD_DOCS_ALLOWED, MarketConsentWrapperComponent as MarketConsentWrapper, MedicalProfessionalOrganizationComponent, MedicalProfessionalStatusDefaultMessagesEnum, MedicalStatusComponent, MemberIdComponent, MembershipOrganizationComponent, MilitaryStatusComponent, MilitaryStatusDefaultMessagesEnum, MockSteps, MockStepsEnum, OptInComponent, OptInInputComponent, OrganizationListComponent, OrganizationResultComponent, PhoneNumberComponent, PostFiles, PostJson, PostalCodeComponent, PostalCodeInputComponent, PoweredByComponent, PrivacyPolicyLinkComponent, QUERY_STRING_ERRORID_OVERRIDE, QUERY_STRING_INSTALL_PAGE_URL, QUERY_STRING_REDIRECT_URL_OVERRIDE, QUERY_STRING_REWARD_CODE_OVERRIDE, QUERY_STRING_SEGMENT_OVERRIDE, QUERY_STRING_STEP_OVERRIDE, QUERY_STRING_SUBSEGMENT_OVERRIDE, RequestOrganizationContext, RequestOrganizationErrorComponent, RequestOrganizationForm, RequestOrganizationFormFooterComponent, RequestOrganizationSearchComponent, RequestOrganizationSearchResultComponent, RequestOrganizationSuccessComponent, ReviewPendingComponent, RewardsRemainingComponent, SHEERID, SMSCodeComponent, SSN_STRING_LENGTH, SSOPendingComponent, SearchFieldComponent, SegmentEnum, Segments, SelectButtonComponent, SelectComponent, SelectListComponent, SocialSecurityNumber, SortByLabel, SsnChoice, StateComponent, StateEnum, StateSelectComponent, StatusComponent, StepActiveMilitaryPersonalInfoComponent, StepDriverLicensePersonalInfoComponent, StepGeneralIdentityPersonalInfoComponent, StepHybridIdentityPersonalInfoComponent, StepLowIncomePersonalInfoComponent, SubSegmentEnum, TeacherSchoolComponent, TryAgainButtonComponent, TryAgainSteps, TypeaheadComponent, UPLOAD_FILE_PREFIX, UploadInfoComponent, VerificationApiClient, VerificationForm, VerificationSteps, VerificationStepsEnum, addFiles, addHook, allMockedResponses, arrayUnique, assertValidConversionRequest, assertValidDatabaseId, assertValidFieldId, assertValidFunction, assertValidHook, assertValidHookName, assertValidHtmlElement, assertValidLocale, assertValidMockStepName, assertValidProgramId, assertValidSegmentName, assertValidTrackingId, assertValidTryAgainStep, assertValidVerificationStepName, carrierConsentValueValidator, closeTabRef, collectDeviceProfile, conversion, convertByTrackingId, convertByVerificationId, customValidatorExists$1 as customValidatorExists, deepClone, deepMerge, displaySSN, employmentPInfoReqEmpty, ensureMaxMetadataKeyValueLengths, ensureTrailingSlash, fetchExistingVerificationRequest, fetchProgramOrganizations, fetchRequestOrganizations, formatTwoDigitValues, getAddSchoolRequestUrl, getAllEmptyViewModels, getAvailableCountryChoices, getAvailableLocaleChoices, getAvailableLocales, getAvailableMilitaryStatuses, getAvailableStateChoices, getCompanyName, getConfiguredCountries, getConfiguredStates, getCustomValidator, getCustomValidatorFields, getDefaultCountryChoice, getDomainFromUrl, getEmptyViewModel, getEstAndMaxReviewTimes, getEstimatedReviewTime, getExtendedFieldValidationErrorsEmpty, getFaqLink, getFieldDisplayOrderFromRefs, getFieldValidationErrors, getFieldValidationErrorsEmpty, getFingerprint, getFirstErroredFieldId, getHook, getLocaleSafely, getLogoUrl, getMarketConsent, getMaxReviewTime, getMessages, getMetadata, getNewEmailCodeResendUrl, getNewSmsCodeResendUrl, getNewVerificationRequestUrl, getOptions, getOrgSearchCountryTags, getOverriddenMock, getOverridenValidator, getPhoneNumberValidationError, getPrivacyPolicyCompanyName, getPrivacyPolicyUrl, getProgramThemeUrl, getQueryParamsFromUrl, getRefByFieldId, getRefs, getRouteOverride, getSafe, getSheerIdScriptBasePath, getStatusLabel, getTabRef, getTrackingIdFromQueryString, getVerificationIdFromQueryString, getVerificationStatusUrl, handleCountryOnKeyDown, handleEmailOnKeyDown, handleStateChange, hasFailedInstantMatch, howDoesVerifyingWorkMessages, isFormErrored, isFormFilled, isTestEmailDomains, isValidLocale, isValidUsPostalCode, listenToSheerIdFrame, loadInModal, loadInlineIframe, logger, orgToOption, orgsInStatus, overrideComponent, overrideValidator, phoneNumberValidator, populateViewModelFromQueryParams, postVerificationSizeUpdates, postalCodeMatchers, postalCodeValidator, produceDraftViewModel, produceDraftViewModelWithRequiredFields, recordEvent, recordVerificationResponse, recordViewModelChange, refreshStore, registerAdditionalLocales, removeAllFiles, removeCustomValidator, removeFile, requestOrganizationConstants, resetCustomValidators, resetHooks, resetMetadata, resetOptions, resetOverriddenComponents, resetOverriddenValidators, resetRefs, resetStore, resetTabRef, resetViewModel, resolveTrackingId, setCustomValidator, setDimension, setFocus, setGaDimensionIsTest, setMetadata, setOptions, setRef, setTabRef, setViewModel, shouldCollectAddressFields, shouldCollectPostalCode, socialSecurityEmpty, speakToOuterFrame, submitAddSchoolRequest, submitForm, unDisplaySSN, updateFieldValidationErrors, updateFieldValidationErrorsByFieldId, updateMilitaryViewModel, updateViewModelOrganization, usePollingInterval, validateFieldById, validateMetadata };
+export { ACCEPTED_DOC_MIME_TYPES, AcceptableUploadsComponent, AddressComponent, BirthDateComponent, BranchOfServiceComponent, ChangeLocaleComponent, CityComponent, CollegeNameComponent, CompanyComponent, CopyToClipboard, CountDownComponent, CountryComponent, CountryComponentWrapper, DEFAULT_LOCALE, DEFAULT_MINIMUM_ORG_SEARCH_VALUE_LENGTH, DEFAULT_PRIVACY_POLICY_URL, DeleteJson, DischargeDateComponent, DriverLicenseNumberComponent, EmailComponent, ExtraMessage, FaqLinkComponent, FetchOrganizationsComponent, FieldIdEnum, FieldIds, FieldLabel, FirstNameComponent, FirstResponderOrganizationComponent, FirstResponderStatusComponent, FirstResponderStatusDefaultMessagesEnum, FormFieldCheckbox, FormFieldCustom, FormFieldLayout, FormFieldText, FormFooterComponent, GetEmptyTheme, GetJson, GetResponse, HTTP_REQUEST_TIMEOUT, HookNameEnum, HookNames, HowDoesVerifyingWorkComponent, InputSelectButtonComponent, InputSelectComponent, InputSelectListComponent, InputTextComponent, LastNameComponent, LinkExternal, LoadingSpinnerComponent, Locales, LogoComponent, LowIncomeOrganizationComponent, LowIncomeStatusDefaultMessagesEnum, MAX_DOC_UPLOAD_DOCS_ALLOWED, MarketConsentWrapperComponent as MarketConsentWrapper, MedicalProfessionalOrganizationComponent, MedicalProfessionalStatusDefaultMessagesEnum, MedicalStatusComponent, MemberIdComponent, MembershipOrganizationComponent, MilitaryStatusComponent, MilitaryStatusDefaultMessagesEnum, MockSteps, MockStepsEnum, OptInComponent, OptInInputComponent, OrganizationListComponent, OrganizationResultComponent, PhoneNumberComponent, PostFiles, PostJson, PostalCodeComponent, PostalCodeInputComponent, PoweredByComponent, PrivacyPolicyLinkComponent, QUERY_STRING_ERRORID_OVERRIDE, QUERY_STRING_INSTALL_PAGE_URL, QUERY_STRING_REDIRECT_URL_OVERRIDE, QUERY_STRING_REWARD_CODE_OVERRIDE, QUERY_STRING_SEGMENT_OVERRIDE, QUERY_STRING_STEP_OVERRIDE, QUERY_STRING_SUBSEGMENT_OVERRIDE, RequestOrganizationContext, RequestOrganizationErrorComponent, RequestOrganizationForm, RequestOrganizationFormFooterComponent, RequestOrganizationSearchComponent, RequestOrganizationSearchResultComponent, RequestOrganizationSuccessComponent, ReviewPendingComponent, RewardsRemainingComponent, SHEERID, SMSCodeComponent, SSN_STRING_LENGTH, SSOPendingComponent, SearchFieldComponent, SegmentEnum, Segments, SelectButtonComponent, SelectComponent, SelectListComponent, SocialSecurityNumber, SortByLabel, SsnChoice, StateComponent, StateEnum, StateSelectComponent, StatusComponent, StepActiveMilitaryPersonalInfoComponent, StepDriverLicensePersonalInfoComponent, StepGeneralIdentityPersonalInfoComponent, StepHybridIdentityPersonalInfoComponent, StepLowIncomePersonalInfoComponent, SubSegmentEnum, TeacherSchoolComponent, TryAgainButtonComponent, TryAgainSteps, TypeaheadComponent, UPLOAD_FILE_PREFIX, UploadInfoComponent, VerificationApiClient, VerificationForm, VerificationSteps, VerificationStepsEnum, addFiles, addHook, allMockedResponses, arrayUnique, assertValidConversionRequest, assertValidDatabaseId, assertValidFieldId, assertValidFunction, assertValidHook, assertValidHookName, assertValidHtmlElement, assertValidLocale, assertValidMockStepName, assertValidProgramId, assertValidSegmentName, assertValidTrackingId, assertValidTryAgainStep, assertValidVerificationStepName, carrierConsentValueValidator, closeTabRef, collectDeviceProfile, conversion, convertByTrackingId, convertByVerificationId, customValidatorExists$1 as customValidatorExists, deepClone, deepMerge, displaySSN, employmentPInfoReqEmpty, ensureMaxMetadataKeyValueLengths, ensureTrailingSlash, fetchExistingVerificationRequest, fetchProgramOrganizations, fetchRequestOrganizations, formatTwoDigitValues, getAddSchoolRequestUrl, getAllEmptyViewModels, getAvailableCountryChoices, getAvailableLocaleChoices, getAvailableLocales, getAvailableMilitaryStatuses, getAvailableStateChoices, getCompanyName, getConfiguredCountries, getConfiguredStates, getCustomValidator, getCustomValidatorFields, getDefaultCountryChoice, getDomainFromUrl, getEmptyViewModel, getEstAndMaxReviewTimes, getEstimatedReviewTime, getExtendedFieldValidationErrorsEmpty, getFaqLink, getFieldDisplayOrderFromRefs, getFieldValidationErrors, getFieldValidationErrorsEmpty, getFingerprint, getFirstErroredFieldId, getHook, getLocaleSafely, getLogoUrl, getMarketConsent, getMaxReviewTime, getMessages, getMetadata, getNewEmailCodeResendUrl, getNewSmsCodeResendUrl, getNewVerificationRequestUrl, getOptions, getOrgSearchCountryTags, getOverriddenMock, getOverridenValidator, getPhoneNumberValidationError, getPrivacyPolicyCompanyName, getPrivacyPolicyUrl, getProgramThemeUrl, getQueryParamsFromUrl, getRefByFieldId, getRefs, getRouteOverride, getSafe, getSheerIdScriptBasePath, getStatusLabel, getTabRef, getTrackingIdFromQueryString, getVerificationIdFromQueryString, getVerificationStatusUrl, handleCountryOnKeyDown, handleEmailOnKeyDown, handleStateChange, hasFailedInstantMatch, howDoesVerifyingWorkMessages, isFormErrored, isFormFilled, isTestEmailDomains, isValidLocale, isValidUsPostalCode, listenToSheerIdFrame, loadInModal, loadInlineIframe, logger, orgToOption, orgsInStatus, overrideComponent, overrideValidator, phoneNumberValidator, populateViewModelFromQueryParams, postVerificationSizeUpdates, postalCodeMatchers, postalCodeValidator, produceDraftViewModel, produceDraftViewModelWithRequiredFields, recordEvent, recordVerificationResponse, recordViewModelChange, refreshStore, registerAdditionalLocales, removeAllFiles, removeCustomValidator, removeFile, requestOrganizationConstants, resetCustomValidators, resetHooks, resetMetadata, resetOptions, resetOverriddenComponents, resetOverriddenValidators, resetRefs, resetStore, resetTabRef, resetViewModel, resolveTrackingId, setCustomValidator, setDimension, setFocus, setGaDimensionIsTest, setMetadata, setOptions, setRef, setTabRef, setViewModel, shouldCollectAddressFields, shouldCollectPostalCode, socialSecurityEmpty, speakToOuterFrame, submitAddSchoolRequest, submitForm, unDisplaySSN, updateFieldValidationErrors, updateFieldValidationErrorsByFieldId, updateMilitaryViewModel, updateViewModelOrganization, usePollingInterval, validateFieldById, validateMetadata };
 //# sourceMappingURL=sheerides6.js.map