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

package/dist/esm/sqm-code-verification.entry.js

@@ -1,14 +1,14 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
 import { l, k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
 import { i as intl } from './global-6306a9b8.js';
-import { d as dist, M as Mn, D as Dn, K, c as xe, i as isDemo } from './index.module-6c840c4e.js';
+import { d as dist, M as Mn, D as Dn, i as isDemo, S as Sn } from './index.module-6c840c4e.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
-import { b as VERIFICATION_EMAIL_NAMESPACE, V as VERIFICATION_EVENT_KEY, S as SHOW_CODE_NAMESPACE } from './keys-a1496e39.js';
-import { a as useVerificationEmailMutation } from './useEmailVerification-7135732c.js';
+import { a as VERIFICATION_EMAIL_NAMESPACE, S as SHOW_CODE_NAMESPACE, V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
+import { u as useVerificationEmail } from './useVerificationEmail-c32696ba.js';
 
 const style = {
   Wrapper: {
@@ -92,7 +92,16 @@ function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (h("a", { href: text.resendCodeLink, target: "_blank", style: { textDecoration: "none" } }, text.resendCodeLabel)),
+    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
   });
   const inputClass = states.verifyFailed
     ? sheet.classes.CodeInputError
@@ -103,11 +112,14 @@ function WidgetCodeVerificationView(props) {
       styleString),
     h("div", { class: sheet.classes.Wrapper },
       h("div", { class: sheet.classes.HeaderContainer },
-        h(TextSpanView, { type: "p" }, states.verifyFailed
-          ? text.reverifyCodeHeaderText
-          : text.verifyCodeHeaderText)),
-      states.codeResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        h("b", null, text.codeResentSuccessfullyText))),
+        h(TextSpanView, { type: "p" }, intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        h("b", null, codeResentSuccessfully))),
       h("div", { class: sheet.classes.InputsContainer },
         h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
           h("sl-input", { class: inputClass, name: "code" }),
@@ -117,45 +129,22 @@ function WidgetCodeVerificationView(props) {
           h("sl-input", { class: inputClass, name: "code" }),
           h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
       h("div", { class: sheet.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText),
-        h(TextSpanView, { type: "p" },
-          h("a", { href: "/", style: { textDecoration: "none" } }, text.useDifferentEmailText))))));
+        h(TextSpanView, { type: "p" }, resendCodeText)))));
 }
 
-// TODO: Move to component-boilerplate
 const VerifyEmailWithCodeMutation = dist.gql `
-  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
-    verifyUserEmail(user: $user, code: $code) {
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
       verifiedEmail
       accessKey
     }
   }
 `;
