@saasquatch/mint-components 2.0.3 → 2.0.4-10

package/dist/collection/components/sqm-skeleton/sqm-skeleton.js

@@ -0,0 +1,90 @@
+import { h, Component, State, Prop } from "@stencil/core";
+export class Skeleton {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Height (in pixels or %)
+     */
+    this.height = "100%";
+    /**
+     * @uiName Width (in pixels or %)
+     */
+    this.width = "100%";
+    this.vanillaStyle = `
+  sl-skeleton::part(indicator) {
+    --sheen-color: var(--sqm-skeleton-animation-background);
+    --color: var(--sqm-skeleton-background);
+    border-radius: var(--sqm-border-radius-normal);
+  }
+
+  sl-skeleton::part(base) {
+    height:${this.height};
+    width:${this.width};
+  }
+
+  :host{
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+  `;
+  }
+  disconnectedCallback() { }
+  render() {
+    console.log("This is the height", this.height);
+    return (h("div", null,
+      h("style", { type: "text/css" }, this.vanillaStyle),
+      h("sl-skeleton", null)));
+  }
+  static get is() { return "sqm-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Height (in pixels or %)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Width (in pixels or %)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -22,6 +22,10 @@ export const Netflix = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#272727",
+      animationBackground: "#E50914",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -113,6 +117,10 @@ export const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
+    loadingSkeleton: {
+      background: "hsl(240 4.8% 95.9%)",
+      animationBackground: "#FF9900",
+    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -201,6 +209,10 @@ export const Spotify = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#282928",
+      animationBackground: "#1ed760",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -100,6 +100,7 @@ import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
 import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
 import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
+import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -204,6 +205,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -217,11 +217,11 @@ export function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -231,9 +231,9 @@ export function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0

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

@@ -189,9 +189,12 @@ export function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: sheet.classes.Wrapper },
-      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "34px", width: "30%" }),
+      h("sqm-skeleton", { height: "24px", width: "15%" }),
+      h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: true, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)));
   };
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" },

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

