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

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { intl } from "../../../global/global";
 const style = {
   Wrapper: {
     display: "flex",
@@ -20,10 +21,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -76,7 +74,13 @@ export function WidgetEmailVerificationView(props) {
     states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("b", null, text.sendCodeErrorHeader),
-      text.sendCodeErrorDescription)),
+      h("br", null),
+      intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
       h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       h("sl-form", { "onSl-submit": callbacks.submitEmail },

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

@@ -18,11 +18,15 @@ export class WidgetEmailVerification {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Send code to email alert description
      */
-    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */
@@ -90,7 +94,28 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-header",
       "reflect": false,
-      "defaultValue": "\"There was an error sending your code.\""
+      "defaultValue": "\"There was an error sending your code\""
+    },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
     },
     "sendCodeErrorDescription": {
       "type": "string",
@@ -111,7 +136,7 @@ export class WidgetEmailVerification {
       },
       "attribute": "send-code-error-description",
       "reflect": false,
-      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
+      "defaultValue": "\"Please try again. If this problem continues, contact our program {supportLink}.\""
     },
     "emailLabel": {
       "type": "string",

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

@@ -275,7 +275,7 @@ export const GeneralLoadingView = () => {
   return h(LoadingView, null);
 };
 export const GeneralErrorView = () => {
-  return (h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact Support." }));
+  return (h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact our support team." }));
 };
 // STEP ONE
 export const StepOne = () => {
@@ -759,6 +759,20 @@ export const StepFourToPaypalChecked = () => {
       },
     } }));
 };
+export const StepFourReVerifyEmail = () => {
+  return (h("sqm-banking-info-form", { demoData: {
+      ...stepFourProps,
+      states: {
+        ...stepFourProps.states,
+        showVerification: true,
+        isPartner: true,
+        formState: {
+          ...stepFourProps.states.formState,
+          paymentMethodChecked: "toPayPalAccount",
+        },
+      },
+    } }));
+};
 export const TaxAndCashDashboardActiveW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,

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

@@ -223,12 +223,22 @@ export const BankingInfoFormView = (props) => {
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
-        text.error.generalDescription)),
+        intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       states.isPartner && !states.hideSteps && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
         h("sl-icon", { slot: "icon", name: "info-circle" }),
         h("strong", null, text.isPartnerAlertHeader),
         h("br", null),
-        text.isPartnerAlertDescription)),
+        intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       h("div", null,
         h("h4", null, text.paymentMethod),
         h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),

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

@@ -214,7 +214,7 @@ export class BankingInfoForm {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our Support team or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -226,7 +226,7 @@ export class BankingInfoForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed under a field that is missing required information.
      * @uiName Empty form field error message
@@ -237,6 +237,10 @@ export class BankingInfoForm {
      * @uiName Form field error message
      */
     this.fieldInvalidError = "{fieldName} is invalid";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Continue button label
      */
@@ -1334,7 +1338,7 @@ export class BankingInfoForm {
       },
       "attribute": "is-partner-alert-description",
       "reflect": false,
-      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our Support team or sign up for this referral program with a different email.\""
+      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.\""
     },
     "generalErrorTitle": {
       "type": "string",
@@ -1382,7 +1386,7 @@ export class BankingInfoForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "fieldRequiredError": {
       "type": "string",
@@ -1426,6 +1430,27 @@ export class BankingInfoForm {
       "reflect": false,
       "defaultValue": "\"{fieldName} is invalid\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "continueButton": {
       "type": "string",
       "mutable": false,

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

@@ -208,6 +208,8 @@ export function useBankingInfoForm(props) {
       // Call difference mutations based on whether the user is updating
       // the info for setting it for the first time
       if (isPartner) {
+        if (!token)
+          return; // Require token for this mutation
         response = await updateWithdrawalSettings({
           updateImpactPublisherWithdrawalSettingsInput: {
             ...body,
@@ -289,8 +291,7 @@ export function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    if (token)
-      await runMutation(formData, token);
+    await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {

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

@@ -160,12 +160,22 @@ export const DocusignFormView = (props) => {
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.loadingErrorAlertHeader),
         h("br", null),
-        text.error.loadingErrorAlertDescription))),
+        intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })))),
     ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.ErrorAlertContainer },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("strong", null, text.error.generalTitle),
       h("br", null),
-      text.error.generalDescription)),
+      intl.formatMessage({
+        id: "generalDescription",
+        defaultMessage: text.error.generalDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     h("div", null,
       h("div", null,
         h("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),

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

@@ -34,6 +34,10 @@ export class DocusignForm {
      * @uiWidget textArea
      */
     this.taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * Displayed at the top of the page to individuals joining a US program who reside outside the country.
      * @uiName W-8 BEN tax form description
@@ -77,7 +81,7 @@ export class DocusignForm {
      * @uiName Docusign form error message
      * @uiWidget textArea
      */
-    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.";
+    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
     /**
      * @uiName Refresh page button label
      */
@@ -93,7 +97,7 @@ export class DocusignForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -105,7 +109,7 @@ export class DocusignForm {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
@@ -240,6 +244,27 @@ export class DocusignForm {
       "reflect": false,
       "defaultValue": "\"Participants based in the US need to submit a {documentType} form.\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "taxFormDescriptionIndividualParticipant": {
       "type": "string",
       "mutable": false,
@@ -421,7 +446,7 @@ export class DocusignForm {
       },
       "attribute": "docusign-error",
       "reflect": false,
-      "defaultValue": "\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\""
+      "defaultValue": "\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.\""
     },
     "refreshButton": {
       "type": "string",
@@ -490,7 +515,7 @@ export class DocusignForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "loadingErrorAlertHeader": {
       "type": "string",
@@ -538,7 +563,7 @@ export class DocusignForm {
       },
       "attribute": "loading-error-alert-description",
       "reflect": false,
-      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
     },
     "taxAndPayoutsDescription": {
       "type": "string",

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

@@ -90,11 +90,9 @@ const style = {
       border: "none",
     },
     "&::part(message)": {
-      display: "flex",
       alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      padding: "var(--sl-spacing-small)",
+      whiteSpace: "nowrap",
     },
     "& sl-icon::part(base)": {
       color: "var(--sl-color-yellow-500)",
@@ -152,17 +150,32 @@ export const IndirectTaxFormView = (props) => {
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
-          text.error.loadingErrorAlertDescription))),
+          intl.formatMessage({
+            id: "loadingErrorAlertDescription",
+            defaultMessage: text.error.loadingErrorAlertDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          })))),
       ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
         h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
         h("strong", null, text.error.generalTitle),
         h("br", null),
-        text.error.generalDescription)),
+        intl.formatMessage({
+          id: "generalDescription",
+          defaultMessage: text.error.generalDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       states.isPartner && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
         h("sl-icon", { slot: "icon", name: "info-circle" }),
         h("strong", null, text.isPartnerAlertHeader),
         h("br", null),
-        text.isPartnerAlertDescription)),
+        intl.formatMessage({
+          id: "isPartnerAlertDescription",
+          defaultMessage: text.isPartnerAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
       h("div", null,
         h("h4", null, text.indirectTaxDetails))),
     states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", null,
@@ -179,7 +192,12 @@ export const IndirectTaxFormView = (props) => {
           slots.registeredInDifferentCountryDetailsSlot)),
       h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
         h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
-        text.cannotChangeInfoAlert),
+        intl.formatMessage({
+          id: "cannotChangeInfoAlert",
+          defaultMessage: text.cannotChangeInfoAlert,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        })),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
         h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));

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

