@saasquatch/mint-components 1.12.0-2 → 1.12.0-20

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

@@ -3,10 +3,16 @@ 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_NEEDED" } } }));
+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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
+import { intl } from "../../../global/global";
 const style = {
   SkeletonOne: {
     width: "50%",
@@ -9,6 +10,15 @@ const style = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
   WarningAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -27,12 +37,26 @@ const style = {
       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) {
   var _a, _b, _c, _d, _e;
-  const { text, states } = props;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
   }
@@ -40,29 +64,87 @@ export function PayoutStatusAlertView(props) {
     return h("div", null);
   }
   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.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
           class: sheet.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      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",
           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: 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",
@@ -72,13 +154,14 @@ export function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
-      case "VERIFICATION_NEEDED":
-        return (h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        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;
     }

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

@@ -5,6 +5,11 @@ import { getProps } from "../../../utils/utils";
 import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
 import { usePayoutStatus } from "./usePayoutStatus";
 import { isDemo } from "@saasquatch/component-boilerplate";
+/**
+ * @uiName Payout Status Alert
+ * @exampleGroup Tax and Cash
+ * @example Payout Status Alert - <sqm-payout-status-alert></sqm-payout-status-alert>
+ */
 export class PayoutStatusAlert {
   constructor() {
     /**
@@ -26,19 +31,60 @@ export class PayoutStatusAlert {
     /**
      * @uiName Verification required alert description
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
     /**
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Verification required internal alert header
+     */
+    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     */
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     */
+    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     */
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     */
+    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     */
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Payout on hold alert header
      */
     this.holdHeader = "Your payouts and account are on hold";
     /**
      * @uiName Payout on hold alert description
+     * AL: TODO copy not finalized for support section
      */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our {supportLink}.";
+    /**
+     * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
+     */
+    this.cashPayoutsPageUrl = "/cash";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
+    /**
+     * @uiName Error header
+     */
+    this.errorHeader = "Could not determine payout status.";
+    /**
+     * @uiName Error description
+     */
+    this.errorDescription = "There was an error with determining your payout status.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -157,7 +203,7 @@ export class PayoutStatusAlert {
       },
       "attribute": "verification-required-description",
       "reflect": false,
-      "defaultValue": "\"Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.\""
+      "defaultValue": "\"It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.\""
     },
     "verificationRequiredButtonText": {
       "type": "string",
@@ -180,6 +226,132 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"Start Verification\""
     },
+    "verificationRequiredInternalHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification required internal alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-required-internal-header",
+      "reflect": false,
+      "defaultValue": "\"Identity Verification in Progress\""
+    },
+    "verificationRequiredInternalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification required internal alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-required-internal-description",
+      "reflect": false,
+      "defaultValue": "\"Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley. If you don't hear from us contact our {supportLink}.\""
+    },
+    "verificationReviewInternalHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification review internal alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-review-internal-header",
+      "reflect": false,
+      "defaultValue": "\"Identity Verification Under Review\""
+    },
+    "verificationReviewInternalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification review internal alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-review-internal-description",
+      "reflect": false,
+      "defaultValue": "\"Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.\""
+    },
+    "verificationFailedInternalHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification failed internal alert header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-failed-internal-header",
+      "reflect": false,
+      "defaultValue": "\"Identity Verification Unsuccessful\""
+    },
+    "verificationFailedInternalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verification failed internal alert description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-failed-internal-description",
+      "reflect": false,
+      "defaultValue": "\"Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.\""
+    },
     "holdHeader": {
       "type": "string",
       "mutable": false,
@@ -213,21 +385,105 @@ export class PayoutStatusAlert {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Payout on hold alert description",
+            "text": "Payout on hold alert description\nAL: TODO copy not finalized for support section",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "hold-description",
       "reflect": false,
-      "defaultValue": "\"Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.\""
+      "defaultValue": "\"Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our {supportLink}.\""
+    },
+    "cashPayoutsPageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cash & Payouts Microsite Page (only set if alert is used in a microsite)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "cash-payouts-page-url",
+      "reflect": false,
+      "defaultValue": "\"/cash\""
+    },
+    "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\""
+    },
+    "errorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Error header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-header",
+      "reflect": false,
+      "defaultValue": "\"Could not determine payout status.\""
+    },
+    "errorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Error description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-description",
+      "reflect": false,
+      "defaultValue": "\"There was an error with determining your payout status.\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { loading: boolean; status: PayoutStatus; }; }",
+        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -257,9 +513,16 @@ export class PayoutStatusAlert {
 function useDemoPayoutStatusAlert(props) {
   return deepmerge({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }