@saasquatch/mint-components 1.12.0-5 → 1.12.0-7

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -31,7 +31,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
 const ShadowViewAddon = require('./ShadowViewAddon-13173901.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-dbba9bb4.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-e530775f.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -14413,6 +14413,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
@@ -15052,12 +15053,19 @@ const WidgetCodeVerification_stories = {
   title: "Components/Widget Code Verification",
 };
 const defaultProps$l = {
+  initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
 const Default$j = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$l } }));
+const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps$l,
+      initialiseLoading: true,
+    },
+  } }));
 const Loading$8 = () => (index.h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$l,
@@ -15081,6 +15089,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': WidgetCodeVerification_stories,
   Default: Default$j,
+  InitialLoading: InitialLoading,
   Loading: Loading$8,
   CodeResent: CodeResent,
   VerificationFailed: VerificationFailed
@@ -15106,9 +15115,17 @@ const PayoutStatusAlert_stories = {
 const defaultProps$n = {
   status: "INFORMATION_REQUIRED",
   loading: false,
+  showVerifyIdentity: false,
 };
 const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$n } }));
 const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "VERIFICATION_NEEDED" } } }));
+const VerifyIdentityOpen = () => (index.h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps$n,
+      status: "VERIFICATION_NEEDED",
+      showVerifyIdentity: true,
+    },
+  } }));
 const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "HOLD" } } }));
 const Loading$9 = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, loading: true } } }));
 
@@ -15117,6 +15134,7 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   'default': PayoutStatusAlert_stories,
   InformationRequired: InformationRequired,
   VerifyIdentity: VerifyIdentity,
+  VerifyIdentityOpen: VerifyIdentityOpen,
   Hold: Hold,
   Loading: Loading$9
 });

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

@@ -2,13 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.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 index = require('./index-56d1fa5b.js');
 const utils = require('./utils-6847bc06.js');
 const keys = require('./keys-cff24974.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 
+const USER_LOOKUP = index.dist.gql `
+  query viewer {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+      }
+    }
+  }
+`;
 function useWidgetVerificationInternal() {
   const userIdentity = index_module.K();
   const [showCode, setShowCode] = index_module.Fn({
@@ -19,11 +32,36 @@ function useWidgetVerificationInternal() {
     namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
     initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
   });
-  return { showCode };
+  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = stencilHooks_module.useState(true);
+  const [fetch] = index_module.an(USER_LOOKUP);
+  stencilHooks_module.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 };
 }
 const WidgetVerificationInternal = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    index$1.registerInstance(this, hostRef);
     stencilHooks_module.h(this);
   }
   disconnectedCallback() { }
@@ -32,13 +70,19 @@ const WidgetVerificationInternal = class {
     return extractProps.extractProps(props, prefix);
   }
   render() {
-    const { showCode } = index_module.isDemo()
+    const { showCode, onVerification, loading } = index_module.isDemo()
       ? useDemoWidgetVerificationInternal()
       : useWidgetVerificationInternal();
+    // TODO: Shoelace spinner is throwing errors
+    if (loading)
+      return index$1.h("div", null);
+    // if (loading) {
+    //   return <sl-spinner style="font-size: 2rem;"></sl-spinner>;
+    // }
     if (showCode) {
-      return (index.h("sqm-code-verification", Object.assign({}, this.getStepTextProps("codeStep_"))));
+      return (index$1.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
     }
-    return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
+    return (index$1.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
 };
 function useDemoWidgetVerificationInternal() {
@@ -50,7 +94,11 @@ function useDemoWidgetVerificationInternal() {
     namespace: keys.VERIFICATION_EMAIL_NAMESPACE,
     initialValue: undefined,
   });
-  return { showCode };
+  const setContext = index_module.Sn(keys.VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
 }
 
 exports.sqm_widget_verification_internal = WidgetVerificationInternal;

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

@@ -129,15 +129,12 @@ const WidgetVerification = class {
   render() {
     const [context, setContext] = index_module.Fn({
       namespace: keys.VERIFICATION_PARENT_NAMESPACE,
-      initialValue: undefined,
+      initialValue: false,
     });
-    const authToken = context === null || context === void 0 ? void 0 : context.token;
     const [container, setContainer] = stencilHooks_module.useState(undefined);
     const [slot, setSlot] = stencilHooks_module.useState(undefined);
-    if (!authToken)
-      debug("No user identity available");
     const updateTemplates = index_module.useCallback(() => {
-      const isAuth = !!authToken;
+      const isAuth = context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -185,7 +182,7 @@ const WidgetVerification = class {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, authToken]);
+    }, [container, slot, context]);
     stencilHooks_module.useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -194,18 +191,18 @@ const WidgetVerification = class {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, authToken]);
-    stencilHooks_module.useEffect(() => {
-      const host = stencilHooks_module.l();
-      const callback = (e) => {
-        e.stopPropagation();
-        setContext({ token: e.detail.token });
-      };
-      host.addEventListener(keys.VERIFICATION_EVENT_KEY, callback);
-      return () => {
-        host.removeEventListener(keys.VERIFICATION_EVENT_KEY, callback);
-      };
-    }, []);
+    }, [slot, container, context]);
+    // useEffect(() => {
+    //   const host = useHost();
+    //   const callback = (e: CustomEvent) => {
+    //     e.stopPropagation();
+    //     setContext({ token: e.detail.token });
+    //   };
+    //   host.addEventListener(VERIFICATION_EVENT_KEY, callback);
+    //   return () => {
+    //     host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
+    //   };
+    // }, []);
     return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("template", { slot: "not-verified" }, index.h("sqm-widget-verification-internal", Object.assign({}, utils.getProps(this)))), index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
   }
 };

