@saasquatch/mint-components 1.12.0-8 → 1.12.1-0

package/dist/collection/components/sqm-widget-verification/useVerificationEmail.js

@@ -1,165 +0,0 @@
-import { useLazyQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { gql } from "graphql-request";
-const UserLookupQuery = gql `
-  query userLookup {
-    viewer {
-      ... on User {
-        id
-        accountId
-        email
-        impactConnection {
-          user {
-            id
-            email
-          }
-        }
-      }
-    }
-  }
-`;
-const ParticipantVerificationEmailMutation = gql `
-  mutation requestUserEmailVerification($user: UserIdInput!) {
-    requestUserEmailVerification(user: $user) {
-      success
-    }
-  }
-`;
-const ImpactVerificationEmailMutation = gql `
-  mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
-    requestImpactPublisherEmail2FA(user: $user) {
-      success
-    }
-  }
-`;
-const VerifyUserEmailMutation = gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
-      id
-      accountId
-      email
-      emailVerified
-    }
-  }
-`;
-const SubmitImpactCodeMutation = gql `
-  mutation submitImpactPublisherEmail2FACode(
-    $user: UserIdInput!
-    $code: String!
-  ) {
-    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
-      verifiedEmail
-      accessKey
-    }
-  }
-`;
-// ! It's important when using this hook to ensure initialisation
-// ! is done before calling any mutations
-export function useVerificationEmail() {
-  const userIdentity = useUserIdentity();
-  const [hasEmails, setHasEmails] = useState({
-    participant: false,
-    impact: false,
-  });
-  const [fetch] = useLazyQuery(UserLookupQuery);
-  // Send mutations
-  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = useMutation(ParticipantVerificationEmailMutation);
-  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = useMutation(ImpactVerificationEmailMutation);
-  const sendLoading = participantEmailLoading || impactEmailLoading;
-  const sendErrors = participantEmailErrors || impactEmailErrors;
-  // Verification mutations
-  const [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = useMutation(VerifyUserEmailMutation);
-  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = useMutation(SubmitImpactCodeMutation);
-  const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
-  const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
-  const [initialized, setInitialized] = useState(false);
-  const initialise = async () => {
-    var _a, _b, _c, _d;
-    try {
-      const lookup = await fetch({});
-      if (!lookup || lookup instanceof Error)
-        throw new Error();
-      setHasEmails({
-        participant: !!((_a = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _a === void 0 ? void 0 : _a.email),
-        impact: !!((_d = (_c = (_b = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.email),
-      });
-      setInitialized(true);
-    }
-    catch (e) {
-      console.error("Could not initialise verification", e);
-    }
-  };
-  const sendVerificationEmail = async () => {
-    let result = null;
-    if (!initialized)
-      return result;
-    if (!hasEmails.participant && !hasEmails.impact)
-      return result;
-    try {
-      const request = hasEmails.impact ? sendImpactEmail : sendParticipantEmail;
-      const res = await request({
-        user: {
-          id: userIdentity.id,
-          accountId: userIdentity.accountId,
-        },
-      });
-      if (res instanceof Error || !res)
-        throw new Error();
-      result = hasEmails.impact
-        ? res.requestImpactPublisherEmail2FA
-        : res.requestUserEmailVerification;
-    }
-    catch (e) {
-      console.error("Could not send verification email", e);
-    }
-    finally {
-      return result;
-    }
-  };
-  const verifyVerificationEmail = async (code) => {
-    var _a;
-    let result = null;
-    if (!initialized)
-      return result;
-    if (!hasEmails.participant && !hasEmails.impact)
-      return result;
-    try {
-      const request = hasEmails.impact ? submitImpactCode : verifyUserEmail;
-      const res = await request({
-        user: {
-          id: userIdentity.id,
-          accountId: userIdentity.accountId,
-        },
-        code,
-      });
-      if (res instanceof Error || !res)
-        throw new Error();
-      result = {
-        success: true,
-        accessKey: hasEmails.impact
-          ? (_a = res.submitImpactPublisherEmail2FACode) === null || _a === void 0 ? void 0 : _a.accessKey : undefined,
-      };
-    }
-    catch (e) {
-      console.error("Could not verify email", e);
-    }
-    finally {
-      return result;
-    }
-  };
-  useEffect(() => {
-    if (!initialized)
-      initialise();
-  }, []);
-  return {
-    initialized,
-    send: [
-      sendVerificationEmail,
-      { loading: sendLoading, errors: sendErrors },
-    ],
-    verify: [
-      verifyVerificationEmail,
-      { loading: verifyLoading, errors: verifyErrors },
-    ],
-  };
-}

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

@@ -1,22 +0,0 @@
-import { h } from "@stencil/core";
-export default {
-  title: "Components/Payout Status Alert",
-};
-const defaultProps = {
-  error: false,
-  status: "INFORMATION_REQUIRED",
-  loading: false,
-  showVerifyIdentity: 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 VerifyIdentityOpen = () => (h("sqm-payout-status-alert", { demoData: {
-    states: {
-      ...defaultProps,
-      status: "VERIFICATION_NEEDED",
-      showVerifyIdentity: true,
-    },
-  } }));
-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,116 +0,0 @@
-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)",
-  },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d, _e;
-  const { text, states, data, callbacks } = props;
-  if (states.loading) {
-    return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
-  }
-  if (states.status === "DONE") {
-    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.informationRequiredButtonText,
-          alertType: "info",
-          icon: "info-circle",
-          class: sheet.classes.InfoAlertContainer,
-        };
-      case "VERIFICATION_NEEDED":
-        return {
-          header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
-          alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
-        };
-      case "HOLD":
-        return {
-          header: text.holdHeader,
-          description: text.holdDescription,
-          buttonText: null,
-          alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
-        };
-      default:
-        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));
-      default:
-        return;
-    }
-  }
-  return (h("div", { part: "sqm-base" },
-    h("style", { type: "text/css" }, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
-      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", { 
-      // class={sheet.classes.Dialog}
-      open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel }, "AL: TODO add IFRAME URL")));
-}

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

@@ -1,354 +0,0 @@
-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";
-/**
- * @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() { }
-  getTextProps() {
-    return getProps(this);
-  }
-  render() {
-    const props = isDemo()
-      ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus(this);
-    console.log({ props });
-    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": "Info required alert header",
-            "name": "uiName"
-          }],
-        "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": "Info required alert description",
-            "name": "uiName"
-          }],
-        "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": "Info required alert button text",
-            "name": "uiName"
-          }],
-        "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": "Verification required alert header",
-            "name": "uiName"
-          }],
-        "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": "Verification required alert description",
-            "name": "uiName"
-          }],
-        "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": "Verification required alert button text",
-            "name": "uiName"
-          }],
-        "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": "Payout on hold alert header",
-            "name": "uiName"
-          }],
-        "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": "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?: { error: boolean; loading: boolean; status: PayoutStatus; showVerifyIdentity: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
-        "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: {
-      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 });
-}