@saasquatch/mint-components 1.12.0-5 → 1.12.0-7

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

@@ -1808,7 +1808,7 @@ const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
   var _a, _b, _c, _d, _e;
-  const { text, states } = props;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
   }
@@ -1821,7 +1821,7 @@ function PayoutStatusAlertView(props) {
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
           class: sheet$3.classes.InfoAlertContainer,
@@ -1852,9 +1852,11 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+        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 }, text.verificationRequiredButtonText));
+        return (index.h("sl-button", { type: "default", loading: states.loading, 
+          //AL: TODO callback to open verification form
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -1865,7 +1867,10 @@ 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))));
+      getButton(states.status)),
+    index.h("sl-dialog", { 
+      // class={sheet.classes.Dialog}
+      open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel }, "AL: TODO add IFRAME URL")));
 }
 
 const GET_USER_STATUS = index$1.dist.gql `
@@ -1887,8 +1892,10 @@ const GET_USER_STATUS = index$1.dist.gql `
   }
 `;
 function usePayoutStatus(props) {
+  const { type } = index_module.getEnvironmentSDK();
   const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
   const [status, setStatus] = stencilHooks_module.useState(undefined);
+  const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
   stencilHooks_module.useEffect(() => {
     if (!data)
       return;
@@ -1912,7 +1919,16 @@ function usePayoutStatus(props) {
     window.addEventListener("sqm:tax-form-updated", cb);
     return () => window.removeEventListener("sqm:tax-form-updated", cb);
   }, []);
-  return { states: { loading, status }, text: props.getTextProps() };
+  return {
+    states: { loading, status, showVerifyIdentity: showDialog },
+    data: { type },
+    text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
+      onClick: () => setShowDialog(true),
+      onCancel: () => setShowDialog(false),
+    },
+  };
 }
 
 const PayoutStatusAlert = class {
@@ -1950,6 +1966,10 @@ const PayoutStatusAlert = class {
      * @uiName Payout on hold alert description
      */
     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}.";
+    /**
+     * @uiName Cash & Payouts Terms and Conditions url
+     */
+    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
     stencilHooks_module.h(this);
   }
   disconnectedCallback() { }
@@ -1968,8 +1988,15 @@ function useDemoPayoutStatusAlert(props) {
     states: {
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+      onCancel: () => console.log("hide"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

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

@@ -13,7 +13,7 @@ const index$1 = require('./index-56d1fa5b.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-33465f36.js');
+const useVerificationEmail = require('./useVerificationEmail-35aea294.js');
 
 const style = {
   Wrapper: {
@@ -134,43 +134,22 @@ function WidgetCodeVerificationView(props) {
           index.h("sl-input", { class: inputClass, name: "code" }),
           index.h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+        index.h("sl-button", { class: sheet.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.classes.FooterContainer },
         index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
 }
 
-// TODO: Move to component-boilerplate
 const VerifyEmailWithCodeMutation = index$1.dist.gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
       verifiedEmail
       accessKey
     }
   }
 `;
-function useCodeVerificationMutation() {
-  const user = index_module.K();
-  const [request, { loading, data, errors }] = index_module.xe(VerifyEmailWithCodeMutation);
-  const verifyUserWithCodeMutation = async (code) => {
-    try {
-      const result = await request({
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-        code,
-      });
-      if (result instanceof Error || !result)
-        throw new Error();
-      return result;
-    }
-    catch (e) {
-      console.error("Failed to verify user", e);
-      return null;
-    }
-  };
-  return [verifyUserWithCodeMutation, { loading, data, errors }];
-}
 function useWidgetCodeVerification(props) {
   const host = stencilHooks_module.l();
   const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
@@ -180,9 +159,10 @@ function useWidgetCodeVerification(props) {
   const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
   const [validationError, setValidationError] = stencilHooks_module.useState(false);
   const [emailError, setEmailError] = stencilHooks_module.useState(false);
-  // TODO: Need to handle error states for these errors
-  const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] = useCodeVerificationMutation();
-  const [request, { loading: resendLoading, data, errors: resendErrors }] = useEmailVerification.useVerificationEmailMutation();
+  // // TODO: Need to handle error states for these errors
+  // const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] =
+  //   useCodeVerificationMutation();
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
   stencilHooks_module.useEffect(() => {
     if (!codeRef)
       return;
@@ -198,7 +178,7 @@ function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
@@ -208,8 +188,10 @@ function useWidgetCodeVerification(props) {
         if (input.length > 1) {
           const rest = input.slice(1);
           e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
         }
         codeElements[idx + 1].focus();
       });
@@ -220,7 +202,10 @@ function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    const result = await request();
+    // 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;
@@ -240,16 +225,13 @@ function useWidgetCodeVerification(props) {
     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);
-    // Only 123456 passes for a valid code rn
-    const res = await verifyUser(code);
-    if (res) {
-      const event = new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
-        detail: { token: res.verifyUserEmail.accessKey },
-        composed: true,
-        bubbles: true,
-      });
-      host.dispatchEvent(event);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
       reset();
     }
     else {
@@ -257,12 +239,15 @@ function useWidgetCodeVerification(props) {
     }
   };
   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,
