@sheerid/jslib 1.104.0 → 1.107.0

package/sheerides6.js

@@ -1190,6 +1190,7 @@ const defaultOptions = {
     httpRequestTimeout: HTTP_REQUEST_TIMEOUT,
     hideTestModeFlag: false,
     hideMilitaryFamilyAcceptableUploads: true,
+    customFormFields: [],
 };
 let options$1 = { ...defaultOptions };
 const getOptions = () => options$1;
@@ -1358,6 +1359,10 @@ const setOptions = (newOptions) => {
         options$1.hideMilitaryFamilyAcceptableUploads = newOptions.hideMilitaryFamilyAcceptableUploads;
         logger.info('option "hideMilitaryFamilyAcceptableUploads" set to', options$1.hideMilitaryFamilyAcceptableUploads);
     }
+    if (newOptions.hasOwnProperty("customFormFields")) {
+        options$1.customFormFields = newOptions.customFormFields;
+        logger.info('option "customFormFields" set to', options$1.customFormFields);
+    }
 };
 
 class ResponseTimeLogger {
@@ -2624,7 +2629,7 @@ var enUSMessages = {
 	"segmentMessages.lowIncome.step.success.subtitle": "Here is your personal coupon code. It is unique to you and can only be used once.",
 	"segmentMessages.lowIncome.step.success.title": "You've been verified",
 	"segmentMessages.medical.emailExplanation": "Use your work email if you have one",
-	"segmentMessages.medical.step.docUpload.howDoesVerifyingWorkDetails": "Document review is handled by SheerID, a trusted partner who specializes in verifying\n                    medical professionals.<br><br>Documents are used only for verifying your medical professional status is\n                    current and will be permanently deleted after review is finalized. They will not be shared with {companyName}.",
+	"segmentMessages.medical.step.docUpload.howDoesVerifyingWorkDetails": "Document review is handled by SheerID, a trusted partner who specializes in verifying\n                    medical professionals.<br><br>Documents are used only for verifying your medical professional status is\n                    current and will be permanently deleted after review is finalized. They will not be shared with {companyName}",
 	"segmentMessages.medical.step.docUpload.subtitle": "Documents will be reviewed in {estimatedWaitTime} by staff at SheerID, a trusted partner.",
 	"segmentMessages.medical.step.docUpload.title": "We need more information",
 	"segmentMessages.medical.step.docUpload.uploadInstructions": "Upload an official document that shows",
@@ -2669,7 +2674,7 @@ var enUSMessages = {
 	"segmentMessages.military.step.success.subtitle": "Here is your personal coupon code. It is unique to you and can only be used once.",
 	"segmentMessages.military.step.success.title": "You've been verified",
 	"segmentMessages.recentMover.emailExplanation": "Needed to send you your unique code",
-	"segmentMessages.recentMover.step.docUpload.howDoesVerifyingWorkDetails": "Document review is handled by SheerID, a trusted partner who specializes in verifying recent movers.\n                <br/><br/>\n                Documents are used only for verifying that you've recently moved and will will be permanently deleted after review is finalized. They will not be shared with {companyName}.",
+	"segmentMessages.recentMover.step.docUpload.howDoesVerifyingWorkDetails": "Document review is handled by SheerID, a trusted partner who specializes in verifying recent movers.\n                <br/><br/>\n                Documents are used only for verifying that you've recently moved and will will be permanently deleted after review is finalized. They will not be shared with {companyName}",
 	"segmentMessages.recentMover.step.docUpload.subtitle": "Documents will be reviewed in {estimatedWaitTime} by staff at SheerID, a trusted partner.",
 	"segmentMessages.recentMover.step.docUpload.title": "We need some more info",
 	"segmentMessages.recentMover.step.docUpload.uploadInstructions": "Upload an official document that shows",
@@ -2774,7 +2779,7 @@ const getMessagesModuleByLocale = async (locale) => {
             break;
         case "en-GB":
             localizedMessages = await import(
-            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-5eb8e845.es.js').then((m) => m.default);
+            /* webpackChunkName: "messages_en-GB" */ './es6/en-GB-52e5c64c.es.js').then((m) => m.default);
             break;
         case "en-US":
             localizedMessages = enUSMessages;
@@ -4217,6 +4222,24 @@ const getFieldValidationErrors = (viewModel, formValidationOptions) => {
             fieldValidationErrors[fieldId] = validateFieldById(fieldId, fieldValue, formValidationOptions);
         }
     }
+    const { customFormFields } = getOptions();
+    if (customFormFields) {
+        customFormFields.forEach((customField) => {
+            let errorId;
+            try {
+                errorId = customField.validate(viewModel.metadata[customField.fieldId]);
+            }
+            catch (e) {
+                logger.warn(`Error validating custom field ${customField.fieldId}`, e);
+            }
+            if (errorId) {
+                fieldValidationErrors[customField.fieldId] = errorId;
+            }
+            else {
+                delete fieldValidationErrors[customField.fieldId];
+            }
+        });
+    }
     return fieldValidationErrors;
 };
 const isFormFilled = (viewModel, formValidationOptions) => {
@@ -4959,18 +4982,7 @@ const produceDraftViewModel = (previousModel, key, value) => fn(previousModel, (
     draft[key] = value;
 });
 
-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" }, "*"))),
-        children && React.createElement("div", { className: "sid-field__label-explanation" }, children))));
-FieldLabel.defaultProps = {
-    id: "",
-    displayClasses: "",
-    isRequired: true,
-    children: null,
-};
+const dashed = (camel) => camel.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 
 const InputText = ({ id, isErrored, className = undefined, hidePlaceholder = true, refId, required = false, type = "text", ariaDescribedBy, ariaLabel, ...props // forward any remaining props to the input
  }) => {
@@ -4987,25 +4999,53 @@ const InputText = ({ id, isErrored, className = undefined, hidePlaceholder = tru
     const finalRefId = refId || id;
     return (React.createElement("input", Object.assign({ className: internalClassName, id: `sid-${id}`, name: `sid-${id}`, type: type, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-required": required, "aria-invalid": isErrored, ref: (input) => setRef(finalRefId, input) }, props)));
 };
-// TODO remove injectIntl, unused
-const InputTextComponent = injectIntl(InputText);
+// DO NOT INJECT INTL. Localize your strings pass them down as props
+const InputTextComponent = InputText;
 
-const FirstName = ({ value, isErrored, onChange, intl, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-first-name" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "firstName", defaultMessage: "First name" }), htmlForLabel: "sid-first-name", id: "sid-first-name-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-    React.createElement(InputTextComponent, { id: "first-name", isErrored: isErrored, onChange: (e) => onChange(e.target.value), placeholder: placeholder ||
-            intl.formatHTMLMessage({ id: "firstNamePlaceholder", defaultMessage: "First Name" }), refId: "firstName", value: value, required: true, "aria-labelledby": "sid-first-name-label" }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidFirstName", defaultMessage: "Invalid first name" }))) : null));
+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" }, "*"))),
+        children && React.createElement("div", { className: "sid-field__label-explanation" }, children))));
+FieldLabel.defaultProps = {
+    id: "",
+    displayClasses: "",
+    isRequired: true,
+    children: null,
+};
+
+/**
+ * In the JSLIB, a FormField has a label, inline error message, and children like a text input
+ * This component provides consistent structure, classnames and some accessibility considerations for all FormFields
+ */
+const FormFieldLayout = ({ fieldId, label, errorMessage, isRequired, showPlaceholderAndHideLabel = false, children, }) => {
+    const labelIntlId = `${fieldId}Label`;
+    const labelHtmlId = `sid-${dashed(labelIntlId)}`;
+    return (React.createElement("div", { className: `sid-field sid-${dashed(fieldId)}` },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: label, isRequired: isRequired, htmlForLabel: `sid-${dashed(fieldId)}`, id: labelHtmlId, displayClasses: showPlaceholderAndHideLabel ? "sid-h-screen-reader-only" : "" }),
+        children,
+        errorMessage && React.createElement("div", { className: "sid-field-error" }, errorMessage)));
+};
+
+/**
+ * Generic text field component.
+ * In the JSLIB, a field has a label, inline error message, and an input of some kind.
+ */
+const FormFieldText = ({ fieldId, value, onChange, placeholder, label, errorMessage, showPlaceholderAndHideLabel = false, required = true, ...inputTextProps }) => {
+    const labelIntlId = `${fieldId}Label`;
+    const labelHtmlId = `sid-${dashed(labelIntlId)}`;
+    return (React.createElement(FormFieldLayout, { fieldId: fieldId, label: label, errorMessage: errorMessage, showPlaceholderAndHideLabel: showPlaceholderAndHideLabel, isRequired: required },
+        React.createElement(InputTextComponent, Object.assign({ id: dashed(fieldId), value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, hidePlaceholder: !showPlaceholderAndHideLabel, "aria-labelledby": labelHtmlId, refId: fieldId, isErrored: !!errorMessage, required: required }, inputTextProps))));
+};
+
+const FirstName = ({ value, isErrored, onChange, intl, placeholder = "", }) => (React.createElement(FormFieldText, { fieldId: "firstName", value: value, onChange: onChange, placeholder: placeholder ||
+        intl.formatHTMLMessage({ id: "firstNamePlaceholder", defaultMessage: "First Name" }), label: React.createElement(FormattedHTMLMessage, { id: "firstName", defaultMessage: "First name" }), errorMessage: isErrored && (React.createElement(FormattedHTMLMessage, { id: "errorId.invalidFirstName", defaultMessage: "Invalid first name" })), showPlaceholderAndHideLabel: !!placeholder }));
 const FirstNameComponent = injectIntl(FirstName);
 
-const LastName = ({ value, isErrored, onChange, intl, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-last-name" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "lastName", defaultMessage: "Last name" }), htmlForLabel: "sid-last-name", id: "sid-last-name-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-    React.createElement(InputTextComponent, { id: "last-name", isErrored: isErrored, onChange: (event) => onChange(event.target.value), placeholder: placeholder ||
-            intl.formatHTMLMessage({ id: "lastNamePlaceholder", defaultMessage: "Last Name" }), refId: "lastName", value: value, required: true, "aria-labelledby": "sid-last-name-label" }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidLastName", defaultMessage: "Invalid last name" }))) : null));
+const LastName = ({ value, isErrored, onChange, intl, placeholder = "", }) => (React.createElement(FormFieldText, { fieldId: "lastName", value: value, onChange: onChange, placeholder: placeholder ||
+        intl.formatHTMLMessage({ id: "lastNamePlaceholder", defaultMessage: "Last Name" }), label: React.createElement(FormattedHTMLMessage, { id: "lastName", defaultMessage: "Last name" }), errorMessage: isErrored && (React.createElement(FormattedHTMLMessage, { id: "errorId.invalidLastName", defaultMessage: "Invalid last name" })), showPlaceholderAndHideLabel: !!placeholder }));
 const LastNameComponent = injectIntl(LastName);
 
 const Email = ({ value, isErrored, onChange, explanation, intl, onKeyDown = undefined, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-email" },
@@ -10296,7 +10336,7 @@ const medicalMessages = {
             subtitle: "Documents will be reviewed in {estimatedWaitTime} by staff at SheerID, a trusted partner.",
             howDoesVerifyingWorkDetails: `Document review is handled by SheerID, a trusted partner who specializes in verifying
                     medical professionals.<br><br>Documents are used only for verifying your medical professional status is
-                    current and will be permanently deleted after review is finalized. They will not be shared with {companyName}.`,
+                    current and will be permanently deleted after review is finalized. They will not be shared with {companyName}`,
             uploadInstructions: "Upload an official document that shows",
         },
         sso: {
@@ -10439,7 +10479,7 @@ const moverMessages = {
             subtitle: "Documents will be reviewed in {estimatedWaitTime} by staff at SheerID, a trusted partner.",
             howDoesVerifyingWorkDetails: `Document review is handled by SheerID, a trusted partner who specializes in verifying recent movers.
                 <br/><br/>
-                Documents are used only for verifying that you've recently moved and will will be permanently deleted after review is finalized. They will not be shared with {companyName}.`,
+                Documents are used only for verifying that you've recently moved and will will be permanently deleted after review is finalized. They will not be shared with {companyName}`,
             uploadInstructions: "Upload an official document that shows",
         },
         success: {
@@ -11509,6 +11549,7 @@ const memberViewModelToRequest = (viewModel) => ({
     city: viewModel.city,
     state: viewModel.state,
     postalCode: viewModel.postalCode,
+    country: viewModel.countryChoice ? viewModel.countryChoice.value : undefined,
 });
 const seniorViewModelToRequest = (viewModel) => ({
     firstName: viewModel.firstName,
@@ -11565,6 +11606,7 @@ const inactiveMilitaryViewModelToRequest = (viewModel) => ({
     locale: viewModel.localeChoice.value,
     country: viewModel.countryChoice ? viewModel.countryChoice.value : undefined,
     metadata: viewModel.metadata,
+    socialSecurityNumber: viewModel.socialSecurityNumber,
 });
 const firstResponderViewModelToRequest = (viewModel) => {
     const request = {
@@ -11619,6 +11661,7 @@ const employmentViewModelToRequest = (viewModel) => ({
     deviceFingerprintHash: viewModel.deviceFingerprintHash,
     locale: viewModel.localeChoice.value,
     metadata: viewModel.metadata,
+    country: viewModel.countryChoice ? viewModel.countryChoice.value : undefined,
 });
 const driverLicenseViewModelToRequest = (viewModel) => ({
     firstName: viewModel.firstName,
@@ -12081,11 +12124,13 @@ const initViewModel = ({ previousViewModel, currentStep, locale, fingerprint, co
 };
 const clearUploadedFiles = (viewModel) => {
     if (viewModel) {
-        for (let i = 1; i <= MAX_DOC_UPLOAD_DOCS_ALLOWED; i += 1) {
-            //  TODO fix next line, remove eslint ignore
-            viewModel[`${UPLOAD_FILE_PREFIX}${i}`] = undefined; // eslint-disable-line no-param-reassign
-        }
+        return fn(viewModel, (draft) => {
+            for (let i = 1; i <= MAX_DOC_UPLOAD_DOCS_ALLOWED; i += 1) {
+                draft[`${UPLOAD_FILE_PREFIX}${i}`] = undefined;
+            }
+        });
     }
+    return undefined;
 };
 const collectThreatMetrixProfile = async (verificationId) => {
     import(/* webpackChunkName: "Tmetrix" */ './es6/index-1839f844.es.js')
@@ -13820,8 +13865,7 @@ const createFetchVerificationRequest = async ({ dispatch, verificationResponsePr
             orgList = await orgListPromise;
             logger.info("orgList received: ", orgList);
         }
-        clearUploadedFiles(previousViewModel); // Need to remove the file elements from state since deepClone cannot clone them
-        let updatedPreviousViewModel = deepClone(previousViewModel);
+        let updatedPreviousViewModel = clearUploadedFiles(previousViewModel); // Need to remove the file elements from state since deepClone cannot clone them
         const previousSegment = previousVerificationResponse
             ? previousVerificationResponse.segment
             : segment;
@@ -13907,6 +13951,11 @@ const createUpdateLocale = (dispatch, programId) => async (viewModel, programThe
  * @param dispatch
  */
 const createUpdateProgramTheme = (dispatch) => async (programTheme) => dispatch({ programTheme, type: "PROGRAM_THEME" });
+/**
+ * @description Perform a full reset of the in-memory state
+ * Useful to fully reset the form and start over again, similar to a page refresh.
+ */
+const createResetState = (dispatch) => async () => dispatch({ type: "RESET_STATE" });
 /**
  * @description Action creator to update the field validation errors, which are those that are shown to a user as they fill-in the HTML form.
  * @param dispatch
@@ -18287,7 +18336,7 @@ const FaqLinkComponent = ({ verificationService, linkText }) => {
 };
 
 const FormFooterComponent = ({ verificationService, children }) => {
-    const { viewModel, updateViewModel } = verificationService;
+    const { viewModel } = verificationService;
     const countryChoice = getSafe(() => viewModel.countryChoice.value, undefined);
     const locale = getLocaleSafely(viewModel);
     const privacyPolicyRef = React.useRef({});
@@ -18298,13 +18347,8 @@ const FormFooterComponent = ({ verificationService, children }) => {
             return;
         }
         const privacyPolicyText = privacyPolicyRef.current.innerHTML.replace(cleanupCommonTags, "");
-        const updatedViewModel = fn(viewModel, (draft) => {
-            if (!draft.metadata) {
-                draft.metadata = {};
-            }
-            draft.metadata.submissionOptIn = privacyPolicyText;
-        });
-        updateViewModel(updatedViewModel);
+        const updatedViewModel = { metadata: { submissionOptIn: privacyPolicyText } };
+        setViewModel(updatedViewModel, { partial: true });
     }, [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" },
@@ -18442,10 +18486,11 @@ const BaseCountryComponentWrapper = ({ verificationService, viewModel, intl, vie
         }
     }, [firstRender]);
     React.useEffect(() => {
-        if (!hasMultipleCountries) {
+        const includesUS = countryChoices.some((choice) => choice.value === "US");
+        if (!hasMultipleCountries && !includesUS) {
             const fieldsToSkip = viewModel.fieldsToSkipValidation
                 ? [...viewModel.fieldsToSkipValidation, "country"]
-                : ["country"];
+                : ["country", "address1", "postalCode", "state", "city"];
             verificationService.updateViewModel(produceDraftViewModel(viewModel, "fieldsToSkipValidation", fieldsToSkip));
         }
     }, [hasMultipleCountries]);
@@ -18482,6 +18527,33 @@ const RewardsRemainingComponent = ({ verificationService, }) => {
     return null;
 };
 
+/**
+ * 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 errorId = getSafe(() => verificationService.fieldValidationErrors[config.fieldId]);
+    const onChange = (value) => {
+        verificationService.updateViewModel(fn(verificationService.viewModel, (draft) => {
+            draft.metadata = draft.metadata || {};
+            draft.metadata[config.fieldId] = value;
+        }));
+        verificationService.updateFieldValidationErrors(fn(verificationService.fieldValidationErrors, (draft) => {
+            const errorId = config.validate(value);
+            if (errorId === undefined) {
+                delete draft[config.fieldId];
+            }
+            // 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 }));
+});
+
 /**
  * TODO - preamble
  */
@@ -18552,6 +18624,7 @@ const StepStudentPersonalInfo = ({ intl, verificationService, }) => {
                 updateStudentViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateStudentViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -18640,6 +18713,7 @@ const StepSeniorPersonalInfo = ({ verificationService }) => {
                 updateSeniorViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateSeniorViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -18677,21 +18751,10 @@ const carrierConsentValueValidator = (countryChoiceValue) => (value, programThem
     }
 };
 
-const City = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-city" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "city", defaultMessage: "City" }), htmlForLabel: "sid-city", id: "sid-city-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-    React.createElement(InputTextComponent, { id: "city", isErrored: isErrored, onChange: (e) => onChange(e.target.value), onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined, placeholder: placeholder || intl.formatHTMLMessage({ id: "cityPlaceholder", defaultMessage: "City" }), value: value, "aria-labelledby": "sid-city-label" }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCity", defaultMessage: "Invalid city" }))) : null));
+const City = ({ value, isErrored, onChange, intl, isRequired = false, onKeyDown = undefined, placeholder = "", }) => (React.createElement(FormFieldText, { fieldId: "city", value: value, onChange: onChange, placeholder: placeholder || intl.formatHTMLMessage({ id: "cityPlaceholder", defaultMessage: "City" }), label: React.createElement(FormattedHTMLMessage, { id: "city", defaultMessage: "City" }), errorMessage: isErrored && React.createElement(FormattedHTMLMessage, { id: "errorId.invalidCity", defaultMessage: "Invalid city" }), showPlaceholderAndHideLabel: !!placeholder, required: isRequired, onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined }));
 const CityComponent = injectIntl(City);
 
-const Address = ({ value, isErrored, onChange, intl, onKeyDown = undefined, placeholder = "", }) => (React.createElement("div", { className: "sid-field sid-address" },
-    React.createElement("div", { className: "sid-l-space-top-md" }),
-    React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "address", defaultMessage: "Address" }), htmlForLabel: "sid-address", id: "sid-address-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-    React.createElement(InputTextComponent, { id: "address", isErrored: isErrored, onChange: (e) => onChange(e.target.value), onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined, placeholder: placeholder ||
-            intl.formatHTMLMessage({ id: "addressPlaceholder", defaultMessage: "Address" }), value: value, "aria-labelledby": "sid-address-label" }),
-    isErrored ? (React.createElement("div", { className: "sid-field-error" },
-        React.createElement(FormattedHTMLMessage, { id: "errorId.invalidAddress", defaultMessage: "Invalid address" }))) : null));
+const Address = ({ value, isErrored, onChange, intl, isRequired = false, onKeyDown = undefined, placeholder = "", }) => (React.createElement(FormFieldText, { fieldId: "address", value: value, onChange: onChange, placeholder: placeholder || intl.formatHTMLMessage({ id: "addressPlaceholder", defaultMessage: "Address" }), label: React.createElement(FormattedHTMLMessage, { id: "address", defaultMessage: "Address" }), errorMessage: isErrored && (React.createElement(FormattedHTMLMessage, { id: "errorId.invalidAddress", defaultMessage: "Invalid address" })), showPlaceholderAndHideLabel: !!placeholder, required: isRequired, onKeyDown: typeof onKeyDown === "function" ? (e) => onKeyDown(e) : undefined }));
 const AddressComponent = injectIntl(Address);
 
 /**
@@ -18812,6 +18875,7 @@ const StepAgePersonalInfo = ({ verificationService, intl }) => {
                 updateAgeViewModel("phoneNumber", value);
                 updateFieldValidationErrorsByFieldId("phoneNumber", value, verificationService);
             }, errorId: fieldValidationErrors.phoneNumber, requireCarrierConsent: verificationService.programTheme.smsLoopEnabled || safeCountryValue !== "US", onCarrierConsentChange: onCarrierConsentChange, carrierConsent: Boolean(viewModel.metadata && viewModel.metadata.carrierConsentValue), selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateAgeViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -18938,6 +19002,7 @@ const StepTeacherPersonalInfo = ({ intl, verificationService, }) => {
                 updateTeacherViewModel("postalCode", newValue);
                 updateFieldValidationErrorsByFieldId("postalCode", newValue, verificationService);
             }, value: viewModel.postalCode })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateTeacherViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -18984,7 +19049,6 @@ const MembershipOrganizationComponent = injectIntl(MembershipOrganization);
 
 /**
  * Step Member Personal Info Component
- * TODO - We need to import more from es6
  */
 const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
     const viewModel = verificationService.viewModel;
@@ -19057,6 +19121,7 @@ const StepMemberPersonalInfo = ({ intl, verificationService, }) => {
                 updateMemberViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateMemberViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19256,6 +19321,7 @@ const StepActiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 updateActiveMilitaryViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateActiveMilitaryViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19380,6 +19446,50 @@ DischargeDate.defaultProps = {
 };
 const DischargeDateComponent = injectIntl(DischargeDate);
 
+/**
+ * Insert `newPart` into a string
+ * Use:
+ *      "Hi !".insertAt(3, "world"); // "Hi world!"
+ */
+String.prototype.insertAt = function (index, newPart) {
+    if (index > this.length) {
+        return this;
+    }
+    return `${this.slice(0, index)}${newPart}${this.slice(index)}`;
+};
+
+const displaySSN = (value) => {
+    let stringValue;
+    try {
+        stringValue = value.toString();
+        if (!stringValue)
+            throw new Error();
+    }
+    catch (e) {
+        return "";
+    }
+    return stringValue
+        .replace(/[^\d]/g, "") // replce non-digit chars
+        .insertAt(3, "-") // for display
+        .insertAt(6, "-")
+        .replace("--", "") // just in case
+        .replace(/-$/, ""); // don't add trailing hyphen, breaks backspace
+};
+// The viewModel and API don't include hyphens. Also enforces max length, prior to setting viewModel, avoiding off-by-one error.
+const unDisplaySSN = (value) => value.replace(/-/g, "").slice(0, SSN_STRING_LENGTH);
+
+const SocialSecurity = ({ value, isErrored, onChange, intl, explanation, placeholder = "", isRequired = false, label, }) => {
+    const getDefaultExplanation = () => (!isRequired ? explanation : "");
+    return (React.createElement("div", { className: "sid-field sid-ssn" },
+        React.createElement("div", { className: "sid-l-space-top-md" }),
+        React.createElement(FieldLabel, { text: label, htmlForLabel: "sid-ssn", id: "sid-ssn-label", displayClasses: "sid-field__label-with-explanation", isRequired: isRequired }, getDefaultExplanation()),
+        React.createElement(InputTextComponent, { id: "ssn", refId: FieldIdEnum.socialSecurityNumber, className: "sid-ssn__input", isErrored: isErrored, required: true, placeholder: placeholder ||
+                intl.formatHTMLMessage({ id: "ssnPlaceholder", defaultMessage: "000-00-0000" }), value: displaySSN(value), hidePlaceholder: false, onChange: (e) => onChange(unDisplaySSN(e.target.value)), "aria-labelledby": "sid-ssn-label" }),
+        isErrored ? (React.createElement("div", { className: "sid-field-error" },
+            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidSocialSecurityNumber", defaultMessage: "Invalid SSN" }))) : null));
+};
+const SocialSecurityNumber = injectIntl(SocialSecurity);
+
 /**
  * TODO - preamble
  */
@@ -19466,6 +19576,11 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 updateInactiveMilitaryViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        React.createElement(SocialSecurity, { value: viewModel.socialSecurityNumber, onChange: (value) => {
+                updateInactiveMilitaryViewModel("socialSecurityNumber", value);
+                updateFieldValidationErrorsByFieldId("socialSecurityNumber", value, verificationService);
+            }, isRequired: false, isErrored: !!fieldValidationErrors[FieldIdEnum.socialSecurityNumber], placeholder: "000-00-0000", label: React.createElement(FormattedHTMLMessage, { id: "ssn", defaultMessage: "Social Security Number" }), explanation: React.createElement(FormattedHTMLMessage, { id: "optional", defaultMessage: "Optional" }) }),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateInactiveMilitaryViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19598,6 +19713,7 @@ const StepFirstResponderPersonalInfo = ({ intl, verificationService, }) => {
                 updateFirstResponderViewModel("postalCode", newValue);
                 updateFieldValidationErrorsByFieldId("postalCode", newValue, verificationService);
             }, value: viewModel.postalCode })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateFirstResponderViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19755,6 +19871,7 @@ const StepMedicalProfessionalPersonalInfo = ({ intl, verificationService, }) =>
                 updateMedicalProfessionalViewModel("memberId", newValue);
                 updateFieldValidationErrorsByFieldId("memberId", newValue, verificationService);
             }, explanation: memberIdMessageKeys && (React.createElement(FormattedHTMLMessage, { id: memberIdMessageKeys.explanationKey, defaultMessage: "Your Professional Membership Registration Number" })), label: memberIdMessageKeys && (React.createElement(FormattedHTMLMessage, { id: memberIdMessageKeys.labelKey, defaultMessage: "Registration Number" })) })),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateMedicalProfessionalViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19845,12 +19962,12 @@ const StepEmploymentPersonalInfo = ({ verificationService, }) => {
         shouldCollectAddressFields(viewModel.countryChoice, verificationService.programTheme.config.countries) ? (React.createElement(AddressComponent, { isErrored: !!fieldValidationErrors.address1, errorId: fieldValidationErrors.address1, onChange: (newValue) => {
                 updateEmploymentViewModel("address1", newValue);
                 updateFieldValidationErrorsByFieldId("address1", newValue, verificationService);
-            }, value: viewModel.address1 })) : null,
+            }, isRequired: true, value: viewModel.address1 })) : null,
         shouldCollectAddressFields(viewModel.countryChoice, verificationService.programTheme.config.countries) ? (React.createElement("div", { className: "sid-thirds" },
             React.createElement(CityComponent, { isErrored: !!fieldValidationErrors.city, errorId: fieldValidationErrors.city, onChange: (newValue) => {
                     updateEmploymentViewModel("city", newValue);
                     updateFieldValidationErrorsByFieldId("city", newValue, verificationService);
-                }, value: viewModel.city }),
+                }, value: viewModel.city, isRequired: true }),
             React.createElement(StateComponent, { isErrored: !!fieldValidationErrors.state, errorId: fieldValidationErrors.state, onChange: (newValue) => {
                     updateEmploymentViewModel("state", newValue);
                     updateFieldValidationErrorsByFieldId("state", newValue, verificationService);
@@ -19868,6 +19985,7 @@ const StepEmploymentPersonalInfo = ({ verificationService, }) => {
                 updateEmploymentViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateEmploymentViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -19985,6 +20103,7 @@ const StepDriverLicensePersonalInfo = ({ intl, verificationService, }) => {
                 updateIdentityViewModel("driverLicenseNumber", newValue);
                 updateFieldValidationErrorsByFieldId("driverLicenseNumber", newValue, verificationService);
             } }),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateIdentityViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20060,12 +20179,12 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService, }) => {
         React.createElement(AddressComponent, { isErrored: !!fieldValidationErrors.address1, errorId: fieldValidationErrors.address1, onChange: (newValue) => {
                 updateIdentityViewModel("address1", newValue);
                 updateFieldValidationErrorsByFieldId("address1", newValue, verificationService);
-            }, value: viewModel.address1 }),
+            }, value: viewModel.address1, isRequired: true }),
         React.createElement("div", { className: "sid-thirds" },
             React.createElement(CityComponent, { isErrored: !!fieldValidationErrors.city, errorId: fieldValidationErrors.city, onChange: (newValue) => {
                     updateIdentityViewModel("city", newValue);
                     updateFieldValidationErrorsByFieldId("city", newValue, verificationService);
-                }, value: viewModel.city }),
+                }, value: viewModel.city, isRequired: true }),
             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;
                     updateIdentityViewModel("state", stateValue);
@@ -20074,7 +20193,8 @@ const StepGeneralIdentityPersonalInfo = ({ intl, verificationService, }) => {
             React.createElement(PostalCodeComponent, { isErrored: !!fieldValidationErrors.postalCode, onChange: (newValue) => {
                     updateIdentityViewModel("postalCode", newValue);
                     updateFieldValidationErrorsByFieldId("postalCode", newValue, verificationService);
-                }, value: viewModel.postalCode })),
+                }, value: viewModel.postalCode, isRequired: true })),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateIdentityViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20150,12 +20270,12 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService, }) => {
         React.createElement(AddressComponent, { isErrored: !!fieldValidationErrors.address1, errorId: fieldValidationErrors.address1, onChange: (newValue) => {
                 updateIdentityViewModel("address1", newValue);
                 updateFieldValidationErrorsByFieldId("address1", newValue, verificationService);
-            }, value: viewModel.address1 }),
+            }, value: viewModel.address1, isRequired: true }),
         React.createElement("div", { className: "sid-thirds" },
             React.createElement(CityComponent, { isErrored: !!fieldValidationErrors.city, errorId: fieldValidationErrors.city, onChange: (newValue) => {
                     updateIdentityViewModel("city", newValue);
                     updateFieldValidationErrorsByFieldId("city", newValue, verificationService);
-                }, value: viewModel.city }),
+                }, value: viewModel.city, isRequired: true }),
             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;
                     updateIdentityViewModel("state", stateValue);
