@saasquatch/mint-components 1.12.0-15 → 1.12.0-20

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

@@ -8,7 +8,7 @@ const global = require('./global-c3637175.js');
 const index_module = require('./index.module-b8d9d0ba.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-require('./mixins-fe9d4112.js');
+const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
 const reRender = require('./re-render-5bde3d2e.js');
@@ -16,10 +16,12 @@ 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-b0602970.js');
+const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-4fcf021f.js');
 const keys = require('./keys-cff24974.js');
-const usePayoutStatus = require('./usePayoutStatus-8f924372.js');
 const extractProps = require('./extractProps-fd93ba62.js');
+const usePayoutStatus = require('./usePayoutStatus-8f924372.js');
+const useVerificationEmail = require('./useVerificationEmail-2eb28c2a.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -994,7 +996,7 @@ function parseImpactThreshold(threshold) {
   return parsed.toString();
 }
 function useBankingInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const host = index_module.T();
   const locale = index_module.Q();
   const user = index_module.K();
@@ -1268,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,
@@ -1475,6 +1478,15 @@ const BankingInfoForm = class {
      * @uiWidget textArea
      */
     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
@@ -1575,14 +1587,21 @@ const BankingInfoForm = class {
     });
     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-xx-large)",
+          marginBottom: "var(--sl-spacing-large)",
         },
         "&::part(body)": {
-          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          padding: "0 var(--sl-spacing-large) 0 var(--sl-spacing-large)",
           fontSize: "var(--sl-font-size-small)",
         },
         "&::part(footer)": {
@@ -1599,7 +1618,14 @@ const BankingInfoForm = class {
       },
     };
     const sheet = JSS.createStyleSheet(style);
-    return (index.h(index.Host, null, props.states.isPartner && props.states.showVerification ? (index.h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide }, index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    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, 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",
@@ -1741,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.Mn(keys.SHOW_CODE_NAMESPACE);
+  const email = index_module.Dn(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.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
+  return cjs.cjs({
+    states: {
+      loading: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
+    },
+    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!
@@ -1898,7 +2249,7 @@ function getDocumentType(p) {
     return undefined;
 }
 
-const style$1 = {
+const style$2 = {
   DocusignStatusContainer: {
     width: "100%",
     minHeight: "600px",
@@ -1925,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",
@@ -1943,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",
@@ -1958,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",
@@ -1998,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",
@@ -2116,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;   
     }
@@ -2143,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({
@@ -2157,7 +2508,7 @@ 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),
@@ -2167,7 +2518,7 @@ const DocusignFormView = (props) => {
         }, {
           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$2.classes.ErrorAlertContainer },
+    ((_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),
@@ -2387,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",
@@ -2493,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;   
     }
@@ -2514,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,
@@ -2531,7 +2882,7 @@ 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),
@@ -2541,7 +2892,7 @@ const IndirectTaxFormView = (props) => {
           }, {
             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.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$4.classes.AlertContainer },
         index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
@@ -2551,7 +2902,7 @@ const IndirectTaxFormView = (props) => {
         }, {
           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$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+      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),
@@ -3526,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",
@@ -3660,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;
@@ -4973,7 +5324,7 @@ function useDemoTaxAndCash(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$5 = {
+const style$6 = {
   ErrorAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-red-100)",
@@ -5164,8 +5515,8 @@ 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, _b, _c, _d;
   const { states, text, callbacks, slots } = props;
@@ -5183,7 +5534,7 @@ const TaxAndCashDashboardView = (props) => {
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
+          class: sheet$5.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -5196,7 +5547,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
+          class: sheet$5.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -5209,7 +5560,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
+          class: sheet$5.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -5222,7 +5573,7 @@ const TaxAndCashDashboardView = (props) => {
           }),
           alertType: "critical",
           icon: "exclamation-octagon",
-          class: sheet$4.classes.ErrorHoldAlertContainer,
+          class: sheet$5.classes.ErrorHoldAlertContainer,
         };
       case "HOLD":
         return {
@@ -5236,14 +5587,14 @@ const TaxAndCashDashboardView = (props) => {
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
+          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`,
@@ -5251,7 +5602,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`,
@@ -5261,12 +5612,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.ErrorAlertContainer },
+    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`,
@@ -5316,9 +5667,9 @@ 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.ErrorAlertContainer },
+        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),
@@ -5328,7 +5679,7 @@ const TaxAndCashDashboardView = (props) => {
           }, {
             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$4.classes.ErrorAlertContainer },
+      ((_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),
@@ -5343,49 +5694,49 @@ const TaxAndCashDashboardView = (props) => {
         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$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
+      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", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
-        index.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
-        index.h("div", { class: sheet$4.classes.BankingInformationContainer },
+        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 }, global.intl.formatMessage({
+          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$4.classes.TaxNumberContainer },
+          !states.notRegistered && (index.h("div", { class: sheet$5.classes.TaxNumberContainer },
             index.h("span", null, global.intl.formatMessage({
               id: `indirectTaxDetails`,
               defaultMessage: text.indirectTaxDetails,
@@ -5408,7 +5759,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 }),
@@ -6864,7 +7215,7 @@ const PHONE_EXTENSIONS = {
   },
 };
 
-const style$6 = {
+const style$7 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
@@ -6962,9 +7313,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;   
     }
@@ -6992,7 +7343,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,
@@ -7015,10 +7366,10 @@ 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),
@@ -7038,7 +7389,7 @@ 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),
@@ -7048,7 +7399,7 @@ const UserInfoFormView = (props) => {
         }, {
           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$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
+      (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),
@@ -7594,6 +7945,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;