@hhgtech/hhg-components 1.29.310-beta-3 → 1.29.310-beta-4

package/build/esm/organisms.js

@@ -1,73 +1,73 @@
-export { N as NavigationV2, g as getNavMenuContent, a as getNavMenuContentWithCache } from './index-cf9c0eb5.js';
-export { U as UserProfileNavigation, N as UserProfileNavigationHeader, a as UserProfileNavigationStats } from './index-9669de36.js';
-export { F as Footer } from './index-23ac48ff.js';
+export { N as NavigationV2, g as getNavMenuContent, a as getNavMenuContentWithCache } from './index-eab88653.js';
+export { U as UserProfileNavigation, N as UserProfileNavigationHeader, a as UserProfileNavigationStats } from './index-e1acf54a.js';
+export { F as Footer } from './index-f8393905.js';
 export { NavigationLogoutPopup } from './navigationLogoutPopup.js';
-export { N as NavigationProfileButton } from './index-32202e33.js';
+export { N as NavigationProfileButton } from './index-4cfe44c8.js';
 export { ProfileNavigation } from './profileNavigation.js';
-import './tslib.es6-1f332cec.js';
+import './tslib.es6-ce74f603.js';
 import 'react';
-import './index-cc2a554a.js';
-import './index-20fde46e.js';
+import './index-53a3dddb.js';
+import './index-1d6042e8.js';
 import '@hhgtech/icons/other';
 import '@mantine/core';
 import '@mantine/hooks';
-import './index-42f6f191.js';
+import './index-55e9de36.js';
 import './constantsDomainLocales.js';
-import './Locale-2e87b9e0.js';
+import './Locale-807ca088.js';
 import './constantsIsProduction.js';
-import './useScreenSize-e377ceca.js';
+import './useScreenSize-384dd60f.js';
 import '@emotion/styled';
-import './utils-20a45575.js';
+import './utils-69e6fbdd.js';
 import '@mantine/carousel';
-import './index-a8e93d3f.js';
-import './other-77d426ce.js';
-import './index-a32f7b30.js';
+import './index-6da0c043.js';
+import './other-18348d8b.js';
+import './index-94ab96a4.js';
 import './miscTheme.js';
-import './useMantineLocale-b226b448.js';
+import './useMantineLocale-df80f46c.js';
 import '@mantine/notifications';
-import './index-96f54db4.js';
+import './index-abadd269.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'dayjs';
-import './index-6def7536.js';
+import './index-a108337c.js';
 import 'classnames';
-import './useUniqueId-a7e66824.js';
+import './useUniqueId-1419c2da.js';
 import '@hhgtech/icons/core';
-import './normalizeLink-302a0f70.js';
-import './dataTransform-06545db4.js';
-import './index-4afc4969.js';
-import './logoIcon-6f876f01.js';
-import './index-5697df33.js';
-import './translationsContext-e9460e5f.js';
+import './normalizeLink-171c1577.js';
+import './dataTransform-76f0f8e2.js';
+import './index-06ea17df.js';
+import './logoIcon-71f36463.js';
+import './index-7839baec.js';
+import './translationsContext-faa1aa86.js';
 import 'lodash/throttle';
 import '@mantine/dates';
-import './index.styles-59f8546d.js';
-import './index-f780d8de.js';
-import './constants-b58f1ef9.js';
-import './store-42029669.js';
+import './index.styles-8276aa5b.js';
+import './index-b7b494e0.js';
+import './constants-9dc0d96b.js';
+import './store-1acba58d.js';
 import 'zustand';
 import './miscCookieHelper.js';
-import './index-e57673f8.js';
-import './utils-53b9e11c.js';
-import './index-09acf6d4.js';
+import './index-2f71b617.js';
+import './utils-e7d70f3b.js';
+import './index-d844a01b.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-247ae229.js';
-import './constants-9a4711f0.js';
-import './index-f8b0134b.js';
-import './index-8c47675c.js';
-import './useIsInit-03e2e5b9.js';
+import './constants-45e848cf.js';
+import './constants-83cb0f00.js';
+import './index-223df4dc.js';
+import './index-24176555.js';
+import './useIsInit-66451a9c.js';
 import './miscDefaultClassWrapper.js';
 import 'dayjs/plugin/relativeTime';
-import './index-2b949c3c.js';
-import './index-4726778a.js';
+import './index-4c170b70.js';
+import './index-5703a803.js';
 import 'lodash/debounce';
