@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -0,0 +1,207 @@
+import jsonpointer from "jsonpointer";
+import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
+import { navigation, useQuery, useRegisterViaRegistrationFormMutation, } from "@saasquatch/component-boilerplate";
+import { AsYouType } from "libphonenumber-js";
+import { gql } from "graphql-request";
+import { useRegistrationFormState, } from "./useRegistrationFormState";
+const RegistrationFormQuery = gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
+`;
+export function usePortalRegistrationForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState({});
+  const [request, { loading, errors, data, formError }] = useRegisterViaRegistrationFormMutation();
+  const queryResponse = useQuery(RegistrationFormQuery, { key: props.formKey });
+  const formLoading = loading || queryResponse.loading;
+  useEffect(() => {
+    var _a, _b, _c;
+    const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
+    const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
+    const disabledMessage = ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+      props.formDisabledErrorMessage;
+    const formState = {
+      loading: formLoading,
+      disabled,
+      disabledMessage,
+      initialData,
+    };
+    setRegistrationFormState(formState);
+  }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData]);
+  useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      // control.value = initialData[key] || control.value;
+      jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    const redirectPath = props.redirectPath;
+    const variables = {
+      key: props.formKey,
+      formData: {
+        email,
+        password,
+        redirectPath,
+        ...formData,
+      },
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      const managedIdentityResponse = (_a = result.submitForm) === null || _a === void 0 ? void 0 : _a.results.find((result) => { var _a; return ((_a = result === null || result === void 0 ? void 0 : result.formHandler) === null || _a === void 0 ? void 0 : _a.namespace) === "identity"; });
+      if (managedIdentityResponse &&
+        managedIdentityResponse.result.results.length &&
+        managedIdentityResponse.result.results[0].success &&
+        managedIdentityResponse.result.results[0].data.token) {
+        navigation.push(props.nextPage);
+      }
+      else if (
+      // check for blocked email error response
+      ((_b = result.submitForm) === null || _b === void 0 ? void 0 : _b.results.length) === 1 &&
+        ((_f = (_e = (_d = (_c = result.submitForm) === null || _c === void 0 ? void 0 : _c.results[0]) === null || _d === void 0 ? void 0 : _d.result) === null || _e === void 0 ? void 0 : _e.results) === null || _f === void 0 ? void 0 : _f.length) === 1 &&
+        ((_l = (_k = (_j = (_h = (_g = result.submitForm) === null || _g === void 0 ? void 0 : _g.results[0]) === null || _h === void 0 ? void 0 : _h.result) === null || _j === void 0 ? void 0 : _j.results) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.success) ===
+          false && ((_s = (_r = (_q = (_p = (_o = (_m = result.submitForm) === null || _m === void 0 ? void 0 : _m.results[0]) === null || _o === void 0 ? void 0 : _o.result) === null || _p === void 0 ? void 0 : _p.results) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.message) === null || _s === void 0 ? void 0 : _s.startsWith("Blocked email"))) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: {
+            email: props.invalidEmailErrorMessage,
+          },
+        });
+      }
+    }
+    catch (error) {
+      // check for invalid email
+      if ((_t = error === null || error === void 0 ? void 0 : error.message) === null || _t === void 0 ? void 0 : _t.includes("is not a valid email address")) {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: "",
+          validationErrors: { email: props.invalidEmailErrorMessage },
+        });
+      }
+      else {
+        setRegistrationFormState({
+          ...registrationFormState,
+          loading: false,
+          error: props.networkErrorMessage,
+          validationErrors: {},
+        });
+      }
+    }
+  };
+  const inputFunction = useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if (((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false) {
+    errorMessage =
+      ((_c = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _c === void 0 ? void 0 : _c.form.initialData.isEnabledErrorMessage) ||
+        props.formDisabledErrorMessage;
+  }
+  else if ((_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      formError || ((_j = (_h = (_g = (_f = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading: loading || queryResponse.loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      enablePasswordValidation: !props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}

package/dist/collection/components/sqm-portal-registration-form/useRegistrationFormState.js

@@ -0,0 +1,8 @@
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useDomContextState } from "@saasquatch/dom-context-hooks";
+export const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+export function useRegistrationFormState(formState) {
+  const host = useHost();
+  const [registrationFormState, setRegistrationFormState] = useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  return { registrationFormState, setRegistrationFormState };
+}

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password.js

@@ -5,28 +5,27 @@ import deepmerge from "deepmerge";
 import { PortalResetPasswordView, } from "./sqm-portal-reset-password-view";
 import { usePortalResetPassword } from "./usePortalResetPassword";
 /**
- * @uiName Portal Reset Password
+ * @uiName Microsite Reset Password
  */
 export class PortalResetPassword {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to when the password reset succeeds.
+     * Redirect participants to this page when they successfully reset their password.
      *
-     * @uiName Next Page Path
+     * @uiName Successful Reset Redirect
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     * Redirect participants to this page if password reset fails due to an outdated reset attempt.
      *
-     * @uiName Failed Page Path
+     * @uiName Failed Reset Redirect
+     * @uiWidget pageSelect
      */
     this.failedPage = "/";
     /**
-     * Show or hide confirm password field
-     *
-     * @uiName Show Confirm Password
-     * @default
+     * @uiName Show Confirm Password Field
      */
     this.confirmPassword = false;
     /**
@@ -34,9 +33,10 @@ export class PortalResetPassword {
      */
     this.resetPasswordHeader = "Reset your password";
     /**
-     * Displayed after a successful password reset
+     * Displayed after a successful password reset.
      *
      * @uiName Successful Password Reset Text
+     * @uiWidget textArea
      */
     this.passwordResetHeader = "Password reset";
     /**
@@ -44,17 +44,17 @@ export class PortalResetPassword {
      */
     this.resetPasswordButtonText = "Reset Password";
     /**
-     * Button text displayed after a successful password reset
+     * Button text displayed after a successful password reset.
      *
      * @uiName Continue Button Text
      */
     this.continueButtonText = "Continue";
     /**
-     * @uiName Confirm Password Label
+     * @uiName Password Confirmation Field Label
      */
     this.confirmPasswordFieldLabel = "Confirm Password";
     /**
-     * @uiName Password Label
+     * @uiName Password Field Label
      */
     this.passwordFieldLabel = "New Password";
     withHooks(this);
@@ -81,10 +81,13 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page Path",
+            "text": "Successful Reset Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to when the password reset succeeds."
+        "text": "Redirect participants to this page when they successfully reset their password."
       },
       "attribute": "next-page",
       "reflect": false,
@@ -102,10 +105,13 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Page Path",
+            "text": "Failed Reset Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to if the reset fails due to outdated password reset attempt."
+        "text": "Redirect participants to this page if password reset fails due to an outdated reset attempt."
       },
       "attribute": "failed-page",
       "reflect": false,
@@ -123,13 +129,10 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Confirm Password",
+            "text": "Show Confirm Password Field",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
-        "text": "Show or hide confirm password field"
+        "text": ""
       },
       "attribute": "confirm-password",
       "reflect": false,
@@ -170,8 +173,11 @@ export class PortalResetPassword {
         "tags": [{
             "text": "Successful Password Reset Text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Displayed after a successful password reset"
+        "text": "Displayed after a successful password reset."
       },
       "attribute": "password-reset-header",
       "reflect": false,
@@ -213,7 +219,7 @@ export class PortalResetPassword {
             "text": "Continue Button Text",
             "name": "uiName"
           }],
-        "text": "Button text displayed after a successful password reset"
+        "text": "Button text displayed after a successful password reset."
       },
       "attribute": "continue-button-text",
       "reflect": false,
@@ -231,7 +237,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Confirm Password Label",
+            "text": "Password Confirmation Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -252,7 +258,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Label",
+            "text": "Password Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -302,16 +308,16 @@ function usePortalResetPasswordDemo(props) {
       error: "",
       loading: false,
       reset: false,
-      confirmPassword: true,
+      confirmPassword: props.confirmPassword,
       oobCodeValidating: false,
       oobCodeValid: true,
       content: {
-        passwordResetHeader: "Password reset",
-        resetPasswordHeader: "Reset your password",
-        continueButtonText: "Continue",
-        resetPasswordButtonText: "Reset Password",
-        confirmPasswordFieldLabel: "Confirm Password",
-        passwordFieldLabel: "New Password",
+        passwordResetHeader: props.passwordResetHeader,
+        resetPasswordHeader: props.resetPasswordHeader,
+        continueButtonText: props.continueButtonText,
+        resetPasswordButtonText: props.resetPasswordButtonText,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+        passwordFieldLabel: props.passwordFieldLabel,
       },
     },
     callbacks: {

package/dist/collection/components/sqm-portal-reset-password/usePortalResetPassword.js

@@ -3,15 +3,24 @@ import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useVerifyPasswordResetCodeMutation, useResetPasswordMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalResetPassword(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const [reset, setReset] = useState(false);
   const [error, setError] = useState("");
   const [verifyPasswordResetCode, verifyPasswordResetCodeState] = useVerifyPasswordResetCodeMutation();
   const [resetPassword, resetPasswordState] = useResetPasswordMutation();
-  const urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(navigation.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
+  const verifyPasswordResetCodeAndHandleResponse = async () => {
+    const result = await verifyPasswordResetCode({ oobCode });
+    if (result instanceof Error) {
+      setError("Network request failed.");
+    }
+  };
+  useEffect(() => {
+    verifyPasswordResetCodeAndHandleResponse();
+  }, []);
   const submit = async (event) => {
     setError("");
     let formData = event.detail.formData;
@@ -23,7 +32,16 @@ export function usePortalResetPassword(props) {
       setError("Passwords do not match.");
       return;
     }
-    await resetPassword(variables);
+    const result = await resetPassword(variables);
+    if (result instanceof Error) {
+      return setError("Network request failed.");
+    }
+    if (result.resetManagedIdentityPassword) {
+      setReset(true);
+      setTimeout(() => {
+        gotoNextPage();
+      }, 5000);
+    }
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
@@ -36,39 +54,15 @@ export function usePortalResetPassword(props) {
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
-  useEffect(() => {
-    var _a;
-    if ((_a = resetPasswordState.data) === null || _a === void 0 ? void 0 : _a.resetManagedIdentityPassword) {
-      setReset(true);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 5000);
-    }
-  }, [(_a = resetPasswordState.data) === null || _a === void 0 ? void 0 : _a.resetManagedIdentityPassword]);
-  useEffect(() => {
-    verifyPasswordResetCode({ oobCode });
-  }, [oobCode]);
-  useEffect(() => {
-    var _a;
-    if ((_a = verifyPasswordResetCodeState === null || verifyPasswordResetCodeState === void 0 ? void 0 : verifyPasswordResetCodeState.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setError("Network request failed.");
-    }
-  }, [verifyPasswordResetCodeState === null || verifyPasswordResetCodeState === void 0 ? void 0 : verifyPasswordResetCodeState.errors]);
-  useEffect(() => {
-    var _a;
-    if ((_a = resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setError("Network request failed.");
-    }
-  }, [resetPasswordState === null || resetPasswordState === void 0 ? void 0 : resetPasswordState.errors]);
   return {
     states: {
       loading: resetPasswordState.loading,
       reset,
       confirmPassword: props.confirmPassword,
-      error: ((_f = (_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_k = (_j = (_h = (_g = resetPasswordState.errors) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.message) ||
+      error: ((_e = (_d = (_c = (_b = (_a = resetPasswordState.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_j = (_h = (_g = (_f = resetPasswordState.errors) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
         error,
       oobCodeValidating: verifyPasswordResetCodeState.loading,
-      oobCodeValid: (_l = verifyPasswordResetCodeState.data) === null || _l === void 0 ? void 0 : _l.verifyManagedIdentityPasswordResetCode.success,
+      oobCodeValid: (_k = verifyPasswordResetCodeState.data) === null || _k === void 0 ? void 0 : _k.verifyManagedIdentityPasswordResetCode.success,
       content: {
         passwordResetHeader: props.passwordResetHeader,
         resetPasswordHeader: props.resetPasswordHeader,

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -5,21 +5,23 @@ import deepmerge from "deepmerge";
 import { PortalVerifyEmailView, } from "./sqm-portal-verify-email-view";
 import { usePortalVerifyEmail } from "./usePortalVerifyEmail";
 /**
- * @uiName Portal Verify Email
+ * @uiName Microsite Verify Email
  */
 export class PortalVerifyEmail {
   constructor() {
     this.ignored = true;
     /**
-     * The page that users are redirected to when the verification succeeds.
+     * Redirect participants to this page when they successfully verify their email.
      *
-     * @uiName Next Page Path
+     * @uiName Successful Verification Redirect
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     * Redirect participants to this page if verification fails due to an outdated verification attempt.
      *
-     * @uiName Failed Page Path
+     * @uiName Failed Verification Redirect
+     * @uiWidget pageSelect
      */
     this.failedPage = "/";
     withHooks(this);
@@ -46,10 +48,13 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page Path",
+            "text": "Successful Verification Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to when the verification succeeds."
+        "text": "Redirect participants to this page when they successfully verify their email."
       },
       "attribute": "next-page",
       "reflect": false,
@@ -67,10 +72,13 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Page Path",
+            "text": "Failed Verification Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to if verification fails due to outdated verification attempt."
+        "text": "Redirect participants to this page if verification fails due to an outdated verification attempt."
       },
       "attribute": "failed-page",
       "reflect": false,

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,17 +1,17 @@
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
 import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalVerifyEmail({ nextPage, failedPage }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const [verified, setVerified] = useState(false);
-  const [disableContinue, setDisableContinue] = useState(true);
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const userIdent = useUserIdentity();
   const [request, { loading, data, errors }] = useVerifyEmailMutation();
-  const [error, setError] = useState("");
-  const urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(navigation.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
-  urlParams.delete("oobCode");
+  // derived from useMutation in component boilerplate initialState
+  const disableContinue = data === undefined && errors === undefined && !!oobCode;
+  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
+  const verified = !!(((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
   const failed = () => {
     return navigation.push({
       pathname: failedPage,
@@ -24,49 +24,28 @@ export function usePortalVerifyEmail({ nextPage, failedPage }) {
     navigation.push(url.href);
   };
   const submit = async () => {
-    if (oobCode) {
-      setError("");
-      await request({ oobCode });
-    }
-  };
-  useEffect(() => {
     var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success) {
-      setVerified(true);
-    }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success]);
-  useEffect(() => {
-    submit();
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    if ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) {
-      setDisableContinue(false);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-    else if (!oobCode ||
-      ((_b = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) === false) {
-      setDisableContinue(false);
-    }
-    else if (!userIdent) {
-      setDisableContinue(false);
+    if (oobCode) {
+      const result = await request({ oobCode });
+      if ((result instanceof Error ||
+        !result.verifyManagedIdentityEmail.success) &&
+        !((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified)) {
+        // pause on error if logged out/unverified
+        return;
+      }
       setTimeout(() => {
         gotoNextPage();
       }, 3000);
     }
-  }, [(_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified]);
+  };
   useEffect(() => {
-    if (errors === null || errors === void 0 ? void 0 : errors.message) {
-      setError("Network request failed.");
-    }
-  }, [errors]);
+    submit();
+  }, []);
   return {
     states: {
       loading: loading || disableContinue,
-      error: ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) ||
-        error,
+      error: ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
+        ((errors === null || errors === void 0 ? void 0 : errors.message) && "Network request failed."),
       verified,
     },
     data: {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -6,7 +6,7 @@ import { ProgramExplainerView } from "./sqm-program-explainer-view";
  * @uiName Program Explainer
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
- * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
+ * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
  */
 export class ProgramExplainer {
   constructor() {

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -5,7 +5,7 @@ import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 /**
  * @uiName Program Explainer Step
  * @exampleGroup Common Components
- * @example Program Explainer Step - <sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step>
+ * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step>
  * @validParents ["sqm-program-explainer"]
  */
 export class ProgramExplainerStep {