package/dist/cjs/useVerificationEmail-35aea294.js

@@ -0,0 +1,170 @@
+'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 UserLookupQuery = index.dist.gql `
+  query userLookup {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+const ParticipantVerificationEmailMutation = index.dist.gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+const ImpactVerificationEmailMutation = index.dist.gql `
+  mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
+    requestImpactPublisherEmail2FA(user: $user) {
+      success
+    }
+  }
+`;
+const VerifyUserEmailMutation = index.dist.gql `
+  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
+    verifyUserEmail(user: $user, code: $code) {
+      id
+      accountId
+      email
+      emailVerified
+    }
+  }
+`;
+const SubmitImpactCodeMutation = index.dist.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
+function useVerificationEmail() {
+  const userIdentity = index_module.K();
+  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
+    participant: false,
+    impact: false,
+  });
+  const [fetch] = index_module.an(UserLookupQuery);
+  // Send mutations
+  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = index_module.xe(ParticipantVerificationEmailMutation);
+  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = index_module.xe(ImpactVerificationEmailMutation);
+  const sendLoading = participantEmailLoading || impactEmailLoading;
+  const sendErrors = participantEmailErrors || impactEmailErrors;
+  // Verification mutations
+  const [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = index_module.xe(VerifyUserEmailMutation);
+  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.xe(SubmitImpactCodeMutation);
+  const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
+  const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
+  const [initialized, setInitialized] = stencilHooks_module.useState(false);
+  const initialise = async () => {
+    var _a, _b, _c, _d;
+    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),
+      });
+      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;
+    }
+  };
+  stencilHooks_module.useEffect(() => {
+    if (!initialized)
+      initialise();
+  }, []);
+  return {
+    initialized,
+    send: [
+      sendVerificationEmail,
+      { loading: sendLoading, errors: sendErrors },
+    ],
+    verify: [
+      verifyVerificationEmail,
+      { loading: verifyLoading, errors: verifyErrors },
+    ],
+  };
+}
+
+exports.useVerificationEmail = useVerificationEmail;

package/dist/collection/collection-manifest.json

@@ -110,8 +110,8 @@
     "./components/sqm-user-name/sqm-user-name.js",
     "./components/sqm-widget-verification/sqm-widget-verification-internal.js",
     "./components/sqm-widget-verification/sqm-widget-verification.js",
-    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
     "./components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js",
+    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
     "./components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js",
     "./components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js"
   ],

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

@@ -3,12 +3,19 @@ export default {
   title: "Components/Widget Code Verification",
 };
 const defaultProps = {
+  initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
 export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
+export const InitialLoading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      initialiseLoading: true,
+    },
+  } }));
 export const Loading = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps,

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

@@ -122,7 +122,7 @@ export 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)))));
 }

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

@@ -233,7 +233,7 @@ export class WidgetCodeVerification {
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetCodeVerificationViewProps>",
-        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
+        "resolved": "{ states?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -257,6 +257,24 @@ export class WidgetCodeVerification {
           }],
         "text": ""
       }
+    },
+    "onVerification": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(token: string) => any",
+        "resolved": "(token: string) => any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
     }
   }; }
 }
@@ -276,7 +294,7 @@ function useDemoWidgetCodeVerification(props) {
     },
     callbacks: {
       resendEmail: async () => setEmailResent(true),
-      submitCode: async () => setVerifiedContext({ token: "TOKEN" }),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -1,12 +1,14 @@
 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";
-// TODO: Move to component-boilerplate
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, } from "../keys";
+import { useVerificationEmail } from "../useVerificationEmail";
 export const VerifyEmailWithCodeMutation = 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
     }
@@ -44,9 +46,10 @@ export function useWidgetCodeVerification(props) {
   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();
+  // // TODO: Need to handle error states for these errors
+  // const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] =
+  //   useCodeVerificationMutation();
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)
       return;
@@ -62,7 +65,7 @@ export function useWidgetCodeVerification(props) {
         }
       });
       element.addEventListener("input", (e) => {
-        const input = e.target.value;
+        const input = e.data;
         if (!input)
           return;
         if (idx === codeElements.length - 1) {
@@ -72,8 +75,10 @@ export 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();
       });
@@ -84,7 +89,10 @@ export function useWidgetCodeVerification(props) {
     setValidationError(false);
   };
   const resendEmail = async () => {
-    const result = await request();
+    // 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;
@@ -104,16 +112,13 @@ export 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 {
@@ -121,12 +126,15 @@ export 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,
@@ -134,8 +142,9 @@ export function useWidgetCodeVerification(props) {
     states: {
       email,
       emailResent,
-      resendError: !!(resendErrors === null || resendErrors === void 0 ? void 0 : resendErrors.message) || emailError,
-      loading: verifyLoading || resendLoading,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
       verifyFailed: !!validationError,
     },
     callbacks: {