@@ -31,6 +31,7 @@ const stepOneProps = {
     },
   },
   data: {
+    partnerData: {},
     regionLabelEnum: "STATE",
     regions: [],
     phoneCountries: [

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

@@ -125,10 +125,6 @@ export function useBankingInfoForm(props) {
   const paymentMethodChecked = !hasPayPal
     ? "toBankAccount"
     : _paymentMethodChecked;
-  useEffect(() => {
-    // reset redirect hash
-    window.location.hash = "";
-  }, []);
   useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (!userData)
@@ -300,6 +296,7 @@ export function useBankingInfoForm(props) {
     }
     await runMutation(formData, token);
     setShowModal(false);
+    window.location.hash = "";
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -329,7 +326,15 @@ export function useBankingInfoForm(props) {
       setBankCountry: updateBankCountry,
       setPaymentMethodChecked,
       setPaymentScheduleChecked,
-      onBack: () => setStep("/dashboard"),
+      onBack: () => {
+        // return to dashboard
+        if (window.location.hash) {
+          window.location.hash = "";
+        }
+        else {
+          setStep("/dashboard");
+        }
+      },
       setCountrySearch,
       onVerification,
       onVerificationHide: () => onVerification(null),

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

@@ -115,11 +115,17 @@ export function useDocusignForm(props) {
     }
   };
   const progressStep = () => {
-    setStep(context.overrideNextStep ||
-      !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
-      !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
-      ? "/dashboard"
-      : "/4");
+    // return to dashboard
+    if (window.location.hash) {
+      window.location.hash = "";
+    }
+    else {
+      setStep(context.overrideNextStep ||
+        !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
+        !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
+        ? "/dashboard"
+        : "/4");
+    }
   };
   const allLoading = userLoading || documentLoading || loading;
   return {

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

@@ -157,7 +157,7 @@ export const IndirectTaxFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (h("sqm-form-message", { type: "info" },
+      states.isPartner && (h("sqm-form-message", { loading: states.loading, type: "info" },
         h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         intl.formatMessage({
           id: "isPartnerAlertDescription",

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

@@ -6,7 +6,7 @@ import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAME
 import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { getCountryObj, validTaxDocument } from "../utils";
-const CONNECT_PARTNER = gql `
+export const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
       success
@@ -111,8 +111,51 @@ export function useIndirectTaxForm(props) {
       console.error("Could not detect select change");
     setFormState((p) => ({ ...p, [field]: value }));
   };
-  const onSubmit = async (event) => {
+  async function connectPartner(formData) {
     var _a, _b, _c, _d, _e;
+    const vars = {
+      user: {
+        id: user.id,
+        accountId: user.accountId,
+      },
+      firstName: userForm.firstName,
+      lastName: userForm.lastName,
+      countryCode: userForm.countryCode,
+      currency: userForm.currency,
+      address: userForm.address,
+      city: userForm.city,
+      state: userForm.state,
+      postalCode: userForm.postalCode,
+      phoneNumber: userForm.phoneNumber,
+      phoneNumberCountryCode: userForm.phoneNumberCountryCode,
+      indirectTaxCountryCode: formData.selectedRegion,
+      indirectTaxRegion: formData.province || formData.subRegion,
+      indirectTaxId: formData.indirectTaxNumber,
+      additionalTaxId: formData.qstNumber,
+      withholdingTaxId: formData.subRegionTaxNumber,
+    };
+    const result = await connectImpactPartner({
+      vars,
+    });
+    if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
+      throw new Error();
+    if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
+      // Output backend errors to console for now
+      console.error("Failed to create Impact connection: ", result.createImpactConnection.validationErrors);
+      throw new Error();
+    }
+    await refetch();
+    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));
+    return {
+      resultPublisher,
+      hasValidCurrentDocument,
+    };
+  }
+  const onSubmit = async (event) => {
     if (!option) {
       setErrors({ taxDetails: true });
       return;
@@ -138,44 +181,7 @@ export function useIndirectTaxForm(props) {
     }
     setLoading(true);
     try {
-      const vars = {
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-        firstName: userForm.firstName,
-        lastName: userForm.lastName,
-        countryCode: userForm.countryCode,
-        currency: userForm.currency,
-        address: userForm.address,
-        city: userForm.city,
-        state: userForm.state,
-        postalCode: userForm.postalCode,
-        phoneNumber: userForm.phoneNumber,
-        phoneNumberCountryCode: userForm.phoneNumberCountryCode,
-        indirectTaxCountryCode: formData.selectedRegion,
-        indirectTaxRegion: formData.province || formData.subRegion,
-        indirectTaxId: formData.indirectTaxNumber,
-        additionalTaxId: formData.qstNumber,
-        withholdingTaxId: formData.subRegionTaxNumber,
-      };
-      const result = await connectImpactPartner({
-        vars,
-      });
-      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
-        throw new Error();
-      if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
-        // Output backend errors to console for now
-        console.error("Failed to create Impact connection: ", result.createImpactConnection
-          .validationErrors);
-        throw new Error();
-      }
-      await refetch();
-      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));
+      const { resultPublisher, hasValidCurrentDocument } = await connectPartner(formData);
       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/sqm-payout-details-card-view.js

@@ -138,11 +138,11 @@ export function PayoutDetailsCardView(props) {
   const { states, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: classes.CardContainer },
-      h("div", { class: classes.StatusContainer },
-        h("sl-skeleton", { class: classes.SkeletonOne }),
-        h("sl-skeleton", { class: classes.SkeletonTwo })),
-      h("sl-skeleton", { class: classes.SkeletonThree }),
-      h("sl-skeleton", { class: classes.SkeletonOne })));
+      h("div", { class: classes.StatusContainer, style: { display: "block" } },
+        h("sqm-skeleton", { style: { marginBottom: "var(--sl-spacing-medium)" }, width: "25%", height: "16px" }),
+        h("sqm-skeleton", { width: "25%", height: "24px" })),
+      h("sqm-skeleton", { width: "50%", height: "34px" }),
+      h("sqm-skeleton", { width: "25%", height: "16px" })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";

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

@@ -17,3 +17,16 @@ export const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData
 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 } } }));
+export const NewPayeeReview = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "NEW_PAYEE_REVIEW" } } }));
+export const PaymentHoldOnChange = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
+export const BeneficiaryNameInvalid = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "BENEFICIARY_NAME_INVALID" },
+  } }));
+export const BeneficiaryNameMismatch = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "BENEFICIARY_NAME_MISMATCH" },
+  } }));
+export const BankTaxNameMismatch = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "BANK_TAX_NAME_MISMATCH" } } }));
+export const WithdrawalSettingsInvalid = () => (h("sqm-payout-status-alert", { demoData: {
+    states: { ...defaultProps, status: "WITHDRAWAL_SETTINGS_INVALID" },
+  } }));
+export const PaymentReturned = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "PAYMENT_RETURNED" } } }));

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

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 const style = {
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+    flexWrap: "wrap",
+  },
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -126,7 +132,7 @@ export function PayoutStatusAlertView(props) {
             icon: "exclamation-triangle",
           };
         }
-      case "ACCOUNT_REVIEW":
+      case "NEW_PAYEE_REVIEW":
         return {
           header: text.accountReviewHeader,
           description: intl.formatMessage({
@@ -139,6 +145,92 @@ export function PayoutStatusAlertView(props) {
           alertType: "warning",
           icon: "exclamation-triangle",
         };
+      case "PAYMENT_HOLD_ON_CHANGE":
+        return {
+          header: text.paymentHoldOnChangeHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentHoldOnChangeDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_INVALID":
+        return {
+          header: text.beneficiaryNameInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameInvalidDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_MISMATCH":
+        return {
+          header: text.beneficiaryNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameMismatchDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BANK_TAX_NAME_MISMATCH":
+        return {
+          header: text.bankTaxNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.bankTaxNameMismatchDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "WITHDRAWAL_SETTINGS_INVALID":
+        return {
+          header: text.withdrawalSettingsInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.withdrawalSettingsInvalidDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "PAYMENT_RETURNED":
+        return {
+          header: text.paymentReturnedHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentReturnedDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h("div", { class: sheet.classes.ButtonContainer },
+            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "error",
+          icon: "exclamation-triangle",
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
@@ -160,9 +252,9 @@ export function PayoutStatusAlertView(props) {
       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)) : (
+        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: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        h("sl-button", { type: "default" }, text.w9RequiredButtonText));
+        h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, 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" } },
@@ -174,12 +266,11 @@ export function PayoutStatusAlertView(props) {
         return (h("div", { style: { paddingTop: "10px" } },
           h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
+        if (alertDetails.button)
+          return alertDetails.button;
         return;
     }
   }
-  if (states.loading) {
-    return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
-  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h("div", null);
@@ -187,7 +278,7 @@ 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("sqm-form-message", { loading: states.loading, type: alertDetails.alertType },
       h("p", { part: "alert-title" }, alertDetails.header),
       h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));