@saasquatch/mint-components 1.12.0-8 → 1.12.0

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

@@ -10,6 +10,7 @@ import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
@@ -213,7 +214,16 @@ 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.";
+    /**
+     * Text for verify email dialog
+     * @uiName Verify email header
+     */
+    this.verifyEmailHeaderText = "Verify your email";
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyEmailDescriptionText = "Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -225,7 +235,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
@@ -236,6 +246,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
      */
@@ -308,25 +322,60 @@ export class BankingInfoForm {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        position: "relative",
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(title)": {
+          padding: "var(--sl-spacing-large) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
+        },
+        "&::part(base)": {
+          position: "absolute",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-large) 0 var(--sl-spacing-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    const verifyDescription = intl.formatMessage({
+      id: "codeResentSuccessfully",
+      defaultMessage: props.text.verifyEmailDescriptionText,
+    }, {
+      email: props.states.email,
+    });
     return (h(Host, null,
+      h("style", { type: "text/css" }, styleString),
+      props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide, label: props.text.verifyEmailHeaderText },
+        h("sqm-code-verification", { verifyCodeHeaderText: verifyDescription, reverifyCodeHeaderText: verifyDescription, onVerification: props.callbacks.onVerification }))) : null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
           formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
-          countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
+          countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
               label: props.text.bankLocationLabel,
             }),
           })),
-            h("sl-input", { class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+            h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
@@ -337,14 +386,14 @@ export class BankingInfoForm {
             }), (_f = (_e = props.states) === null || _e === void 0 ? void 0 : _e.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName))))),
           paymentMethodSlot: (h("sl-input", { key: "paymentMethod", label: props.text.paymentMethod, placeholder: props.states.paymentMethodFeeLabel, disabled: true })),
-          paymentThresholdSelectSlot: (h("sl-select", Object.assign({ required: true, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
+          paymentThresholdSelectSlot: (h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentThresholdSelectLabel, name: "/paymentThreshold", id: "paymentThreshold", value: ((_h = (_g = props.states) === null || _g === void 0 ? void 0 : _g.formState) === null || _h === void 0 ? void 0 : _h.paymentThreshold) || "" }, (((_j = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _j === void 0 ? void 0 : _j.paymentThreshold) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_l = (_k = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _k === void 0 ? void 0 : _k.paymentThreshold) === null || _l === void 0 ? void 0 : _l.type,
               label: props.text.paymentThresholdSelectLabel,
             }),
           })), props.states.thresholds.map((t) => (h("sl-menu-item", { value: t }, `${props.states.currency}${t}`))))),
-          paymentFixedDaySelectSlot: (h("sl-select", Object.assign({ required: true, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
+          paymentFixedDaySelectSlot: (h("sl-select", Object.assign({ required: true, disabled: props.states.saveLoading, label: props.text.paymentDaySelectLabel, value: ((_o = (_m = props.states) === null || _m === void 0 ? void 0 : _m.formState) === null || _o === void 0 ? void 0 : _o.paymentDay) || "", name: "/paymentDay", id: "paymentDay" }, (((_p = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _p === void 0 ? void 0 : _p.paymentDay) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_r = (_q = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _q === void 0 ? void 0 : _q.paymentDay) === null || _r === void 0 ? void 0 : _r.type,
@@ -353,7 +402,7 @@ export class BankingInfoForm {
           })),
             h("sl-menu-item", { value: "1" }, props.text.paymentDayFirstOfMonthLabelText),
             h("sl-menu-item", { value: "15" }, props.text.paymentDayFifteenthOfMonthLabelText))),
-          paypalInputSlot: (h("sl-input", Object.assign({ required: true, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
+          paypalInputSlot: (h("sl-input", Object.assign({ required: true, disabled: props.states.saveLoading, value: ((_t = (_s = props.states) === null || _s === void 0 ? void 0 : _s.formState) === null || _t === void 0 ? void 0 : _t.paypalEmailAddress) || "", label: props.text.payPalInputLabel, key: "paypalEmailAddress", name: "/paypalEmailAddress", id: "paypalEmailAddress", type: "text" }, (((_w = (_v = (_u = props.states.formState) === null || _u === void 0 ? void 0 : _u.errors) === null || _v === void 0 ? void 0 : _v.inputErrors) === null || _w === void 0 ? void 0 : _w.paypalEmailAddress) && {
             class: "error-input",
             helpText: getValidationErrorMessage({
               type: (_0 = (_z = (_y = (_x = props.states.formState) === null || _x === void 0 ? void 0 : _x.errors) === null || _y === void 0 ? void 0 : _y.inputErrors) === null || _z === void 0 ? void 0 : _z.paypalEmailAddress) === null || _0 === void 0 ? void 0 : _0.type,
@@ -1313,7 +1362,49 @@ 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.\""
+    },
+    "verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email header",
+            "name": "uiName"
+          }],
+        "text": "Text for verify email dialog"
+      },
+      "attribute": "verify-email-header-text",
+      "reflect": false,
+      "defaultValue": "\"Verify your email\""
+    },
+    "verifyEmailDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code widget header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-email-description-text",
+      "reflect": false,
+      "defaultValue": "\"Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com.\""
     },
     "generalErrorTitle": {
       "type": "string",
@@ -1361,7 +1452,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",
@@ -1405,6 +1496,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,
@@ -1500,7 +1612,7 @@ export class BankingInfoForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BankingInfoFormViewProps>",
-        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; email?: string; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1611,6 +1723,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },

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

@@ -5,6 +5,7 @@ import JSONPointer from "jsonpointer";
 import { intl } from "../../../global/global";
 import { FINANCE_NETWORK_SETTINGS_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { VERIFICATION_EVENT_KEY } from "../../sqm-widget-verification/keys";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 // Hardcoded in Impact backend
 export const paypalFeeMap = {
   USD: "USD20.00",
@@ -82,7 +83,7 @@ function parseImpactThreshold(threshold) {
   return parsed.toString();
 }
 export function useBankingInfoForm(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const host = useHost();
   const locale = useLocale();
   const user = useUserIdentity();
@@ -207,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,
@@ -244,6 +247,8 @@ export function useBankingInfoForm(props) {
         });
         return;
       }
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -319,6 +324,7 @@ export function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -351,6 +357,7 @@ export function useBankingInfoForm(props) {
       hasPayPal,
       bankCountry: formState.bankCountry,
       countrySearch,
+      email: (_j = userData === null || userData === void 0 ? void 0 : userData.user) === null || _j === void 0 ? void 0 : _j.email,
     },
     refs: {
       formRef,

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-docusign-form/useDocusignForm.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { taxTypeToName, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const GET_TAX_DOCUMENT = gql `
   mutation createImpactPublisherTaxDocument(
     $vars: CreateImpactPublisherTaxDocumentInput!
@@ -101,6 +102,8 @@ export function useDocusignForm(props) {
       // @ts-expect-error: no data type for result
       if (!result.completeImpactPublisherTaxDocument.success)
         throw new Error();
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       setShowExitButton(true);
     }
     catch (e) {

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/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-indirect-tax-form/useIndirectTaxForm.js

@@ -5,6 +5,7 @@ import JSONPointer from "jsonpointer";
 import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { getCountryObj, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
 const CONNECT_PARTNER = gql `
   mutation createImpactConnection($vars: ImpactConnectionInput!) {
     createImpactConnection(impactConnectionInput: $vars) {
@@ -169,6 +170,8 @@ export function useIndirectTaxForm(props) {
       const resultPublisher = (_e = (_d = (_c = result
         .createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
       const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
+      // Fire form change event
+      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form

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

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

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

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