@@ -20169,6 +20289,7 @@ const StepHybridIdentityPersonalInfo = ({ intl, verificationService, }) => {
                 updateIdentityViewModel("driverLicenseNumber", newValue);
                 updateFieldValidationErrorsByFieldId("driverLicenseNumber", newValue, verificationService);
             } }),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateIdentityViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20294,6 +20415,12 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) =>
                 updateLicensedProfessionalViewModel("email", newValue);
                 updateFieldValidationErrorsByFieldId("email", newValue, verificationService);
             }, onKeyDown: (event) => handleEmailOnKeyDown(event) }),
+        verificationService.programTheme.isSmsNotifierConfigured ||
+            verificationService.programTheme.smsLoopEnabled ? (React.createElement(PhoneNumberComponent, { isRequired: !!verificationService.programTheme.smsLoopEnabled, value: viewModel.phoneNumber, isErrored: !!fieldValidationErrors.phoneNumber, onChange: (newValue) => {
+                updateLicensedProfessionalViewModel("phoneNumber", newValue);
+                updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
+            }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateLicensedProfessionalViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20355,7 +20482,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
         React.createElement(AddressComponent, { value: viewModel.address1, isErrored: !!fieldValidationErrors.address1, errorId: fieldValidationErrors.address1, onChange: (newValue) => {
                 updateMoverViewModel("address1", newValue);
                 updateFieldValidationErrorsByFieldId("address1", newValue, verificationService);
-            } }),
+            }, isRequired: true }),
         React.createElement(PostalCodeComponent, { value: viewModel.postalCode, isErrored: !!fieldValidationErrors.postalCode, onChange: (newValue) => {
                 updateMoverViewModel("postalCode", newValue);
                 updateFieldValidationErrorsByFieldId("postalCode", newValue, verificationService);
@@ -20369,6 +20496,7 @@ const StepMoverPersonalInfo = ({ verificationService }) => {
                 updateMoverViewModel("phoneNumber", newValue);
                 updateFieldValidationErrorsByFieldId("phoneNumber", newValue, verificationService);
             }, selectedCountryCode: viewModel.countryChoice && viewModel.countryChoice.value })) : null,
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateMoverViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20467,6 +20595,7 @@ const StepLowIncomePersonalInfo = ({ intl, verificationService, }) => {
                 updateLowIncomeViewModel("email", newValue);
                 updateFieldValidationErrorsByFieldId("email", newValue, verificationService);
             }, onKeyDown: (event) => handleEmailOnKeyDown(event) }),
