@saasquatch/mint-components 1.13.0-9 → 1.13.1-0

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"

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

@@ -26,16 +26,6 @@ export class PayoutDetailsCard {
      * @uiName Bank account field label
      */
     this.accountText = "Account";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message title
-     */
-    this.errorTitleText = "Your payout is on hold ";
-    /**
-     * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
-     * @uiName Payout error message description
-     */
-    this.errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -48,10 +38,6 @@ export class PayoutDetailsCard {
     const props = getProps(this);
     return {
       ...props,
-      error: {
-        errorTitleText: this.errorTitleText,
-        errorDescriptionText: this.errorDescriptionText,
-      },
     };
   }
   render() {
@@ -127,48 +113,6 @@ export class PayoutDetailsCard {
       "reflect": false,
       "defaultValue": "\"Account\""
     },
-    "errorTitleText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Payout error message title",
-            "name": "uiName"
-          }],
-        "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
-      },
-      "attribute": "error-title-text",
-      "reflect": false,
-      "defaultValue": "\"Your payout is on hold \""
-    },
-    "errorDescriptionText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Payout error message description",
-            "name": "uiName"
-          }],
-        "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
-      },
-      "attribute": "error-description-text",
-      "reflect": false,
-      "defaultValue": "\"If you\u2019ve recently added your payout information, please wait while we verify your information. If it\u2019s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\""
-    },
     "payoutMissingInformationText": {
       "type": "string",
       "mutable": false,

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

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Payout Status Alert",
+};
+const defaultProps = {
+  error: false,
+  status: "INFORMATION_REQUIRED",
+  loading: false,
+  veriffLoading: false,
+};
+export const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps } }));
+export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REQUIRED" } } }));
+export const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:INTERNAL" } } }));
+export const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REVIEW" } } }));
+export const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:FAILED" } } }));
+export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
+export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));
+export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));

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

@@ -0,0 +1,176 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+import { intl } from "../../../global/global";
+const style = {
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  AlertDescriptionText: {
+    margin: "0",
+    marginBottom: "var(--sl-spacing-small)",
+  },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PayoutStatusAlertView(props) {
+  const { text, states, data, callbacks } = props;
+  function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet.classes.ErrorAlertContainer,
+      };
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return {
+          header: text.informationRequiredHeader,
+          description: text.informationRequiredDescription,
+          buttonText: text.informationRequiredButtonText,
+          alertType: "info",
+          icon: "info-circle",
+          class: sheet.classes.InfoAlertContainer,
+        };
+      case "VERIFICATION:REQUIRED":
+        return {
+          header: text.verificationRequiredHeader,
+          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",
+          class: sheet.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          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,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          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,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          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,
+        };
+      case "HOLD":
+        return {
+          header: text.holdHeader,
+          description: intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
+  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)) : (
+        // 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:
+        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);
+  }
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
+      h("sl-icon", { slot: "icon", name: alertDetails.icon }),
+      h("strong", null, alertDetails.header),
+      h("p", { class: sheet.classes.AlertDescriptionText }, alertDetails.description),
+      getButton(states.status))));
+}