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

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = stencilHooks_module.browser("sq:widget-verification");
@@ -37,7 +37,7 @@ function useTemplateChildren({ parent, callback }) {
 const WidgetVerification = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+    stencilHooks_module.h(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{stencil-hooks.module-72742a0b.js → stencil-hooks.module-a5a04d8a.js}

@@ -1114,17 +1114,14 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 
 exports.browser = browser;
-exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createCommonjsModule = createCommonjsModule;
 exports.d = d$2;
 exports.getAugmentedNamespace = getAugmentedNamespace;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-exports.h = h$1;
-exports.h$1 = h$2;
+exports.h = h$2;
 exports.l = l$1;
 exports.m = m$2;
-exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;

package/dist/cjs/{useChildElements-410d2435.js → useChildElements-23beb180.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
 
 function useChildElements() {
   const host = index_module.T();

package/dist/cjs/useEmailVerification-33465f36.js

@@ -0,0 +1,155 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
+const index = require('./index-56d1fa5b.js');
+const keys = require('./keys-cff24974.js');
+
+const VerificationEmailMutation = index.dist.gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+const UpsertUserEmailMutation = index.dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    user(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = index.dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+      }
+    }
+  }
+`;
+// TODO: Move to component-boilerplate
+function useVerificationEmailMutation() {
+  const user = index_module.K();
+  const [request, { loading: loading, data, errors }] = index_module.xe(VerificationEmailMutation);
+  const sendVerificationEmailMutation = async () => {
+    try {
+      const result = await request({
+        user: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not send verification email", e);
+      return undefined;
+    }
+  };
+  return [
+    sendVerificationEmailMutation,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+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 [sendVerificationEmailMutation] = useVerificationEmailMutation();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = stencilHooks_module.useState(false);
+  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]);
+  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);
+    }
+    const result = await sendVerificationEmailMutation();
+    if (!result || !result.requestUserEmailVerification.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,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+exports.useVerificationEmailMutation = useVerificationEmailMutation;
+exports.useWidgetEmailVerification = useWidgetEmailVerification;

package/dist/cjs/{useInstantAccessRegistration-ccf81eae.js → useInstantAccessRegistration-7c125c00.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
+const useRegistrationFormState = require('./useRegistrationFormState-e7e820d0.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);

package/dist/cjs/{useReferralTable-824ac152.js → useReferralTable-54d0ba70.js}

@@ -1,14 +1,15 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
-const reRender = require('./re-render-5bde3d2e.js');
-const useChildElements = require('./useChildElements-410d2435.js');
+const index$1 = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
+const reRender = require('./re-render-5de6631a.js');
+const useChildElements = require('./useChildElements-23beb180.js');
+const index = require('./index-56d1fa5b.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
-const GET_REFERRER_DATA = index_module.dist.gql `
+const GET_REFERRER_DATA = index.dist.gql `
   query getReferrals(
     $programId: ID
     $rewardFilter: RewardFilterInput
@@ -77,7 +78,7 @@ const GET_REFERRER_DATA = index_module.dist.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = index_module.dist.gql `
+const GET_REFERRAL_DATA = index.dist.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -214,7 +215,7 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
     }
   }
 `;
-const GET_IMPACT_TAX = index_module.dist.gql `
+const GET_IMPACT_TAX = index.dist.gql `
   query getImpactTax {
     viewer {
       ... on User {
@@ -311,12 +312,12 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // show the referrer row before any other rows
     let referrerRow;
     if (showReferrerRow && states.currentPage === 0) {
-      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index.h)));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index$1.h)));
       referrerRow = await Promise.all(referrerPromise);
     }
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index$1.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -404,7 +405,7 @@ async function tryMethod(c, callback) {
       debug("label promise failed", e);
     }
     debug("label promise failed", e);
-    return index.h("span", null);
+    return index$1.h("span", null);
   }
   try {
     return await renderPromise;
@@ -414,8 +415,8 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = generateUserError(e);
-    return (index.h("details", null,
-      index.h("summary", null, "Error"),
+    return (index$1.h("details", null,
+      index$1.h("summary", null, "Error"),
       userError));
   }
 }

package/dist/cjs/{useRegistrationFormState-f9ce55be.js → useRegistrationFormState-e7e820d0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {

package/dist/cjs/{utilities-f7de6c04.js → utilities-ac5b5f2c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const index_module = require('./index.module-236d0403.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/components/sqm-payout-button-scroll/PayoutButtonScroll.stories.js

@@ -3,7 +3,6 @@ export default {
   title: "Components/Payout Scroll Button",
 };
 const defaultProps = {
-  payoutSettingsComplete: false,
+  payoutSettingsComplete: true,
 };
-export const Default = () => (h("sqm-payout-button-scroll", { demoData: { states: defaultProps } }));
 export const CompletedTaxForm = () => (h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps, payoutSettingsComplete: true } } }));

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js

@@ -7,6 +7,7 @@ const style = {
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-small)",
+    margin: "0",
   },
 };
 const sheet = createStyleSheet(style);

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js

@@ -8,7 +8,14 @@ import deepmerge from "deepmerge";
  */
 export class PayoutButtonScroll {
   constructor() {
+    /**
+     * @uiName Payout button text
+     */
     this.payoutButtonText = "Payouts & Tax Settings";
+    /**
+     * Description text under payout button
+     * @uiName Payout button description text
+     */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
     withHooks(this);
@@ -35,7 +42,10 @@ export class PayoutButtonScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Payout button text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "payout-button-text",
@@ -53,8 +63,11 @@ export class PayoutButtonScroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Payout button description text",
+            "name": "uiName"
+          }],
+        "text": "Description text under payout button"
       },
       "attribute": "payout-button-description",
       "reflect": false,

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.js

@@ -6,7 +6,7 @@ const defaultProps = {
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
-  codeResent: false,
+  emailResent: false,
 };
 export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
 export const Loading = () => (h("sqm-code-verification", { demoData: {
@@ -18,7 +18,7 @@ export const Loading = () => (h("sqm-code-verification", { demoData: {
 export const CodeResent = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps,
-      codeResent: true,
+      emailResent: true,
     },
   } }));
 export const VerificationFailed = () => (h("sqm-code-verification", { demoData: {

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

@@ -85,7 +85,16 @@ export 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
@@ -96,11 +105,14 @@ export 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" }),
@@ -112,7 +124,5 @@ export function WidgetCodeVerificationView(props) {
         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("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)))));
 }

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

@@ -10,7 +10,7 @@ export class WidgetCodeVerification {
     /**
      * @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
      */
@@ -25,27 +25,16 @@ export class WidgetCodeVerification {
      * @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
      */
@@ -89,7 +78,7 @@ export class WidgetCodeVerification {
       },
       "attribute": "verify-code-header-text",
       "reflect": false,
-      "defaultValue": "\"Enter the code sent to email@example.com from our referral provider, impact.com.\""
+      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
     },
     "reverifyCodeHeaderText": {
       "type": "string",
@@ -154,27 +143,6 @@ export class WidgetCodeVerification {
       "reflect": false,
       "defaultValue": "\"Resend code\""
     },
-    "resendCodeLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code link",
-            "name": "uiName"
-          }],
-        "text": "The link that appears in the resend code link"
-      },
-      "attribute": "resend-code-link",
-      "reflect": false,
-      "defaultValue": "\"/resend-code\""
-    },
     "codeResentSuccessfullyText": {
       "type": "string",
       "mutable": false,
@@ -196,27 +164,6 @@ export class WidgetCodeVerification {
       "reflect": false,
       "defaultValue": "\"Another code has been sent to {email}\""
     },
-    "useDifferentEmailText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Use different email text",
-            "name": "uiName"
-          }],
-        "text": "Link text displayed under the verify button"
-      },
-      "attribute": "use-different-email-text",
-      "reflect": false,
-      "defaultValue": "\"Use a different email\""
-    },
     "invalidCodeText": {
       "type": "string",
       "mutable": false,
@@ -236,7 +183,7 @@ export class WidgetCodeVerification {
       },
       "attribute": "invalid-code-text",
       "reflect": false,
-      "defaultValue": "\" Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
+      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
     },
     "verifyText": {
       "type": "string",
@@ -285,7 +232,7 @@ export class WidgetCodeVerification {
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetCodeVerificationViewProps>",
-        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; codeResent?: boolean; }; refs?: { codeWrapperRef: any; }; }",
+        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -323,6 +270,7 @@ function useDemoWidgetCodeVerification(props) {
       codeWrapperRef: () => { },
     },
     callbacks: {
+      resendEmail: async () => { },
       submitCode: async () => { },
     },
     text: props.getTextProps(),

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

@@ -1,8 +1,8 @@
 import { useMutation, useParent, useParentValue, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useHost, useState } from "@saasquatch/stencil-hooks";
+import { gql } from "graphql-request";
 import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_EVENT_KEY, } from "../keys";
 import { useVerificationEmailMutation } from "../sqm-email-verification/useEmailVerification";
-import { gql } from "graphql-request";
 // TODO: Move to component-boilerplate
 export const VerifyEmailWithCodeMutation = gql `
   mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
