@saasquatch/mint-components 1.15.0-99 → 1.15.0

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

@@ -2,9 +2,9 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Host, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { getProps } from "../../../utils/utils";
 import { PayoutDetailsCardView } from "./sqm-payout-details-card-view";
 import { usePayoutDetailsCard } from "./usePayoutDetailsCard";
+import { getProps } from "../../../utils/utils";
 /**
  * @uiName Payout Details Card
  * @exampleGroup Tax and Cash Components
@@ -31,10 +31,6 @@ export class PayoutDetailsCard {
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
-    /**
-     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
-     */
-    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -138,27 +134,6 @@ export class PayoutDetailsCard {
       "reflect": false,
       "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
     },
-    "stateController": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
-            "name": "componentState"
-          }],
-        "text": ""
-      },
-      "attribute": "state-controller",
-      "reflect": false,
-      "defaultValue": "\"{}\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

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

@@ -1,7 +1,7 @@
-import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
-import { USER_QUERY_NAMESPACE } from "../data";
+import { USER_QUERY_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { useParentQueryValue } from "@saasquatch/component-boilerplate";
 export function usePayoutDetailsCard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { data, loading } = useParentQueryValue(USER_QUERY_NAMESPACE);

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.js

@@ -13,6 +13,7 @@ export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: {
 export const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:INTERNAL" } } }));
 export const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REVIEW" } } }));
 export const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:FAILED" } } }));
+export const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "OVER_W9_THRESHOLD" } } }));
 export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
 export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));
 export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
 import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
 const style = {
   SkeletonOne: {
     width: "50%",
@@ -10,6 +10,33 @@ const style = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  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-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
   Dialog: {
     "&::part(panel)": {
       height: "600px",
@@ -25,13 +52,6 @@ const style = {
     "&::part(footer)": {},
   },
 };
-const vanillaStyle = `
-  a {
-    color: inherit;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
@@ -43,6 +63,8 @@ export function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -51,6 +73,8 @@ export function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
+          icon: "info-circle",
+          class: sheet.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -63,6 +87,8 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -74,6 +100,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -85,6 +113,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -96,6 +126,53 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet.classes.ErrorAlertContainer,
+        };
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") {
+          return {
+            header: text.w9RequiredHeader,
+            description: intl.formatMessage({
+              id: "w9RequiredDescription",
+              defaultMessage: text.w9RequiredDescription,
+            }, {
+              termsAndConditions: (h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
+            }),
+            buttonText: text.w9RequiredButtonText,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+            class: sheet.classes.WarningAlertContainer,
+          };
+        }
+        else {
+          return {
+            header: text.holdHeader,
+            description: intl.formatMessage({
+              id: "holdDescription",
+              defaultMessage: text.holdDescription,
+            }, {
+              supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+            }),
+            buttonText: null,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+            class: sheet.classes.WarningAlertContainer,
+          };
+        }
+      case "ACCOUNT_REVIEW":
+        return {
+          header: text.accountReviewHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.accountReviewDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -108,6 +185,8 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -115,16 +194,18 @@ export function PayoutStatusAlertView(props) {
   }
   function getButton(status) {
     switch (status) {
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
+          return;
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        // Demo case
+        h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h("div", { style: { paddingTop: "10px" } },
-          h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h("div", { style: { paddingTop: "10px" } },
-          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
         // Demo case
-        h("div", { style: { paddingTop: "10px" } },
-          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
+        h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION:REQUIRED":
-        return (h("div", { style: { paddingTop: "10px" } },
-          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
+        return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -138,9 +219,9 @@ export function PayoutStatusAlertView(props) {
   }
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("style", { type: "text/css" }, vanillaStyle),
-    h("sqm-form-message", { type: alertDetails.alertType },
-      h("p", { part: "alert-title" }, alertDetails.header),
-      h("p", { part: "alert-description" }, alertDetails.description),
+    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
+      h("sl-icon", { slot: "icon", name: alertDetails.icon }),
+      h("strong", null, alertDetails.header),
+      h("p", { class: sheet.classes.AlertDescriptionText }, alertDetails.description),
       getButton(states.status))));
 }

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -1,13 +1,12 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
 import { usePayoutStatus } from "./usePayoutStatus";
-import { isDemo } from "@saasquatch/component-boilerplate";
 /**
  * @uiName Payout Status Alert
- * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Tax and Cash
  * @example Payout Status Alert - <sqm-payout-status-alert></sqm-payout-status-alert>
  */
@@ -61,6 +60,26 @@ export class PayoutStatusAlert {
      * @uiName Verification failed internal alert description
      */
     this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Account review alert header
+     */
+    this.accountReviewHeader = "Your account is under review";
+    /**
+     * @uiName Account review alert description
+     */
+    this.accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName W-9 payment threshold alert header
+     */
+    this.w9RequiredHeader = "Your next payout is on hold";
+    /**
+     * @uiName W-9 payment threshold alert description
+     */
+    this.w9RequiredDescription = "You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form.";
+    /**
+     * @uiName W-9 payment threshold alert button text
+     */
+    this.w9RequiredButtonText = "Submit W-9";
     /**
      * @uiName Payout on hold alert header
      */
@@ -72,11 +91,15 @@ export class PayoutStatusAlert {
     /**
      * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
      */
-    this.cashPayoutsPageUrl = "/cash";
+    this.cashPayoutsPageUrl = "/taxAndCash";
     /**
      * @uiName Support link text
      */
     this.supportLink = "support team";
+    /**
+     * @uiName Terms and Conditions text
+     */
+    this.termsAndConditions = "Terms and Conditions";
     /**
      * @uiName Error header
      */
@@ -352,6 +375,111 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.\""
     },
+    "accountReviewHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Account review alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "account-review-header",
+      "reflect": false,
+      "defaultValue": "\"Your account is under review\""
+    },
+    "accountReviewDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Account review alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "account-review-description",
+      "reflect": false,
+      "defaultValue": "\"This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.\""
+    },
+    "w9RequiredHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W-9 payment threshold alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-header",
+      "reflect": false,
+      "defaultValue": "\"Your next payout is on hold\""
+    },
+    "w9RequiredDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W-9 payment threshold alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-description",
+      "reflect": false,
+      "defaultValue": "\"You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form.\""
+    },
+    "w9RequiredButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W-9 payment threshold alert button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "w-9-required-button-text",
+      "reflect": false,
+      "defaultValue": "\"Submit W-9\""
+    },
     "holdHeader": {
       "type": "string",
       "mutable": false,
@@ -413,7 +541,7 @@ export class PayoutStatusAlert {
       },
       "attribute": "cash-payouts-page-url",
       "reflect": false,
-      "defaultValue": "\"/cash\""
+      "defaultValue": "\"/taxAndCash\""
     },
     "supportLink": {
       "type": "string",
@@ -436,6 +564,27 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"support team\""
     },
+    "termsAndConditions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Terms and Conditions text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "terms-and-conditions",
+      "reflect": false,
+      "defaultValue": "\"Terms and Conditions\""
+    },
     "errorHeader": {
       "type": "string",
       "mutable": false,
@@ -483,7 +632,7 @@ export class PayoutStatusAlert {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
+        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; enforceUsTaxComplianceOption?: EnforceUsTaxComplianceOption; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.js

@@ -22,31 +22,43 @@ const GET_USER_STATUS = gql `
     }
   }
 `;
+const GET_TAX_SETTING = gql `
+  query getTenantSettings {
+    tenantSettings {
+      enforceUsTaxCompliance
+    }
+  }
+`;
 export function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
-  if (((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("NEW_PAYEE_REVIEW"))) {
-    return "DONE";
-  }
-  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REQUIRED"))
+  const currentTaxDocument = (_f = (_e = data.user.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.currentTaxDocument;
+  if (((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("NO_W9_DOCUMENT")) && !currentTaxDocument)
+    return "OVER_W9_THRESHOLD";
+  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if ((_l = account.holdReasons) === null || _l === void 0 ? void 0 : _l.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
+  if ((_m = account.holdReasons) === null || _m === void 0 ? void 0 : _m.includes("NEW_PAYEE_REVIEW"))
+    return "ACCOUNT_REVIEW";
   if (account.hold)
     return "HOLD";
   return "DONE";
 }
 export function usePayoutStatus(props) {
+  var _a;
   const { type } = getEnvironmentSDK();
   const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
+  const { data: taxSettingRes } = useQuery(GET_TAX_SETTING, {});
   const { render, loading: veriffLoading, errors: veriffErrors, } = useVeriffApp();
   const [status, setStatus] = useState(undefined);
+  const enforceUsTaxComplianceOption = (_a = taxSettingRes === null || taxSettingRes === void 0 ? void 0 : taxSettingRes.tenantSettings) === null || _a === void 0 ? void 0 : _a.enforceUsTaxCompliance;
   useEffect(() => {
     if (!data)
       return;
@@ -62,17 +74,29 @@ export function usePayoutStatus(props) {
       window.removeEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
     };
   }, []);
+  const onTermsClick = () => {
+    let url = props.cashPayoutsPageUrl;
+    if (url.includes("#"))
+      url = url.split("#")[0];
+    if (status === "INFORMATION_REQUIRED")
+      url += "#1";
+    else if (status === "OVER_W9_THRESHOLD" &&
+      enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9")
+      url += "#3";
+    window.history.pushState(null, "", url);
+  };
   return {
     states: {
       loading,
       veriffLoading,
       status,
       error: !!errors,
+      enforceUsTaxComplianceOption,
     },
     data: { type },
     text: props.getTextProps(),
     callbacks: {
-      onTermsClick: () => window.open(props.cashPayoutsPageUrl, "_blank").focus(),
+      onTermsClick,
       onClick: render,
     },
   };

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/ErrorView.js

@@ -1,6 +1,30 @@
 import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+const styles = {
+  Alert: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-danger-100)",
+      border: "1px solid var(--sl-color-danger-200)",
+      padding: "0 16px",
+    },
+    "& sl-icon": {
+      margin: 0,
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+      margin: 0,
+    },
+  },
+};
 export const ErrorView = (props) => {
-  return (h("sqm-form-message", { type: "error" },
-    h("p", { part: "alert-title" }, props.loadingErrorAlertHeader),
-    h("p", { part: "alert-description" }, props.loadingErrorAlertDescription)));
+  const sheet = createStyleSheet(styles);
+  const styleString = sheet.toString();
+  const { classes } = sheet;
+  return (h("div", null,
+    h("style", null, styleString),
+    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
+      h("strong", null, props.loadingErrorAlertHeader),
+      h("br", null),
+      props.loadingErrorAlertDescription)));
 };