@saasquatch/mint-components 1.11.1-0 → 1.12.0-0

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -20,6 +20,14 @@ const style = {
   MessageContainer: {
     maxWidth: "400px",
   },
+  IFrameContainer: {
+    "@media screen and (max-width: 440px)": {
+      position: "absolute",
+      width: "100vw",
+      left: "-30px",
+      zIndex: "9999",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -61,6 +69,7 @@ export const DocusignLoadingView = () => {
       h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
 export const DocusignIframe = ({ states, data, callbacks, text, }) => {
+  const { classes } = sheet;
   const [iFrameHeight, setiFrameHeight] = useState("100%");
   const allowedDomains = [
     "referralsaasquatch.com",
@@ -71,6 +80,7 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
     const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
     if (!allowed)
       return;
+    console.log(e);
     if (typeof e.data === "number") {
       setiFrameHeight(e.data + "px");
     }
@@ -83,7 +93,7 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
     return () => {
       window.removeEventListener("message", callback, false);
     };
-  }, []);
+  }, [iFrameHeight]);
   if (states.urlLoading)
     return h(DocusignLoadingView, null);
   if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
@@ -91,5 +101,9 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
   }
   if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
     return h(DocusignExpiredView, { text: text });
-  return (h("iframe", { scrolling: "yes", frameBorder: "0", src: data.documentUrl, width: "100%", height: iFrameHeight }));
+  // Wrap iFrame with container that shares the same height to push other elements down when absolute positioned
+  return (h("div", { style: { height: iFrameHeight } },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: classes.IFrameContainer },
+      h("iframe", { scrolling: "yes", frameBorder: "0", width: "100%", src: data.documentUrl, height: iFrameHeight }))));
 };

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Payout Status Alert",
+};
+const defaultProps = {
+  status: "INFORMATION_REQUIRED",
+  loading: 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 Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
+export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));

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

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+const style = {
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  AlertDescriptionText: {
+    margin: "0",
+    marginBottom: "var(--sl-spacing-small)",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PayoutStatusAlertView(props) {
+  var _a, _b, _c, _d;
+  const { text, states } = props;
+  if (states.loading) {
+    return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
+  }
+  if (states.status === "DONE") {
+    return h("div", null);
+  }
+  function getAlert(status) {
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return {
+          header: text.informationRequiredHeader,
+          description: text.informationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "info",
+          icon: "exclamation-octagon",
+        };
+      case "VERIFICATION_NEEDED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: text.verificationRequiredDescription,
+          buttonText: text.verificationRequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-octagon",
+        };
+      case "HOLD":
+        return {
+          header: text.holdHeader,
+          description: text.holdDescription,
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-octagon",
+        };
+      default:
+        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));
+      default:
+        return;
+    }
+  }
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h("sqm-form-message", { style: { display: "flex", gap: "2px" }, exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType },
+      h("sl-icon", { slot: "icon", name: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.icon }),
+      h("strong", null, (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.header),
+      h("p", { class: sheet.classes.AlertDescriptionText }, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.description),
+      getButton(states.status))));
+}

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