-import './core-1a664d27.js';
-import './index-94898c1f.js';
-import './index-78392af4.js';
-import './index-c2d5c269.js';
-import './Spinner-6c18847f.js';
-import './ChevronDown-58aa7be5.js';
+import './core-c991f49d.js';
+import './index-882153f2.js';
+import './index-b5263111.js';
+import './index-3459c4d1.js';
+import './Spinner-c0d420aa.js';
+import './ChevronDown-d9841086.js';
 import '@emotion/react';

package/build/esm/{post-9172504f.js → post-12765401.js}

@@ -1,6 +1,6 @@
-import { a as __awaiter } from './tslib.es6-1f332cec.js';
+import { a as __awaiter } from './tslib.es6-ce74f603.js';
 import { ADMIN_PATHS, PATHS } from './togetherApiPaths.js';
-import { d as getApiPath, s as callApiWithAdminAuth, b as callApiWithAuth } from './utils-53b9e11c.js';
+import { d as getApiPath, s as callApiWithAdminAuth, b as callApiWithAuth } from './utils-e7d70f3b.js';
 
 const EncodeUrlRegexMap = {
     edit: /<mocka ([^>]*)data-url="true"[^<>]*>(.*?)<\/mocka>/gim,

package/build/esm/profileNavigation.js

@@ -1,37 +1,37 @@
 import React__default, { useMemo, useState, Fragment, useEffect } from 'react';
-import { a as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, D as DATA_PRIVACY_LOCALES } from './index-96f54db4.js';
-import { a as Avatar } from './index-20fde46e.js';
+import { a as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, D as DATA_PRIVACY_LOCALES } from './index-abadd269.js';
+import { a as Avatar } from './index-1d6042e8.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-a32f7b30.js';
-import { C as CommonGAssets } from './index-42f6f191.js';
-import './useMantineLocale-b226b448.js';
-import { T as Text } from './index-a8e93d3f.js';
-import './index-6def7536.js';
-import './index.styles-59f8546d.js';
-import { u as useTranslations } from './index-5697df33.js';
+import './index-94ab96a4.js';
+import { C as CommonGAssets } from './index-55e9de36.js';
+import './useMantineLocale-df80f46c.js';
+import { T as Text } from './index-6da0c043.js';
+import './index-a108337c.js';
+import './index.styles-8276aa5b.js';
+import { u as useTranslations } from './index-7839baec.js';
 import '@mantine/hooks';
-import './utils-20a45575.js';
-import './other-77d426ce.js';
-import './index-f780d8de.js';
-import { C as ChevronDown } from './ChevronDown-58aa7be5.js';
-import { e as normalizeLinkSlash, a as getCurrentSsoUrl, g as getCurrentBaseUrl } from './normalizeLink-302a0f70.js';
+import './utils-69e6fbdd.js';
+import './other-18348d8b.js';
+import './index-b7b494e0.js';
+import { C as ChevronDown } from './ChevronDown-d9841086.js';
+import { e as normalizeLinkSlash, a as getCurrentSsoUrl, g as getCurrentBaseUrl } from './normalizeLink-171c1577.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import './translationsContext-e9460e5f.js';
+import './translationsContext-faa1aa86.js';
 import 'date-fns/locale';
 import './constantsSite.js';
-import './Locale-2e87b9e0.js';
+import './Locale-807ca088.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './tslib.es6-1f332cec.js';
+import './tslib.es6-ce74f603.js';
 import '@hhgtech/icons/other';
-import './useScreenSize-e377ceca.js';
+import './useScreenSize-384dd60f.js';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-a7e66824.js';
+import './useUniqueId-1419c2da.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
 import 'dayjs';

package/build/esm/progressBar.js

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-1f332cec.js';
+import { _ as __rest } from './tslib.es6-ce74f603.js';
 import React__default, { useState, useCallback, useEffect } from 'react';
 import throttle from 'lodash/throttle';
 import styled from '@emotion/styled';

package/build/esm/pwg.js

@@ -1,43 +1,43 @@
 import React__default, { useMemo, useState, useRef } from 'react';
-import { M as MarryBabyText, a as MarryBabyHeading } from './index-78392af4.js';
-import { T as Text } from './index-a8e93d3f.js';
-import { P as PillCarousel } from './index-1d72a9bb.js';
-import { u as useTranslations } from './index-5697df33.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-b5263111.js';
+import { T as Text } from './index-6da0c043.js';
+import { P as PillCarousel } from './index-26da7cb8.js';
+import { u as useTranslations } from './index-7839baec.js';
 import { theme } from './miscTheme.js';
 import { ResponsiveContainer, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, Area, ReferenceDot } from 'recharts';
-import { C as CustomReferenceDot } from './index-719ee7d7.js';
-import { a as useOutsideClick } from './useOutsideClick-f8aea929.js';
+import { C as CustomReferenceDot } from './index-28458034.js';
+import { a as useOutsideClick } from './useOutsideClick-c4c35f6c.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-1f332cec.js';
+import { _ as __rest } from './tslib.es6-ce74f603.js';
 import '@mantine/core';
-import './other-77d426ce.js';
-import './index-a32f7b30.js';
-import './Locale-2e87b9e0.js';
-import './index-42f6f191.js';
+import './other-18348d8b.js';
+import './index-94ab96a4.js';
+import './Locale-807ca088.js';
+import './index-55e9de36.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './useScreenSize-e377ceca.js';
-import './utils-20a45575.js';
-import './index-49b4f2f6.js';
-import './index-20fde46e.js';
+import './useScreenSize-384dd60f.js';
+import './utils-69e6fbdd.js';
+import './index-7d618aff.js';
+import './index-1d6042e8.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
 import '@mantine/carousel';
-import './useMantineLocale-b226b448.js';
+import './useMantineLocale-df80f46c.js';
 import '@mantine/notifications';
-import './index-96f54db4.js';
+import './index-abadd269.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'dayjs';
-import './index-6def7536.js';
+import './index-a108337c.js';
 import 'classnames';
-import './useUniqueId-a7e66824.js';
+import './useUniqueId-1419c2da.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-59f8546d.js';
-import './translationsContext-e9460e5f.js';
-import './index-f780d8de.js';
+import './index.styles-8276aa5b.js';
+import './translationsContext-faa1aa86.js';
+import './index-b7b494e0.js';
 
 const CustomizedAxisTick = (props) => {
     const { x, y, payload, activeWeek } = props;

package/build/esm/ssoV2/index.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import { LOCALE } from "../interfaces/types/Locale";
+declare global {
+    interface Array<T> {
+        findLastIndex: Array<T>['findIndex'];
+    }
+}
 export type SSOV2Props = {
     onClose?: () => void;
     locale?: LOCALE;

package/build/esm/ssoV2/screens/components/progressBar.d.ts

@@ -4,7 +4,11 @@ import { SSOStepType } from "../../stepsManager";
 import { UserInfo } from "../../../types";
 export declare const isSocialFlowFn: (flowData: SSOV2StoreType['flowData']) => boolean;
 export declare const isPhoneFlowFn: (flowData: SSOV2StoreType['flowData']) => boolean;
+export declare const isEmailFlowFn: (flowData: SSOV2StoreType['flowData']) => boolean;
 export declare const isDisplayProgressBarFn: (flowData: SSOV2StoreType['flowData'], step: SSOStepType) => boolean;
-export declare const getCurrentStepNumber: (flowData: SSOV2StoreType['flowData'], step: SSOStepType, userInfo?: UserInfo) => number[];
+export declare const getCurrentStepNumber: (flowData: SSOV2StoreType['flowData'], { steps, currentStepIndex, }: {
+    steps: SSOStepType[];
+    currentStepIndex: number;
+}, userInfo?: UserInfo) => number[];
 declare const ProgressBar: () => React.JSX.Element;
 export default ProgressBar;

package/build/esm/ssoV2/ssoStateManager/store.d.ts

@@ -32,6 +32,14 @@ export type SSOV2StoreType = {
         method?: 'email' | 'sms' | 'zalo' | 'google' | 'facebook' | 'phone';
         flow?: 'login' | 'signup';
         isVerifyPhone?: boolean;
+        /** These data is fetched from API to use in the email flow */
+        emailMetaData?: {
+            is_birthday?: boolean;
+            is_gender?: boolean;
+            is_name?: boolean;
+            is_pass?: boolean;
+            is_phone_verified?: boolean;
+        };
     };
 };
 export declare const useSSOV2Store: import("zustand").UseBoundStore<import("zustand").StoreApi<SSOV2StoreType>>;
@@ -39,6 +47,7 @@ export declare const redirect: (returnUrl?: string, source?: string, forceReload
 export declare const IS_SSOV2_ENABLED: (locale?: string) => boolean;
 export declare const getSSOFlowFromUserProfile: (userInfo: UserInfo) => any;
 export declare const isUserFinishedSetup: (userInfo: UserInfo) => any;
+export declare const isFlowFinishedSetup: (flowData: SSOV2StoreType['flowData']) => boolean;
 export declare const isUserNeedPassword: (flowData?: SSOV2StoreType['flowData'], userInfo?: UserInfo) => boolean;
 export declare const isPhoneNotVerifedYet: (userInfo?: UserInfo) => boolean;
 export declare const isLoginWithPhoneNotVerifedYet: (flowData?: SSOV2StoreType['flowData'], userInfo?: UserInfo) => boolean;

package/build/esm/ssoV2.js

@@ -1,27 +1,27 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-1f332cec.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-ce74f603.js';
 import React__default, { createContext, useMemo, useEffect, useState, useCallback, forwardRef } from 'react';
-import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-20fde46e.js';
-import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isPhoneNotVerifedYet, b as isUserFinishedSetup, c as isUserNeedPassword, f as fetchSSOV2Api, w as websiteId, d as SSO_V2_PATHS, e as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, j as updateUserInfo, k as isLoginWithPhoneNotVerifedYet, r as resetPassword, l as redirect } from './store-42029669.js';
-export { u as useSSOV2Store } from './store-42029669.js';
+import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-1d6042e8.js';
+import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isPhoneNotVerifedYet, b as isUserFinishedSetup, c as isUserNeedPassword, f as fetchSSOV2Api, w as websiteId, d as SSO_V2_PATHS, e as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, j as updateUserInfo, k as isLoginWithPhoneNotVerifedYet, l as isFlowFinishedSetup, r as resetPassword, m as redirect } from './store-1acba58d.js';
+export { u as useSSOV2Store } from './store-1acba58d.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
 import { Close, Search } from '@hhgtech/icons/core';
-import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-96f54db4.js';
-import { L as LogoIcon } from './logoIcon-6f876f01.js';
-import { B as Button } from './index-6def7536.js';
-import { M as Modal } from './index-7eb2ec4a.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-abadd269.js';
+import { L as LogoIcon } from './logoIcon-71f36463.js';
+import { B as Button } from './index-a108337c.js';
+import { M as Modal } from './index-1e32216d.js';
 import { Stack, Flex, Box, Group } from '@mantine/core';
 import '@mantine/dates';
-import './index-a32f7b30.js';
-import './index-42f6f191.js';
-import { s as showNotification } from './useMantineLocale-b226b448.js';
-import { T as Text } from './index-a8e93d3f.js';
-import { u as useTranslations } from './index-5697df33.js';
+import './index-94ab96a4.js';
+import './index-55e9de36.js';
+import { s as showNotification } from './useMantineLocale-df80f46c.js';
+import { T as Text } from './index-6da0c043.js';
+import { u as useTranslations } from './index-7839baec.js';
 import '@mantine/hooks';
-import './utils-20a45575.js';
-import './other-77d426ce.js';
-import './index-f780d8de.js';
-import { L as LOCALE } from './Locale-2e87b9e0.js';
-import { G as Google, F as Facebook } from './Google-534fb763.js';
+import './utils-69e6fbdd.js';
+import './other-18348d8b.js';
+import './index-b7b494e0.js';
+import { L as LOCALE } from './Locale-807ca088.js';
+import { G as Google, F as Facebook } from './Google-a554e17d.js';
 import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import cn from 'classnames';
@@ -29,28 +29,28 @@ import { CaretDown } from '@hhgtech/icons/other';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import Flags from 'react-phone-number-input/flags';
-import { u as useScreenSize } from './useScreenSize-e377ceca.js';
+import { u as useScreenSize } from './useScreenSize-384dd60f.js';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-52b3f649.js';
-import { S as Spoiler } from './index-fbff6e71.js';
+import { M as MAPPED_LOCALE } from './utils-34a49d5f.js';
+import { S as Spoiler } from './index-1b5dc167.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-da8cdc78.js';
+import { D as DatePicker } from './index-07844dc7.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './useUniqueId-a7e66824.js';
+import './useUniqueId-1419c2da.js';
 import './constantsSite.js';
 import 'zustand';
 import './constantsIsProduction.js';
-import './normalizeLink-302a0f70.js';
+import './normalizeLink-171c1577.js';
 import './miscCookieHelper.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-59f8546d.js';
+import './index.styles-8276aa5b.js';
 import '@mantine/notifications';
-import './translationsContext-e9460e5f.js';
+import './translationsContext-faa1aa86.js';
 
 const SSOStateContext = createContext({
     locale: LOCALE.Vietnam,
@@ -166,20 +166,29 @@ const isPhoneFlowFn = (flowData) => {
         (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'zalo' ||
         (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'phone');
 };
+const isEmailFlowFn = (flowData) => {
+    return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'email';
+};
 const isDisplayProgressBarFn = (flowData, step) => {
     const showProgressBar = (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP ||
         (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.SETUP_FULL ||
         (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.VERIFY_PHONE ||
         (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.PASSWORD ||
         (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_PHONE ||
-        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_SETUP;
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_SETUP ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.EMAIL;
     // step?.type === SSOStepTypeType.PASSWORD
-    const isWhiteListFlow = isSocialFlowFn(flowData) || isPhoneFlowFn(flowData);
+    const isWhiteListFlow = isSocialFlowFn(flowData) ||
+        isPhoneFlowFn(flowData) ||
+        isEmailFlowFn(flowData);
     return showProgressBar && isWhiteListFlow;
 };
-const getCurrentStepNumber = (flowData, step, userInfo) => {
+const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo) => {
+    var _a, _b, _c, _d, _e;
+    const step = steps[currentStepIndex];
     const isSocialFlow = isSocialFlowFn(flowData);
     const isPhoneFlow = isPhoneFlowFn(flowData);
+    const isEmailFlow = isEmailFlowFn(flowData);
     /** Social (Google, Facebook): FIRST => VERIFY_PHONE | OTP => STEP_FULL */
     if (isSocialFlow) {
         const arrSteps = [
@@ -233,6 +242,37 @@ const getCurrentStepNumber = (flowData, step, userInfo) => {
             arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
         ];
     }
+    if (isEmailFlow) {
+        const hasPasswordStep = !((_a = flowData === null || flowData === void 0 ? void 0 : flowData.emailMetaData) === null || _a === void 0 ? void 0 : _a.is_pass);
+        const hasPhoneStep = !((_b = flowData === null || flowData === void 0 ? void 0 : flowData.emailMetaData) === null || _b === void 0 ? void 0 : _b.is_phone_verified);
+        const hasSetupFullStep = !((_c = flowData === null || flowData === void 0 ? void 0 : flowData.emailMetaData) === null || _c === void 0 ? void 0 : _c.is_gender) ||
+            !((_d = flowData === null || flowData === void 0 ? void 0 : flowData.emailMetaData) === null || _d === void 0 ? void 0 : _d.is_name) ||
+            !((_e = flowData === null || flowData === void 0 ? void 0 : flowData.emailMetaData) === null || _e === void 0 ? void 0 : _e.is_birthday);
+        if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
+            return [];
+        const arrSteps = [
+            (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                ? SSOStepTypeType.OTP
+                : SSOStepTypeType.EMAIL,
+            hasPasswordStep
+                ? SSOStepTypeType.FORGOT_PASSWORD_SETUP
+                : SSOStepTypeType.PASSWORD,
+            hasPhoneStep
+                ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                    ? SSOStepTypeType.OTP
+                    : SSOStepTypeType.VERIFY_PHONE
+                : undefined,
+            hasSetupFullStep ? SSOStepTypeType.SETUP_FULL : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        return [
+            arrSteps.length,
+            steps.length < arrSteps.length
+                ? arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
     return [];
 };
 const ProgressBar = () => {
@@ -241,8 +281,7 @@ const ProgressBar = () => {
     const { flowData, userInfo } = useSSOV2Store();
     /** No need update state IF userInfo is changed */
     const initUserInfo = useMemo(() => userInfo, [userInfo]);
-    const currentStep = steps[currentStepIndex];
-    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, currentStep, initUserInfo);
+    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex }, initUserInfo);
     if (!activeStepNumber || totalStepNumber === 1)
         return null;
     return (React__default.createElement(Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
@@ -266,7 +305,8 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     const showProgressBar = isDisplayProgressBarFn(flowData, currentStep);
     const showBack = (steps.length > 1 && !showProgressBar) ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.OTP ||
-        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.PASSWORD;
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.PASSWORD ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.EMAIL;
     const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FIRST;
     const showLogo = (steps.length === 1 || showProgressBar) && !showBack;
     const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
@@ -507,6 +547,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'login',
+                                emailMetaData: existRes._data,
                             },
                         });
                         // go to password screen
@@ -524,6 +565,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'signup',
+                                emailMetaData: existRes._data,
                             },
                         });
                         if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
@@ -542,7 +584,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             config: {
                                 email,
                                 otpType: 'email',
-                                afterAction: 'setup',
+                                afterAction: 'forgot',
                             },
                         });
                         goNext();
@@ -3057,6 +3099,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         handleAuthSuccess(data);
         const userInfo = yield getUserInfo();
         const isPhoneFlow = isPhoneFlowFn(flowData);
+        const isEmailFlow = isEmailFlowFn(flowData);
         setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
         if (!phone && !!email) {
             if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
@@ -3084,7 +3127,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
             goNext();
             return;
         }
-        if (isPhoneFlow && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+        if ((isPhoneFlow || isEmailFlow) && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
             addStep({
                 type: SSOStepTypeType.SETUP_FULL,
                 config: {
@@ -3146,7 +3189,7 @@ const SetupLater = ({ style = {} }) => {
     const { t } = useTranslations();
     const { onClose } = useSSOState();
     const [loading, setLoading] = useState(false);
-    const { userInfo } = useSSOV2Store();
+    const { userInfo, flowData } = useSSOV2Store();
     const { currentStepIndex, steps, addStep, goNext } = useSSOSteps();
     const currentStep = steps[currentStepIndex];
     const onClickSetupLater = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -3165,6 +3208,16 @@ const SetupLater = ({ style = {} }) => {
             });
             goNext();
         }
+        else if (!isFlowFinishedSetup(flowData) &&
+            (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.VERIFY_PHONE) {
+            addStep({
+                type: SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo,
+                },
+            });
+            goNext();
+        }
         else {
             onClose === null || onClose === void 0 ? void 0 : onClose(true);
         }
@@ -3335,7 +3388,7 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
     const [errMsg, setErrMsg] = React__default.useState('');
     const { setTracking, onClose } = useSSOState();
     const { addStep, goNext } = useSSOSteps();
-    const { flowData } = useSSOV2Store();
+    const { flowData, setUserInfo } = useSSOV2Store();
     const trackingMethod = flowData.method;
     const trackingCategory = `SSO - Sign In via ${trackingMethod}`;
     const trackingAction = `Setup New Password`;
@@ -3373,7 +3426,8 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                 password.length <= 50 &&
                 password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
                 password === confirmPassword) {
-                const res = isPhoneFlowFn(flowData)
+                const isPhoneOrEmailFlow = isPhoneFlowFn(flowData) || isEmailFlowFn(flowData);
+                const res = isPhoneOrEmailFlow
                     ? yield updateUserInfo({
                         password,
                         confirm_password: confirmPassword,
@@ -3381,20 +3435,39 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                     })
                     : yield resetPassword(password, confirmPassword);
                 if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                    if (isPhoneFlowFn(flowData)) {
+                    if (isPhoneOrEmailFlow) {
                         handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
                         const userInfo = yield getUserInfo();
-                        if (userInfo && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
-                            addStep({
-                                type: SSOStepTypeType.SETUP_FULL,
-                                config: {
-                                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
-                                },
-                            });
-                            goNext();
+                        // Phone
+                        if (isPhoneFlowFn(flowData)) {
+                            if (userInfo && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: SSOStepTypeType.SETUP_FULL,
+                                    config: {
+                                        userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
                         }
-                        else {
-                            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                        // Email
+                        if (isEmailFlowFn(flowData)) {
+                            setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
+                            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: SSOStepTypeType.VERIFY_PHONE,
+                                    config: {
+                                        provider: 'email',
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
                         }
                     }
                     else {
@@ -3922,6 +3995,15 @@ const SSOScreenRenderer = () => {
     })));
 };
 
+if (!Array.prototype.findLastIndex) {
+    Array.prototype.findLastIndex = function (callback, thisArg) {
+        for (let i = this.length - 1; i >= 0; i--) {
+            if (callback.call(thisArg, this[i], i, this))
+                return i;
+        }
+        return -1;
+    };
+}
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = useSSOV2Store();
     useEffect(() => {