@saasquatch/mint-components 1.12.0-11 → 1.12.0-13

package/dist/cjs/sqm-banking-info-form_16.cjs.entry.js

@@ -16,9 +16,9 @@ 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 sqmInvoiceTableView = require('./sqm-invoice-table-view-e92c557a.js');
 const keys = require('./keys-cff24974.js');
-const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
+const usePayoutStatus = require('./usePayoutStatus-5ac536a3.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
@@ -1146,6 +1146,8 @@ function useBankingInfoForm(props) {
         });
         return;
       }
+      // Fire form change event
+      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -1188,7 +1190,8 @@ function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
@@ -1221,6 +1224,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1554,23 +1558,41 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-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);
+    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: {
         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 +1603,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,
@@ -1686,6 +1708,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -1800,6 +1823,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) {
@@ -2680,6 +2705,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
@@ -3612,11 +3639,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"
@@ -3712,16 +3734,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 +3746,6 @@ const PayoutDetailsCard = class {
     const props = utils.getProps(this);
     return {
       ...props,
-      error: {
-        errorTitleText: this.errorTitleText,
-        errorDescriptionText: this.errorDescriptionText,
-      },
     };
   }
   render() {
@@ -4906,17 +4914,43 @@ function useDemoTaxAndCash(props) {
 }
 
 const style$5 = {
-  WarningAlertContainer: {
+  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",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  WarningHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      border: "none",
+      backgroundColor: "transparent",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
   },
-  HoldAlertContainer: {
+  ErrorHoldAlertContainer: {
+    marginLeft: "-20px",
     "&::part(base)": {
       border: "none",
       backgroundColor: "transparent",
     },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
   },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
@@ -5037,6 +5071,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5069,8 +5104,56 @@ const style$5 = {
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.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: text.verificationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$4.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: text.verificationRequiredInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$4.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: text.verificationReviewInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$4.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: text.verificationFailedInternalDescription,
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$4.classes.ErrorHoldAlertContainer,
+        };
+      case "HOLD":
+        return {
+          header: text.payoutHoldAlertHeader,
+          description: text.payoutHoldAlertDescription,
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$4.classes.WarningHoldAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
   const statusMap = {
     NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
@@ -5095,7 +5178,7 @@ const TaxAndCashDashboardView = (props) => {
       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$4.classes.ErrorAlertContainer },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       index.h("strong", null, global.intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
@@ -5147,39 +5230,28 @@ const TaxAndCashDashboardView = (props) => {
     index.h("div", null,
       index.h("style", { type: "text/css" }, styleString$4),
       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$4.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 },
+      ((_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 },
         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" })),
+      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$4.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)),
       states.status === "INACTIVE" && alertMap[states.status],
       index.h("div", null,
-        index.h("h3", null, text.bankingInformationSectionHeader),
+        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 },
           slots.payoutDetailsCardSlot,
@@ -5282,13 +5354,13 @@ const useTaxAndCashDashboard = (props) => {
   const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
   const setContext = index_module.Sn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
-  const [showVerification, setShowVerification] = stencilHooks_module.useState(false);
+  const { render, loading: veriffLoading, errors: veriffErrors, } = usePayoutStatus.useVeriffApp();
   const locale = index_module.Q();
   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.qn(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 +5385,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 +5416,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(),
   };
@@ -5540,6 +5619,30 @@ const TaxAndCashDashboard = class {
      * @uiWidget textArea
      */
     this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * @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 shortley.";
+    /**
+     * @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.";
+    /**
+     * @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.";
     /**
      * 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
@@ -5670,13 +5773,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 });

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -21,7 +21,7 @@ const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 require('./sqm-portal-container-view-990a85a3.js');
-const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
+const usePayoutStatus = require('./usePayoutStatus-5ac536a3.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1858,7 +1858,7 @@ function PayoutStatusAlertView(props) {
           icon: "info-circle",
           class: sheet$3.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
           description: text.verificationRequiredDescription,
@@ -1867,6 +1867,30 @@ function PayoutStatusAlertView(props) {
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
         };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: text.verificationRequiredInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: text.verificationReviewInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: text.verificationFailedInternalDescription,
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$3.classes.ErrorAlertContainer,
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
@@ -1880,15 +1904,12 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
-      case "VERIFICATION_NEEDED":
-        return (index.h("sl-button", { type: "default", loading: states.loading, 
-          //AL: TODO callback to open verification form
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -1899,11 +1920,7 @@ function PayoutStatusAlertView(props) {
       index.h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
       index.h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
       index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
-      getButton(states.status)),
-    index.h("sl-dialog", { noDismiss: true, class: sheet$3.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
-      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" }))));
+      getButton(states.status))));
 }
 
 const PayoutStatusAlert = class {
@@ -1933,14 +1950,39 @@ const PayoutStatusAlert = class {
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @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 shortley.";
+    /**
+     * @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.";
+    /**
+     * @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.";
     /**
      * @uiName Payout on hold alert header
      */
     this.holdHeader = "Your payouts and account are on hold";
     /**
      * @uiName Payout on hold alert description
+     * AL: TODO copy not finalized for support section
      */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our support team.";
     /**
      * @uiName Cash & Payouts Terms and Conditions url
      */
@@ -1963,7 +2005,6 @@ const PayoutStatusAlert = class {
     const props = index_module.isDemo()
       ? useDemoPayoutStatusAlert(this)
       : usePayoutStatus.usePayoutStatus(this);
-    console.log({ props });
     return index.h(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
@@ -1980,7 +2021,6 @@ function useDemoPayoutStatusAlert(props) {
     callbacks: {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
-      onCancel: () => console.log("hide"),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -12,14 +12,14 @@ const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
+const useVerificationEmail = require('./useVerificationEmail-2eb28c2a.js');
 
 const style = {
   Wrapper: {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",
@@ -158,7 +158,7 @@ function useWidgetCodeVerification(props) {
   const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
   const [validationError, setValidationError] = stencilHooks_module.useState(false);
   const [emailError, setEmailError] = stencilHooks_module.useState(false);
-  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
   stencilHooks_module.useEffect(() => {
     if (!codeRef)
       return;
@@ -178,7 +178,7 @@ function useWidgetCodeVerification(props) {
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-1);
+          e.target.value = input.slice(0, 1);
           return;
         }
         if (input.length > 1) {
@@ -249,7 +249,7 @@ function useWidgetCodeVerification(props) {
       codeWrapperRef: setCodeRef,
     },
     states: {
-      email,
+      email: verificationEmail,
       emailResent,
       resendError: sendErrors || verifyErrors,
       initialiseLoading: !initialized,

package/dist/cjs/sqm-email-verification.cjs.entry.js

@@ -10,7 +10,7 @@ const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
+const useVerificationEmail = require('./useVerificationEmail-2eb28c2a.js');
 
 const UpsertUserEmailMutation = index_module.dist.gql `
   mutation upsertUser($userInput: UserInput!) {