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

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

@@ -12,7 +12,7 @@ const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 const keys = require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-30a1c7f6.js');
+const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
 
 const style = {
   Wrapper: {
@@ -96,7 +96,16 @@ function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (index.h("a", { href: text.resendCodeLink, target: "_blank", style: { textDecoration: "none" } }, text.resendCodeLabel)),
+    resendCodeLink: (index.h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = global.intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
   });
   const inputClass = states.verifyFailed
     ? sheet.classes.CodeInputError
@@ -107,11 +116,14 @@ function WidgetCodeVerificationView(props) {
       styleString),
     index.h("div", { class: sheet.classes.Wrapper },
       index.h("div", { class: sheet.classes.HeaderContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, states.verifyFailed
-          ? text.reverifyCodeHeaderText
-          : text.verifyCodeHeaderText)),
-      states.codeResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        index.h("b", null, text.codeResentSuccessfullyText))),
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        index.h("b", null, codeResentSuccessfully))),
       index.h("div", { class: sheet.classes.InputsContainer },
         index.h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
           index.h("sl-input", { class: inputClass, name: "code" }),
@@ -121,45 +133,22 @@ function WidgetCodeVerificationView(props) {
           index.h("sl-input", { class: inputClass, name: "code" }),
           index.h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+        index.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)),
       index.h("div", { class: sheet.classes.FooterContainer },
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText),
-        index.h(sqmTextSpanView.TextSpanView, { type: "p" },
-          index.h("a", { href: "/", style: { textDecoration: "none" } }, text.useDifferentEmailText))))));
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
 }
 
-// TODO: Move to component-boilerplate
 const VerifyEmailWithCodeMutation = index_module.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 = index_module.K();
-  const [request, { loading, data, errors }] = index_module.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 = stencilHooks_module.l();
   const [_, setShowCode] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
@@ -168,9 +157,8 @@ function useWidgetCodeVerification(props) {
   const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
   const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
   const [validationError, setValidationError] = stencilHooks_module.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 }] = useEmailVerification.useVerificationEmailMutation();
+  const [emailError, setEmailError] = stencilHooks_module.useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
   stencilHooks_module.useEffect(() => {
     if (!codeRef)
       return;
@@ -186,7 +174,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) {
@@ -196,8 +184,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();
       });
@@ -208,14 +198,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 () => {
@@ -229,16 +221,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(keys.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 {
@@ -246,10 +235,15 @@ function useWidgetCodeVerification(props) {
     }
   };
   stencilHooks_module.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,
@@ -257,7 +251,9 @@ function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {
@@ -274,7 +270,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
      */
@@ -289,27 +285,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
      */
@@ -333,17 +318,22 @@ const WidgetCodeVerification = class {
   }
 };
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const setVerifiedContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
   return cjs.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/cjs/sqm-email-verification.cjs.entry.js

@@ -9,8 +9,130 @@ const cjs = require('./cjs-1066ec21.js');
 const JSS = require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
-require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-30a1c7f6.js');
+const keys = require('./keys-cff24974.js');
+const useVerificationEmail = require('./useVerificationEmail-6aacdb71.js');
+
+const UpsertUserEmailMutation = index_module.dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    user(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = index_module.dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = index_module.K();
+  const [request, { loading: loading, data, errors }] = index_module.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] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = index_module.Mn(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = stencilHooks_module.useState(false);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [mutationError, setMutationError] = stencilHooks_module.useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail.useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = stencilHooks_module.useState(true);
+  const { data, loading: initialLoading } = index_module.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,}))$/;
+  stencilHooks_module.useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  stencilHooks_module.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: {
@@ -26,6 +148,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",
@@ -74,15 +206,18 @@ function WidgetEmailVerificationView(props) {
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.loading ? (renderLoadingSkeleton()) : (index.h("div", { class: sheet.classes.Wrapper },
-      " ",
+    states.sendCodeError && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      index.h("b", null, text.sendCodeErrorHeader),
+      text.sendCodeErrorDescription)),
+    states.initialLoading ? (renderLoadingSkeleton()) : (index.h("div", { class: sheet.classes.Wrapper },
       index.h(sqmTextSpanView.TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       index.h("sl-form", { "onSl-submit": callbacks.submitEmail },
         index.h("div", { class: sheet.classes.InputsContainer },
-          index.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
+          index.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,
             }
             : {}))),
           index.h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
@@ -96,9 +231,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
      */
@@ -107,6 +246,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -116,19 +259,22 @@ const WidgetEmailVerification = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoWidgetEmailVerification(this)
-      : useEmailVerification.useWidgetEmailVerification(this);
+      : useWidgetEmailVerification(this);
     return index.h(WidgetEmailVerificationView, Object.assign({}, props));
   }
 };
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = index_module.Sn(keys.SHOW_CODE_NAMESPACE);
   return cjs.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 });