@@ -100,7 +100,7 @@ export class IndirectTaxForm {
      * @uiName Submission confirmation alert
      * @uiWidget textArea
      */
-    this.cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.";
+    this.cannotChangeInfoAlert = "Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing.";
     /**
      * @uiName Missing indirect tax number error message
      */
@@ -126,11 +126,15 @@ export class IndirectTaxForm {
      * @uiName Participant is a partner alert description
      * @uiWidget textArea
      */
-    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
+    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
     /**
      * @uiName Continue button label
      */
     this.continueButton = "Continue";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -142,7 +146,7 @@ export class IndirectTaxForm {
      * @uiName Form submission error message description
      * @uiWidget textArea
      */
-    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
+    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Page load error message title
@@ -154,7 +158,7 @@ export class IndirectTaxForm {
      * @uiName Page load error message description
      * @uiWidget textArea
      */
-    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
     /**
      * Displayed at the top of the page on all set up steps.
      * @uiName Page description
@@ -606,7 +610,7 @@ export class IndirectTaxForm {
       },
       "attribute": "cannot-change-info-alert",
       "reflect": false,
-      "defaultValue": "\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\""
+      "defaultValue": "\"Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing.\""
     },
     "indirectTaxNumberError": {
       "type": "string",
@@ -717,7 +721,7 @@ export class IndirectTaxForm {
       },
       "attribute": "is-partner-alert-description",
       "reflect": false,
-      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\""
+      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.\""
     },
     "continueButton": {
       "type": "string",
@@ -740,6 +744,27 @@ export class IndirectTaxForm {
       "reflect": false,
       "defaultValue": "\"Continue\""
     },
+    "supportLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "support-link",
+      "reflect": false,
+      "defaultValue": "\"support team\""
+    },
     "generalErrorTitle": {
       "type": "string",
       "mutable": false,
@@ -786,7 +811,7 @@ export class IndirectTaxForm {
       },
       "attribute": "general-error-description",
       "reflect": false,
-      "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
     },
     "loadingErrorAlertHeader": {
       "type": "string",
@@ -834,7 +859,7 @@ export class IndirectTaxForm {
       },
       "attribute": "loading-error-alert-description",
       "reflect": false,
-      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
+      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
     },
     "taxAndPayoutsDescription": {
       "type": "string",

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
+import { intl } from "../../../global/global";
 const style = {
   SkeletonOne: {
     width: "50%",
@@ -85,7 +86,12 @@ export function PayoutStatusAlertView(props) {
       case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
+          description: intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -94,7 +100,12 @@ export function PayoutStatusAlertView(props) {
       case "VERIFICATION:INTERNAL":
         return {
           header: text.verificationRequiredInternalHeader,
-          description: text.verificationRequiredInternalDescription,
+          description: intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningAlertContainer,
@@ -102,7 +113,12 @@ export function PayoutStatusAlertView(props) {
       case "VERIFICATION:REVIEW":
         return {
           header: text.verificationReviewInternalHeader,
-          description: text.verificationReviewInternalDescription,
+          description: intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet.classes.WarningAlertContainer,
@@ -110,7 +126,12 @@ export function PayoutStatusAlertView(props) {
       case "VERIFICATION:FAILED":
         return {
           header: text.verificationFailedInternalHeader,
-          description: text.verificationFailedInternalDescription,
+          description: intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "critical",
           icon: "exclamation-octagon",
           class: sheet.classes.ErrorAlertContainer,
@@ -118,7 +139,12 @@ export function PayoutStatusAlertView(props) {
       case "HOLD":
         return {
           header: text.holdHeader,
-          description: text.holdDescription,
+          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",
@@ -131,7 +157,9 @@ export function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        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)) : (h("sl-button", { type: "default" }, 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("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION:REQUIRED":
         return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default: