@saasquatch/mint-components 1.12.0-1 → 1.12.0-10

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

@@ -5,16 +5,57 @@ 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() {
+    /**
+     * @uiName Info required alert header
+     */
     this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     * @uiName Info required alert description
+     */
     this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    /**
+     * @uiName Info required alert button text
+     */
     this.informationRequiredButtonText = "Payouts & Tax Settings";
+    /**
+     * @uiName Verification required alert header
+     */
     this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * @uiName Verification required alert description
+     */
     this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * @uiName Verification required alert button text
+     */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Payout on hold alert header
+     */
     this.holdHeader = "Your payouts and account are on hold";
+    /**
+     * @uiName Payout on hold alert description
+     */
     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}.";
+    /**
+     * @uiName Cash & Payouts Terms and Conditions url
+     */
+    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    /**
+     * @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() { }
@@ -25,6 +66,7 @@ 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"; }
@@ -41,7 +83,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Info required alert header",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "information-required-header",
@@ -59,7 +104,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Info required alert description",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "information-required-description",
@@ -77,7 +125,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Info required alert button text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "information-required-button-text",
@@ -95,7 +146,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Verification required alert header",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "verification-required-header",
@@ -113,7 +167,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Verification required alert description",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "verification-required-description",
@@ -131,7 +188,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Verification required alert button text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "verification-required-button-text",
@@ -149,7 +209,10 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Payout on hold alert header",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "hold-header",
@@ -167,19 +230,85 @@ export class PayoutStatusAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Payout on hold alert description",
+            "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}.\""
     },
+    "termsUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Cash & Payouts Terms and Conditions url",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "terms-url",
+      "reflect": false,
+      "defaultValue": "\"https://terms.advocate.impact.com/PayoutTermsAndConditions.html\""
+    },
+    "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; showVerifyIdentity: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -209,9 +338,17 @@ 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"),
+      onCancel: () => console.log("hide"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@saasquatch/component-boilerplate";
+import { getEnvironmentSDK, useQuery } from "@saasquatch/component-boilerplate";
 import { useState, useEffect } from "@saasquatch/stencil-hooks";
 import { gql } from "graphql-request";
 const GET_USER_STATUS = gql `
@@ -12,6 +12,7 @@ const GET_USER_STATUS = gql `
             id
             payoutsAccount {
               hold
+              holdReasons
             }
           }
         }
@@ -19,24 +20,25 @@ const GET_USER_STATUS = gql `
     }
   }
 `;
+export function getStatus(data) {
+  var _a, _b, _c, _d, _e;
+  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";
+  if (account.hold)
+    return "HOLD";
+  return "DONE";
+}
 export function usePayoutStatus(props) {
+  const { type } = getEnvironmentSDK();
   const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
   const [status, setStatus] = useState(undefined);
+  const [showDialog, setShowDialog] = useState(false);
   useEffect(() => {
     if (!data)
       return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
     const s = getStatus(data);
     setStatus(s);
   }, [data]);
@@ -45,6 +47,19 @@ export function usePayoutStatus(props) {
     window.addEventListener("sqm:tax-form-updated", cb);
     return () => window.removeEventListener("sqm:tax-form-updated", cb);
   }, []);
-  console.log({ data });
-  return { states: { loading, status }, text: props.getTextProps() };
+  return {
+    states: {
+      loading,
+      status,
+      showVerifyIdentity: showDialog,
+      error: !!errors,
+    },
+    data: { type },
+    text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
+      onClick: () => setShowDialog(true),
+      onCancel: () => setShowDialog(false),
+    },
+  };
 }

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

@@ -19,6 +19,11 @@ export const GET_USER = gql `
         email
         countryCode
         customFields
+        managedIdentity {
+          uid
+          email
+          emailVerified
+        }
         impactConnection {
           connected
           user {
@@ -62,6 +67,7 @@ export const GET_USER = gql `
             }
             payoutsAccount {
               hold
+              holdReasons
               balance
             }
           }

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

@@ -748,14 +748,14 @@ export class TaxAndCashMonolith {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_errorTitleText = "Your payout is on hold ";
+    this.payoutHoldAlertHeader = "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
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_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.";
+    this.payoutHoldAlertDescription = "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
@@ -3972,7 +3972,7 @@ export class TaxAndCashMonolith {
       "reflect": false,
       "defaultValue": "\"Earnings after tax\""
     },
-    "dashboard_errorTitleText": {
+    "payoutHoldAlertHeader": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -3995,11 +3995,11 @@ export class TaxAndCashMonolith {
           }],
         "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
       },
-      "attribute": "dashboard_error-title-text",
+      "attribute": "payout-hold-alert-header",
       "reflect": false,
-      "defaultValue": "\"Your payout is on hold \""
+      "defaultValue": "\"Your payout is on hold\""
     },
-    "dashboard_errorDescriptionText": {
+    "payoutHoldAlertDescription": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -4022,9 +4022,9 @@ export class TaxAndCashMonolith {
           }],
         "text": "Part of the alert displayed at the top of the page when there\u2019s been an issue preventing payouts."
       },
-      "attribute": "dashboard_error-description-text",
+      "attribute": "payout-hold-alert-description",
       "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.\""
+      "defaultValue": "\"Please contact Support or check your inbox for an email from our referral program provider, impact.com.\""
     },
     "dashboard_payoutMissingInformationText": {
       "type": "string",

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

@@ -3,8 +3,8 @@ import { useEffect, useMemo } from "@saasquatch/universal-hooks";
 import { getCountryObj } from "../utils";
 import { COUNTRIES_NAMESPACE, COUNTRIES_QUERY_NAMESPACE, CURRENCIES_NAMESPACE, CURRENCIES_QUERY_NAMESPACE, FINANCE_NETWORK_SETTINGS_NAMESPACE, GET_COUNTRIES, GET_CURRENCIES, GET_FINANCE_NETWORK_SETTINGS, GET_USER, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "./data";
 function getCurrentStep(user) {
-  var _a;
-  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected)) {
+  var _a, _b;
+  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
     return "/1";
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;

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

@@ -8,6 +8,12 @@ const style = {
       borderTop: "none",
     },
   },
+  HoldAlertContainer: {
+    "&::part(base)": {
+      border: "none",
+      backgroundColor: "transparent",
+    },
+  },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -247,22 +253,22 @@ export const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
-      states.identiyRequired && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.ExpiringSoonAlertContainer },
-          h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-          h("strong", null, text.verifyIdentityAlertHeader),
-          h("br", null),
-          text.verifyIdentityAlertMessage,
-          h("br", null),
-          h("sl-button", null, text.verifyIdentityButton)))),
-      h("sl-dialog", { 
-        // AL: todo plugin open dialog
-        label: " verify Identity iframe", class: sheet.classes.Dialog, open: states.showIdentityVerificationDialog },
-        h("div", { style: {
-            width: "420px",
-            height: "420px",
-            border: "1px dotted black",
-          } })),
+      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, 
+          //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" })),
       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),