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

package/dist/cjs/{useVerificationEmail-6aacdb71.js → useVerificationEmail-2eb28c2a.js}

@@ -59,6 +59,7 @@ const SubmitImpactCodeMutation = index_module.dist.gql `
 // ! is done before calling any mutations
 function useVerificationEmail() {
   const userIdentity = index_module.K();
+  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
   const [hasEmails, setHasEmails] = stencilHooks_module.useState({
     participant: false,
     impact: false,
@@ -76,7 +77,7 @@ function useVerificationEmail() {
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
   const [initialized, setInitialized] = stencilHooks_module.useState(false);
   const initialise = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
       const lookup = await fetch({});
       if (!lookup || lookup instanceof Error)
@@ -85,6 +86,8 @@ function useVerificationEmail() {
         participant: !!((_a = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _a === void 0 ? void 0 : _a.email),
         impact: !!((_d = (_c = (_b = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.email),
       });
+      setVerificationEmail(((_g = (_f = (_e = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user) === null || _g === void 0 ? void 0 : _g.email) || ((_h = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _h === void 0 ? void 0 : _h.email) ||
+        null);
       setInitialized(true);
     }
     catch (e) {
@@ -155,6 +158,7 @@ function useVerificationEmail() {
   }, []);
   return {
     initialized,
+    verificationEmail,
     send: [
       sendVerificationEmail,
       { loading: sendLoading, errors: sendErrors },

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -8,7 +8,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/useCodeVerification.js

@@ -46,7 +46,7 @@ export function useWidgetCodeVerification(props) {
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
   const [emailError, setEmailError] = useState(false);
-  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -66,7 +66,7 @@ export 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) {
@@ -137,7 +137,7 @@ export function useWidgetCodeVerification(props) {
       codeWrapperRef: setCodeRef,
     },
     states: {
-      email,
+      email: verificationEmail,
       emailResent,
       resendError: sendErrors || verifyErrors,
       initialiseLoading: !initialized,

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-internal.js

@@ -14,6 +14,10 @@ const USER_LOOKUP = gql `
         accountId
         email
         emailVerified
+        managedIdentity {
+          email
+          emailVerified
+        }
       }
     }
   }
