@saasquatch/mint-components 1.12.0-11 → 1.12.0-12

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

@@ -82,7 +82,7 @@ export function PayoutStatusAlertView(props) {
           icon: "info-circle",
           class: sheet.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
           description: text.verificationRequiredDescription,
@@ -91,6 +91,30 @@ export function PayoutStatusAlertView(props) {
           icon: "exclamation-triangle",
           class: sheet.classes.WarningAlertContainer,
         };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: text.verificationRequiredInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: text.verificationReviewInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: text.verificationFailedInternalDescription,
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet.classes.ErrorAlertContainer,
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
@@ -104,15 +128,12 @@ export function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   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));
-      case "VERIFICATION_NEEDED":
-        return (h("sl-button", { type: "default", loading: states.loading, 
-          //AL: TODO callback to open verification form
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -123,9 +144,5 @@ export function PayoutStatusAlertView(props) {
       h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
       h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
       h("p", { class: sheet.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
-      getButton(states.status)),
-    h("sl-dialog", { noDismiss: true, class: sheet.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
-      h("iframe", { 
-        // AL: TODO replace iframe URL with verification url when available
-        scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" }))));
+      getButton(states.status))));
 }

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

@@ -36,14 +36,39 @@ export class PayoutStatusAlert {
      * @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.";
+    /**
+     * @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.";
+    /**
+     * @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.";
     /**
      * @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 support team.";
     /**
      * @uiName Cash & Payouts Terms and Conditions url
      */
@@ -66,7 +91,6 @@ export class PayoutStatusAlert {
     const props = isDemo()
       ? useDemoPayoutStatusAlert(this)
       : usePayoutStatus(this);
-    console.log({ props });
     return h(PayoutStatusAlertView, Object.assign({}, props));
   }
   static get is() { return "sqm-payout-status-alert"; }
@@ -198,6 +222,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.\""
+    },
+    "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.\""
+    },
+    "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.\""
+    },
     "holdHeader": {
       "type": "string",
       "mutable": false,
@@ -231,14 +381,14 @@ 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 support team.\""
     },
     "termsUrl": {
       "type": "string",
@@ -308,7 +458,7 @@ export class PayoutStatusAlert {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; showVerifyIdentity: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
+        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; veriffLoading: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -348,7 +498,6 @@ function useDemoPayoutStatusAlert(props) {
     callbacks: {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
-      onCancel: () => console.log("hide"),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,6 +1,8 @@
 import { getEnvironmentSDK, useQuery } from "@saasquatch/component-boilerplate";
-import { useState, useEffect } from "@saasquatch/stencil-hooks";
+import { useEffect, useState } from "@saasquatch/stencil-hooks";
 import { gql } from "graphql-request";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp";
 const GET_USER_STATUS = gql `
   query getUserStatus {
     user: viewer {
@@ -21,12 +23,18 @@ const GET_USER_STATUS = gql `
   }
 `;
 export function getStatus(data) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
   if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
-    return "VERIFICATION_NEEDED";
+    return "VERIFICATION:REQUIRED";
+  if ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+    return "VERIFICATION:INTERNAL";
+  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REVIEW_INTERNAL"))
+    return "VERIFICATION:REVIEW";
+  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_FAILED_INTERNAL"))
+    return "VERIFICATION:FAILED";
   if (account.hold)
     return "HOLD";
   return "DONE";
@@ -34,8 +42,8 @@ export function getStatus(data) {
 export function usePayoutStatus(props) {
   const { type } = getEnvironmentSDK();
   const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
+  const { render, loading: veriffLoading, errors: veriffErrors, } = useVeriffApp();
   const [status, setStatus] = useState(undefined);
-  const [showDialog, setShowDialog] = useState(false);
   useEffect(() => {
     if (!data)
       return;
@@ -44,22 +52,25 @@ export function usePayoutStatus(props) {
   }, [data]);
   useEffect(() => {
     const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+    window.addEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
+    window.addEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
+    return () => {
+      window.removeEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
+      window.removeEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);
+    };
   }, []);
   return {
     states: {
       loading,
+      veriffLoading,
       status,
-      showVerifyIdentity: showDialog,
       error: !!errors,
     },
     data: { type },
     text: props.getTextProps(),
     callbacks: {
       onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
-      onClick: () => setShowDialog(true),
-      onCancel: () => setShowDialog(false),
+      onClick: render,
     },
   };
 }

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

@@ -2,17 +2,43 @@ import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 const style = {
-  WarningAlertContainer: {
+  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-warning-500)",
+    },
   },
-  HoldAlertContainer: {
+  WarningHoldAlertContainer: {
+    marginLeft: "-20px",
     "&::part(base)": {
       border: "none",
       backgroundColor: "transparent",
     },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  ErrorHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      border: "none",
+      backgroundColor: "transparent",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
   },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
@@ -165,8 +191,56 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const TaxAndCashDashboardView = (props) => {
-  var _a;
+  var _a, _b, _c, _d;
   const { states, text, callbacks, slots } = props;
+  function getAlert(status) {
+    switch (status) {
+      case "VERIFICATION:REQUIRED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: text.verificationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: text.verificationRequiredInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: text.verificationReviewInternalDescription,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: text.verificationFailedInternalDescription,
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet.classes.ErrorHoldAlertContainer,
+        };
+      case "HOLD":
+        return {
+          header: text.payoutHoldAlertHeader,
+          description: text.payoutHoldAlertDescription,
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
@@ -191,7 +265,7 @@ export const TaxAndCashDashboardView = (props) => {
       h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.WarningAlertContainer },
+    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("strong", null, intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
@@ -243,32 +317,23 @@ export const TaxAndCashDashboardView = (props) => {
     h("div", null,
       h("style", { type: "text/css" }, styleString),
       states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.WarningAlertContainer },
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
           text.error.loadingErrorAlertDescription))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.WarningAlertContainer },
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", 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)),
-      states.hasHold && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.HoldAlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        h("strong", null, text.payoutHoldAlertHeader),
-        h("br", null),
-        text.payoutHoldAlertDescription)),
-      states.payoutStatus === "VERIFICATION_NEEDED" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.HoldAlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        h("strong", null, text.verificationRequiredHeader),
-        h("p", { style: { margin: "0" } }, text.verificationRequiredDescription),
-        h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
+      states.payoutStatus && states.payoutStatus !== "DONE" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+        h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
+        h("strong", null, getAlert(states.payoutStatus).header),
+        h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
+        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
           //AL: TODO hooks
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText))),
-      h("sl-dialog", { noDismiss: true, class: sheet.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onVerifyIdentityCancel },
-        h("iframe", { 
-          // AL: TODO replace iframe URL with verification url when available
-          scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" })),
+          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
         h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),