@saasquatch/mint-components 1.12.0-9 → 1.12.0

package/dist/cjs/{sqm-banking-info-form_16.cjs.entry.js → sqm-banking-info-form_17.cjs.entry.js}

@@ -2,24 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const global = require('./global-c3637175.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const global = require('./global-ae358e7d.js');
+const index_module = require('./index.module-191d84c2.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-8503a151.js');
-const GenericTableView = require('./GenericTableView-80d7642e.js');
-const reRender = require('./re-render-5bde3d2e.js');
-const useChildElements = require('./useChildElements-410d2435.js');
-const luxon = require('./luxon-05098e19.js');
-const useReferralTable = require('./useReferralTable-824ac152.js');
 const utils = require('./utils-6847bc06.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-c58966f8.js');
-const keys = require('./keys-cff24974.js');
-const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-fe9d4112.js');
+const GenericTableView = require('./GenericTableView-bb2fcd95.js');
+const reRender = require('./re-render-811491ef.js');
+const useChildElements = require('./useChildElements-d64dfedd.js');
+const luxon = require('./luxon-45228ff5.js');
+const useReferralTable = require('./useReferralTable-b09d9b9e.js');
+const sqmTextSpanView = require('./sqm-text-span-view-38222836.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-bfea11c8.js');
 const extractProps = require('./extractProps-fd93ba62.js');
+const keys = require('./keys-cff24974.js');
+const usePayoutStatus = require('./usePayoutStatus-9f25038a.js');
+const useVerificationEmail = require('./useVerificationEmail-f3db90da.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -866,12 +868,22 @@ const BankingInfoFormView = (props) => {
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
-        text.error.generalDescription)),
+        global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       states.isPartner && !states.hideSteps && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
         index.h("sl-icon", { slot: "icon", name: "info-circle" }),
         index.h("strong", null, text.isPartnerAlertHeader),
         index.h("br", null),
-        text.isPartnerAlertDescription)),
+        global.intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       index.h("div", null,
         index.h("h4", null, text.paymentMethod),
         index.h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
@@ -984,18 +996,18 @@ function parseImpactThreshold(threshold) {
   return parsed.toString();
 }
 function useBankingInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const host = index_module.T();
-  const locale = index_module.Q();
-  const user = index_module.K();
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const countries = index_module.Dn(SORTED_COUNTRIES_NAMESPACE);
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const host = index_module._();
+  const locale = index_module.L();
+  const user = index_module.Q();
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = index_module.In(SORTED_COUNTRIES_NAMESPACE);
   const formRef = stencilHooks_module.useRef(null);
-  const { data: paymentOptionsData, loading: paymentOptionsLoading, errors: paymentOptionsError, } = index_module.qn(FINANCE_NETWORK_SETTINGS_NAMESPACE);
-  const { data: userData, refetch, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const [saveWithdrawalSettings] = index_module.xe(SAVE_WITHDRAWAL_SETTINGS);
-  const [updateWithdrawalSettings] = index_module.xe(UPDATE_WITHDRAWAL_SETTINGS);
+  const { data: paymentOptionsData, loading: paymentOptionsLoading, errors: paymentOptionsError, } = index_module.Mn(FINANCE_NETWORK_SETTINGS_NAMESPACE);
+  const { data: userData, refetch, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const [saveWithdrawalSettings] = index_module.$e(SAVE_WITHDRAWAL_SETTINGS);
+  const [updateWithdrawalSettings] = index_module.$e(UPDATE_WITHDRAWAL_SETTINGS);
   const [showVerification, setShowVerification] = stencilHooks_module.useState(false);
   const [currentFormData, setCurrentFormData] = stencilHooks_module.useState(null);
   const [formState, setFormState] = stencilHooks_module.useState({});
@@ -1109,6 +1121,8 @@ function useBankingInfoForm(props) {
       // Call difference mutations based on whether the user is updating
       // the info for setting it for the first time
       if (isPartner) {
+        if (!token)
+          return; // Require token for this mutation
         response = await updateWithdrawalSettings({
           updateImpactPublisherWithdrawalSettingsInput: {
             ...body,
@@ -1146,6 +1160,8 @@ function useBankingInfoForm(props) {
         });
         return;
       }
+      // Fire form change event
+      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -1221,6 +1237,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1253,6 +1270,7 @@ function useBankingInfoForm(props) {
       hasPayPal,
       bankCountry: formState.bankCountry,
       countrySearch,
+      email: (_j = userData === null || userData === void 0 ? void 0 : userData.user) === null || _j === void 0 ? void 0 : _j.email,
     },
     refs: {
       formRef,
@@ -1459,7 +1477,16 @@ const BankingInfoForm = class {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our Support team or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
+    /**
+     * Text for verify email dialog
+     * @uiName Verify email header
+     */
+    this.verifyEmailHeaderText = "Verify your email";
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -1471,7 +1498,7 @@ const BankingInfoForm = class {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed under a field that is missing required information.
      * @uiName Empty form field error message
@@ -1482,6 +1509,10 @@ const BankingInfoForm = class {
      * @uiName Form field error message
      */
     this.fieldInvalidError = "{fieldName} is invalid";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Continue button label
      */
@@ -1554,23 +1585,55 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        position: "relative",
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(title)": {
+          padding: "var(--sl-spacing-large) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
+        },
+        "&::part(base)": {
+          position: "absolute",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-large) 0 var(--sl-spacing-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
-    return (index.h(index.Host, null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    const sheet = JSS.createStyleSheet(style);
+    const styleString = sheet.toString();
+    const verifyDescription = global.intl.formatMessage({
+      id: "codeResentSuccessfully",
+      defaultMessage: props.text.verifyEmailDescriptionText,
+    }, {
+      email: props.states.email,
+    });
+    return (index.h(index.Host, null, index.h("style", { type: "text/css" }, styleString), props.states.isPartner && props.states.showVerification ? (index.h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide, label: props.text.verifyEmailHeaderText }, index.h("sqm-code-verification", { verifyCodeHeaderText: verifyDescription, reverifyCodeHeaderText: verifyDescription, onVerification: props.callbacks.onVerification }))) : null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
-        countryInputSlot: (index.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
+        countryInputSlot: (index.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), index.h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), index.h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
@@ -1581,21 +1644,21 @@ const BankingInfoForm = class {
           }), (_f = (_e = props.states) === null || _e === void 0 ? void 0 : _e.allCountries) === null || _f === void 0 ? void 0 :
           _f.map((c) => (index.h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
         paymentMethodSlot: (index.h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
-        paymentThresholdSelectSlot: (index.h("sl-select", Object.assign({ required: true, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
+        paymentThresholdSelectSlot: (index.h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.paymentThreshold) === null || _l === void 0 ? void 0 : _l.type,
             label: props.text.paymentThresholdSelectLabel,
           }),
         })), props.states.thresholds.map((t) => (index.h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
-        paymentFixedDaySelectSlot: (index.h("sl-select", Object.assign({ required: true, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
+        paymentFixedDaySelectSlot: (index.h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_r = (_q = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _q === void 0 ? void 0 : _q.paymentDay) === null || _r === void 0 ? void 0 : _r.type,
             label: props.text.paymentDaySelectLabel,
           }),
         })), index.h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText), index.h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
-        paypalInputSlot: (index.h("sl-input", Object.assign({ required: true, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
+        paypalInputSlot: (index.h("sl-input", Object.assign({ required: true, disabled: props.states.saveLoading, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
             type: (_0 = (_z = (_y = (_x = props.states.formState) === null || _x === void 0 ? void 0 : _x.errors) === null || _y === void 0 ? void 0 : _y.inputErrors) === null || _z === void 0 ? void 0 : _z.paypalEmailAddress) === null || _0 === void 0 ? void 0 : _0.type,
@@ -1611,7 +1674,7 @@ function useDemoBankingInfoForm(props) {
   const defaultPaymentScheduleChecked = (_f = (_e = (_d = props.demoData) === null || _d === void 0 ? void 0 : _d.states) === null || _e === void 0 ? void 0 : _e.formState) === null || _f === void 0 ? void 0 : _f.paymentScheduleChecked;
   const defaultCurrency = (_h = (_g = props.demoData) === null || _g === void 0 ? void 0 : _g.states) === null || _h === void 0 ? void 0 : _h.currency;
   const defaultCountry = (_l = (_k = (_j = props.demoData) === null || _j === void 0 ? void 0 : _j.states) === null || _k === void 0 ? void 0 : _k.formState) === null || _l === void 0 ? void 0 : _l.bankCountry;
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   const [paymentMethodChecked, setPaymentMethodChecked] = stencilHooks_module.useState(undefined);
   const [paymentScheduleChecked, setPaymentScheduleChecked] = stencilHooks_module.useState(undefined);
   const [currency, setCurrency] = stencilHooks_module.useState(defaultCurrency);
@@ -1686,6 +1749,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -1703,6 +1767,331 @@ function useDemoBankingInfoForm(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const style$1 = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    maxWidth: "550px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+  },
+  CodeInputContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  CodeInput: {
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  CodeInputError: {
+    ...mixins.ErrorStyles,
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  FooterContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+};
+const vanillaStyle$1 = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+
+
+`;
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+function WidgetCodeVerificationView(props) {
+  const { states, refs, callbacks, text } = props;
+  const resendCodeText = global.intl.formatMessage({
+    id: "resendCodeText",
+    defaultMessage: text.resendCodeText,
+  }, {
+    resendCodeLink: (index.h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = global.intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
+  });
+  const inputClass = states.verifyFailed
+    ? sheet$1.classes.CodeInputError
+    : sheet$1.classes.CodeInput;
+  return (index.h("div", { part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$1),
+    index.h("div", { class: sheet$1.classes.Wrapper },
+      index.h("div", { class: sheet$1.classes.HeaderContainer },
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        index.h("b", null, codeResentSuccessfully))),
+      index.h("div", { class: sheet$1.classes.InputsContainer },
+        index.h("div", { ref: refs.codeWrapperRef, class: sheet$1.classes.CodeInputContainer },
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" })),
+        states.verifyFailed && (index.h("p", { class: sheet$1.classes.ErrorText }, text.invalidCodeText)),
+        index.h("sl-button", { class: sheet$1.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+      index.h("div", { class: sheet$1.classes.FooterContainer },
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
+}
+
+const VerifyEmailWithCodeMutation = index_module.dist.gql `
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
+      verifiedEmail
+      accessKey
+    }
+  }
+`;
+function useWidgetCodeVerification(props) {
+  const host = stencilHooks_module.l();
+  const [_, setShowCode] = index_module.bn(keys.SHOW_CODE_NAMESPACE);
+  const email = index_module.In(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [emailSent, setEmailSent] = stencilHooks_module.useState(false);
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
+  const [validationError, setValidationError] = stencilHooks_module.useState(false);
+  const [emailError, setEmailError] = stencilHooks_module.useState(false);
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
+  stencilHooks_module.useEffect(() => {
+    if (!codeRef)
+      return;
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    codeElements.forEach((element, idx) => {
+      element.addEventListener("focus", (e) => {
+        e.target.select();
+      });
+      element.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && e.target.value === "") {
+          codeElements[Math.max(0, idx - 1)].focus();
+        }
+      });
+      element.addEventListener("input", (e) => {
+        const input = e.data;
+        if (!input)
+          return;
+        if (idx === codeElements.length - 1) {
+          e.target.value = input.slice(0, 1);
+          return;
+        }
+        if (input.length > 1) {
+          const rest = input.slice(1);
+          e.target.value = input.slice(0, 1);
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
+        }
+        codeElements[idx + 1].focus();
+      });
+    });
+  }, [codeRef]);
+  const reset = () => {
+    setShowCode(false);
+    setValidationError(false);
+  };
+  const resendEmail = async () => {
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
+    }
+    if (emailSent)
+      setEmailResent(true);
+    setEmailSent(true);
+  };
+  const submitCode = async () => {
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    if (codeElements.find((el) => !el.value)) {
+      setValidationError(true);
+      return;
+    }
+    let code = "";
+    codeElements.forEach((element) => {
+      code = `${code}${element.value}`;
+    });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    setValidationError(false);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
+      reset();
+    }
+    else {
+      setValidationError(true);
+    }
+  };
+  stencilHooks_module.useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
+    // email should already exist if user has completed email-verification
+    if (!email)
+      resendEmail();
+    else
+      setEmailSent(true);
+  }, [initialized]);
+  return {
+    refs: {
+      codeWrapperRef: setCodeRef,
+    },
+    states: {
+      email: verificationEmail,
+      emailResent,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
+      verifyFailed: !!validationError,
+    },
+    callbacks: {
+      resendEmail,
+      submitCode,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+const WidgetCodeVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     */
+    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     */
+    this.resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     */
+    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     */
+    this.verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoWidgetCodeVerification(this)
+      : useWidgetCodeVerification(this);
+    return index.h(WidgetCodeVerificationView, Object.assign({}, props));
+  }
+};
+function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const setVerifiedContext = index_module.wn(keys.VERIFICATION_PARENT_NAMESPACE);
+  return cjs.cjs({
+    states: {
+      loading: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: false,
+      verifyFailed: false,
+    },
+    refs: {
+      codeWrapperRef: () => { },
+    },
+    callbacks: {
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const GET_TAX_DOCUMENT = index_module.dist.gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -1730,13 +2119,13 @@ const DOCUSIGN_ERROR_STATES = [
 const DOCUSIGN_EXPIRED_STATES = ["ttl_expired", "session_timeout"];
 function useDocusignForm(props) {
   var _a, _b, _c;
-  const user = index_module.K();
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const { data, loading: userLoading, refetch, } = index_module.qn(USER_QUERY_NAMESPACE);
+  const user = index_module.Q();
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const { data, loading: userLoading, refetch, } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
-  const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = index_module.xe(GET_TAX_DOCUMENT);
-  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = index_module.xe(COMPLETE_TAX_DOCUMENT);
+  const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = index_module.$e(GET_TAX_DOCUMENT);
+  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = index_module.$e(COMPLETE_TAX_DOCUMENT);
   const [docusignStatus, setDocusignStatus] = stencilHooks_module.useState(undefined);
   const [participantType, setParticipantType] = stencilHooks_module.useState(undefined);
   const [errors, setErrors] = stencilHooks_module.useState({});
@@ -1800,6 +2189,8 @@ function useDocusignForm(props) {
       // @ts-expect-error: no data type for result
       if (!result.completeImpactPublisherTaxDocument.success)
         throw new Error();
+      // Fire form change event
+      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
       setShowExitButton(true);
     }
     catch (e) {
@@ -1858,7 +2249,7 @@ function getDocumentType(p) {
     return undefined;
 }
 
-const style$1 = {
+const style$2 = {
   DocusignStatusContainer: {
     width: "100%",
     minHeight: "600px",
@@ -1885,13 +2276,13 @@ const style$1 = {
     },
   },
 };
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 const DocusignExpiredView = (props) => {
-  const { classes } = sheet$1;
+  const { classes } = sheet$2;
   const { text } = props;
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("div", { class: classes.DocusignStatusContainer },
       index.h("sl-icon", { style: {
           width: "50px",
@@ -1903,10 +2294,10 @@ const DocusignExpiredView = (props) => {
       index.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignErrorView = (props) => {
-  const { classes } = sheet$1;
+  const { classes } = sheet$2;
   const { text } = props;
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("div", { class: classes.DocusignStatusContainer },
       index.h("sl-icon", { style: {
           width: "50px",
@@ -1918,14 +2309,14 @@ const DocusignErrorView = (props) => {
       index.h("sl-button", { type: "primary", onClick: () => window.location.reload() }, text.refreshButton))));
 };
 const DocusignLoadingView = () => {
-  const { classes } = sheet$1;
+  const { classes } = sheet$2;
   return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("div", { class: classes.DocusignStatusContainer },
       index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
 const DocusignIframe = ({ states, data, callbacks, text, }) => {
-  const { classes } = sheet$1;
+  const { classes } = sheet$2;
   const [iFrameHeight, setiFrameHeight] = stencilHooks_module.useState("100%");
   const allowedDomains = [
     "referralsaasquatch.com",
@@ -1958,12 +2349,12 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
     return index.h(DocusignExpiredView, { text: text });
   // Wrap iFrame with container that shares the same height to push other elements down when absolute positioned
   return (index.h("div", { style: { height: iFrameHeight } },
-    index.h("style", { type: "text/css" }, styleString$1),
+    index.h("style", { type: "text/css" }, styleString$2),
     index.h("div", { class: classes.IFrameContainer },
       index.h("iframe", { scrolling: "yes", frameBorder: "0", width: "100%", src: data.documentUrl, height: iFrameHeight }))));
 };
 
-const style$2 = {
+const style$3 = {
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2076,9 +2467,9 @@ const style$2 = {
     fontSize: "var(--sl-font-size-medium)",
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
-const vanillaStyle$1 = `
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+const vanillaStyle$2 = `
     :host{
       display: block;   
     }
@@ -2103,11 +2494,11 @@ const vanillaStyle$1 = `
 const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
-  const { classes } = sheet$2;
+  const { classes } = sheet$3;
   return (index.h("div", { class: classes.Container },
     index.h("style", { type: "text/css" },
-      styleString$2,
-      vanillaStyle$1),
+      styleString$3,
+      vanillaStyle$2),
     index.h("div", { class: classes.TextContainer },
       index.h("div", null,
         !states.hideSteps && (index.h("p", null, global.intl.formatMessage({
@@ -2117,16 +2508,26 @@ const DocusignFormView = (props) => {
         index.h("h3", null, text.taxForm),
         index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     states.loadingError && (index.h("div", null,
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$2.classes.ErrorAlertContainer },
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.ErrorAlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.loadingErrorAlertHeader),
         index.h("br", null),
-        text.error.loadingErrorAlertDescription))),
-    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
+        global.intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.ErrorAlertContainer },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       index.h("strong", null, text.error.generalTitle),
       index.h("br", null),
-      text.error.generalDescription)),
+      global.intl.formatMessage({
+        id: "generalDescription",
+        defaultMessage: text.error.generalDescription,
+      }, {
+        supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     index.h("div", null,
       index.h("div", null,
         index.h("h5", { class: classes.BoldText }, global.intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
@@ -2165,6 +2566,10 @@ const DocusignForm = class {
      * @uiWidget textArea
      */
     this.taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * Displayed at the top of the page to individuals joining a US program who reside outside the country.
      * @uiName W-8 BEN tax form description
@@ -2208,7 +2613,7 @@ const DocusignForm = class {
      * @uiName Docusign form error message
      * @uiWidget textArea
      */
-    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.";
+    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
     /**
      * @uiName Refresh page button label
      */
@@ -2224,7 +2629,7 @@ const DocusignForm = class {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -2236,7 +2641,7 @@ const DocusignForm = class {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
@@ -2284,7 +2689,7 @@ const DocusignForm = class {
   get el() { return index.getElement(this); }
 };
 function useDocusignFormDemo(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   return cjs.cjs({
     text: props.getTextProps(),
     states: {
@@ -2333,7 +2738,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
     } }, index.h("span", null, "Placeholder for docusign iframe"), index.h("div", { style: { display: "flex", gap: "8px" } }, index.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"), index.h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
 };
 
-const style$3 = {
+const style$4 = {
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2421,11 +2826,9 @@ const style$3 = {
       border: "none",
     },
     "&::part(message)": {
-      display: "flex",
       alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      padding: "var(--sl-spacing-small)",
+      whiteSpace: "nowrap",
     },
     "& sl-icon::part(base)": {
       color: "var(--sl-color-yellow-500)",
@@ -2441,9 +2844,9 @@ const style$3 = {
     marginBottom: "var(--sl-spacing-small)",
   },
 };
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-const vanillaStyle$2 = `
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+const vanillaStyle$3 = `
     :host{
       display: block;   
     }
@@ -2462,11 +2865,11 @@ const vanillaStyle$2 = `
 const IndirectTaxFormView = (props) => {
   var _a;
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
-  const { classes } = sheet$3;
+  const { classes } = sheet$4;
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
-      styleString$3,
-      vanillaStyle$2),
+      styleString$4,
+      vanillaStyle$3),
     index.h("div", { class: classes.TextContainer },
       index.h("div", null,
         !states.hideSteps && (index.h("p", null,
@@ -2479,21 +2882,36 @@ const IndirectTaxFormView = (props) => {
         index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         index.h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
       states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.AlertContainer },
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.AlertContainer },
           index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           index.h("strong", null, text.error.loadingErrorAlertHeader),
           index.h("br", null),
-          text.error.loadingErrorAlertDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.AlertContainer },
+          global.intl.formatMessage({
+            id: "loadingErrorAlertDescription",
+            defaultMessage: text.error.loadingErrorAlertDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          })))),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.AlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
-        text.error.generalDescription)),
-      states.isPartner && (index.h("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+        global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      states.isPartner && (index.h("sl-alert", { type: "primary", open: true, class: sheet$4.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         index.h("sl-icon", { slot: "icon", name: "info-circle" }),
         index.h("strong", null, text.isPartnerAlertHeader),
         index.h("br", null),
-        text.isPartnerAlertDescription)),
+        global.intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       index.h("div", null,
         index.h("h4", null, text.indirectTaxDetails))),
     states.loading ? (index.h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (index.h("div", null,
@@ -2510,7 +2928,12 @@ const IndirectTaxFormView = (props) => {
           slots.registeredInDifferentCountryDetailsSlot)),
       index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
         index.h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
-        text.cannotChangeInfoAlert),
+        global.intl.formatMessage({
+          id: "cannotChangeInfoAlert",
+          defaultMessage: text.cannotChangeInfoAlert,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })),
       index.h("div", { class: classes.BtnContainer },
         index.h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
         index.h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
@@ -2554,15 +2977,15 @@ function getOption(countries, countryCode) {
 }
 function useIndirectTaxForm(props) {
   var _a, _b, _c, _d, _e;
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const user = index_module.Q();
+  const locale = index_module.L();
   const formRef = stencilHooks_module.useRef(null);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.xe(CONNECT_PARTNER);
-  const userForm = index_module.Dn(USER_FORM_CONTEXT_NAMESPACE);
-  const { data: userData, refetch, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const { data: _countriesRes, loading: countriesLoading } = index_module.qn(COUNTRIES_QUERY_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = index_module.$e(CONNECT_PARTNER);
+  const userForm = index_module.In(USER_FORM_CONTEXT_NAMESPACE);
+  const { data: userData, refetch, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const { data: _countriesRes, loading: countriesLoading } = index_module.Mn(COUNTRIES_QUERY_NAMESPACE);
   const intlLocale = (locale === null || locale === void 0 ? void 0 : locale.replace("_", "-")) || "en";
   const _countries = stencilHooks_module.useMemo(() => { var _a, _b; return (_b = (_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((country) => sqmInvoiceTableView.getCountryObj({ countryCode: country.countryCode, locale: intlLocale })); }, [(_a = _countriesRes === null || _countriesRes === void 0 ? void 0 : _countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data]);
   const [loading, setLoading] = stencilHooks_module.useState(false);
@@ -2680,6 +3103,8 @@ function useIndirectTaxForm(props) {
       const resultPublisher = (_e = (_d = (_c = result
         .createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
       const hasValidCurrentDocument = sqmInvoiceTableView.validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
+      // Fire form change event
+      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form
@@ -2838,7 +3263,7 @@ const IndirectTaxForm = class {
      * @uiName Submission confirmation alert
      * @uiWidget textArea
      */
-    this.cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.";
+    this.cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing.";
     /**
      * @uiName Missing indirect tax number error message
      */
@@ -2864,11 +3289,15 @@ const IndirectTaxForm = class {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * @uiName Continue button label
      */
     this.continueButton = "Continue";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -2880,7 +3309,7 @@ const IndirectTaxForm = class {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -2892,7 +3321,7 @@ const IndirectTaxForm = class {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
@@ -2951,7 +3380,7 @@ const IndirectTaxForm = class {
   }
 };
 function useDemoIndirectTaxForm(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   const [option, setOption] = stencilHooks_module.useState(null);
   const [demoFormState, setDemoFormState] = stencilHooks_module.useState({});
   return cjs.cjs({
@@ -3061,8 +3490,8 @@ const GET_INVOICES = index_module.dist.gql `
 `;
 function useInvoiceTable(props, emptyElement, loadingElement) {
   var _a;
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const user = index_module.Q();
+  const locale = index_module.L();
   const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
@@ -3072,7 +3501,7 @@ function useInvoiceTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { envelope: invoicesData, states, callbacks, } = index_module.On(GET_INVOICES, (data) => { var _a, _b, _c; return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.invoices; }, {
+  const { envelope: invoicesData, states, callbacks, } = index_module.kn(GET_INVOICES, (data) => { var _a, _b, _c; return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.invoices; }, {
     limit: props.perPage,
     offset: 0,
   }, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
@@ -3448,7 +3877,7 @@ const PayPalIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg",
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.71826 -0.15332H9.30607C10.8808 -0.15332 12.7478 -0.099593 13.9903 1.00853C14.8208 1.754 15.2593 2.936 15.1597 4.21203C14.8142 8.52364 12.2694 10.9347 8.84762 10.9347H6.09026C5.61852 10.9347 5.31288 11.2503 5.18 12.0965L4.40926 17.0461C4.35611 17.3685 4.22323 17.5566 3.97739 17.5767H0.53567C0.156948 17.5767 0.0174187 17.2879 0.117082 16.6432L2.59539 0.786908C2.69505 0.148896 3.04055 -0.15332 3.71826 -0.15332Z", fill: "#113984" }),
   index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.25973 11.5995L6.23643 5.36045C6.32281 4.81646 6.61515 4.54782 7.20649 4.54782H12.7877C13.7112 4.54782 14.4554 4.69557 15.0401 4.96421C14.4819 8.799 12.0236 10.9347 8.80775 10.9347H6.06368C5.6916 10.9347 5.42583 11.1227 5.25973 11.5995Z", fill: "#172C70" })));
 
-const style$4 = {
+const style$5 = {
   CardContainer: {
     display: "grid",
     gridTemplateColumns: "1fr",
@@ -3582,7 +4011,7 @@ const style$4 = {
   },
 };
 function PayoutDetailsCardView(props) {
-  const sheet = JSS.createStyleSheet(style$4);
+  const sheet = JSS.createStyleSheet(style$5);
   const styleString = sheet.toString();
   const { classes } = sheet;
   const { states, text } = props;
@@ -3612,11 +4041,6 @@ function PayoutDetailsCardView(props) {
   });
   return (index.h("div", { class: classes.Container },
     index.h("style", { type: "text/css" }, styleString),
-    states.error && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: classes.Alert, type: "warning", open: true },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-      index.h("div", { class: classes.AlertContent },
-        index.h("b", null, text.error.errorTitleText),
-        text.error.errorDescriptionText))),
     states.loading ? (renderLoadingSkeleton()) : (index.h("div", { class: classes.CardContainer },
       index.h("div", { class: classes.StatusContainer },
         index.h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
@@ -3638,7 +4062,7 @@ function PayoutDetailsCardView(props) {
 
 function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  const { data, loading } = index_module.qn(USER_QUERY_NAMESPACE);
+  const { data, loading } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
   function getPayoutDetailedStatusText(paymentDay) {
     var _a;
@@ -3712,16 +4136,6 @@ const PayoutDetailsCard = class {
      * @uiName Bank account field label
      */
     this.accountText = "Account";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message title
-     */
-    this.errorTitleText = "Your payout is on hold ";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message description
-     */
-    this.errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -3734,10 +4148,6 @@ const PayoutDetailsCard = class {
     const props = utils.getProps(this);
     return {
       ...props,
-      error: {
-        errorTitleText: this.errorTitleText,
-        errorDescriptionText: this.errorDescriptionText,
-      },
     };
   }
   render() {
@@ -3809,21 +4219,21 @@ function getCurrentStep(user) {
 }
 function useTaxAndCash() {
   var _a, _b, _c, _d, _e;
-  const host = index_module.T();
-  const user = index_module.K();
-  const locale = index_module.Q();
+  const host = index_module._();
+  const user = index_module.Q();
+  const locale = index_module.L();
   // State for current step of form
-  const [step, setStep] = index_module.Fn({
+  const [step, setStep] = index_module.Cn({
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/loading",
   });
   // State for when to hide steps, or override certain actions
-  const [context, _setContext] = index_module.Fn({
+  const [context, _setContext] = index_module.Cn({
     namespace: TAX_FORM_CONTEXT_NAMESPACE,
     initialValue: {},
   });
   // State to carry user form information into step 2
-  const [userFormContext, _setUserFormContext] = index_module.Fn({
+  const [userFormContext, _setUserFormContext] = index_module.Cn({
     namespace: USER_FORM_CONTEXT_NAMESPACE,
     initialValue: {
       firstName: undefined,
@@ -3833,19 +4243,19 @@ function useTaxAndCash() {
       currency: undefined,
     },
   });
-  const [_currenciesContext, setCurrenciesContext] = index_module.Fn({
+  const [_currenciesContext, setCurrenciesContext] = index_module.Cn({
     namespace: CURRENCIES_NAMESPACE,
     initialValue: [],
   });
-  const [_countriesContext, _setCountriesContext] = index_module.Fn({
+  const [_countriesContext, _setCountriesContext] = index_module.Cn({
     namespace: COUNTRIES_NAMESPACE,
     initialValue: [],
   });
-  const [_sortedCountriesContext, setSortedCountriesContext] = index_module.Fn({
+  const [_sortedCountriesContext, setSortedCountriesContext] = index_module.Cn({
     namespace: SORTED_COUNTRIES_NAMESPACE,
     initialValue: [],
   });
-  const { data, errors } = index_module.An({
+  const { data, errors } = index_module.Fn({
     namespace: USER_QUERY_NAMESPACE,
     query: GET_USER,
     skip: !user,
@@ -3855,12 +4265,12 @@ function useTaxAndCash() {
   });
   const countryCode = ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.countryCode) ||
     userFormContext.countryCode;
-  index_module.An({
+  index_module.Fn({
     namespace: COUNTRIES_QUERY_NAMESPACE,
     query: GET_COUNTRIES,
     skip: !user,
   });
-  const { data: financeNetworkData, refetch } = index_module.An({
+  const { data: financeNetworkData, refetch } = index_module.Fn({
     namespace: FINANCE_NETWORK_SETTINGS_NAMESPACE,
     query: GET_FINANCE_NETWORK_SETTINGS,
     skip: !user,
@@ -3868,7 +4278,7 @@ function useTaxAndCash() {
       filter: getFinanceNetworkFilter(),
     },
   });
-  const { data: currenciesData } = index_module.An({
+  const { data: currenciesData } = index_module.Fn({
     namespace: CURRENCIES_QUERY_NAMESPACE,
     query: GET_CURRENCIES,
     skip: !user,
@@ -3949,7 +4359,7 @@ function useTaxAndCash() {
     step,
     setStep,
     context,
-    namespace: index_module.$n(TAX_CONTEXT_NAMESPACE),
+    namespace: index_module.Pn(TAX_CONTEXT_NAMESPACE),
     loading: step === "/loading",
   };
 }
@@ -4051,13 +4461,15 @@ const TaxAndCashMonolith = class {
      * @uiName Terms and conditions link
      * @uiGroup Step 1 Properties
      */
-    this.step1_termsAndConditionsLink = "/payout-terms-and-conditions";
+    this.step1_termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
     /**
      * Placeholder text displayed in the currency search dropdown
      * @uiName Currency field placeholder text
      * @uiGroup Step 1 Properties
      */
     this.step1_searchForCurrencyText = "Search for currency..";
+    /**
+  
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       STEP 2 PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -4160,7 +4572,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 2 Properties
      * @uiWidget textArea
      */
-    this.step2_cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.";
+    this.step2_cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing.";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       STEP 3 PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -4233,7 +4645,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 3 Properties
      * @uiWidget textArea
      */
-    this.step3_docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.";
+    this.step3_docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
     /**
      * @uiName Refresh page button label
      * @uiGroup Step 3 Properties
@@ -4458,6 +4870,16 @@ const TaxAndCashMonolith = class {
      * @uiGroup Step 4 Properties
      */
     this.step4_fxWireProcessingFeeLabel = "FX Wire (Processing Fee {currency}{defaultFxFee}.00)";
+    /**
+     * @uiName Text for verify email dialog
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_verifyEmailHeaderText = "Verify your email";
+    /**
+     * @uiName Verify code widget header text
+     * @uiGroup Step 4 Properties
+     */
+    this.step4_verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       DASHBOARD PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -4595,7 +5017,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact Support.";
+    this.dashboard_indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *
@@ -4618,7 +5040,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_notRegisteredForTax = "Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.";
+    this.dashboard_notRegisteredForTax = "Not registered for indirect tax. If you’ve previously registered with your tax authority, contact our {supportLink} to add your information to stay tax compliant.";
     /**
      * Displayed to participants registered in Quebec, Canada.
      * @uiName QST indirect tax details
@@ -4690,14 +5112,14 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.payoutHoldAlertHeader = "Your payout is on hold";
+    this.dashboard_payoutHoldAlertHeader = "Your payout is on hold";
     /**
      * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
      * @uiName Payout error message description
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.dashboard_payoutHoldAlertDescription = "Please contact our {supportLink} or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -4745,6 +5167,63 @@ const TaxAndCashMonolith = class {
      * @uiWidget textArea
      */
     this.dashboard_replaceTaxFormModalBodyText = "Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert message title
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationRequiredHeader = "Verify your identity";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity
+     * @uiName Verification required alert message description
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
+    /**
+     * @uiName Verification required internal alert header
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert button text
+     * @uiGroup Dashboard Properties
+     * @uiWidget textArea
+     */
+    this.dashboard_verificationRequiredButtonText = "Start Verification";
     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                       GENERAL PROPS:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@@ -4766,7 +5245,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup General Form Properties
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed under a field that is missing required information.
      * @uiName Empty form field error message
@@ -4813,7 +5292,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup General Form Properties
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * Placeholder text displayed in the country search dropdown
      * @uiName Country field placeholder text
@@ -4833,13 +5312,19 @@ const TaxAndCashMonolith = class {
      * @uiGroup General Form Properties
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
      * @uiGroup General Form Properties
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
+    /**
+     * Link text for contacting support team
+     * @uiName Suport link text
+     * @uiGroup General Form Properties
+     */
+    this.supportLink = "support team";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -4863,6 +5348,7 @@ const TaxAndCashMonolith = class {
       taxAndPayoutsDescription: props.taxAndPayoutsDescription,
       searchForCountryText: props.searchForCountryText,
       formStep: props.formStep,
+      supportLink: props.supportLink,
     };
   }
   render() {
@@ -4895,7 +5381,7 @@ const TaxAndCashMonolith = class {
   }
 };
 function useDemoTaxAndCash(props) {
-  const [step, setStep] = index_module.Fn({
+  const [step, setStep] = index_module.Cn({
     namespace: TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
@@ -4905,18 +5391,47 @@ function useDemoTaxAndCash(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$5 = {
-  WarningAlertContainer: {
+const style$6 = {
+  ErrorAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+      maxWidth: "600px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
   },
-  HoldAlertContainer: {
+  WarningHoldAlertContainer: {
+    marginLeft: "-20px",
     "&::part(base)": {
+      maxWidth: "850px",
       border: "none",
       backgroundColor: "transparent",
     },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  ErrorHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      maxWidth: "850px",
+      border: "none",
+      backgroundColor: "transparent",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
   },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
@@ -5037,6 +5552,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5066,13 +5582,86 @@ const style$5 = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
-const sheet$4 = JSS.createStyleSheet(style$5);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = JSS.createStyleSheet(style$6);
+const styleString$5 = sheet$5.toString();
 const TaxAndCashDashboardView = (props) => {
-  var _a;
+  var _a, _b, _c, _d;
   const { states, text, callbacks, slots } = props;
+  function getAlert(status) {
+    switch (status) {
+      case "VERIFICATION:REQUIRED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$5.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$5.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$5.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: global.intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$5.classes.ErrorHoldAlertContainer,
+        };
+      case "HOLD":
+        return {
+          header: text.payoutHoldAlertHeader,
+          description: global.intl.formatMessage({
+            id: "payoutHoldAlertDescription",
+            defaultMessage: text.payoutHoldAlertDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$5.classes.WarningHoldAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
   const statusMap = {
-    NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+    NOT_VERIFIED: (index.h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
       index.h("p", null, global.intl.formatMessage({
         id: `badgeTextAwaitingReview`,
@@ -5080,7 +5669,7 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    ACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+    ACTIVE: (index.h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
       index.h("p", null, global.intl.formatMessage({
         id: `badgeTextSubmittedOn`,
@@ -5090,12 +5679,12 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
-    INACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
+    INACTIVE: (index.h("div", { class: sheet$5.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
       index.h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+    INACTIVE: (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       index.h("strong", null, global.intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
@@ -5145,72 +5734,76 @@ const TaxAndCashDashboardView = (props) => {
   };
   return (index.h("div", null,
     index.h("div", null,
-      index.h("style", { type: "text/css" }, styleString$4),
+      index.h("style", { type: "text/css" }, styleString$5),
       states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
           index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           index.h("strong", null, text.error.loadingErrorAlertHeader),
           index.h("br", null),
-          text.error.loadingErrorAlertDescription))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.WarningAlertContainer },
+          global.intl.formatMessage({
+            id: "loadingErrorAlertDescription",
+            defaultMessage: text.error.loadingErrorAlertDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          })))),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.ErrorAlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
-        text.error.generalDescription)),
-      states.hasHold && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        index.h("strong", null, text.payoutHoldAlertHeader),
-        index.h("br", null),
-        text.payoutHoldAlertDescription)),
-      states.payoutStatus === "VERIFICATION_NEEDED" && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        index.h("strong", null, text.verificationRequiredHeader),
-        index.h("p", { style: { margin: "0" } }, text.verificationRequiredDescription),
-        index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText))),
-      index.h("sl-dialog", { noDismiss: true, class: sheet$4.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onVerifyIdentityCancel },
-        index.h("iframe", { 
-          // AL: TODO replace iframe URL with verification url when available
-          scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" })),
-      index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+        global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      getAlert(states.payoutStatus) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+        index.h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
+        index.h("strong", null, getAlert(states.payoutStatus).header),
+        index.h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
+        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
+      index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$5.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         index.h("p", null, text.replaceTaxFormModalBodyText),
-        index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        index.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        index.h("sl-button", { slot: "footer", type: "primary", class: sheet$5.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        index.h("sl-button", { slot: "footer", type: "default", class: sheet$5.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       index.h("div", null,
-        index.h("h3", null, text.bankingInformationSectionHeader),
-        index.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
-        index.h("div", { class: sheet$4.classes.BankingInformationContainer },
+        index.h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
+        index.h("p", { class: sheet$5.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
+        index.h("div", { class: sheet$5.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
-          !states.loading && (index.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
-      index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
-        index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
-          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null, states.noFormNeeded ? (index.h("div", null,
-          index.h("h3", { class: sheet$4.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
-          index.h("p", { class: sheet$4.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (index.h("div", null,
-          index.h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
-            index.h("div", { class: sheet$4.classes.StatusContainer },
+          !states.loading && (index.h("p", { class: sheet$5.classes.DescriptionText }, text.payoutFromImpact)),
+          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$5.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+      index.h("div", { class: sheet$5.classes.TaxDocumentsContainer },
+        index.h("div", null, states.loading ? (index.h("div", { class: sheet$5.classes.TaxSectionSkeletonContainer },
+          index.h("sl-skeleton", { class: sheet$5.classes.SkeletonOne }),
+          index.h("sl-skeleton", { class: sheet$5.classes.SkeletonTwo }))) : (index.h("div", null, states.noFormNeeded ? (index.h("div", null,
+          index.h("h3", { class: sheet$5.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
+          index.h("p", { class: sheet$5.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (index.h("div", null,
+          index.h("span", { class: sheet$5.classes.TaxFormDetailsContainer },
+            index.h("div", { class: sheet$5.classes.StatusContainer },
               index.h("h3", null, global.intl.formatMessage({
                 id: "section-subheader",
                 defaultMessage: text.taxDocumentSectionSubHeader,
               }, {
                 documentType: states.documentTypeString,
               })),
-              index.h("span", { class: sheet$4.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
-      index.h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
-        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
-        index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
+              index.h("span", { class: sheet$5.classes.StatusAlert }, statusMap[states.status]))),
+          states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$5.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+      index.h("div", { class: sheet$5.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet$5.classes.TaxSectionSkeletonContainer },
+        index.h("sl-skeleton", { class: sheet$5.classes.SkeletonOne }),
+        index.h("sl-skeleton", { class: sheet$5.classes.SkeletonTwo }))) : (index.h("div", null,
+        index.h("h3", { class: sheet$5.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          index.h("sl-tooltip", { trigger: "hover", placement: "top", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            index.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
-        index.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
-          index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, text.notRegisteredForTax)) : (getIndirectTaxRegisteredIn())),
-          !states.notRegistered && (index.h("div", { class: sheet$4.classes.TaxNumberContainer },
+          index.h("sl-tooltip", { trigger: "hover", placement: "top", content: text.indirectTaxTooltipSupport, class: sheet$5.classes.TooltipContainer },
+            index.h("sl-icon", { name: "info-circle", class: sheet$5.classes.ToolTip }))),
+        index.h("div", { class: sheet$5.classes.IndirectTaxPreviewDetails },
+          index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$5.classes.NotRegisteredIndirectTaxText }, global.intl.formatMessage({
+            id: "notRegisteredForTax",
+            defaultMessage: text.notRegisteredForTax,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }))) : (getIndirectTaxRegisteredIn())),
+          !states.notRegistered && (index.h("div", { class: sheet$5.classes.TaxNumberContainer },
             index.h("span", null, global.intl.formatMessage({
               id: `indirectTaxDetails`,
               defaultMessage: text.indirectTaxDetails,
@@ -5233,7 +5826,7 @@ const TaxAndCashDashboardView = (props) => {
                 }, {
                   subRegionTaxNumber: states.subRegionTaxNumber,
                 })))),
-          !states.notRegistered && (index.h("div", { class: sheet$4.classes.InvoiceTableContainer },
+          !states.notRegistered && (index.h("div", { class: sheet$5.classes.InvoiceTableContainer },
             index.h("sqm-invoice-table", { description: text.invoiceDescription, "prev-label": text.invoicePrevLabel, "more-label": text.invoiceMoreLabel, header: text.invoiceHeader, "empty-state-header": text.invoiceEmptyStateHeader, "empty-state-text": text.invoiceEmptyStateText },
               index.h("sqm-invoice-table-download-column", null),
               index.h("sqm-invoice-table-date-column", { "column-title": text.dateColumnTitle }),
@@ -5279,16 +5872,16 @@ function getIndirectTaxType(taxInformation) {
 }
 const useTaxAndCashDashboard = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
-  const setContext = index_module.Sn(TAX_FORM_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
+  const setContext = index_module.wn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
-  const [showVerification, setShowVerification] = stencilHooks_module.useState(false);
-  const locale = index_module.Q();
+  const { render, loading: veriffLoading, errors: veriffErrors, } = usePayoutStatus.useVeriffApp();
+  const locale = index_module.L();
   stencilHooks_module.useEffect(() => {
     // Clear override context once on submitted
     setContext({});
   }, []);
-  const { data, loading, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
+  const { data, loading, errors: userError, refetch, } = index_module.Mn(USER_QUERY_NAMESPACE);
   const publisher = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher;
   const documentType = publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType;
   const submissionDate = (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.dateCreated;
@@ -5313,7 +5906,14 @@ const useTaxAndCashDashboard = (props) => {
     setStep("/3");
   };
   const provinceName = (_d = sqmInvoiceTableView.INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _d === void 0 ? void 0 : _d.displayName;
-  const payoutStatus = usePayoutStatus.getStatus(data);
+  const payoutStatus = data ? usePayoutStatus.getStatus(data) : null;
+  stencilHooks_module.useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener(usePayoutStatus.VERIFF_COMPLETE_EVENT_KEY, cb);
+    return () => {
+      window.removeEventListener(usePayoutStatus.VERIFF_COMPLETE_EVENT_KEY, cb);
+    };
+  }, []);
   return {
     states: {
       dateSubmitted,
@@ -5337,14 +5937,14 @@ const useTaxAndCashDashboard = (props) => {
       showNewFormDialog: showDialog,
       hasHold: !!((_m = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _m === void 0 ? void 0 : _m.hold),
       payoutStatus,
-      showVerifyIdentity: showVerification,
+      veriffLoading,
     },
     callbacks: {
       onClick: () => setShowDialog(true),
+      onVerifyClick: () => render(),
       onEditPayoutInfo,
       onNewFormCancel: () => setShowDialog(false),
       onNewFormClick,
-      onVerifyIdentityCancel: () => setShowVerification(false),
     },
     text: props.getTextProps(),
   };
@@ -5467,7 +6067,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact Support.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *
@@ -5487,7 +6087,7 @@ const TaxAndCashDashboard = class {
      * @uiName Not registered for indirect tax text
      * @uiWidget textArea
      */
-    this.notRegisteredForTax = "Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.";
+    this.notRegisteredForTax = "Not registered for indirect tax. If you’ve previously registered with your tax authority, contact our {supportLink} to add your information to stay tax compliant.";
     /**
      * Displayed to participants registered in Quebec, Canada.
      * @uiName QST indirect tax details
@@ -5522,7 +6122,7 @@ const TaxAndCashDashboard = class {
      * @uiName Payout error message description
      * @uiWidget textArea
      */
-    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.payoutHoldAlertDescription = "Please contact our {supportLink} or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -5539,7 +6139,31 @@ const TaxAndCashDashboard = class {
      * @uiName Verification required alert message description
      * @uiWidget textArea
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
+    /**
+     * @uiName Verification required internal alert header
+     */
+    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     */
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     */
+    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     */
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     */
+    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     */
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page when the user needs to verify their identity.
      * @uiName Verification required alert button text
@@ -5556,7 +6180,7 @@ const TaxAndCashDashboard = class {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed under the payout details card.
      * @uiName Payout from impact text
@@ -5574,7 +6198,7 @@ const TaxAndCashDashboard = class {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the Invoice table displayed at the bottom of the page.
      * @uiName Invoice number column title
@@ -5625,6 +6249,10 @@ const TaxAndCashDashboard = class {
      * @uiName Replace tax form modal body text
      */
     this.replaceTaxFormModalBodyText = "Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Cancel button label
      */
@@ -5670,13 +6298,14 @@ function useDemoTaxAndCashDashboard(props) {
       hasHold: false,
       showVerifyIdentity: false,
       payoutStatus: "DONE",
+      veriffLoading: false,
     },
     callbacks: {
       onClick: () => console.debug("check step"),
       onEditPayoutInfo: () => console.debug("payout info"),
       onNewFormCancel: () => console.log("hide"),
       onNewFormClick: () => console.log("show"),
-      onVerifyIdentityCancel: () => console.log("hide"),
+      onVerifyClick: () => console.log("verify"),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
@@ -6653,7 +7282,7 @@ const PHONE_EXTENSIONS = {
   },
 };
 
-const style$6 = {
+const style$7 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
@@ -6733,7 +7362,6 @@ const style$6 = {
   },
   PhoneInputsSection: {
     display: "flex",
-    alignItems: "flex-end",
     flexDirection: "column",
     gap: "4px",
     "& p": {
@@ -6744,7 +7372,6 @@ const style$6 = {
   },
   PhoneInputsContainer: {
     display: "flex",
-    alignItems: "flex-end",
     gap: "4px",
     width: "100%",
     "& #phoneNumber": {
@@ -6753,9 +7380,9 @@ const style$6 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$6);
-const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const sheet$6 = JSS.createStyleSheet(style$7);
+const styleString$6 = sheet$6.toString();
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -6783,7 +7410,7 @@ const vanillaStyle$3 = `
 const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
-  const { classes } = sheet$5;
+  const { classes } = sheet$6;
   const bankingCollectionText = global.intl.formatMessage({
     id: "bankingCollectionText",
     defaultMessage: text.allowBankingCollection,
@@ -6806,14 +7433,19 @@ const UserInfoFormView = (props) => {
   }
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
-      styleString$5,
-      vanillaStyle$3),
+      styleString$6,
+      vanillaStyle$4),
     states.loadingError && (index.h("div", null,
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.AlertContainer },
+      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$6.classes.AlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.loadingErrorAlertHeader),
         index.h("br", null),
-        text.error.loadingErrorAlertDescription),
+        global.intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })),
       index.h("br", null))),
     states.loading ? (index.h(sqmInvoiceTableView.GeneralLoadingView, null)) : (index.h("div", null,
       index.h("div", { class: classes.TextContainer },
@@ -6824,16 +7456,26 @@ const UserInfoFormView = (props) => {
           }, { step: states.step, count: FORM_STEPS }))),
           index.h("h3", null, text.personalInformation),
           index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$5.classes.AlertContainer },
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$6.classes.AlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
-        text.error.generalDescription)),
-      (states.isPartner || states.isUser) && (index.h("sl-alert", { type: "primary", open: true, class: sheet$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+        global.intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      (states.isPartner || states.isUser) && (index.h("sl-alert", { type: "primary", open: true, class: sheet$6.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         index.h("sl-icon", { slot: "icon", name: "info-circle" }),
         index.h("strong", null, text.isPartnerAlertHeader),
         index.h("br", null),
-        text.isPartnerAlertDescription)),
+        global.intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
@@ -6885,10 +7527,11 @@ const UserInfoFormView = (props) => {
                     index.h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                     _b.dial_code));
                 })),
-              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => 
-                // Naive phone number validation
-                sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
-                  sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => {
+                  // Naive phone number validation
+                  sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
+                    sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
+                }, disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -6951,12 +7594,12 @@ function useUserInfoForm(props) {
   const currencyRef = stencilHooks_module.useRef(undefined);
   const phoneCountryRef = stencilHooks_module.useRef(undefined);
   const formRef = stencilHooks_module.useRef(null);
-  const context = index_module.Dn(TAX_FORM_CONTEXT_NAMESPACE);
-  const countries = index_module.Dn(SORTED_COUNTRIES_NAMESPACE);
-  const [step, setStep] = index_module.Mn(TAX_CONTEXT_NAMESPACE);
-  const [userFormContext, setUserFormContext] = index_module.Mn(USER_FORM_CONTEXT_NAMESPACE);
-  const { data, loading, errors: userError, } = index_module.qn(USER_QUERY_NAMESPACE);
-  const _currencies = index_module.Dn(CURRENCIES_NAMESPACE);
+  const context = index_module.In(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = index_module.In(SORTED_COUNTRIES_NAMESPACE);
+  const [step, setStep] = index_module.bn(TAX_CONTEXT_NAMESPACE);
+  const [userFormContext, setUserFormContext] = index_module.bn(USER_FORM_CONTEXT_NAMESPACE);
+  const { data, loading, errors: userError, } = index_module.Mn(USER_QUERY_NAMESPACE);
+  const _currencies = index_module.In(CURRENCIES_NAMESPACE);
   const currencies = stencilHooks_module.useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = stencilHooks_module.useState("");
   const [phoneCountrySearch, setPhoneCountrySearch] = stencilHooks_module.useState("");
@@ -7084,6 +7727,8 @@ function useUserInfoForm(props) {
     const { allowBankingCollection, ...userData } = formData;
     setUserFormContext({
       ...userFormContext,
+      firstName: userData.firstName,
+      lastName: userData.lastName,
       phoneNumberCountryCode: userData.phoneNumberCountryCode,
       phoneNumber: userData.phoneNumber,
       countryCode: userData.countryCode,
@@ -7220,7 +7865,7 @@ const TaxForm = class {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -7232,7 +7877,7 @@ const TaxForm = class {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
      * @uiName Terms and conditions checkbox
@@ -7248,7 +7893,7 @@ const TaxForm = class {
      * The link that appears in the terms and conditions checkbox
      * @uiName Terms and conditions link
      */
-    this.termsAndConditionsLink = "/payout-terms-and-conditions";
+    this.termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
     /**
      * Placeholder text displayed in the country search dropdown
      * @uiName Country field placeholder text
@@ -7285,12 +7930,16 @@ const TaxForm = class {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
      */
     this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -7320,7 +7969,7 @@ const TaxForm = class {
   }
 };
 function useDemoUserInfoForm(props) {
-  const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
+  const setStep = index_module.wn(TAX_CONTEXT_NAMESPACE);
   return cjs.cjs({
     setStep,
     onSubmit: () => {
@@ -7367,6 +8016,7 @@ function useDemoUserInfoForm(props) {
 }
 
 exports.sqm_banking_info_form = BankingInfoForm;
+exports.sqm_code_verification = WidgetCodeVerification;
 exports.sqm_docusign_form = DocusignForm;
 exports.sqm_indirect_tax_form = IndirectTaxForm;
 exports.sqm_invoice_table = InvoiceTable;