@@ -33,13 +37,15 @@ function useWidgetVerificationInternal() {
   const [fetch] = useLazyQuery(USER_LOOKUP);
   useEffect(() => {
     const checkUser = async () => {
-      var _a;
+      var _a, _b, _c;
       try {
         const res = await fetch({});
         if (!res || res instanceof Error)
           throw new Error();
         if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
           setContext(true);
+        else if ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified)
+          setContext(true);
       }
       catch (e) {
         console.error("Could not fetch user information:", e);

package/dist/collection/components/sqm-widget-verification/useVerificationEmail.js

@@ -57,6 +57,7 @@ const SubmitImpactCodeMutation = gql `
 // ! is done before calling any mutations
 export function useVerificationEmail() {
   const userIdentity = useUserIdentity();
+  const [verificationEmail, setVerificationEmail] = useState(null);
   const [hasEmails, setHasEmails] = useState({
     participant: false,
     impact: false,
@@ -74,7 +75,7 @@ export function useVerificationEmail() {
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
   const [initialized, setInitialized] = useState(false);
   const initialise = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
       const lookup = await fetch({});
       if (!lookup || lookup instanceof Error)
@@ -83,6 +84,8 @@ export function useVerificationEmail() {
         participant: !!((_a = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _a === void 0 ? void 0 : _a.email),
         impact: !!((_d = (_c = (_b = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.email),
       });
+      setVerificationEmail(((_g = (_f = (_e = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user) === null || _g === void 0 ? void 0 : _g.email) || ((_h = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _h === void 0 ? void 0 : _h.email) ||
+        null);
       setInitialized(true);
     }
     catch (e) {
@@ -153,6 +156,7 @@ export function useVerificationEmail() {
   }, []);
   return {
     initialized,
+    verificationEmail,
     send: [
       sendVerificationEmail,
       { loading: sendLoading, errors: sendErrors },

package/dist/collection/components/tax-and-cash/BankingForm.stories.js

@@ -21,6 +21,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -210,6 +210,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
@@ -247,7 +248,7 @@ const docusignFormProps = {
 };
 const dashboardProps = {
   states: {
-    showVerifyIdentity: false,
+    veriffLoading: false,
     payoutStatus: "DONE",
     canEditPayoutInfo: true,
     disabled: false,
@@ -768,7 +769,7 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BEN",
@@ -786,7 +787,7 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BENE",
@@ -804,7 +805,7 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         status: "INACTIVE",
@@ -823,7 +824,6 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -835,6 +835,7 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
         hasHold: false,
+        veriffLoading: false,
       },
     } }));
 };
@@ -843,7 +844,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -864,7 +865,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -885,7 +886,7 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_ACTIVE",
@@ -906,7 +907,7 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         documentType: "W9",
@@ -927,7 +928,7 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -949,7 +950,7 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -972,7 +973,7 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -995,7 +996,7 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -1012,10 +1013,62 @@ export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
-        payoutStatus: "VERIFICATION_NEEDED",
-        showVerifyIdentity: true,
-        showIdentityVerificationDialog: true,
-        identiyRequired: true,
+        payoutStatus: "VERIFICATION:REQUIRED",
+        veriffLoading: false,
+        canEditPayoutInfo: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: false,
+        hasHold: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardIdentityVerifcationRequiredInternal = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        payoutStatus: "VERIFICATION:INTERNAL",
+        veriffLoading: false,
+        canEditPayoutInfo: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: false,
+        hasHold: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardIdentityVerifcationReviewInternal = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        payoutStatus: "VERIFICATION:REVIEW",
+        veriffLoading: false,
+        canEditPayoutInfo: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        notRegistered: true,
+        showNewFormDialog: false,
+        hasHold: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardIdentityVerifcationFailedInternal = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        payoutStatus: "VERIFICATION:FAILED",
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -1033,7 +1086,7 @@ export const TaxAndCashDashboardNewTaxForm = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -1051,7 +1104,7 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: true,
         status: "ACTIVE",
@@ -1071,7 +1124,7 @@ export const TaxAndCashDashboardLoading = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1090,7 +1143,7 @@ export const TaxAndCashDashboardWithLoadingError = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         disabled: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
@@ -1110,7 +1163,7 @@ export const TaxAndCashDashboardWithGeneralError = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1134,7 +1187,7 @@ export const TaxAndCashDashboardDisabled = () => {
       ...dashboardProps,
       states: {
         payoutStatus: "DONE",
-        showVerifyIdentity: false,
+        veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: true,
         status: "ACTIVE",

package/dist/collection/components/tax-and-cash/eventKeys.js

@@ -0,0 +1 @@
+export const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js

@@ -10,6 +10,7 @@ import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
@@ -308,25 +309,45 @@ export class BankingInfoForm {
       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 (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
+    const sheet = createStyleSheet(style);
     return (h(Host, null,
+      props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide },
+        h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null,
       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: (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: (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,
             }),
           })),
-            h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+            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) => {
@@ -337,14 +358,14 @@ export class BankingInfoForm {
             }), (_f = (_e = props.states) === null || _e === void 0 ? void 0 : _e.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
           paymentMethodSlot: (h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
-          paymentThresholdSelectSlot: (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: (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) => (h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
-          paymentFixedDaySelectSlot: (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: (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,
@@ -353,7 +374,7 @@ export class BankingInfoForm {
           })),
             h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText),
             h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
-          paypalInputSlot: (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: (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,
@@ -1500,7 +1521,7 @@ export class BankingInfoForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BankingInfoFormViewProps>",
-        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1611,6 +1632,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -5,6 +5,7 @@ import JSONPointer from "jsonpointer";
 import { intl } from "../../../global/global";
 import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { VERIFICATION_EVENT_KEY } from "../../sqm-widget-verification/keys";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {
   USD: "USD20.00",
@@ -244,6 +245,8 @@ export function useBankingInfoForm(props) {
         });
         return;
       }
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -286,7 +289,8 @@ export function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -319,6 +323,7 @@ export function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,

package/dist/collection/components/tax-and-cash/sqm-docusign-form/useDocusignForm.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const GET_TAX_DOCUMENT = gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -101,6 +102,8 @@ export 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(TAX_FORM_UPDATED_EVENT_KEY));
       setShowExitButton(true);
     }
     catch (e) {

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js

@@ -5,6 +5,7 @@ import JSONPointer from "jsonpointer";
 import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { getCountryObj, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
@@ -169,6 +170,8 @@ export 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 = 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(TAX_FORM_UPDATED_EVENT_KEY));
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories.js

@@ -9,13 +9,6 @@ export const Loading = () => {
       },
     } }));
 };
-export const Error = () => {
-  return (h("sqm-payout-details-card", { demoData: {
-      states: {
-        error: true,
-      },
-    } }));
-};
 export const NextPayout = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -166,11 +166,6 @@ export function PayoutDetailsCardView(props) {
   });
   return (h("div", { class: classes.Container },
     h("style", { type: "text/css" }, styleString),
-    states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", class: classes.Alert, type: "warning", open: true },
-      h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-      h("div", { class: classes.AlertContent },
-        h("b", null, text.error.errorTitleText),
-        text.error.errorDescriptionText))),
     states.loading ? (renderLoadingSkeleton()) : (h("div", { class: classes.CardContainer },
       h("div", { class: classes.StatusContainer },
         h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"