@saasquatch/mint-components 1.13.0-9 → 1.13.1-0

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

@@ -0,0 +1,536 @@
+import { isDemo, useParentState, useSetParent, } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
+import { useWidgetVerification } from "./useWidgetVerification";
+/**
+ * @uiName Widget Verification Flow
+ * @exampleGroup Widget Verification
+ * @example Widget Verification Flow - <sqm-widget-verification></sqm-widget-verification>
+ */
+export class WidgetVerification {
+  constructor() {
+    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    GENERAL PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName General verify widget header text
+     * @uiGroup General Text
+     */
+    this.general_verifyEmailHeader = "Verify your email";
+    /**
+     * @uiName General verify widget description text
+     * @uiGroup General Text
+     */
+    this.general_verifyEmailDescription = "To get your cash paid out directly to your bank account, please complete your account setup";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify email widget header text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    /**
+     * @uiName Email input label
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     * @uiGroup Email Verification Step
+     */
+    this.emailStep_emailValidationErrorText = "Please enter a valid email";
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                    EMAIL STEP PROPS
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+    /**
+     * @uiName Verify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     * @uiGroup Code Verification Step
+     */
+    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = getProps(this);
+    return extractProps(props, prefix);
+  }
+  render() {
+    const { showCode, onVerification, loading } = isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerification();
+    if (loading)
+      return h("sl-spinner", null);
+    const generalText = this.getStepTextProps("general_");
+    return (h("div", null,
+      h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
+      h("p", { style: {
+          color: "var(--sl-color-neutral-500)",
+          fontSize: "var(--sl-font-size-medium)",
+          margin: "0",
+        } }, generalText.verifyEmailDescription),
+      showCode ? (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+  }
+  static get is() { return "sqm-widget-verification"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "general_verifyEmailHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General verify widget header text",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_verify-email-header",
+      "reflect": false,
+      "defaultValue": "\"Verify your email\""
+    },
+    "general_verifyEmailDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "General verify widget description text",
+            "name": "uiName"
+          }, {
+            "text": "General Text",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "general_verify-email-description",
+      "reflect": false,
+      "defaultValue": "\"To get your cash paid out directly to your bank account, please complete your account setup\""
+    },
+    "emailStep_verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email widget header text",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_verify-email-header-text",
+      "reflect": false,
+      "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
+    },
+    "emailStep_sendCodeErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code to email alert header",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-header",
+      "reflect": false,
+      "defaultValue": "\"There was an error sending your code.\""
+    },
+    "emailStep_sendCodeErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code to email alert description",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-description",
+      "reflect": false,
+      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
+    },
+    "emailStep_emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email input label",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_email-label",
+      "reflect": false,
+      "defaultValue": "\"Email\""
+    },
+    "emailStep_sendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-text",
+      "reflect": false,
+      "defaultValue": "\"Send code\""
+    },
+    "emailStep_emailValidationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Send code button text",
+            "name": "uiName"
+          }, {
+            "text": "Email Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "email-step_email-validation-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please enter a valid email\""
+    },
+    "codeStep_verifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code widget header text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "code-step_verify-code-header-text",
+      "reflect": false,
+      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
+    },
+    "codeStep_reverifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reverify code widget header text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "code-step_reverify-code-header-text",
+      "reflect": false,
+      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
+    },
+    "codeStep_resendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": "Text displayed under verify button"
+      },
+      "attribute": "code-step_resend-code-text",
+      "reflect": false,
+      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
+    },
+    "codeStep_resendCodeLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code label",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": "The link that appears in the resend code link"
+      },
+      "attribute": "code-step_resend-code-label",
+      "reflect": false,
+      "defaultValue": "\"Resend code\""
+    },
+    "codeStep_codeResentSuccessfullyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Resend code text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": "Link text displayed under verify button"
+      },
+      "attribute": "code-step_code-resent-successfully-text",
+      "reflect": false,
+      "defaultValue": "\"Another code has been sent to {email}\""
+    },
+    "codeStep_invalidCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Invalid code text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": "Error text displayed under verification input"
+      },
+      "attribute": "code-step_invalid-code-text",
+      "reflect": false,
+      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
+    },
+    "codeStep_verifyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify code button text",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "code-step_verify-text",
+      "reflect": false,
+      "defaultValue": "\"Verify\""
+    },
+    "codeStep_networkErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Network error message",
+            "name": "uiName"
+          }, {
+            "text": "Code Verification Step",
+            "name": "uiGroup"
+          }],
+        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
+      },
+      "attribute": "code-step_network-error-message",
+      "reflect": false,
+      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
+    }
+  }; }
+}
+function useDemoWidgetVerificationInternal() {
+  const [showCode, setShowCode] = useParentState({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = useParentState({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: undefined,
+  });
+  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
+}

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

@@ -0,0 +1,169 @@
+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 [verificationEmail, setVerificationEmail] = useState(null);
+  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, _e, _f, _g, _h;
+    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),
+      });
+      setVerificationEmail(((_g = (_f = (_e = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user) === null || _g === void 0 ? void 0 : _g.email) || ((_h = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _h === void 0 ? void 0 : _h.email) ||
+        null);
+      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,
+    verificationEmail,
+    send: [
+      sendVerificationEmail,
+      { loading: sendLoading, errors: sendErrors },
+    ],
+    verify: [
+      verifyVerificationEmail,
+      { loading: verifyLoading, errors: verifyErrors },
+    ],
+  };
+}