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

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
 require('./global-a320ad05.js');
-require('./use-callback-5d15897d.js');
+const useCallback = require('./use-callback-5d15897d.js');
 const index_module = require('./index.module-0b9b8891.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
@@ -46,7 +46,6 @@ function usePortalEmailVerification(props) {
   };
   async function checkVerification() {
     var _a;
-    setCountdown(10);
     const data = (await getVerificationStatus());
     if ((_a = data === null || data === void 0 ? void 0 : data.managedIdentitySession) === null || _a === void 0 ? void 0 : _a.emailVerified) {
       clearInterval(timerRef.current);
@@ -55,34 +54,45 @@ function usePortalEmailVerification(props) {
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
+    resyncTimers(10);
   }
-  const startTimer = () => setInterval(checkVerification, 10000);
+  const startTimer = (countdown = 10000) => setInterval(checkVerification, countdown);
   const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
-  function resyncTimers() {
+  function resyncTimers(restartCountdown) {
+    // Clear existing timers
     clearInterval(countdownRef.current);
     clearInterval(timerRef.current);
-    setCountdown(10);
-    countdownRef.current = startCountdown(9);
-    timerRef.current = startTimer();
+    // Do nothing if the tab is currently hidden
+    if (document.visibilityState === "hidden")
+      return;
+    // Restart the timer if verification has just been checked
+    if (restartCountdown)
+      setCountdown(restartCountdown);
+    // Start timers from either the beginning or based on the previous value
+    countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
+    timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
   }
+  const resyncTimersCallback = useCallback.useCallback(() => resyncTimers(), [countdown]);
   // Refetch validation status timer
   stencilHooks_module.useEffect(() => {
     if (!timerRef.current) {
       checkVerification();
       timerRef.current = startTimer();
     }
-    // Re-sync the timers if tab visibility has changed
-    document.addEventListener("visibilitychange", () => resyncTimers());
     return () => {
       clearInterval(timerRef.current);
-      document.removeEventListener("visibilitychange", () => resyncTimers());
     };
   }, []);
   // Countdown timer
   stencilHooks_module.useEffect(() => {
     if (countdown > 0)
       countdownRef.current = startCountdown(countdown - 1);
-    return () => clearInterval(countdownRef.current);
+    // Re-sync the timers if tab visibility has changed
+    document.addEventListener("visibilitychange", resyncTimersCallback);
+    return () => {
+      clearInterval(countdownRef.current);
+      document.removeEventListener("visibilitychange", resyncTimersCallback);
+    };
   }, [countdown]);
   return {
     states: {

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

@@ -4253,7 +4253,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   ForgotPasswordSuccess: ForgotPasswordSuccess
 });
 
-const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutia\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched on refresh\r\n        Given a user viewing the email verification component\r\n        And they verified their account on another device\r\n        And the local storage verification state is outdated\r\n        When they refresh the page the component is on\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched every 10 seconds\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 0\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n        And the text displays a spinner where the \"in {seconds}\" text was\r\n        When they verify their account on another device\r\n        And the count down hits 0 again from 10\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @minutia\r\n    Scenario Outline: Verification refetch text is customizable\r\n        Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n        And has prop \"verification-loading-message\" with <loadingPropValue>\r\n        And a user viewing the component\r\n        When it is counting down\r\n        Then they see <verificationTextValue>\r\n        When it is refetching their verification status\r\n        Examples:\r\n            | verificationPropValue                         | verificationTextValue                         | loadingPropValue             | loadingTextValue             |\r\n            | N/A                                           | Check verification status: in {countdown}     | N/A                          | Check verification status:   |\r\n            | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n    @minutia\r\n    Scenario: 10 second countdown resets when minimizing or moving between tabs\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 7\r\n        And the user changes to a different tab\r\n        When the user goes back to the verification tab\r\n        Then the countdown resets to 10\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n";
+const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutia\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched on refresh\r\n        Given a user viewing the email verification component\r\n        And they verified their account on another device\r\n        And the local storage verification state is outdated\r\n        When they refresh the page the component is on\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched every 10 seconds\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 0\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n        And the text displays a spinner where the \"in {seconds}\" text was\r\n        When they verify their account on another device\r\n        And the count down hits 0 again from 10\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @minutia\r\n    Scenario Outline: Verification refetch text is customizable\r\n        Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n        And has prop \"verification-loading-message\" with <loadingPropValue>\r\n        And a user viewing the component\r\n        When it is counting down\r\n        Then they see <verificationTextValue>\r\n        When it is refetching their verification status\r\n        Examples:\r\n            | verificationPropValue                         | verificationTextValue                         | loadingPropValue             | loadingTextValue             |\r\n            | N/A                                           | Check verification status: in {countdown}     | N/A                          | Check verification status:   |\r\n            | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n    @minutia\r\n    Scenario: 10 second countdown pauses when minimizing or moving between tabs\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 7\r\n        And the user changes to a different tab\r\n        When the user goes back to the verification tab\r\n        Then the countdown will still be 7\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n";
 
 const PortalEmailVerification_stories = {
   title: "Components/Portal Email Verification",

package/dist/collection/components/sqm-portal-email-verification/usePortalEmailVerification.js

@@ -1,5 +1,5 @@
 import { navigation, useManagedIdentitySessionQuery, useRequestVerificationEmailMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
+import { useCallback, useEffect, useRef, useState, } from "@saasquatch/universal-hooks";
 export function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const [request, { loading, data, errors }] = useRequestVerificationEmailMutation();
@@ -33,7 +33,6 @@ export function usePortalEmailVerification(props) {
   };
   async function checkVerification() {
     var _a;
-    setCountdown(10);
     const data = (await getVerificationStatus());
     if ((_a = data === null || data === void 0 ? void 0 : data.managedIdentitySession) === null || _a === void 0 ? void 0 : _a.emailVerified) {
       clearInterval(timerRef.current);
@@ -42,34 +41,45 @@ export function usePortalEmailVerification(props) {
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
+    resyncTimers(10);
   }
-  const startTimer = () => setInterval(checkVerification, 10000);
+  const startTimer = (countdown = 10000) => setInterval(checkVerification, countdown);
   const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
-  function resyncTimers() {
+  function resyncTimers(restartCountdown) {
+    // Clear existing timers
     clearInterval(countdownRef.current);
     clearInterval(timerRef.current);
-    setCountdown(10);
-    countdownRef.current = startCountdown(9);
-    timerRef.current = startTimer();
+    // Do nothing if the tab is currently hidden
+    if (document.visibilityState === "hidden")
+      return;
+    // Restart the timer if verification has just been checked
+    if (restartCountdown)
+      setCountdown(restartCountdown);
+    // Start timers from either the beginning or based on the previous value
+    countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
+    timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
   }
+  const resyncTimersCallback = useCallback(() => resyncTimers(), [countdown]);
   // Refetch validation status timer
   useEffect(() => {
     if (!timerRef.current) {
       checkVerification();
       timerRef.current = startTimer();
     }
-    // Re-sync the timers if tab visibility has changed
-    document.addEventListener("visibilitychange", () => resyncTimers());
     return () => {
       clearInterval(timerRef.current);
-      document.removeEventListener("visibilitychange", () => resyncTimers());
     };
   }, []);
   // Countdown timer
   useEffect(() => {
     if (countdown > 0)
       countdownRef.current = startCountdown(countdown - 1);
-    return () => clearInterval(countdownRef.current);
+    // Re-sync the timers if tab visibility has changed
+    document.addEventListener("visibilitychange", resyncTimersCallback);
+    return () => {
+      clearInterval(countdownRef.current);
+      document.removeEventListener("visibilitychange", resyncTimersCallback);
+    };
   }, [countdown]);
   return {
     states: {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { i as useState, j as useRef, f as useEffect, m as h } from './stencil-hooks.module-eefa3570.js';
 import './global-126fa55c.js';
-import './use-callback-684c8bb7.js';
+import { u as useCallback } from './use-callback-684c8bb7.js';
 import { t as tn, B as Be, N, f as fn, i as isDemo } from './index.module-14794b69.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
@@ -42,7 +42,6 @@ function usePortalEmailVerification(props) {
   };
   async function checkVerification() {
     var _a;
-    setCountdown(10);
     const data = (await getVerificationStatus());
     if ((_a = data === null || data === void 0 ? void 0 : data.managedIdentitySession) === null || _a === void 0 ? void 0 : _a.emailVerified) {
       clearInterval(timerRef.current);
@@ -51,34 +50,45 @@ function usePortalEmailVerification(props) {
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
+    resyncTimers(10);
   }
-  const startTimer = () => setInterval(checkVerification, 10000);
+  const startTimer = (countdown = 10000) => setInterval(checkVerification, countdown);
   const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
-  function resyncTimers() {
+  function resyncTimers(restartCountdown) {
+    // Clear existing timers
     clearInterval(countdownRef.current);
     clearInterval(timerRef.current);
-    setCountdown(10);
-    countdownRef.current = startCountdown(9);
-    timerRef.current = startTimer();
+    // Do nothing if the tab is currently hidden
+    if (document.visibilityState === "hidden")
+      return;
+    // Restart the timer if verification has just been checked
+    if (restartCountdown)
+      setCountdown(restartCountdown);
+    // Start timers from either the beginning or based on the previous value
+    countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
+    timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
   }
+  const resyncTimersCallback = useCallback(() => resyncTimers(), [countdown]);
   // Refetch validation status timer
   useEffect(() => {
     if (!timerRef.current) {
       checkVerification();
       timerRef.current = startTimer();
     }
-    // Re-sync the timers if tab visibility has changed
-    document.addEventListener("visibilitychange", () => resyncTimers());
     return () => {
       clearInterval(timerRef.current);
-      document.removeEventListener("visibilitychange", () => resyncTimers());
     };
   }, []);
   // Countdown timer
   useEffect(() => {
     if (countdown > 0)
       countdownRef.current = startCountdown(countdown - 1);
-    return () => clearInterval(countdownRef.current);
+    // Re-sync the timers if tab visibility has changed
+    document.addEventListener("visibilitychange", resyncTimersCallback);
+    return () => {
+      clearInterval(countdownRef.current);
+      document.removeEventListener("visibilitychange", resyncTimersCallback);
+    };
   }, [countdown]);
   return {
     states: {

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

@@ -4249,7 +4249,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   ForgotPasswordSuccess: ForgotPasswordSuccess
 });
 
-const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutia\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched on refresh\r\n        Given a user viewing the email verification component\r\n        And they verified their account on another device\r\n        And the local storage verification state is outdated\r\n        When they refresh the page the component is on\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched every 10 seconds\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 0\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n        And the text displays a spinner where the \"in {seconds}\" text was\r\n        When they verify their account on another device\r\n        And the count down hits 0 again from 10\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @minutia\r\n    Scenario Outline: Verification refetch text is customizable\r\n        Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n        And has prop \"verification-loading-message\" with <loadingPropValue>\r\n        And a user viewing the component\r\n        When it is counting down\r\n        Then they see <verificationTextValue>\r\n        When it is refetching their verification status\r\n        Examples:\r\n            | verificationPropValue                         | verificationTextValue                         | loadingPropValue             | loadingTextValue             |\r\n            | N/A                                           | Check verification status: in {countdown}     | N/A                          | Check verification status:   |\r\n            | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n    @minutia\r\n    Scenario: 10 second countdown resets when minimizing or moving between tabs\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 7\r\n        And the user changes to a different tab\r\n        When the user goes back to the verification tab\r\n        Then the countdown resets to 10\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n";
+const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutia\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched on refresh\r\n        Given a user viewing the email verification component\r\n        And they verified their account on another device\r\n        And the local storage verification state is outdated\r\n        When they refresh the page the component is on\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @motivating\r\n    Scenario: Verification status is refetched every 10 seconds\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 0\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n        And the text displays a spinner where the \"in {seconds}\" text was\r\n        When they verify their account on another device\r\n        And the count down hits 0 again from 10\r\n        Then their verification status is re-queried\r\n        And the local storage managed identity state is updated\r\n        And they are redirected to the components \"redirectPath\"\r\n\r\n    @minutia\r\n    Scenario Outline: Verification refetch text is customizable\r\n        Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n        And has prop \"verification-loading-message\" with <loadingPropValue>\r\n        And a user viewing the component\r\n        When it is counting down\r\n        Then they see <verificationTextValue>\r\n        When it is refetching their verification status\r\n        Examples:\r\n            | verificationPropValue                         | verificationTextValue                         | loadingPropValue             | loadingTextValue             |\r\n            | N/A                                           | Check verification status: in {countdown}     | N/A                          | Check verification status:   |\r\n            | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n    @minutia\r\n    Scenario: 10 second countdown pauses when minimizing or moving between tabs\r\n        Given a user viewing the email verification component\r\n        Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n        And the time counts down from 10 to 7\r\n        And the user changes to a different tab\r\n        When the user goes back to the verification tab\r\n        Then the countdown will still be 7\r\n        When the counter hits 0\r\n        Then their verification status is re-queried\r\n";
 
 const PortalEmailVerification_stories = {
   title: "Components/Portal Email Verification",

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

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,i,r){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,a){function o(e){try{l(r.next(e))}catch(e){a(e)}}function s(e){try{l(r["throw"](e))}catch(e){a(e)}}function l(e){e.done?i(e.value):n(e.value).then(o,s)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,n,a,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return l([e,t])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(i)try{if(r=1,n&&(a=o[0]&2?n["return"]:o[0]?n["throw"]||((a=n["return"])&&a.call(n),0):n.next)&&!(a=a.call(n,o[1])).done)return a;if(n=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;n=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(o[0]===6&&i.label<a[1]){i.label=a[1];a=o;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(o);break}if(a[2])i.ops.pop();i.trys.pop();continue}o=t.call(e,i)}catch(e){o=[6,e];n=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,h as h$1}from"./index-17b4da69.js";import{i as useState,j as useRef,f as useEffect,m as h}from"./stencil-hooks.module-eefa3570.js";import"./global-126fa55c.js";import"./use-callback-684c8bb7.js";import{t as tn,B as Be,N,f as fn,i as isDemo}from"./index.module-14794b69.js";import{c as cjs}from"./cjs-bdfb4486.js";import"./mixins-f60a614c.js";import"./JSS-67b5cff8.js";import"./sqm-text-span-view-2567b6c0.js";import{P as PortalEmailVerificationView}from"./sqm-portal-email-verification-view-0170c6d1.js";function usePortalEmailVerification(e){var t=this;var i,r,n,a,o,s,l,u,c;var f=tn(),d=f[0],v=f[1],m=v.loading,h=v.data,g=v.errors;var p=Be(),y=p[0],b=p[1],w=b.data,E=b.loading;var _=N();var V=(i=_===null||_===void 0?void 0:_.managedIdentity)===null||i===void 0?void 0:i.email;var P=new URLSearchParams(fn.location.search);var x=P.get("nextPage");var S=useState(false),M=S[0],j=S[1];var k=useState(""),I=k[0],L=k[1];var B=useState(10),R=B[0],q=B[1];var D=useRef(undefined);var T=useRef(undefined);var H=function(){return __awaiter(t,void 0,void 0,(function(){var t,i,r,n,a;return __generator(this,(function(o){switch(o.label){case 0:if(!V)return[2];L("");j(false);i=x?{nextPage:x}:null;r=e.redirectPath;n={email:V,urlParams:i,redirectPath:r};return[4,d(n)];case 1:a=o.sent();if(a instanceof Error){if(a.message)L("Network request failed.");return[2]}if((t=a.requestManagedIdentityVerificationEmail)===null||t===void 0?void 0:t.success)j(true);return[2]}}))}))};function C(){return __awaiter(this,void 0,void 0,(function(){var t,i;return __generator(this,(function(r){switch(r.label){case 0:q(10);return[4,y()];case 1:i=r.sent();if((t=i===null||i===void 0?void 0:i.managedIdentitySession)===null||t===void 0?void 0:t.emailVerified){clearInterval(D.current);return[2,fn.push({pathname:e.redirectPath,search:P.toString()&&"?"+P.toString()})]}return[2]}}))}))}var A=function(){return setInterval(C,1e4)};var $=function(e){return setInterval((function(){return q(e)}),1e3)};function G(){clearInterval(T.current);clearInterval(D.current);q(10);T.current=$(9);D.current=A()}useEffect((function(){if(!D.current){C();D.current=A()}document.addEventListener("visibilitychange",(function(){return G()}));return function(){clearInterval(D.current);document.removeEventListener("visibilitychange",(function(){return G()}))}}),[]);useEffect((function(){if(R>0)T.current=$(R-1);return function(){return clearInterval(T.current)}}),[R]);return{states:{loading:m,error:((o=(a=(n=(r=g===null||g===void 0?void 0:g.response)===null||r===void 0?void 0:r.errors)===null||n===void 0?void 0:n[0])===null||a===void 0?void 0:a.extensions)===null||o===void 0?void 0:o.message)||((u=(l=(s=g===null||g===void 0?void 0:g.response)===null||s===void 0?void 0:s.errors)===null||l===void 0?void 0:l[0])===null||u===void 0?void 0:u.message)||I,success:M,loadingVerification:E,isVerified:!!((c=w===null||w===void 0?void 0:w.managedIdentitySession)===null||c===void 0?void 0:c.emailVerified),countdown:R},callbacks:{submit:H},content:{email:V,verifyMessage:e.verifyMessage,emailVerificationHeader:e.emailVerificationHeader,resendEmailButtonText:e.resendEmailButtonText,verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage}}}var PortalEmailVerification=function(){function e(e){registerInstance(this,e);this.ignored=true;this.redirectPath="/verifyEmail";this.emailVerificationHeader="Verify your email";this.resendEmailButtonText="Re-send Email";this.verifyMessage="A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.";this.verificationStatusMessage="Check verification status: in {countdown}";this.verificationLoadingMessage="Check verification status:";h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=isDemo()?usePortalEmailVerificationDemo(this):usePortalEmailVerification(this),t=e.states,i=e.callbacks,r=e.content;return h$1(PortalEmailVerificationView,{states:t,callbacks:i,content:r})};return e}();function usePortalEmailVerificationDemo(e){var t=this;return cjs({states:{error:"",loading:false,success:false,countdown:10},callbacks:{submit:function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){return[2]}))}))}},content:{email:"test@example.com",verifyMessage:"A verification email was sent to {email}. Please verify your email to continue to the portal.",emailVerificationHeader:"Verify your email",resendEmailButtonText:"Re-send Email",verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage}},e.demoData||{},{arrayMerge:function(e,t){return t}})}export{PortalEmailVerification as sqm_portal_email_verification};
+var __awaiter=this&&this.__awaiter||function(e,i,t,r){function n(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,a){function o(e){try{l(r.next(e))}catch(e){a(e)}}function s(e){try{l(r["throw"](e))}catch(e){a(e)}}function l(e){e.done?t(e.value):n(e.value).then(o,s)}l((r=r.apply(e,i||[])).next())}))};var __generator=this&&this.__generator||function(e,i){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,n,a,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(i){return l([e,i])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(t)try{if(r=1,n&&(a=o[0]&2?n["return"]:o[0]?n["throw"]||((a=n["return"])&&a.call(n),0):n.next)&&!(a=a.call(n,o[1])).done)return a;if(n=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:t.label++;return{value:o[1],done:false};case 5:t.label++;n=o[1];o=[0];continue;case 7:o=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){t=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){t.label=o[1];break}if(o[0]===6&&t.label<a[1]){t.label=a[1];a=o;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(o);break}if(a[2])t.ops.pop();t.trys.pop();continue}o=i.call(e,t)}catch(e){o=[6,e];n=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,h as h$1}from"./index-17b4da69.js";import{i as useState,j as useRef,f as useEffect,m as h}from"./stencil-hooks.module-eefa3570.js";import"./global-126fa55c.js";import{u as useCallback}from"./use-callback-684c8bb7.js";import{t as tn,B as Be,N,f as fn,i as isDemo}from"./index.module-14794b69.js";import{c as cjs}from"./cjs-bdfb4486.js";import"./mixins-f60a614c.js";import"./JSS-67b5cff8.js";import"./sqm-text-span-view-2567b6c0.js";import{P as PortalEmailVerificationView}from"./sqm-portal-email-verification-view-0170c6d1.js";function usePortalEmailVerification(e){var i=this;var t,r,n,a,o,s,l,u,c;var f=tn(),d=f[0],v=f[1],m=v.loading,h=v.data,g=v.errors;var p=Be(),b=p[0],y=p[1],w=y.data,E=y.loading;var _=N();var V=(t=_===null||_===void 0?void 0:_.managedIdentity)===null||t===void 0?void 0:t.email;var P=new URLSearchParams(fn.location.search);var S=P.get("nextPage");var x=useState(false),k=x[0],M=x[1];var j=useState(""),I=j[0],L=j[1];var B=useState(10),R=B[0],q=B[1];var C=useRef(undefined);var D=useRef(undefined);var T=function(){return __awaiter(i,void 0,void 0,(function(){var i,t,r,n,a;return __generator(this,(function(o){switch(o.label){case 0:if(!V)return[2];L("");M(false);t=S?{nextPage:S}:null;r=e.redirectPath;n={email:V,urlParams:t,redirectPath:r};return[4,d(n)];case 1:a=o.sent();if(a instanceof Error){if(a.message)L("Network request failed.");return[2]}if((i=a.requestManagedIdentityVerificationEmail)===null||i===void 0?void 0:i.success)M(true);return[2]}}))}))};function H(){return __awaiter(this,void 0,void 0,(function(){var i,t;return __generator(this,(function(r){switch(r.label){case 0:return[4,b()];case 1:t=r.sent();if((i=t===null||t===void 0?void 0:t.managedIdentitySession)===null||i===void 0?void 0:i.emailVerified){clearInterval(C.current);return[2,fn.push({pathname:e.redirectPath,search:P.toString()&&"?"+P.toString()})]}G(10);return[2]}}))}))}var A=function(e){if(e===void 0){e=1e4}return setInterval(H,e)};var $=function(e){return setInterval((function(){return q(e)}),1e3)};function G(e){clearInterval(D.current);clearInterval(C.current);if(document.visibilityState==="hidden")return;if(e)q(e);D.current=$(e-1||R-1);C.current=A(e*1e3||R*1e3)}var J=useCallback((function(){return G()}),[R]);useEffect((function(){if(!C.current){H();C.current=A()}return function(){clearInterval(C.current)}}),[]);useEffect((function(){if(R>0)D.current=$(R-1);document.addEventListener("visibilitychange",J);return function(){clearInterval(D.current);document.removeEventListener("visibilitychange",J)}}),[R]);return{states:{loading:m,error:((o=(a=(n=(r=g===null||g===void 0?void 0:g.response)===null||r===void 0?void 0:r.errors)===null||n===void 0?void 0:n[0])===null||a===void 0?void 0:a.extensions)===null||o===void 0?void 0:o.message)||((u=(l=(s=g===null||g===void 0?void 0:g.response)===null||s===void 0?void 0:s.errors)===null||l===void 0?void 0:l[0])===null||u===void 0?void 0:u.message)||I,success:k,loadingVerification:E,isVerified:!!((c=w===null||w===void 0?void 0:w.managedIdentitySession)===null||c===void 0?void 0:c.emailVerified),countdown:R},callbacks:{submit:T},content:{email:V,verifyMessage:e.verifyMessage,emailVerificationHeader:e.emailVerificationHeader,resendEmailButtonText:e.resendEmailButtonText,verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage}}}var PortalEmailVerification=function(){function e(e){registerInstance(this,e);this.ignored=true;this.redirectPath="/verifyEmail";this.emailVerificationHeader="Verify your email";this.resendEmailButtonText="Re-send Email";this.verifyMessage="A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.";this.verificationStatusMessage="Check verification status: in {countdown}";this.verificationLoadingMessage="Check verification status:";h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=isDemo()?usePortalEmailVerificationDemo(this):usePortalEmailVerification(this),i=e.states,t=e.callbacks,r=e.content;return h$1(PortalEmailVerificationView,{states:i,callbacks:t,content:r})};return e}();function usePortalEmailVerificationDemo(e){var i=this;return cjs({states:{error:"",loading:false,success:false,countdown:10},callbacks:{submit:function(e){return __awaiter(i,void 0,void 0,(function(){return __generator(this,(function(e){return[2]}))}))}},content:{email:"test@example.com",verifyMessage:"A verification email was sent to {email}. Please verify your email to continue to the portal.",emailVerificationHeader:"Verify your email",resendEmailButtonText:"Re-send Email",verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage}},e.demoData||{},{arrayMerge:function(e,i){return i}})}export{PortalEmailVerification as sqm_portal_email_verification};