@@ -43,6 +43,7 @@ export function useWidgetCodeVerification(props) {
   const [emailResent, setEmailResent] = useState(false);
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
+  const [emailError, setEmailError] = 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();
@@ -83,14 +84,13 @@ export 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);
+    if (!result) {
+      setEmailError(true);
+      return;
     }
+    if (emailSent)
+      setEmailResent(true);
     setEmailSent(true);
   };
   const submitCode = async () => {
@@ -124,6 +124,8 @@ export function useWidgetCodeVerification(props) {
     // email should already exist if user has completed email-verification
     if (!email)
       resendEmail();
+    else
+      setEmailSent(true);
   }, []);
   return {
     refs: {
@@ -132,6 +134,7 @@ export function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
+      resendError: !!(resendErrors === null || resendErrors === void 0 ? void 0 : resendErrors.message) || emailError,
       loading: verifyLoading || resendLoading,
       verifyFailed: !!validationError,
     },

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

@@ -4,19 +4,39 @@ export default {
 };
 const defaultProps = {
   email: "",
-  error: "",
+  error: false,
   loading: false,
+  initialLoading: false,
+  sendCodeError: false,
 };
 export const Default = () => (h("sqm-email-verification", { demoData: {} }));
+export const EmailIsPrefilled = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      email: "test@example.com",
+    },
+  } }));
 export const Loading = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      initialLoading: true,
+    },
+  } }));
+export const SaveLoading = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,
       loading: true,
     },
   } }));
-export const Error = () => (h("sqm-email-verification", { demoData: {
+export const InvalidEmail = () => (h("sqm-email-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      error: true,
+    },
+  } }));
+export const SendCodeError = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps,
-      error: "Email is invalid",
+      sendCodeError: true,
     },
   } }));