-function useCodeVerificationMutation() {
-  const user = K();
-  const [request, { loading, data, errors }] = xe(VerifyEmailWithCodeMutation);
-  const verifyUserWithCodeMutation = async (code) => {
-    try {
-      const result = await request({
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-        code,
-      });
-      if (result instanceof Error || !result)
-        throw new Error();
-      return result;
-    }
-    catch (e) {
-      console.error("Failed to verify user", e);
-      return null;
-    }
-  };
-  return [verifyUserWithCodeMutation, { loading, data, errors }];
-}
 function useWidgetCodeVerification(props) {
   const host = l();
   const [_, setShowCode] = Mn(SHOW_CODE_NAMESPACE);
@@ -164,9 +153,8 @@ function useWidgetCodeVerification(props) {
   const [emailResent, setEmailResent] = useState(false);
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
-  // TODO: Need to handle error states for these errors
-  const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] = useCodeVerificationMutation();
-  const [request, { loading: resendLoading, data, errors: resendErrors }] = useVerificationEmailMutation();
+  const [emailError, setEmailError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -182,7 +170,7 @@ function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
@@ -192,8 +180,10 @@ function useWidgetCodeVerification(props) {
         if (input.length > 1) {
           const rest = input.slice(1);
           e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
         }
         codeElements[idx + 1].focus();
       });
@@ -204,14 +194,16 @@ function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    // TODO: Error checks, depends on what mutation is set up as
-    const result = await request();
-    if (emailSent) {
-      setEmailResent(true);
-      setTimeout(() => {
-        setEmailResent(false);
-      }, 500);
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
     }
+    if (emailSent)
+      setEmailResent(true);
     setEmailSent(true);
   };
   const submitCode = async () => {
@@ -225,16 +217,13 @@ function useWidgetCodeVerification(props) {
     codeElements.forEach((element) => {
       code = `${code}${element.value}`;
     });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
     setValidationError(false);
-    // Only 123456 passes for a valid code rn
-    const res = await verifyUser(code);
-    if (res) {
-      const event = new CustomEvent(VERIFICATION_EVENT_KEY, {
-        detail: { token: res.verifyUserEmail.accessKey },
-        composed: true,
-        bubbles: true,
-      });
-      host.dispatchEvent(event);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
       reset();
     }
     else {
@@ -242,10 +231,15 @@ function useWidgetCodeVerification(props) {
     }
   };
   useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
     // email should already exist if user has completed email-verification
     if (!email)
       resendEmail();
-  }, []);
+    else
+      setEmailSent(true);
+  }, [initialized]);
   return {
     refs: {
       codeWrapperRef: setCodeRef,
@@ -253,7 +247,9 @@ function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {
@@ -270,7 +266,7 @@ const WidgetCodeVerification = class {
     /**
      * @uiName Verify code widget header text
      */
-    this.verifyCodeHeaderText = "Enter the code sent to email@example.com from our referral provider, impact.com.";
+    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
     /**
      * @uiName Reverify code widget header text
      */
@@ -285,27 +281,16 @@ const WidgetCodeVerification = class {
      * @uiName Resend code label
      */
     this.resendCodeLabel = "Resend code";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code link
-     */
-    // AL: TODO connect route to resend verification code
-    this.resendCodeLink = "/resend-code";
     /**
      * Link text displayed under verify button
      * @uiName Resend code text
      */
     this.codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Link text displayed under the verify button
-     * @uiName Use different email text
-     */
-    this.useDifferentEmailText = "Use a different email";
     /**
      * Error text displayed under verification input
      * @uiName Invalid code text
      */
-    this.invalidCodeText = " Please check your code and try again. If you’re still having trouble, try resending your code.";
+    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
     /**
      * @uiName Verify code button text
      */
@@ -329,17 +314,22 @@ const WidgetCodeVerification = class {
   }
 };
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = useState(false);
+  const setVerifiedContext = Sn(VERIFICATION_PARENT_NAMESPACE);
   return cjs({
     states: {
       loading: false,
-      email: "",
-      verifyFailed: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
     },
     refs: {
       codeWrapperRef: () => { },
     },
     callbacks: {
-      submitCode: async () => { },
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/esm/sqm-email-verification.entry.js

@@ -1,12 +1,134 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
-import { n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
-import { i as isDemo } from './index.module-6c840c4e.js';
+import { k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
+import { d as dist, M as Mn, E as En, K, c as xe, i as isDemo, S as Sn } from './index.module-6c840c4e.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
-import './keys-a1496e39.js';
-import { u as useWidgetEmailVerification } from './useEmailVerification-7135732c.js';
+import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE } from './keys-db1897ae.js';
+import { u as useVerificationEmail } from './useVerificationEmail-c32696ba.js';
+
+const UpsertUserEmailMutation = dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    user(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = K();
+  const [request, { loading: loading, data, errors }] = xe(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+          email,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not set email on user", e);
+      return undefined;
+    }
+  };
+  return [
+    upsertUserEmail,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = Mn(SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = Mn(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
+  const [error, setError] = useState(false);
+  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 } = En(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();
+    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: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}
 
 const style = {
   Wrapper: {
@@ -22,6 +144,16 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "&::part(message)": {
+      display: "flex",
+      flexDirection: "column",
+    },
+  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -70,15 +202,18 @@ function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
-      " ",
+    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("b", null, text.sendCodeErrorHeader),
+      text.sendCodeErrorDescription)),
+    states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
       h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       h("sl-form", { "onSl-submit": callbacks.submitEmail },
         h("div", { class: sheet.classes.InputsContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", required: true }, (states.error
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
             ? {
               class: sheet.classes.ErrorInput,
-              helpText: "Please enter a valid email",
+              helpText: text.emailValidationErrorText,
             }
             : {}))),
           h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
@@ -92,9 +227,13 @@ const WidgetEmailVerification = class {
      */
     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.sendCodeErrorHeader = "There was an error sending your code.";
+    /**
+     * @uiName Send code to email alert description
      */
-    this.errorText = "Failed to send an email. If this continues, contact Support with impact.com";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
     /**
      * @uiName Email input label
      */
@@ -103,6 +242,10 @@ const WidgetEmailVerification = class {
      * @uiName Send code button text
      */
     this.sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     */
+    this.emailValidationErrorText = "Please enter a valid email";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -117,14 +260,17 @@ const WidgetEmailVerification = class {
   }
 };
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = Sn(SHOW_CODE_NAMESPACE);
   return cjs({
     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 });