@@ -0,0 +1,217 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../../utils/utils";
+import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
+import { usePayoutStatus } from "./usePayoutStatus";
+import { isDemo } from "@saasquatch/component-boilerplate";
+export class PayoutStatusAlert {
+  constructor() {
+    this.informationRequiredHeader = "Payout and tax information required";
+    this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    this.informationRequiredButtonText = "Payouts & Tax Settings";
+    this.verificationRequiredHeader = "Verify your identity";
+    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredButtonText = "Start Verification";
+    this.holdHeader = "Your payouts and account are on hold";
+    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}.";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoPayoutStatusAlert(this)
+      : usePayoutStatus(this);
+    return h(PayoutStatusAlertView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-payout-status-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "informationRequiredHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "information-required-header",
+      "reflect": false,
+      "defaultValue": "\"Payout and tax information required\""
+    },
+    "informationRequiredDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "information-required-description",
+      "reflect": false,
+      "defaultValue": "\"Submit your banking details and tax documents to receive your rewards.\""
+    },
+    "informationRequiredButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "information-required-button-text",
+      "reflect": false,
+      "defaultValue": "\"Payouts & Tax Settings\""
+    },
+    "verificationRequiredHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "verification-required-header",
+      "reflect": false,
+      "defaultValue": "\"Verify your identity\""
+    },
+    "verificationRequiredDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "verification-required-description",
+      "reflect": false,
+      "defaultValue": "\"Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.\""
+    },
+    "verificationRequiredButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "verification-required-button-text",
+      "reflect": false,
+      "defaultValue": "\"Start Verification\""
+    },
+    "holdHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hold-header",
+      "reflect": false,
+      "defaultValue": "\"Your payouts and account are on hold\""
+    },
+    "holdDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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}.\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PayoutStatusAlertViewProps>",
+        "resolved": "{ states?: { loading: boolean; status: PayoutStatus; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../../global/demo"
+          },
+          "PayoutStatusAlertViewProps": {
+            "location": "import",
+            "path": "./sqm-payout-status-alert-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoPayoutStatusAlert(props) {
+  return deepmerge({
+    states: {
+      status: "INFORMATION_REQUIRED",
+      loading: false,
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,50 @@
+import { useQuery } from "@saasquatch/component-boilerplate";
+import { useState, useEffect } from "@saasquatch/stencil-hooks";
+import { gql } from "graphql-request";
+const GET_USER_STATUS = gql `
+  query getUserStatus {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export function usePayoutStatus(props) {
+  const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
+  const [status, setStatus] = useState(undefined);
+  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]);
+  useEffect(() => {
+    const cb = () => refetch();
+    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() };
+}

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

@@ -13,6 +13,7 @@ export const GET_USER = gql `
   query getUserTaxInfo {
     user: viewer {
       ... on User {
+        id
         firstName
         lastName
         email

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

@@ -247,6 +247,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",
+          } })),
       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),

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

@@ -69,6 +69,18 @@ export class TaxAndCashDashboard {
      * @uiName Inactive W-8 error message description
      */
     this.taxAlertNotActiveMessageW8 = "Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.";
+    /**
+     * Part of the alert displayed at the top of the page.
+     *
+     * @uiName Verify identity warning message header
+     */
+    this.verifyIdentityAlertHeader = "Verify your identity";
+    /**
+     * Part of the alert displayed at the top of the page.
+     *
+     * @uiName Verify identity warning message description
+     */
+    this.verifyIdentityAlertMessage = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
     /**
      * Additional text displayed next to the tax form's status badge.
      *
@@ -269,6 +281,10 @@ export class TaxAndCashDashboard {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
+    /**
+     * @uiName Verify button label
+     */
+    this.verifyIdentityButton = "Start Verification";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -515,6 +531,48 @@ export class TaxAndCashDashboard {
       "reflect": false,
       "defaultValue": "\"Your tax form may have expired or has personal information that doesn\u2019t match your profile. Please submit a new {documentType} form.\""
     },
+    "verifyIdentityAlertHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Verify identity warning message header",
+            "name": "uiName"
+          }],
+        "text": "Part of the alert displayed at the top of the page."
+      },
+      "attribute": "verify-identity-alert-header",
+      "reflect": false,
+      "defaultValue": "\"Verify your identity\""
+    },
+    "verifyIdentityAlertMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Verify identity warning message description",
+            "name": "uiName"
+          }],
+        "text": "Part of the alert displayed at the top of the page."
+      },
+      "attribute": "verify-identity-alert-message",
+      "reflect": false,
+      "defaultValue": "\"Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.\""
+    },
     "invalidForm": {
       "type": "string",
       "mutable": false,
@@ -1430,12 +1488,33 @@ export class TaxAndCashDashboard {
       "reflect": false,
       "defaultValue": "\"Cancel\""
     },
+    "verifyIdentityButton": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify button label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-identity-button",
+      "reflect": false,
+      "defaultValue": "\"Start Verification\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseTaxAndCashDashboardResult>",
-        "resolved": "{ states?: { status?: string; documentType: TaxDocumentType; documentTypeString: string; canEditPayoutInfo: boolean; disabled?: boolean; dateSubmitted?: string; noFormNeeded?: boolean; indirectTaxType?: string; qstNumber?: string; subRegionTaxNumber?: string; subRegion?: string; indirectTaxNumber?: string; province?: string; country?: string; notRegistered?: boolean; isBusinessEntity?: boolean; loading?: boolean; loadingError?: boolean; showNewFormDialog: boolean; errors?: { general?: boolean; }; }; }",
+        "resolved": "{ states?: { status?: string; documentType: TaxDocumentType; documentTypeString: string; canEditPayoutInfo: boolean; disabled?: boolean; dateSubmitted?: string; noFormNeeded?: boolean; indirectTaxType?: string; qstNumber?: string; subRegionTaxNumber?: string; subRegion?: string; indirectTaxNumber?: string; province?: string; country?: string; notRegistered?: boolean; isBusinessEntity?: boolean; loading?: boolean; loadingError?: boolean; showNewFormDialog: boolean; showIdentityVerificationDialog?: boolean; identiyRequired?: boolean; errors?: { general?: boolean; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -85,7 +85,7 @@ const style = {
   },
   PhoneInputsSection: {
     display: "flex",
-    alignItems: "flex-start",
+    alignItems: "flex-end",
     flexDirection: "column",
     gap: "4px",
     "& p": {
@@ -96,7 +96,7 @@ const style = {
   },
   PhoneInputsContainer: {
     display: "flex",
-    alignItems: "flex-start",
+    alignItems: "flex-end",
     gap: "4px",
     width: "100%",
     "& #phoneNumber": {

package/dist/collection/components/views/copy-text-view.js

@@ -13,14 +13,6 @@ const style = {
       border: "2px solid red",
     },
   },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
   containerStyle: {
     display: "flex",
     alignItems: "center",
@@ -31,10 +23,6 @@ const style = {
     margin: "0",
     color: "var(--sl-color-danger-500)",
   },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
 };
 const vanillaStyle = `
   :host{
@@ -62,7 +50,6 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { buttonStyle = "icon" } = props;
-  console.log("notification text is", props.notificationText);
   const error = !props.loading && props.error;
   const inputText = error ? props.inputPlaceholderText : props.copyString;
   const disabled = error || props.loading || props.disabled;
@@ -72,7 +59,7 @@ export function CopyTextView(props) {
       ? "top"
       : "top-end";
   const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
-  return (h("div", { class: sheet.classes.ContainerDiv },
+  return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle,
@@ -85,6 +72,5 @@ export function CopyTextView(props) {
         buttonStyle === "icon" && copyButton,
         error && (h("p", { slot: "help-text", class: sheet.classes.errorTextStyle }, props.errorText))),
       (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
-        copyButton),
-    props.showNotificationText && props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
+        copyButton)));
 }