@sheerid/jslib 1.106.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 {
@@ -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" },
@@ -18487,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
  */
@@ -18557,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,
@@ -18645,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,
@@ -18682,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);
 
 /**
@@ -18817,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,
@@ -18943,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,
@@ -18989,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;
@@ -19062,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,
@@ -19261,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,
@@ -19519,6 +19580,7 @@ const StepInactiveMilitaryPersonalInfo = ({ intl, verificationService, }) => {
                 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,
@@ -19651,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,
@@ -19808,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,
@@ -19898,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);
@@ -19921,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,
@@ -20038,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,
@@ -20113,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);
@@ -20127,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,
@@ -20203,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);
@@ -20222,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,
@@ -20352,6 +20420,7 @@ const StepLicensedProfessionalPersonalInfo = ({ intl, verificationService, }) =>
                 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,
@@ -20413,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);
@@ -20427,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,
@@ -20525,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,
@@ -23407,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;
@@ -23444,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");
@@ -23504,7 +23572,6 @@ class Modal {
         });
         document.body.appendChild(this.overlay);
         document.body.appendChild(this.wrapper);
-        window.history.pushState({}, document.title);
         this.addPopStateListener();
     }
     init() {
@@ -23563,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