@@ -270,8 +255,9 @@ function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      resendError: !!(resendErrors === null || resendErrors === void 0 ? void 0 : resendErrors.message) || emailError,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {
@@ -351,7 +337,7 @@ function useDemoWidgetCodeVerification(props) {
     },
     callbacks: {
       resendEmail: async () => setEmailResent(true),
-      submitCode: async () => setVerifiedContext({ token: "TOKEN" }),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -2,16 +2,138 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
+const index$1 = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
 const index_module = require('./index.module-236d0403.js');
 const cjs = require('./cjs-1066ec21.js');
 const JSS = require('./JSS-8503a151.js');
-require('./index-56d1fa5b.js');
+const index = require('./index-56d1fa5b.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-33465f36.js');
+const useVerificationEmail = require('./useVerificationEmail-35aea294.js');
+
+const UpsertUserEmailMutation = index.dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    user(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = index.dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = index_module.K();
+  const [request, { loading: loading, data, errors }] = index_module.xe(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+          email,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not set email on user", e);
+      return undefined;
+    }
+  };
+  return [
+    upsertUserEmail,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = index_module.Mn(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = stencilHooks_module.useState(false);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [mutationError, setMutationError] = stencilHooks_module.useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail.useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = stencilHooks_module.useState(true);
+  const { data, loading: initialLoading } = index_module.En(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  stencilHooks_module.useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  stencilHooks_module.useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
+    else {
+      // This is used to let the code verification widget know an email was already sent
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+    setLoading(false);
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}
 
 const style = {
   Wrapper: {
@@ -76,35 +198,35 @@ const styleString = sheet.toString();
 function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
-    return (index.h("div", { class: sheet.classes.Wrapper },
-      index.h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
-      index.h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
-      index.h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+    return (index$1.h("div", { class: sheet.classes.Wrapper },
+      index$1.h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+      index$1.h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
+      index$1.h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
   };
-  return (index.h("div", { part: "sqm-base" },
-    index.h("style", { type: "text/css" },
+  return (index$1.h("div", { part: "sqm-base" },
+    index$1.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.sendCodeError && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      index.h("b", null, text.sendCodeErrorHeader),
+    states.sendCodeError && (index$1.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      index$1.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index$1.h("b", null, text.sendCodeErrorHeader),
       text.sendCodeErrorDescription)),
-    states.initialLoading ? (renderLoadingSkeleton()) : (index.h("div", { class: sheet.classes.Wrapper },
-      index.h(sqmTextSpanView.TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
-      index.h("sl-form", { "onSl-submit": callbacks.submitEmail },
-        index.h("div", { class: sheet.classes.InputsContainer },
-          index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
+    states.initialLoading ? (renderLoadingSkeleton()) : (index$1.h("div", { class: sheet.classes.Wrapper },
+      index$1.h(sqmTextSpanView.TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
+      index$1.h("sl-form", { "onSl-submit": callbacks.submitEmail },
+        index$1.h("div", { class: sheet.classes.InputsContainer },
+          index$1.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
             ? {
               class: sheet.classes.ErrorInput,
               helpText: text.emailValidationErrorText,
             }
             : {}))),
-          index.h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
+          index$1.h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
 }
 
 const WidgetEmailVerification = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    index$1.registerInstance(this, hostRef);
     /**
      * @uiName Verify email widget header text
      */
@@ -138,8 +260,8 @@ const WidgetEmailVerification = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoWidgetEmailVerification(this)
-      : useEmailVerification.useWidgetEmailVerification(this);
-    return index.h(WidgetEmailVerificationView, Object.assign({}, props));
+      : useWidgetEmailVerification(this);
+    return index$1.h(WidgetEmailVerificationView, Object.assign({}, props));
   }
 };
 function useDemoWidgetEmailVerification(props) {

package/dist/cjs/{sqm-invoice-table-view-dbba9bb4.js → sqm-invoice-table-view-e530775f.js}

@@ -714,6 +714,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
@@ -761,6 +762,7 @@ const dashboardProps = {
     indirectTaxNumber: "123456",
     indirectTaxType: "VAT",
     showNewFormDialog: false,
+    hasHold: false,
   },
   slots: {
     payoutDetailsCardSlot: (index.h("sqm-payout-details-card", { demoData: {
@@ -1275,6 +1277,7 @@ const TaxAndCashDashboardActiveW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1290,6 +1293,7 @@ const TaxAndCashDashboardActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1306,6 +1310,7 @@ const TaxAndCashDashboardNotActiveW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1323,6 +1328,7 @@ const TaxAndCashDashboardNotVerifiedW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1341,6 +1347,7 @@ const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1359,6 +1366,7 @@ const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1377,6 +1385,7 @@ const TaxAndCashDashboardNotActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         country: "United Kingdom",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1395,6 +1404,7 @@ const TaxAndCashDashboardNoFormNeeded = () => {
         indirectTaxNumber: "123456",
         indirectTaxType: "GST",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1414,6 +1424,7 @@ const TaxAndCashDashboardIndirectTaxCanada = () => {
         indirectTaxType: "GST",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1434,6 +1445,7 @@ const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
         indirectTaxNumber: "123456",
         qstNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1454,6 +1466,7 @@ const TaxAndCashDashboardIndirectTaxSpain = () => {
         indirectTaxNumber: "123456",
         subRegionTaxNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1469,6 +1482,7 @@ const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1486,6 +1500,7 @@ const TaxAndCashDashboardIdentityVerifcationRequired = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1501,6 +1516,25 @@ const TaxAndCashDashboardNewTaxForm = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: true,
+        hasHold: false,
+      },
+    } }));
+};
+const TaxAndCashDashboardPayoutsOnHold = () => {
+  return (index.h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        canEditPayoutInfo: true,
+        disabled: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        indirectTaxNumber: "123456",
+        country: "Slovania",
+        showNewFormDialog: false,
+        hasHold: true,
       },
     } }));
 };
@@ -1517,6 +1551,7 @@ const TaxAndCashDashboardLoading = () => {
         noFormNeeded: false,
         loading: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1534,6 +1569,7 @@ const TaxAndCashDashboardWithLoadingError = () => {
         loading: true,
         loadingError: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1552,6 +1588,7 @@ const TaxAndCashDashboardWithGeneralError = () => {
         indirectTaxType: "VAT",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
         errors: {
           general: true,
         },
@@ -1572,6 +1609,7 @@ const TaxAndCashDashboardDisabled = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1640,6 +1678,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
   TaxAndCashDashboardIndirectTaxNotRegistered: TaxAndCashDashboardIndirectTaxNotRegistered,
   TaxAndCashDashboardIdentityVerifcationRequired: TaxAndCashDashboardIdentityVerifcationRequired,
   TaxAndCashDashboardNewTaxForm: TaxAndCashDashboardNewTaxForm,
+  TaxAndCashDashboardPayoutsOnHold: TaxAndCashDashboardPayoutsOnHold,
   TaxAndCashDashboardLoading: TaxAndCashDashboardLoading,
   TaxAndCashDashboardWithLoadingError: TaxAndCashDashboardWithLoadingError,
   TaxAndCashDashboardWithGeneralError: TaxAndCashDashboardWithGeneralError,