+        getOptions().customFormFields.map((config) => (React.createElement(FormFieldCustom, { config: config, verificationService: verificationService }))),
         React.createElement(MarketConsentWrapperComponent, { verificationService: verificationService, isErrored: !!fieldValidationErrors.marketConsentValue, onChange: (newValue) => {
                 updateLowIncomeViewModel("metadata", {
                     ...verificationService.viewModel.metadata,
@@ -20487,52 +20616,6 @@ const StepLowIncomePersonalInfoComponent = injectIntl(StepLowIncomePersonalInfo)
 // Collect status is identical to Active at this time.
 const StepCollectMilitaryStatusComponent = ({ verificationService, }) => (React.createElement(StepActiveMilitaryPersonalInfoComponent, { verificationService: verificationService }));
 
-/**
- * Insert `newPart` into a string
- * Use:
- *      "Hi !".insertAt(3, "world"); // "Hi world!"
- */
-String.prototype.insertAt = function (index, newPart) {
-    if (index > this.length) {
-        return this;
-    }
-    return `${this.slice(0, index)}${newPart}${this.slice(index)}`;
-};
-
-const displaySSN = (value) => {
-    let stringValue;
-    try {
-        stringValue = value.toString();
-        if (!stringValue)
-            throw new Error();
-    }
-    catch (e) {
-        return "";
-    }
-    return stringValue
-        .replace(/[^\d]/g, "") // replce non-digit chars
-        .insertAt(3, "-") // for display
-        .insertAt(6, "-")
-        .replace("--", "") // just in case
-        .replace(/-$/, ""); // don't add trailing hyphen, breaks backspace
-};
-// The viewModel and API don't include hyphens. Also enforces max length, prior to setting viewModel, avoiding off-by-one error.
-const unDisplaySSN = (value) => value.replace(/-/g, "").slice(0, SSN_STRING_LENGTH);
-
-const SocialSecurity = ({ value, isErrored, onChange, intl, placeholder = "", }) => {
-    const changeSsn = (value) => {
-        onChange(value);
-    };
-    return (React.createElement("div", { className: "sid-field sid-ssn" },
-        React.createElement("div", { className: "sid-l-space-top-md" }),
-        React.createElement(FieldLabel, { text: React.createElement(FormattedHTMLMessage, { id: "ssn", defaultMessage: "Social Security Number" }), htmlForLabel: "sid-ssn", id: "sid-ssn-label", displayClasses: placeholder && "sid-h-screen-reader-only" }),
-        React.createElement(InputTextComponent, { id: "ssn", refId: FieldIdEnum.socialSecurityNumber, className: "sid-ssn__input", isErrored: isErrored, required: true, placeholder: placeholder ||
-                intl.formatHTMLMessage({ id: "ssnPlaceholder", defaultMessage: "000-00-0000" }), value: displaySSN(value), hidePlaceholder: false, onChange: (e) => changeSsn(unDisplaySSN(e.target.value)), "aria-labelledby": "sid-ssn-label" }),
-        isErrored ? (React.createElement("div", { className: "sid-field-error" },
-            React.createElement(FormattedHTMLMessage, { id: "errorId.invalidSocialSecurityNumber", defaultMessage: "Invalid SSN" }))) : null));
-};
-const SocialSecurityNumber = injectIntl(SocialSecurity);
-
 const Step$1 = ({ useSsn, useDocUpload, verificationService }) => (React.createElement("div", { id: "sid-ssn-choice", className: "sid-l-container sid-l-horz-center" },
     React.createElement("div", { className: "sid-header" },
         React.createElement("div", { className: "sid-l-horz-center" },
@@ -20599,10 +20682,13 @@ const PoweredByComponent = ({ verificationService, isCentered }) => (React.creat
 const TryAgainButtonComponent = ({ verificationService }) => {
     const currentSegment = getSafe(() => verificationService.verificationResponse.segment);
     const fetchNewVerificationRequest = React.useCallback(() => {
-        const trackingId = undefined;
-        const forceNewVerificationRequest = true;
-        verificationService.fetchNewVerificationRequest(verificationService.programId, currentSegment, verificationService.previousViewModel, trackingId, forceNewVerificationRequest);
-    }, [verificationService.programId, currentSegment, verificationService.previousViewModel]);
+        (async () => {
+            const trackingId = undefined;
+            const forceNewVerificationRequest = true;
+            await verificationService.resetState();
+            verificationService.fetchNewVerificationRequest(verificationService.programId, currentSegment, undefined, trackingId, forceNewVerificationRequest);
+        })();
+    }, [verificationService.programId, currentSegment]);
     return (React.createElement("button", { type: "button", className: "sid-btn sid-btn-light", "aria-label": "submit", onClick: fetchNewVerificationRequest, onKeyPress: fetchNewVerificationRequest, tabIndex: 0 },
         React.createElement(FormattedHTMLMessage, { id: "tryAgain", defaultMessage: "Try again" })));
 };
@@ -23210,6 +23296,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     updateProgramTheme: createUpdateProgramTheme(dispatch),
     updateFieldValidationErrors: createUpdateFieldValidationErrors(dispatch),
     submitStep: createSubmitStep(dispatch),
+    resetState: createResetState(dispatch),
 });
 // Return a VerificationService
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => ({
@@ -23391,7 +23478,7 @@ class Iframe {
 
 class Modal {
     constructor(url, userConfig) {
-        this.popStateEventHandler = () => this.closeModal(true);
+        this.popStateEventHandler = () => this.closeModal();
         const thresholdConfig = userConfig.mobileThreshold
             ? userConfig.mobileThreshold
             : iframeConstants.DEFAULT_MOBILE_THRESHOLD_WIDTH;
@@ -23428,14 +23515,11 @@ class Modal {
         });
         return this.closeButton;
     }
-    closeModal(historyEventTrigger = false) {
+    closeModal() {
         window.removeEventListener("popstate", this.popStateEventHandler);
         const transitionTimeout = iframeConstants.MODAL_OPACITY_TRANSITION_PERIOD;
         removeElement(this.overlay, transitionTimeout);
         removeElement(this.wrapper, transitionTimeout);
-        if (!historyEventTrigger) {
-            window.history.back();
-        }
     }
     static createOverlay() {
         const overlay = document.createElement("div");
@@ -23488,7 +23572,6 @@ class Modal {
         });
         document.body.appendChild(this.overlay);
         document.body.appendChild(this.wrapper);
-        window.history.pushState({}, document.title);
         this.addPopStateListener();
     }
     init() {
@@ -23547,5 +23630,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, 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, 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 };
 //# sourceMappingURL=sheerides6.js.map