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

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

@@ -3,8 +3,9 @@ import { Component, h, Prop } from "@stencil/core";
 import { useWidgetEmailVerification } from "./useEmailVerification";
 import { WidgetEmailVerificationView, } from "./sqm-email-verification-view";
 import { getProps } from "../../../utils/utils";
-import { isDemo } from "@saasquatch/component-boilerplate";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
+import { SHOW_CODE_NAMESPACE } from "../keys";
 /**
  * @uiName Widget Verification Gate
  */
@@ -15,9 +16,13 @@ export class WidgetEmailVerification {
      */
     this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
     /**
-     * @uiName Verify email error text
+     * @uiName Send code to email alert header
      */
-    this.errorText = "Failed to send an email. If this continues, contact Support with impact.com";
+    this.sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
+     */
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
     /**
      * @uiName Email input label
      */
@@ -26,6 +31,10 @@ export class WidgetEmailVerification {
      * @uiName Send code button text
      */
     this.sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     */
+    this.emailValidationErrorText = "Please enter a valid email";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,7 +71,28 @@ export class WidgetEmailVerification {
       "reflect": false,
       "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
     },
-    "errorText": {
+    "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": ""
+      },
+      "attribute": "send-code-error-header",
+      "reflect": false,
+      "defaultValue": "\"There was an error sending your code.\""
+    },
+    "sendCodeErrorDescription": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -74,14 +104,14 @@ export class WidgetEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Verify email error text",
+            "text": "Send code to email alert description",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "error-text",
+      "attribute": "send-code-error-description",
       "reflect": false,
-      "defaultValue": "\"Failed to send an email. If this continues, contact Support with impact.com\""
+      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
     },
     "emailLabel": {
       "type": "string",
@@ -125,12 +155,33 @@ export class WidgetEmailVerification {
       "reflect": false,
       "defaultValue": "\"Send code\""
     },
+    "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": ""
+      },
+      "attribute": "email-validation-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please enter a valid email\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetEmailVerificationViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; email: string; }; }",
+        "resolved": "{ states?: { error: boolean; initialLoading: boolean; loading: boolean; email: string; sendCodeError: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -158,14 +209,17 @@ export class WidgetEmailVerification {
   }; }
 }
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = useSetParent(SHOW_CODE_NAMESPACE);
   return deepmerge({
     states: {
-      error: "",
+      error: true,
+      initialLoading: false,
       loading: false,
-      email: "",
+      email: "test@example.com",
+      sendCodeError: true,
     },
     callbacks: {
-      submitEmail: async () => { },
+      submitEmail: async () => setShowCode(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -1,24 +1,44 @@
-import { useMutation, useParent, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
+import { useMutation, useParent, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "../keys";
-export const VerificationEmailMutation = gql `
-  mutation requestUserEmailVerification($user: UserIdInput!) {
-    requestUserEmailVerification(user: $user) {
-      success
+import { useVerificationEmail } from "../useVerificationEmail";
+export const UpsertUserEmailMutation = gql `
+  mutation upsertUser($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      accountId
+      email
     }
   }
 `;
-// TODO: Move to component-boilerplate
-export function useVerificationEmailMutation() {
+export const UserLookupQuery = gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+export function useUpsertUserEmail() {
   const user = useUserIdentity();
-  const [request, { loading, data, errors }] = useMutation(VerificationEmailMutation);
-  const sendVerificationEmailMutation = async () => {
+  const [request, { loading: loading, data, errors }] = useMutation(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
     try {
       const result = await request({
-        user: {
+        userInput: {
           id: user.id,
           accountId: user.accountId,
+          email,
         },
       });
       if (result instanceof Error || !result)
@@ -26,12 +46,12 @@ export function useVerificationEmailMutation() {
       return result;
     }
     catch (e) {
-      console.error("Could not send verification email", e);
+      console.error("Could not set email on user", e);
       return undefined;
     }
   };
   return [
-    sendVerificationEmailMutation,
+    upsertUserEmail,
     {
       loading,
       data,
@@ -42,19 +62,53 @@ export function useVerificationEmailMutation() {
 export function useWidgetEmailVerification(props) {
   const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
   const [email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
   const [error, setError] = useState(false);
-  const [sendVerificationEmailMutation, { loading, data, errors }] = useVerificationEmailMutation();
+  const [mutationError, setMutationError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = useState(true);
+  const { data, loading: initialLoading } = useQuery(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
   const submitEmail = async (e) => {
     e.preventDefault();
-    const formData = e.detail.formData;
-    const toAddress = formData.get("email").toString();
-    const result = await sendVerificationEmailMutation();
-    if (!result || !result.requestUserEmailVerification.success)
-      setError(true);
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
     else {
+      // This is used to let the code verification widget know an email was already sent
       setEmail(toAddress);
       setShowCode(true);
     }
+    setLoading(false);
   };
   return {
     callbacks: {
@@ -62,8 +116,10 @@ export function useWidgetEmailVerification(props) {
     },
     states: {
       loading,
-      error: error && props.errorText,
-      email,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
     },
     text: props.getTextProps(),
   };

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

@@ -1,27 +1,339 @@
-import { useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
-import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "./keys";
+import { isDemo, useLazyQuery, useParentState, useSetParent, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
+import { getProps } from "../../utils/utils";
+import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
+import { gql } from "graphql-request";
+import { useEffect } from "@saasquatch/universal-hooks";
+const USER_LOOKUP = gql `
+  query checkUserVerification {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+      }
+    }
+  }
+`;
+function useWidgetVerificationInternal() {
+  const userIdentity = useUserIdentity();
+  const [showCode, setShowCode] = useParentState({
+    namespace: SHOW_CODE_NAMESPACE,
+    initialValue: false,
+  });
+  const [email, setEmail] = useParentState({
+    namespace: VERIFICATION_EMAIL_NAMESPACE,
+    initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
+  });
+  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = useState(true);
+  const [fetch] = useLazyQuery(USER_LOOKUP);
+  useEffect(() => {
+    const checkUser = async () => {
+      var _a;
+      try {
+        const res = await fetch({});
+        if (!res || res instanceof Error)
+          throw new Error();
+        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
+          setContext(true);
+      }
+      catch (e) {
+        console.error("Could not fetch user information:", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading };
+}
 export class WidgetVerificationInternal {
   constructor() {
     withHooks(this);
   }
   disconnectedCallback() { }
+  getStepTextProps(prefix) {
+    const props = getProps(this);
+    return extractProps(props, prefix);
+  }
   render() {
-    const userIdentity = useUserIdentity();
-    const [showCode, setShowCode] = useParentState({
-      namespace: SHOW_CODE_NAMESPACE,
-      initialValue: false,
-    });
-    const [email, setEmail] = useParentState({
-      namespace: VERIFICATION_EMAIL_NAMESPACE,
-      initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
-    });
+    const { showCode, onVerification, loading } = isDemo()
+      ? useDemoWidgetVerificationInternal()
+      : useWidgetVerificationInternal();
+    // TODO: Shoelace spinner is throwing errors
+    if (loading)
+      return h("div", null);
+    // if (loading) {
+    //   return <sl-spinner style="font-size: 2rem;"></sl-spinner>;
+    // }
     if (showCode) {
-      return h("sqm-code-verification", null);
+      return (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
     }
-    return h("sqm-email-verification", null);
+    return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
   static get is() { return "sqm-widget-verification-internal"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "emailStep_verifyEmailHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_verify-email-header-text",
+      "reflect": false
+    },
+    "emailStep_sendCodeErrorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-header",
+      "reflect": false
+    },
+    "emailStep_sendCodeErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-error-description",
+      "reflect": false
+    },
+    "emailStep_emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_email-label",
+      "reflect": false
+    },
+    "emailStep_sendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_send-code-text",
+      "reflect": false
+    },
+    "emailStep_emailValidationErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-step_email-validation-error-text",
+      "reflect": false
+    },
+    "codeStep_verifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_verify-code-header-text",
+      "reflect": false
+    },
+    "codeStep_reverifyCodeHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_reverify-code-header-text",
+      "reflect": false
+    },
+    "codeStep_resendCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_resend-code-text",
+      "reflect": false
+    },
+    "codeStep_resendCodeLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_resend-code-label",
+      "reflect": false
+    },
+    "codeStep_codeResentSuccessfullyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_code-resent-successfully-text",
+      "reflect": false
+    },
+    "codeStep_invalidCodeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_invalid-code-text",
+      "reflect": false
+    },
+    "codeStep_verifyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_verify-text",
+      "reflect": false
+    },
+    "codeStep_networkErrorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "code-step_network-error-message",
+      "reflect": false
+    }
+  }; }
+}
+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 };
 }