@hhgtech/hhg-components 1.29.111 → 1.29.113

package/build/esm/ssoV2.js

@@ -1,47 +1,52 @@
-import React__default, { createContext, useState, useEffect, useRef, useMemo } from 'react';
+import React__default, { createContext, useState, useRef, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
-import { Close, CheckCircle } from '@hhgtech/icons/core';
-import { L as LogoIcon } from './logoIcon-34e8fa76.js';
-import { B as Button } from './index-e43e6daf.js';
-import { M as Modal } from './index-ad747da0.js';
-import { L as LOCALE } from './Locale-2e537a6a.js';
-import { L as LOCALE_SPECS, B as BEARER_TOKEN_COOKIE$1 } from './index-38efcc39.js';
-import { a as __awaiter, _ as __rest } from './tslib.es6-5f83e366.js';
-import { Stack, Group, Box } from '@mantine/core';
-import { I as Input, P as Phone, O as OTP, f as PasswordInput, g as Accordion } from './index-6e166286.js';
+import { Close } from '@hhgtech/icons/core';
+import { L as LogoIcon } from './logoIcon-f4e92a05.js';
+import { B as Button } from './index-e5494b1e.js';
+import { M as Modal } from './index-c3148516.js';
+import { Box, Stack, Group } from '@mantine/core';
+import throttle from 'lodash/throttle';
+import { f as Accordion, I as Input, P as Phone, O as OTP, g as PasswordInput, R as Radio } from './index-42e125f0.js';
+import '@mantine/dates';
+import { L as LOCALE_SPECS, f as BEARER_REFRESH_TOKEN_COOKIE } from './index-745f205b.js';
+import './index-59f60051.js';
+import './index-a8484016.js';
+import { s as showNotification } from './useMantineLocale-b8431753.js';
+import { T as Text } from './index-70d624c6.js';
+import { u as useTranslations } from './useTranslations-c6210631.js';
+import '@mantine/hooks';
+import { a as getPopupWrapperDom } from './utils-8bc7ef6f.js';
+import './other-9ea1cbe5.js';
+import { L as LOCALE } from './Locale-eaad3fa1.js';
+import './translationsContext-5f5f4d35.js';
+import 'string-format';
+import { a as __awaiter, _ as __rest } from './tslib.es6-f3a499e3.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as getCurrentSsoUrl } from './routing-3e2e2990.js';
-import { T as Text } from './index-fc9567f0.js';
-import { Info, CircleBorder } from '@hhgtech/icons/other';
-import { G as Google, F as Facebook } from './Google-844b3694.js';
-import styled from '@emotion/styled';
-import { M as MAPPED_LOCALE } from './utils-073ebee6.js';
+import { a as getCurrentSsoUrl } from './routing-8d70e86c.js';
 import { setCookie } from './miscCookieHelper.js';
-import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
+import { G as Google, F as Facebook } from './Google-2424299e.js';
+import { Info } from '@hhgtech/icons/other';
+import './index.styles-826b6cf4.js';
+import styled from '@emotion/styled';
+import { M as MAPPED_LOCALE } from './utils-0f0f5f03.js';
 import { useForm, yupResolver } from '@mantine/form';
-import throttle from 'lodash/throttle';
-import '@mantine/dates';
-import './index-a1ac4405.js';
-import './index-c6266db7.js';
-import './useMantineLocale-8c5b5fc9.js';
-import { u as useTranslations } from './useTranslations-95c6883a.js';
-import '@mantine/hooks';
-import './utils-f168370f.js';
-import './other-09dd1a84.js';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-2381e9de.js';
-import './index-d1b85eee.js';
-import './index.styles-9ffb84a3.js';
-import 'date-fns/locale';
-import './constantsSite.js';
-import './constantsRiskScreener.js';
+import { D as DatePicker } from './index-d4c470e1.js';
+import { u as useSSOV2Store } from './store-c39c07f1.js';
+export { u as useSSOV2Store } from './store-c39c07f1.js';
+import './index-bbf929d1.js';
 import '@mantine/carousel';
+import './miscTheme.js';
 import 'classnames';
-import './useUniqueId-7d9bfd02.js';
-import './translationsContext-b39ae826.js';
-import 'string-format';
+import './useUniqueId-2a6f1b27.js';
+import './constantsSite.js';
+import 'date-fns/locale';
+import './constantsRiskScreener.js';
+import '@mantine/notifications';
+import 'zustand';
 
 const SSOStateContext = createContext({
     locale: LOCALE.Vietnam,
@@ -49,90 +54,188 @@ const SSOStateContext = createContext({
     source: 'default',
 });
 const SSOStateProvider = ({ children, locale = LOCALE.Vietnam, onClose, source = 'default', }) => {
+    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default.useState(false);
     return (React__default.createElement(SSOStateContext.Provider, { value: {
             locale,
             onClose,
             source,
+            openCollectInfoPopup,
+            setOpenCollectInfoPopup,
         } }, children));
 };
 const useSSOState = () => {
     return React__default.useContext(SSOStateContext);
 };
 
-var SSOStepTypeType;
-(function (SSOStepTypeType) {
-    SSOStepTypeType["FIRST"] = "first";
-    SSOStepTypeType["EMAIL"] = "email";
-    SSOStepTypeType["VERIFY_PHONE"] = "verify_phone";
-    SSOStepTypeType["PASSWORD"] = "password";
-    SSOStepTypeType["UPDATE_EMAIL"] = "update_email";
-    SSOStepTypeType["FORGOT_PASSWORD_PHONE"] = "forgot_password_phone";
-    SSOStepTypeType["FORGOT_PASSWORD_SETUP"] = "forgot_password_setup";
-    SSOStepTypeType["OTP"] = "otp";
-    SSOStepTypeType["SETUP_FULL"] = "setup_full";
-})(SSOStepTypeType || (SSOStepTypeType = {}));
-const SSOStepsContext = createContext({
-    currentStepIndex: 0,
-    steps: [
+const BackgroundHeader$1 = () => (React__default.createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        zIndex: 0,
+        transform: 'translateX(-50%)',
+        pointerEvents: 'none',
+    } },
+    React__default.createElement("circle", { opacity: ".2", cx: "146", cy: "109", r: "146", fill: "url(#paint0_linear_908_34610)" }),
+    React__default.createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_34610)" }),
+    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_34610)" }),
+    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_34610)" }),
+    React__default.createElement("path", { d: "M163.327 94.716c-.522-3.187-7.981-5.714-17.11-5.714s-16.589 2.527-17.111 5.714h-.032v26.428h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032V94.716z", fill: "#545E73" }),
+    React__default.createElement("path", { d: "M146.217 118.286c-9.468 0-17.143-2.718-17.143-6.071v8.928h.032c.522 3.187 7.982 5.714 17.111 5.714 9.128 0 16.588-2.527 17.11-5.714h.032v-8.928c0 3.353-7.675 6.071-17.142 6.071", fill: "#2B62CD" }),
+    React__default.createElement("path", { d: "M129.074 111.859v.358q.002-.18.032-.358zm34.25 0q.031.178.032.358v-.358z", fill: "#38454F" }),
+    React__default.createElement("path", { d: "M146.217 109.714c-9.468 0-17.143-2.719-17.143-6.071v8.928h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.928c0 3.352-7.675 6.071-17.142 6.071", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M129.074 103.287v.357q.002-.18.032-.357zm34.25 0q.031.178.032.357v-.357z", fill: "#556080" }),
+    React__default.createElement("path", { d: "M146.217 101.145c9.467 0 17.142-2.719 17.142-6.072s-7.675-6.071-17.142-6.071c-9.468 0-17.143 2.718-17.143 6.071s7.675 6.072 17.143 6.072", fill: "#91CAFF" }),
+    React__default.createElement("path", { d: "M146.217 101.144c-9.468 0-17.143-2.719-17.143-6.072v8.929h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.929c0 3.353-7.675 6.072-17.142 6.072", fill: "#45A4FF" }),
+    React__default.createElement("path", { d: "M129.074 94.717v.357q.002-.18.032-.357zm34.25 0q.031.177.032.357v-.357z", fill: "#8697CB" }),
+    React__default.createElement("path", { d: "M156.36 129.002a8.57 8.57 0 0 0 8.571-8.571 8.571 8.571 0 1 0-8.571 8.571", fill: "#00B16A" }),
+    React__default.createElement("path", { d: "M161.054 116.273a.714.714 0 0 0-.995.178l-3.997 5.743-2.82-2.316a.714.714 0 0 0-.906 1.105l3.418 2.806a.72.72 0 0 0 1.04-.144l4.438-6.377a.716.716 0 0 0-.178-.995", fill: "#fff" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("linearGradient", { id: "paint0_linear_908_34610", x1: "147.5", y1: "141", x2: "36.5", y2: "30", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })),
+        React__default.createElement("linearGradient", { id: "paint1_linear_908_34610", x1: "218.376", y1: "63.134", x2: "61", y2: "109", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
+        React__default.createElement("linearGradient", { id: "paint2_linear_908_34610", x1: "146.5", y1: "61", x2: "146.5", y2: "156", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: ".6" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
+        React__default.createElement("linearGradient", { id: "paint3_linear_908_34610", x1: "178.979", y1: "98.35", x2: "108.338", y2: "98.35", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })))));
+
+const CustomerSupportIcon = () => {
+    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("g", { clipPath: "url(#clip0_911_24123)" },
+            React__default.createElement("path", { d: "M23.3 16.625c-.042-1.1.166-4.401.166-4.401.073-.27.15-.594.205-.854C25.33 3.783 20.246.75 16 .75c-1.133 0-2.488.413-3.13 1.203a.82.82 0 0 1-.503.307c-2.862.46-4.742 4.183-4.062 8.77q.087.586.23 1.19v.002c.183 1.009.231 3.303.165 4.403-.271 4.482-5.173 8.453-1.985 11.608 8.41 1.974 10.202 2.142 18.57 0 3.187-3.155-1.81-7.122-1.985-11.608", fill: "#9B4E4E" }),
+            React__default.createElement("path", { d: "M24.675 14.972a3.2 3.2 0 0 0-.64-.718.25.25 0 1 0-.302.399q.308.261.53.6a1.41 1.41 0 0 1 .177 1.562c-.465.892-1.84 1.63-3.614 2.043q.139.221.264.451c1.85-.457 3.275-1.267 3.794-2.263a1.89 1.89 0 0 0-.21-2.074", fill: "#473049" }),
+            React__default.createElement("path", { d: "M18.545 22.798c-.35.41-2.09 4.555-2.535 5.29-.448-.735-2.198-4.89-2.545-5.3.351-.358.597-.808.707-1.297q.096-.405.115-.82c.365.137 3.063.134 3.428-.003v.003q.018.4.11.79c.107.505.357.969.72 1.337", fill: "#FF977B" }),
+            React__default.createElement("path", { d: "M17.824 21.46a3.39 3.39 0 0 1-3.652.03q.095-.404.115-.82c.365.138 3.062.135 3.427-.002v.003q.018.4.11.79", fill: "#FF7364" }),
+            React__default.createElement("path", { d: "M25.284 28.233c.153.66-.362 1.082-1.08 1.472-.917.5-3.717 1.55-8.205 1.55s-7.287-1.05-8.205-1.55c-.717-.39-1.232-.812-1.08-1.472.048-.187.126-.365.233-.525.535-.84 1.567-2.198 4.2-3.598q.335-.174.692-.33c.075 1.013 2.985.21 2.985.21a.96.96 0 0 1 .57.835c.038.888.168 2.528.615 3.263.445-.735.575-2.375.613-3.263a.96.96 0 0 1 .57-.835s2.907.81 2.985-.202q.347.151.675.322c2.632 1.4 3.665 2.758 4.2 3.598.107.16.185.338.232.525", fill: "#F9E0B4" }),
+            React__default.createElement("path", { d: "M22.317 12.023c.359-.006.715.05 1.055.165.785.282 1.33.962 1.2 2.3-.105 1.1-.647 1.752-1.317 2.03-.461.188-.97.217-1.45.085.277-.97.555-3.88.512-4.58m-12.124 4.579a2.26 2.26 0 0 1-1.448-.082c-.672-.28-1.215-.93-1.322-2.033-.123-1.287.375-1.965 1.112-2.265a3 3 0 0 1 1.145-.2c-.042.7.235 3.61.513 4.58", fill: "#4B3956" }),
+            React__default.createElement("path", { d: "M22.319 12.021c.04.7-.235 3.61-.513 4.581-.285.996-1.532 3.582-5.285 4.418a2.4 2.4 0 0 1-1.044 0c-3.752-.836-5-3.422-5.284-4.418-.278-.97-.554-3.88-.513-4.58 1.219-.669.668-2.955 1.56-5.057.556-1.307 1.305-1.644 1.722-1.727a.9.9 0 0 0 .533-.338c1.6-2.056 4.794-.95 5.966 1.225 1.066 1.977 1.225 4.918 2.858 5.896", fill: "#FFB497" }),
+            React__default.createElement("path", { d: "M20.13 23.118c.067.217.083.446.048.67-.077 1.012-.52 2.735-1.227 2.542-1.018-.277-1.758-2.34-1.758-2.34.518-.23 1.003-.782 1.353-1.192q.068-.086.132-.16a.463.463 0 0 1 .625-.103c.295.153.683.345.828.583m-5.306.872s-.74 2.063-1.758 2.34c-.71.193-1.152-1.537-1.227-2.55a1.5 1.5 0 0 1 .047-.662c.145-.238.533-.43.828-.583a.463.463 0 0 1 .625.103l.125.15c.347.41.837.972 1.36 1.202", fill: "#F7F0DF" }),
+            React__default.createElement("path", { d: "M14.94 16.018a.306.306 0 0 0-.3.385 1.414 1.414 0 0 0 2.72 0 .307.307 0 0 0-.3-.385z", fill: "#fff" }),
+            React__default.createElement("path", { d: "M12.776 11.492h-.05a.676.676 0 0 0-.675.676v.541c0 .374.302.676.676.676h.049a.676.676 0 0 0 .676-.676v-.54a.676.676 0 0 0-.676-.677m6.448 1.893h.05a.676.676 0 0 0 .675-.676v-.541a.676.676 0 0 0-.676-.676h-.049a.676.676 0 0 0-.676.675v.542c0 .373.303.676.676.676", fill: "#9B4E4E" }),
+            React__default.createElement("path", { d: "M16.017 29.117h-.034a.47.47 0 0 0-.471.472v.034c0 .26.21.471.471.471h.034c.26 0 .472-.21.472-.471v-.034a.47.47 0 0 0-.472-.472", fill: "#fff" }),
+            React__default.createElement("path", { d: "M16.003 15.2c-.008 0-.69-.01-.69-.402a.25.25 0 0 1 .455-.142 1 1 0 0 0 .235.044.8.8 0 0 0 .229-.044.25.25 0 0 1 .456.142c0 .391-.679.402-.685.402", fill: "#FF7364" }),
+            React__default.createElement("path", { d: "M11.532 12.095a.25.25 0 0 1-.225-.36 1.62 1.62 0 0 1 1.338-.752c.396-.017.782.124 1.075.39a.25.25 0 1 1-.333.374 1 1 0 0 0-.742-.264 1.14 1.14 0 0 0-.888.473.25.25 0 0 1-.225.14m-.451-1.716a.25.25 0 0 1-.175-.43c.606-.587 2.632-.888 3.235-.48a.25.25 0 0 1-.281.415c-.37-.253-2.149-.02-2.606.425a.25.25 0 0 1-.173.07m9.387 1.715a.25.25 0 0 1-.226-.14 1.14 1.14 0 0 0-.887-.472 1 1 0 0 0-.742.264.25.25 0 1 1-.332-.373c.293-.267.68-.408 1.075-.391a1.62 1.62 0 0 1 1.337.752.25.25 0 0 1-.225.36m.452-1.715a.25.25 0 0 1-.174-.07c-.457-.444-2.235-.677-2.605-.426a.25.25 0 0 1-.281-.414c.603-.408 2.628-.108 3.234.48a.25.25 0 0 1-.175.43zm2.71 1.175c-.135-.78-.492-2.643-2.005-5.64-.06-.125-.092-.258.005-.355a.254.254 0 0 1 .355.005c.795.817 1.67 2.882 1.9 4.565zM10.163 6.313c-.015.025-1.525 2.925-1.83 4.89l-.028-.173q-.1-.658-.127-1.322C8.54 7.94 9.673 6.16 9.73 6.063a.25.25 0 0 1 .34-.093.25.25 0 0 1 .093.343", fill: "#844040" }),
+            React__default.createElement("path", { d: "M23.29 17.917c-1.345.813-3.559 1.331-5.908 1.3a.254.254 0 0 0-.253.247.25.25 0 0 0 .246.253l.23.002c2.522 0 4.831-.603 6.2-1.543a23 23 0 0 1-.516-.259", fill: "#473049" }),
+            React__default.createElement("path", { d: "M16.138 20.42c.686 0 1.241-.426 1.241-.952s-.555-.952-1.241-.952-1.242.426-1.242.952.556.952 1.242.952", fill: "#4B3956" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_911_24123" },
+                React__default.createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
+};
+
+const HealthUpdateIcon = () => {
+    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M20.69 3.066 4.714 5.456a1.714 1.714 0 0 0-1.442 1.95l3.01 20.106a1.714 1.714 0 0 0 1.948 1.442l15.975-2.39a1.714 1.714 0 0 0 1.441-1.95L22.638 4.507a1.714 1.714 0 0 0-1.949-1.441", fill: "#1B89E5" }),
+        React__default.createElement("path", { d: "m4.488 5.49 16.427-2.458 3.13 20.914-16.427 2.458z", fill: "#fff" }),
+        React__default.createElement("path", { d: "m13.559 8.067-.567.084a.83.83 0 0 0-.696.942l.02.141a.18.18 0 0 1-.15.203l-.14.021a.83.83 0 0 0-.697.942l.085.568a.83.83 0 0 0 .942.696l.141-.021a.18.18 0 0 1 .203.15l.022.14a.83.83 0 0 0 .942.697l.566-.085a.83.83 0 0 0 .697-.941l-.021-.142a.18.18 0 0 1 .15-.203l.141-.021a.83.83 0 0 0 .697-.943l-.085-.565a.83.83 0 0 0-.942-.697l-.142.022a.18.18 0 0 1-.203-.15l-.02-.142a.83.83 0 0 0-.943-.696m6.553 5.392-9.31 1.393a.32.32 0 0 0 .094.634l9.31-1.393a.32.32 0 1 0-.095-.634m.299 2.303L8.74 17.508a.32.32 0 0 0 .096.634l11.67-1.746a.32.32 0 0 0-.096-.634m-.591 2.436L9.039 19.81a.32.32 0 1 0 .095.634l10.78-1.613a.32.32 0 0 0-.095-.634m-1.084 2.51-9.397 1.406a.32.32 0 0 0 .095.634l9.397-1.407a.32.32 0 1 0-.095-.633m2.318-.347-.828.124a.32.32 0 0 0 .095.634l.828-.124a.32.32 0 0 0-.095-.634", fill: "#78C5EF" }),
+        React__default.createElement("path", { d: "m27.358 4.303-.805-.273a1.26 1.26 0 0 0-1.596.789l-4.406 13.013.494 2.544a.442.442 0 0 0 .728.246l1.937-1.72 2.61-7.71.224.075a.583.583 0 0 0 .739-.365l1.357-4.007a2.045 2.045 0 0 0-1.282-2.592", fill: "#36B1F2" }),
+        React__default.createElement("path", { d: "M26.32 11.443a.25.25 0 0 1-.236-.33l1.614-4.768a.25.25 0 1 1 .474.16l-1.615 4.768a.25.25 0 0 1-.237.17", fill: "#1B89E5" }),
+        React__default.createElement("path", { d: "M17.67 5.535 8.324 6.934a1.15 1.15 0 0 1-1.307-.967l-.098-.654a.44.44 0 0 1 .368-.497l10.754-1.61a.437.437 0 0 1 .498.368l.097.654a1.15 1.15 0 0 1-.967 1.307z", fill: "#3C3854" })));
+};
+
+const PersonalizeIcon = () => {
+    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M31.364 22.343a5 5 0 0 0-1.713-1.477c-.847-.488-1.52-.816-1.638-1.931h-1.761c-.12 1.115-.797 1.443-1.644 1.931a5 5 0 0 0-1.712 1.477c-.33.438-.095.709.331.936.723.386 2.4.827 3.903.827 1.502 0 3.18-.441 3.902-.827.426-.227.662-.498.332-.936", fill: "#F78181" }),
+        React__default.createElement("path", { d: "M21.765 14c-.006-3.907-4.11-7.388-7.666-4.77a.4.4 0 0 1-.129.065c-.958.303-1.65 1.213-2.108 2.305-1.408 3.347.2 7.77-.291 11.538h9.938c-.185-2.536.26-6.777.256-9.138", fill: "#FF6671" }),
+        React__default.createElement("path", { d: "M5.354 9.745c-3.033 0-5.268 3.012-4.76 6.07.424 2.568 3.008 2.747 3.008 2.747l3.5-.003s2.586-.175 3.012-2.743c.507-3.06-1.728-6.07-4.76-6.07", fill: "#3A417C" }),
+        React__default.createElement("path", { d: "M9.073 22.755c-.688.367-2.288.79-3.72.79s-3.03-.423-3.72-.79c-.408-.218-.63-.475-.318-.893.43-.588.99-1.07 1.635-1.407.205-.118.393-.203.563-.283h.002c.503-.235.843-.415.928-1.207h1.822c.085.797.428.975.935 1.21.17.08.355.165.558.28.644.339 1.202.82 1.632 1.407.315.418.09.675-.317.893", fill: "#BF6666" }),
+        React__default.createElement("path", { d: "M31.332 22.342a5.04 5.04 0 0 0-1.712-1.477 9 9 0 0 1-.815-.498 3.43 3.43 0 0 1-3.373-.005c-.245.178-.547.325-.855.503a5 5 0 0 0-1.712 1.477c-.33.44-.095.71.33.938.722.385 2.4.827 3.902.827s3.18-.442 3.903-.827c.427-.228.662-.498.332-.938", fill: "#3A417C" }),
+        React__default.createElement("path", { d: "M28.232 9.496c-1.05-.28-3.25-.14-3.708 1.205a.46.46 0 0 1-.18.24c-1.035.682-1.353 1.643-.862 3.845h7.298c.738-4.148-1.278-4.95-2.548-5.29", fill: "#FFB45A" }),
+        React__default.createElement("path", { d: "M8.402 14.623a.51.51 0 0 1 .229.432 5.9 5.9 0 0 1-.278 1.793c-.262.697-.942 1.882-2.245 2.152a4 4 0 0 1-.757.09 4 4 0 0 1-.76-.09c-1.303-.27-1.98-1.455-2.243-2.152a5.9 5.9 0 0 1-.278-1.793.51.51 0 0 1 .229-.432c.99-.668 2.339-.862 3.052-.86.71-.002 2.06.192 3.051.86", fill: "#CE7A7A" }),
+        React__default.createElement("path", { d: "M30.781 14.786a1.2 1.2 0 0 0-.469-.053.45.45 0 0 1-.225-.04c-.956-.438-.852-1.208-.955-1.723-.407-2.036-2.745-1.94-3.408-1.24a.36.36 0 0 1-.19.11c-.87.175-1.371 1.948-1.469 2.68a.24.24 0 0 1-.232.209q-.18 0-.35.057c-.448.157-.572.675-.392 1.157a1.03 1.03 0 0 0 .948.725.255.255 0 0 1 .267.175 3.31 3.31 0 0 0 1.945 2.092 2.13 2.13 0 0 0 1.762 0 3.3 3.3 0 0 0 1.945-2.092.254.254 0 0 1 .267-.175 1.03 1.03 0 0 0 .947-.725c.181-.482.056-1-.391-1.157m-9.271 8.351a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
+        React__default.createElement("path", { d: "M21.51 23.137a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
+        React__default.createElement("path", { d: "M18.682 13.703a3.32 3.32 0 0 1 1.206 3.398 3.63 3.63 0 0 1-2.229 2.489 3.5 3.5 0 0 1-1.118.213 3.5 3.5 0 0 1-1.12-.213 3.63 3.63 0 0 1-2.228-2.49 8.5 8.5 0 0 1-.284-2.55c.137-2.045.975-3.52 2.095-3.245a.25.25 0 0 0 .182-.023c1.377-.755 1.672 1.03 3.496 2.421", fill: "#FFAEAE" }),
+        React__default.createElement("path", { d: "M21.12 24.238c-.85.452-2.81.972-4.575.972s-3.735-.52-4.585-.972c-.5-.268-.777-.585-.387-1.1a5.65 5.65 0 0 1 1.735-1.573 6.03 6.03 0 0 0 3.232.788 6.1 6.1 0 0 0 3.253-.775 5.7 5.7 0 0 1 1.717 1.56c.388.515.11.832-.39 1.1", fill: "#5C8EFF" }),
+        React__default.createElement("path", { d: "M9.073 22.755c-.688.368-2.288.79-3.72.79s-3.03-.422-3.72-.79c-.408-.217-.63-.475-.318-.892.43-.588.99-1.07 1.635-1.408.205-.117.393-.202.563-.282h.002c.557.318 1.192.47 1.833.44a3.47 3.47 0 0 0 1.852-.438c.17.08.355.165.558.28a4.8 4.8 0 0 1 1.632 1.408c.315.417.09.675-.317.892", fill: "#4856B5" })));
+};
+
+const SecurityIcon = () => {
+    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M16 29.625c1.196 0 2.348-.639 3.327-1.31 5.423-3.715 6.606-5.558 6.995-6.163.436-.68 1.533-2.23 2.73-12.356.33-2.804-1.143-5.19-3.893-6.066a31.65 31.65 0 0 0-18.319 0c-2.75.874-4.222 3.262-3.892 6.067 1.196 10.125 2.293 11.674 2.73 12.355.388.605 1.572 2.448 6.994 6.163.98.671 2.13 1.31 3.328 1.31", fill: "#9DBA22" }),
+        React__default.createElement("path", { d: "M25.142 7.18c-2.902-1.307-6.095-1.645-9.143-1.645s-6.241.338-9.143 1.645c-.7.316-1.115.77-1.04 1.365.382 3.052 1.583 11.235 2.192 12.128 1.21 1.777 5.533 4.67 7.267 5.788a1.37 1.37 0 0 0 1.448 0c1.733-1.119 6.056-4.011 7.267-5.788.609-.893 1.81-9.075 2.193-12.128.074-.595-.34-1.049-1.041-1.365", fill: "#BFDF46" }),
+        React__default.createElement("path", { d: "M15.798 19.264c-1.522-.418-2.486-1.494-2.992-3.333a9.2 9.2 0 0 1-.177-4.156c.109-.644.715-1.192 1.434-.802q1.159.616 2.377 1.102c2.909 1.205 3.817 4.07 2.732 5.783-.578.912-1.922 1.806-3.375 1.406", fill: "#fff" }),
+        React__default.createElement("path", { d: "M20.667 20.13a.3.3 0 0 1-.095-.015c-2.152-.684-4.24-2.662-4.838-4.08a.313.313 0 0 1 .508-.35q.045.045.067.106c.461 1.092 2.311 3.048 4.451 3.728a.313.313 0 0 1-.094.61", fill: "#9DBA22" })));
+};
+
+const ServiceIcon = () => {
+    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("g", { clipPath: "url(#clip0_911_3434)" },
+            React__default.createElement("path", { d: "M30.466 17.553c.714-.548.988-1.39.611-1.881s-1.261-.444-1.975.104c-.714.549-.988 1.391-.611 1.882s1.261.444 1.975-.105", fill: "#563960" }),
+            React__default.createElement("path", { d: "M30.122 7.72a2.2 2.2 0 0 1-.438.37 2.355 2.355 0 0 1-2.787-3.79l.022-.017a2.356 2.356 0 0 1 3.203 3.437", fill: "#E8E2E2" }),
+            React__default.createElement("path", { d: "M16.474 3.996c-.544-.568-1.058-1.45-1.082-2.29l-1.395.7a1.394 1.394 0 1 0 1.247 2.491l1.159-.583.259-.14a3 3 0 0 1-.188-.178", fill: "#E5395E" }),
+            React__default.createElement("path", { d: "M18.934 2.175a1.39 1.39 0 0 1-.77 1.246l-1.472.738-.256.138a2.52 2.52 0 0 1-1.189-1.331 2 2 0 0 1-.042-1.165l.353-.191 1.358-.68a1.392 1.392 0 0 1 2.018 1.245", fill: "#F9AF2B" }),
+            React__default.createElement("path", { d: "M5.507 6.695c-.407.705-1.475.86-2.425.362L2.975 7a3 3 0 0 1-.358-.248c.005-.012 1.05-.635 1.355-1.157.258-.44.25-1.335.268-1.38q.136.058.265.132.132.078.257.168c.795.585 1.128 1.515.745 2.18", fill: "#F44A52" }),
+            React__default.createElement("path", { d: "M4.343 5.848a2.9 2.9 0 0 1-1.285 1.197L2.976 7a2.6 2.6 0 0 1-.398-.28c-.692-.587-.965-1.442-.605-2.067.378-.655 1.323-.833 2.215-.463a3 3 0 0 1 .51.28c.029.485-.095.967-.355 1.378", fill: "#E8E2E2" }),
+            React__default.createElement("path", { d: "M1.87 17.24a1.12 1.12 0 1 0 0-2.24 1.12 1.12 0 0 0 0 2.24", fill: "#F9AF2B" }),
+            React__default.createElement("path", { d: "M30.123 7.72a2.2 2.2 0 0 1-.437.37c0-1.013-1.5-3.058-3.153-3.418q.162-.206.365-.372l.023-.018c1.65.45 3.052 2.16 3.202 3.438", fill: "#C3C7C9" }),
+            React__default.createElement("path", { d: "M25.295 17.4v9.637c0 2.13-1.745 3.225-3.855 3.518-2.707.375-8.128.375-10.835 0-2.11-.29-3.855-1.387-3.855-3.517v-9.637a3.86 3.86 0 0 1 1.354-2.93c.229-.194.412-.436.537-.71h14.767c.12.275.303.518.534.71q.16.135.303.29a3.85 3.85 0 0 1 1.05 2.64", fill: "#1B89E5" }),
+            React__default.createElement("path", { d: "M16.568 17.151h-1.093a1.58 1.58 0 0 0-1.58 1.58v.272a.34.34 0 0 1-.34.34h-.272a1.58 1.58 0 0 0-1.58 1.58v1.095a1.58 1.58 0 0 0 1.58 1.58h.272a.34.34 0 0 1 .34.34v.272a1.58 1.58 0 0 0 1.58 1.58h1.093a1.58 1.58 0 0 0 1.58-1.58v-.273a.34.34 0 0 1 .34-.34h.274a1.58 1.58 0 0 0 1.58-1.58v-1.092a1.58 1.58 0 0 0-1.58-1.58h-.273a.34.34 0 0 1-.341-.34v-.274a1.58 1.58 0 0 0-1.58-1.58", fill: "#fff" }),
+            React__default.createElement("path", { d: "M24.137 13.762H7.907a.47.47 0 0 1-.471-.47v-2.7a2.583 2.583 0 0 1 2.552-2.554c3.017-.1 9.05-.1 12.067 0a2.583 2.583 0 0 1 2.553 2.552v2.7a.473.473 0 0 1-.471.472", fill: "#E8E2E2" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: "clip0_911_3434" },
+                React__default.createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getContents = (t) => {
+    return [
         {
-            type: SSOStepTypeType.FIRST,
+            label: 'Personalized Experience',
+            description: 'Your name, gender, and date of birth help us provide tailored health advice and personalized care plans that fit your unique needs.',
+            icon: React__default.createElement(PersonalizeIcon, null),
         },
-    ],
-    setSteps: () => false,
-    goNext: () => false,
-    goBack: () => false,
-    addStep: () => false,
-});
-const SSOStepsProvider = ({ children }) => {
-    const [steps, setSteps] = useState([
         {
-            type: SSOStepTypeType.FIRST,
+            label: 'Timely Health Updates',
+            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
+            icon: React__default.createElement(HealthUpdateIcon, null),
         },
-    ]);
-    const [currentStepIndex, setCurrentStepIndex] = useState(0);
-    return (React__default.createElement(SSOStepsContext.Provider, { value: {
-            currentStepIndex,
-            steps,
-            setSteps,
-            addStep: (step) => {
-                setSteps((s) => [...s, step]);
-            },
-            goNext: () => {
-                setCurrentStepIndex((index) => index + 1);
-            },
-            goBack: () => {
-                setCurrentStepIndex((index) => index - 1);
-                // remove step when go back
-                setSteps((steps) => steps.slice(0, steps.length - 1));
-            },
-        } }, children));
+        {
+            label: 'Enhanced Security',
+            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
+            icon: React__default.createElement(SecurityIcon, null),
+        },
+        {
+            label: 'Quick Customer Support',
+            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
+            icon: React__default.createElement(CustomerSupportIcon, null),
+        },
+        {
+            label: 'Service Improvement',
+            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
+            icon: React__default.createElement(ServiceIcon, null),
+        },
+    ];
 };
-const useSSOSteps = () => {
-    return React__default.useContext(SSOStepsContext);
-};
-
-const SSOPopupWrapper = ({ children, opened, onClose, }) => {
-    var _a;
-    const { steps, goBack } = useSSOSteps();
-    const { locale } = useSSOState();
-    const showBack = steps.length > 1;
-    const showClose = steps.length === 1;
-    const showLogo = steps.length === 1;
-    const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
-    const [closeConfirmOpen, setCloseConfirmOpen] = React__default.useState(false);
-    const onCloseClick = () => {
-        setCloseConfirmOpen(true);
-    };
+const CollectInfoTextPopup = () => {
+    const { openCollectInfoPopup, setOpenCollectInfoPopup } = useSSOState();
+    useTranslations();
+    const contents = getContents();
+    const [mobileDragOffset, setMobileDragOffset] = useState(0);
+    const dragStartYRef = useRef(0);
+    const mobileDragOffsetRef = useRef(mobileDragOffset);
+    mobileDragOffsetRef.current = mobileDragOffset;
+    const throttleSetMobileDragOffset = useMemo(() => {
+        return throttle(setMobileDragOffset, 70);
+    }, []);
+    useEffect(() => {
+        if (openCollectInfoPopup) {
+            setMobileDragOffset(0);
+        }
+    }, [openCollectInfoPopup]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+        React__default.createElement("style", { key: mobileDragOffset }, `
+        .collect-info-text-popup .mantine-Modal-inner {
+          transform: translateY(${Math.round(mobileDragOffset)}px);
+        }
+      `),
+        React__default.createElement(Modal, { opened: openCollectInfoPopup, onClose: () => setOpenCollectInfoPopup(false), withCloseButton: false, styles: (theme) => ({
                 body: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 24,
-                    padding: '36px 24px',
+                    padding: '32px 24px',
                     position: 'relative',
-                    background: 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 150px)',
-                    overflow: 'auto',
+                    background: 'linear-gradient(180deg, #91CAFF 0%,  #CFE8FF 100px, #FFFFFF 200px)',
                     [theme.fn.smallerThan('sm')]: {
                         height: '100%',
                     },
@@ -141,7 +244,8 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                     [theme.fn.smallerThan('sm')]: {
                         width: '100%',
                         height: '100%',
-                        borderRadius: 0,
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
                         maxWidth: '100%',
                         maxHeight: '100%',
                     },
@@ -151,17 +255,283 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         padding: 0,
                         left: 0,
                         right: 0,
+                        top: 120,
+                        // transform: `translateY(${Math.round(mobileDragOffset)}px)`,
                         display: 'block',
+                        transition: 'transform 70ms',
                     },
                 },
-            }), withCloseButton: false },
-            React__default.createElement("div", { style: {
-                    height: 40,
+            }), className: "collect-info-text-popup" },
+            React__default.createElement(Box, { sx: (theme) => ({
+                    [theme.fn.largerThan('sm')]: {
+                        display: 'none',
+                    },
+                    padding: 8,
+                    width: '100%',
+                    cursor: 'grab',
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                } },
-                showBack && (React__default.createElement(Button, { variant: "white", style: {
+                    justifyContent: 'center',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                }), draggable: true, onDrag: (e) => {
+                    if (e.clientY <= 5)
+                        return;
+                    throttleSetMobileDragOffset(e.clientY - dragStartYRef.current);
+                }, onDragStart: (e) => {
+                    dragStartYRef.current = e.clientY;
+                }, onDragEnd: (e) => {
+                    if (e.clientY - dragStartYRef.current > 100) {
+                        setMobileDragOffset(window.innerHeight);
+                        setTimeout(() => {
+                            setOpenCollectInfoPopup(false);
+                        }, 100);
+                    }
+                    else {
+                        throttleSetMobileDragOffset(0);
+                    }
+                }, onTouchStart: (e) => {
+                    dragStartYRef.current = e.touches[0].clientY;
+                }, onTouchMove: (e) => {
+                    if (e.touches[0].clientY < 0)
+                        return;
+                    throttleSetMobileDragOffset(e.touches[0].clientY - dragStartYRef.current);
+                }, onTouchEnd: (e) => {
+                    if (e.changedTouches[0].clientY - dragStartYRef.current > 100) {
+                        setMobileDragOffset(window.innerHeight);
+                        setTimeout(() => {
+                            setOpenCollectInfoPopup(false);
+                        }, 100);
+                    }
+                    else {
+                        throttleSetMobileDragOffset(0);
+                    }
+                } },
+                React__default.createElement(Box, { sx: {
+                        border: '1.5px solid #ADB3BC',
+                        background: 'gray',
+                        borderRadius: 3,
+                        width: 44,
+                    } })),
+            React__default.createElement("div", { style: {
+                    height: 40,
+                } },
+                React__default.createElement(Button, { variant: "white", sx: (theme) => ({
+                        width: 40,
+                        height: 40,
+                        padding: 8,
+                        background: 'white',
+                        borderRadius: '100%',
+                        [theme.fn.smallerThan('sm')]: {
+                            display: 'none',
+                        },
+                    }), onClick: () => setOpenCollectInfoPopup(false) },
+                    React__default.createElement(ChevronLeft, null))),
+            React__default.createElement(BackgroundHeader$1, null),
+            React__default.createElement(Stack, { pos: "relative", mt: 100, spacing: 8, style: {
+                    zIndex: 1,
+                } },
+                React__default.createElement(Text, { size: "h4" }, "Why We Need Your Information"),
+                React__default.createElement(Accordion, { styles: {
+                        item: {
+                            borderBottomColor: '#E4E8EC',
+                            paddingBottom: 16,
+                            marginTop: 16,
+                        },
+                        control: {
+                            padding: 0,
+                        },
+                        content: {
+                            padding: 0,
+                            marginTop: 8,
+                        },
+                    } }, contents.map((item, index) => (React__default.createElement(Accordion.Item, { key: index, value: item.label },
+                    React__default.createElement(Accordion.Control, { icon: item.icon },
+                        React__default.createElement(Text, { size: "s3", weight: "semiBold" }, item.label)),
+                    React__default.createElement(Accordion.Panel, null,
+                        React__default.createElement(Text, { size: "p3" }, item.description))))))))));
+};
+
+const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
+    return (React__default.createElement(Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, styles: (theme) => ({
+            body: {
+                padding: '32px 24px',
+                position: 'relative',
+                background: 'linear-gradient(180deg, #91CAFF 0%,  #CFE8FF 100px, #FFFFFF 200px)',
+                [theme.fn.smallerThan('sm')]: {
+                    height: '100%',
+                },
+            },
+            content: {
+                [theme.fn.smallerThan('sm')]: {
+                    width: '100%',
+                    height: '100%',
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                },
+            },
+            inner: {
+                [theme.fn.smallerThan('sm')]: {
+                    padding: 0,
+                    left: 0,
+                    right: 0,
+                    top: 'unset',
+                    // transform: `translateY(${Math.round(mobileDragOffset)}px)`,
+                    display: 'block',
+                    transition: 'transform 70ms',
+                },
+            },
+        }) },
+        React__default.createElement(BackgroundHeader, null),
+        React__default.createElement(Stack, { pos: "relative", mt: 150, spacing: 8, style: {
+                zIndex: 1,
+                textAlign: 'center',
+            } },
+            React__default.createElement(Text, { size: "h4" }, "Are you sure you want to exit?"),
+            React__default.createElement(Text, { size: "p3" }, "You\u2019re just a step away from completing your account setup. Do you really want to leave?")),
+        React__default.createElement(Stack, { mt: 32, spacing: 8, align: "center" },
+            React__default.createElement(Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
+                React__default.createElement(Text, { size: "s2", weight: "regular", color: "inherit" }, "Cancel")),
+            React__default.createElement(Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
+                React__default.createElement(Text, { size: "p2", weight: "regular", color: "gray.6" }, "I want to exit now")))));
+};
+const BackgroundHeader = () => (React__default.createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        zIndex: 0,
+        transform: 'translateX(-50%)',
+        pointerEvents: 'none',
+    } },
+    React__default.createElement("circle", { opacity: ".2", cx: "146", cy: "109", r: "146", fill: "url(#paint0_linear_908_35161)" }),
+    React__default.createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_35161)" }),
+    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_35161)" }),
+    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_35161)" }),
+    React__default.createElement("path", { d: "m148.68 89.129-13.51-2.087a4.552 4.552 0 0 0-5.17 4.454v35.009a4.55 4.55 0 0 0 1.586 3.395 4.56 4.56 0 0 0 3.594 1.059l13.5-2.087a4.474 4.474 0 0 0 3.82-4.452V93.58a4.48 4.48 0 0 0-3.82-4.451", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M164.342 108.002a1.43 1.43 0 0 1-.557 1.132l-4.714 3.643a1.07 1.07 0 0 1-1.563-.281 1.1 1.1 0 0 1-.161-.566v-1.224l-5.085-.025a.54.54 0 0 1-.535-.539v-4.322a.54.54 0 0 1 .538-.538l5.088.004-.009-1.214a1.08 1.08 0 0 1 .598-.962 1.07 1.07 0 0 1 1.127.113l4.716 3.648a1.42 1.42 0 0 1 .557 1.131", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M164.342 108.002a1.43 1.43 0 0 1-.557 1.132l-4.714 3.643a1.07 1.07 0 0 1-1.563-.281 1.1 1.1 0 0 1-.161-.566v-1.224l-5.085-.025a.54.54 0 0 1-.535-.539v-4.322a.54.54 0 0 1 .538-.538l5.088.004-.009-1.214a1.08 1.08 0 0 1 .598-.962 1.07 1.07 0 0 1 1.127.113l4.716 3.648a1.42 1.42 0 0 1 .557 1.131m-18.248-2.179v4.324a.54.54 0 0 0 .539.539h3.017a.54.54 0 0 0 .538-.539v-4.324a.54.54 0 0 0-.538-.539h-3.017a.54.54 0 0 0-.539.539m-1.616 4.341a.54.54 0 0 1-.539.539h-.977a1.463 1.463 0 0 1-1.462-1.462v-2.478a1.463 1.463 0 0 1 1.462-1.463h.977a.54.54 0 0 1 .539.539z", fill: "#FF6F4D" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("linearGradient", { id: "paint0_linear_908_35161", x1: "147.5", y1: "141", x2: "36.5", y2: "30", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })),
+        React__default.createElement("linearGradient", { id: "paint1_linear_908_35161", x1: "218.376", y1: "63.134", x2: "61", y2: "109", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
+        React__default.createElement("linearGradient", { id: "paint2_linear_908_35161", x1: "146.5", y1: "61", x2: "146.5", y2: "156", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: ".6" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
+        React__default.createElement("linearGradient", { id: "paint3_linear_908_35161", x1: "178.979", y1: "98.35", x2: "108.338", y2: "98.35", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })))));
+
+var SSOStepTypeType;
+(function (SSOStepTypeType) {
+    SSOStepTypeType["FIRST"] = "first";
+    SSOStepTypeType["EMAIL"] = "email";
+    SSOStepTypeType["VERIFY_PHONE"] = "verify_phone";
+    SSOStepTypeType["PASSWORD"] = "password";
+    SSOStepTypeType["UPDATE_EMAIL"] = "update_email";
+    SSOStepTypeType["FORGOT_PASSWORD_PHONE"] = "forgot_password_phone";
+    SSOStepTypeType["FORGOT_PASSWORD_SETUP"] = "forgot_password_setup";
+    SSOStepTypeType["OTP"] = "otp";
+    SSOStepTypeType["SETUP_FULL"] = "setup_full";
+})(SSOStepTypeType || (SSOStepTypeType = {}));
+const SSOStepsContext = createContext({
+    currentStepIndex: 0,
+    steps: [
+        {
+            type: SSOStepTypeType.FIRST,
+        },
+    ],
+    setSteps: () => false,
+    goNext: () => false,
+    goBack: () => false,
+    addStep: () => false,
+});
+const SSOStepsProvider = ({ children, defaultSteps, }) => {
+    const [steps, setSteps] = useState(defaultSteps || [
+        {
+            type: SSOStepTypeType.FIRST,
+        },
+    ]);
+    const [currentStepIndex, setCurrentStepIndex] = useState(0);
+    const [shareData, setShareData] = useState({});
+    return (React__default.createElement(SSOStepsContext.Provider, { value: {
+            currentStepIndex,
+            steps,
+            setSteps,
+            addStep: (step) => {
+                setSteps((s) => [...s, step]);
+            },
+            goNext: () => {
+                setCurrentStepIndex((index) => index + 1);
+            },
+            goBack: () => {
+                setCurrentStepIndex((index) => index - 1);
+                // remove step when go back
+                setSteps((steps) => steps.slice(0, steps.length - 1));
+            },
+            shareData,
+            setShareData,
+        } }, children));
+};
+const useSSOSteps = () => {
+    return React__default.useContext(SSOStepsContext);
+};
+
+const SSOPopupWrapper = ({ children, opened, onClose, }) => {
+    var _a;
+    const { steps, goBack } = useSSOSteps();
+    const { locale } = useSSOState();
+    const showBack = steps.length > 1;
+    const showClose = steps.length === 1;
+    const showLogo = steps.length === 1;
+    const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
+    const [closeConfirmOpen, setCloseConfirmOpen] = React__default.useState(false);
+    const onCloseClick = () => {
+        setCloseConfirmOpen(true);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+                body: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 24,
+                    padding: '36px 24px',
+                    position: 'relative',
+                    background: 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 150px)',
+                    overflow: 'auto',
+                    [theme.fn.smallerThan('sm')]: {
+                        height: '100%',
+                    },
+                },
+                content: {
+                    [theme.fn.smallerThan('sm')]: {
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: 0,
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                    },
+                },
+                inner: {
+                    [theme.fn.smallerThan('sm')]: {
+                        padding: 0,
+                        left: 0,
+                        right: 0,
+                        display: 'block',
+                    },
+                },
+            }), withCloseButton: false },
+            React__default.createElement("div", { style: {
+                    height: 40,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                } },
+                showBack && (React__default.createElement(Button, { variant: "white", style: {
                         width: 40,
                         height: 40,
                         padding: 8,
@@ -181,10 +551,11 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
             React__default.createElement("div", { style: {
                     flex: 1,
                 } }, children)),
-        React__default.createElement(Modal, { opened: closeConfirmOpen, onClose: () => setCloseConfirmOpen(false), withCloseButton: false },
-            "are you sure",
-            React__default.createElement(Button, { onClick: onClose }, "Yes"),
-            React__default.createElement(Button, { onClick: () => setCloseConfirmOpen(false) }, "No"))));
+        React__default.createElement(ConfirmClosePopup, { opened: closeConfirmOpen, onCancel: () => setCloseConfirmOpen(false), onClose: () => {
+                setCloseConfirmOpen(false);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            } }),
+        React__default.createElement(CollectInfoTextPopup, null)));
 };
 
 const SSO_V2_PATHS = {
@@ -199,12 +570,16 @@ const SSO_V2_PATHS = {
         REGISTER_BY_SEND_OTP: 'login/login-with-sms',
         SEND_OTP: 'login/sms/sent-otp',
         VERIFY_BY_OTP: 'login/phone-verify-code',
-        LOGIN_BY_PASSWORD: 'member/login-by-phone'
+        LOGIN_BY_PASSWORD: 'member/login-by-phone',
+        UPDATE_PHONE_SEND_OTP: 'sms-social/sent-otp',
+        UPDATE_PHONE_VERIFY_OTP: 'sms-social/phone-verify-code',
     },
     ZALO: {
         REGISTER_BY_SEND_OTP: 'login/login-with-zalo',
         SEND_OTP: 'login/zalo/sent-otp',
-        VERIFY_BY_OTP: 'login/zalo-verify-code'
+        VERIFY_BY_OTP: 'login/zalo-verify-code',
+        UPDATE_PHONE_SEND_OTP: 'sms-social/zalo/sent-otp',
+        UPDATE_PHONE_VERIFY_OTP: 'sms-social/zalo-verify-code',
     },
     RESET_PASSWORD: 'login/reset-password',
     CHECK_USER_EXIST: 'member/check-user-exist',
@@ -226,11 +601,14 @@ const BEARER_TOKEN_COOKIE = 'hhg_user_token';
 const fetchSSOV2Api = (path, options = {}, noAuth) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     let response;
-    const authToken = noAuth ? '' : (_a = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith(BEARER_TOKEN_COOKIE))) === null || _a === void 0 ? void 0 : _a.split('=')[1];
+    const authToken = noAuth
+        ? ''
+        : (_a = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(BEARER_TOKEN_COOKIE))) === null || _a === void 0 ? void 0 : _a.split('=')[1];
     try {
-        response = yield fetch(getSSOV2ApiUrl(path), authToken ? Object.assign(Object.assign({}, options), { headers: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.headers), { Authorization: `Bearer ${authToken}` }) }) : options);
+        response = yield fetch(getSSOV2ApiUrl(path), authToken
+            ? Object.assign(Object.assign({}, options), { headers: Object.assign({ Authorization: `Bearer ${authToken}` }, options === null || options === void 0 ? void 0 : options.headers) }) : options);
     }
     catch (error) {
         console.error(error);
@@ -241,11 +619,14 @@ const fetchSSOV2Api = (path, options = {}, noAuth) => __awaiter(void 0, void 0,
 const fetchSSOApi = (path, options = {}, noAuth) => __awaiter(void 0, void 0, void 0, function* () {
     var _b;
     let response;
-    const authToken = noAuth ? '' : (_b = document.cookie
-        .split('; ')
-        .find((row) => row.startsWith(BEARER_TOKEN_COOKIE))) === null || _b === void 0 ? void 0 : _b.split('=')[1];
+    const authToken = noAuth
+        ? ''
+        : (_b = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(BEARER_TOKEN_COOKIE))) === null || _b === void 0 ? void 0 : _b.split('=')[1];
     try {
-        response = yield fetch(getSSOApiUrl(path), authToken ? Object.assign(Object.assign({}, options), { headers: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.headers), { Authorization: `Bearer ${authToken}` }) }) : options);
+        response = yield fetch(getSSOApiUrl(path), authToken
+            ? Object.assign(Object.assign({}, options), { headers: Object.assign({ Authorization: `Bearer ${authToken}` }, options === null || options === void 0 ? void 0 : options.headers) }) : options);
     }
     catch (error) {
         console.error(error);
@@ -254,17 +635,17 @@ const fetchSSOApi = (path, options = {}, noAuth) => __awaiter(void 0, void 0, vo
     return response === null || response === void 0 ? void 0 : response.json();
 });
 const resetPassword = (password, confirmPassword) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('password', password);
+    formData.append('confirm-password', confirmPassword);
     return fetchSSOV2Api(SSO_V2_PATHS.RESET_PASSWORD, {
         method: 'POST',
-        body: JSON.stringify({
-            "password": password,
-            "confirm-password": confirmPassword
-        }),
+        body: formData,
     });
 });
 // "email":"kenny_test2201_11@mailinator.com"
 // "phone_number":"906911910"
-const checkUserExist = ({ email, phone // no +
+const checkUserExist = ({ email, phone, // no +
  }) => __awaiter(void 0, void 0, void 0, function* () {
     // "provider": "email",
     // "is_pass": true,
@@ -278,7 +659,7 @@ const checkUserExist = ({ email, phone // no +
     }
     return fetchSSOV2Api(SSO_V2_PATHS.CHECK_USER_EXIST, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 // "name": "Huy Tran 888",
@@ -286,33 +667,67 @@ const checkUserExist = ({ email, phone // no +
 // "email":"kenny_test2201_02@mailinator.com", // optional chỉ require khi source là care | ecom
 // "password": "Kenny2103",
 // "confirm_password":"Kenny2103",
-// "phone_number":"906911912", // require khi user register bằng email hoặc social 
+// "phone_number":"906911912", // require khi user register bằng email hoặc social
 // "area_code":"+84", // require khi có phone number
 // "gender": 1,
-// "validate": false,  // true validate sau khi validate xong truyền false để update 
+// "validate": false,  // true validate sau khi validate xong truyền false để update
 // "source": "care" | "ecom" // default sẽ ko require email. nếu source là care sẽ require email. ==> support cho business care
 const updateUserInfo = (data) => __awaiter(void 0, void 0, void 0, function* () {
     const formData = new FormData();
     Object.keys(data).forEach((key) => {
-        if (data[key]) {
+        if (typeof data[key] !== 'undefined' && data[key] !== null) {
             formData.append(key, data[key]);
         }
     });
     return fetchSSOV2Api(SSO_V2_PATHS.UPDATE_USER_INFO, {
         method: 'POST',
-        body: formData
+        body: formData,
+    });
+});
+const GoogleAuthClientId = isProduction
+    ? '289442006438-040a42cbidr6v5d178f3iqi9q95821r3.apps.googleusercontent.com'
+    : '289442006438-cihobuq1h3r4426pur7u0e43fqdnep59.apps.googleusercontent.com';
+const FacebookAppId = '2759888574045636';
+const getUserInfo = () => __awaiter(void 0, void 0, void 0, function* () {
+    return fetchSSOApi('user/profile', {
+        method: 'POST',
     });
 });
-const GoogleAuthClientId = isProduction ? '289442006438-040a42cbidr6v5d178f3iqi9q95821r3.apps.googleusercontent.com' : '289442006438-cihobuq1h3r4426pur7u0e43fqdnep59.apps.googleusercontent.com';
-const FacebookAppId = '2759888574045636';
+const handleAuthSuccess = (res) => {
+    (res === null || res === void 0 ? void 0 : res.token) &&
+        setCookie(BEARER_TOKEN_COOKIE, res.token, {
+            domain: window.location.hostname === 'localhost'
+                ? 'localhost'
+                : `.${domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
+            expires: new Date(res.expire_in * 1000).toUTCString(),
+        });
+    (res === null || res === void 0 ? void 0 : res.refresh_token) &&
+        setCookie(BEARER_REFRESH_TOKEN_COOKIE, res.refresh_token, {
+            domain: window.location.hostname === 'localhost'
+                ? 'localhost'
+                : `.${domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
+        });
+};
 
+const loginByEmailPassword = (email, password) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('email', email);
+    formData.append('password', password);
+    return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.LOGIN_BY_PASSWORD, {
+        method: 'POST',
+        body: formData,
+        headers: {
+            Authorization: `Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe`,
+        },
+    });
+});
 const registerBySendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* () {
     const formData = new FormData();
     formData.append('email', email);
     formData.append('website_id', websiteId);
     return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.REGISTER_BY_SEND_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 const resendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* () {
@@ -320,7 +735,7 @@ const resendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* ()
     formData.append('email', email);
     return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.SEND_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 const verifyByEmailOTP = (email, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
@@ -329,7 +744,7 @@ const verifyByEmailOTP = (email, otpCode) => __awaiter(void 0, void 0, void 0, f
     formData.append('code', otpCode);
     return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.VERIFY_BY_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 
@@ -339,13 +754,12 @@ const SSOEmailScreen = ({ hidden, }) => {
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             e.preventDefault();
             const email = e.currentTarget.email.value;
             const existRes = yield checkUserExist({ email });
             if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
-                if (((_a = existRes._data) === null || _a === void 0 ? void 0 : _a.is_pass) &&
-                    ((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.is_status) === 'Active') {
+                if ((_a = existRes._data) === null || _a === void 0 ? void 0 : _a.is_pass) {
                     // go to password screen
                     addStep({
                         type: SSOStepTypeType.PASSWORD,
@@ -356,20 +770,31 @@ const SSOEmailScreen = ({ hidden, }) => {
                     goNext();
                 }
                 else {
+                    let res;
+                    if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
+                        res = yield registerBySendEmailOTP(email);
+                    }
+                    else {
+                        res = yield resendEmailOTP(email);
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                        setErrMsg(((_c = res._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+                        return;
+                    }
                     // go to register screen
-                    registerBySendEmailOTP(email);
                     addStep({
                         type: SSOStepTypeType.OTP,
                         config: {
                             email,
                             otpType: 'email',
+                            afterAction: 'setup',
                         },
                     });
                     goNext();
                 }
             }
             else {
-                setErrMsg(((_c = existRes._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'api error');
+                setErrMsg(((_d = existRes._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'api error');
             }
         }) },
         React__default.createElement(Stack, { spacing: 8 },
@@ -379,19 +804,52 @@ const SSOEmailScreen = ({ hidden, }) => {
         React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
 };
 
-// "phone_number":"906911910",
-// "password":"Kenny2103!"
-const loginByPhonePassword = (phone, password) => __awaiter(void 0, void 0, void 0, function* () {
-    const formData = new FormData();
-    formData.append('phone_number', phone);
-    formData.append('password', password);
-    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.LOGIN_BY_PASSWORD, {
-        method: 'POST',
-        body: formData
-    }, true);
-});
-// "phone_number": "906911910",
-// "area_code":"+84",
+const splitPhone = (phone) => {
+    var _a, _b;
+    if (!phone)
+        return { areaCode: undefined, phoneNumber: undefined };
+    let areaCode = '';
+    let phoneNumber = phone;
+    if (phone.startsWith('+')) {
+        areaCode =
+            ((_a = phone.match(new RegExp(`^\\+(${allAvailableAreaCodes
+                .map((c) => c.replace('+', ''))
+                .join('|')})`))) === null || _a === void 0 ? void 0 : _a[0]) || '';
+        phoneNumber = phone.slice(areaCode.length);
+    }
+    else {
+        areaCode =
+            ((_b = phone.match(new RegExp(`^(${allAvailableAreaCodes
+                .map((c) => c.replace('+', ''))
+                .join('|')})`))) === null || _b === void 0 ? void 0 : _b[0]) || '';
+        phoneNumber = phone.slice(areaCode.length);
+        if (areaCode) {
+            areaCode = `+${areaCode}`;
+        }
+    }
+    return { areaCode, phoneNumber };
+};
+
+// "phone_number":"906911910",
+// "password":"Kenny2103!"
+const loginByPhonePassword = (phone, password) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    let { phoneNumber } = splitPhone(phone);
+    phoneNumber = phoneNumber.startsWith('0')
+        ? phoneNumber.substring(1)
+        : phoneNumber;
+    formData.append('phone_number', phoneNumber);
+    formData.append('password', password);
+    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.LOGIN_BY_PASSWORD, {
+        method: 'POST',
+        body: formData,
+        headers: {
+            Authorization: 'Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe',
+        },
+    }, true);
+});
+// "phone_number": "906911910",
+// "area_code":"+84",
 const registerBySendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
     const formData = new FormData();
     formData.append('phone_number', phone);
@@ -399,7 +857,7 @@ const registerBySendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, vo
     formData.append('website_id', websiteId);
     return fetchSSOV2Api(SSO_V2_PATHS.PHONE.REGISTER_BY_SEND_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 // "phone_number": "906911910",
@@ -410,7 +868,7 @@ const resendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, fu
     formData.append('area_code', areaCode);
     return fetchSSOV2Api(SSO_V2_PATHS.PHONE.SEND_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 // "otp_code":"212616",
@@ -425,28 +883,26 @@ const verifyByPhoneOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0,
         method: 'POST',
         body: formData,
     });
+});
+const resendUpdatePhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.UPDATE_PHONE_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyUpdatePhoneOTP = (areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('otp_code', otpCode);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.UPDATE_PHONE_VERIFY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
 });
 
-const splitPhone = (phone) => {
-    var _a, _b;
-    if (!phone)
-        return { areaCode: '', phoneNumber: '' };
-    let areaCode = '';
-    let phoneNumber = phone;
-    if (phone.startsWith('+')) {
-        areaCode = ((_a = phone.match(new RegExp(`^\\+(${allAvailableAreaCodes.map(c => c.replace('+', '')).join('|')})`))) === null || _a === void 0 ? void 0 : _a[0]) || '';
-        phoneNumber = phone.slice(areaCode.length);
-    }
-    else {
-        areaCode = ((_b = phone.match(new RegExp(`^(${allAvailableAreaCodes.map(c => c.replace('+', '')).join('|')})`))) === null || _b === void 0 ? void 0 : _b[0]) || '';
-        phoneNumber = phone.slice(areaCode.length);
-        if (areaCode) {
-            areaCode = `+${areaCode}`;
-        }
-    }
-    return { areaCode, phoneNumber };
-};
-
 const loginBySocial = (token, social) => __awaiter(void 0, void 0, void 0, function* () {
     const formData = new FormData();
     formData.append('token', token);
@@ -455,6 +911,9 @@ const loginBySocial = (token, social) => __awaiter(void 0, void 0, void 0, funct
     return fetchSSOV2Api(SSO_V2_PATHS.LOGIN_BY_SOCIAL, {
         method: 'POST',
         body: formData,
+        headers: {
+            Authorization: `Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe`,
+        },
     });
 });
 
@@ -478,7 +937,7 @@ const resendZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, fun
     formData.append('area_code', areaCode);
     return fetchSSOV2Api(SSO_V2_PATHS.ZALO.SEND_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
     });
 });
 // "otp_code":"212616",
@@ -491,10 +950,43 @@ const verifyByZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0,
     formData.append('area_code', areaCode);
     return fetchSSOV2Api(SSO_V2_PATHS.ZALO.VERIFY_BY_OTP, {
         method: 'POST',
-        body: formData
+        body: formData,
+    });
+});
+const resendUpdatePhoneZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.ZALO.UPDATE_PHONE_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('otp_code', otpCode);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.ZALO.UPDATE_PHONE_VERIFY_OTP, {
+        method: 'POST',
+        body: formData,
     });
 });
 
+const CollectInfoText = () => {
+    const { setOpenCollectInfoPopup } = useSSOState();
+    return (React__default.createElement(Text, { size: "p4", onClick: () => {
+            setOpenCollectInfoPopup(true);
+        }, color: "blue.6", style: {
+            cursor: 'pointer',
+        } },
+        React__default.createElement(Info, { size: 16, color: '#2D87F3', style: {
+                verticalAlign: 'sub',
+            } }),
+        ' ',
+        "Why We Need Your Information?"));
+};
+
 const MailIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("g", { clipPath: "url(#clip0_869_25628)" },
         React__default.createElement("rect", { width: "24", height: "24", rx: "12", fill: "#00B16A" }),
@@ -533,31 +1025,30 @@ const SSOFirstScreen = ({ hidden }) => {
     const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale, onClose } = useSSOState();
-    const { addStep, goNext } = useSSOSteps();
+    const { addStep, goNext, setShareData } = useSSOSteps();
     const handleLoginBySocial = (credential, provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const res = yield loginBySocial(credential, provider);
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-            // TODO: set token, get profile, determin if need update info or just login
-            setCookie(BEARER_TOKEN_COOKIE$1, (_a = res._data) === null || _a === void 0 ? void 0 : _a.token, {
-                domain: window.location.hostname === 'localhost'
-                    ? 'localhost'
-                    : `.${domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
-                expires: new Date(res._data.expire_in * 1000).toUTCString(),
-            });
-            const userInfo = yield fetchSSOApi('user/profile');
+            handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+            const userInfo = yield getUserInfo();
             if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) === 1) {
-                if ((_b = userInfo._data) === null || _b === void 0 ? void 0 : _b.is_new) {
+                setShareData({
+                    authMethod: provider,
+                });
+                if ((_a = userInfo._data) === null || _a === void 0 ? void 0 : _a.is_new) {
+                    setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                     addStep({
                         type: SSOStepTypeType.SETUP_FULL,
                         config: {
-                            userInfo,
+                            userInfo: userInfo._data,
                             disabledEmail: true,
                         },
                     });
                     goNext();
                 }
-                else if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified)) {
+                else if (!((_b = userInfo._data) === null || _b === void 0 ? void 0 : _b.phone_verified)) {
+                    setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'verify-phone' })));
                     addStep({
                         type: SSOStepTypeType.VERIFY_PHONE,
                     });
@@ -568,11 +1059,11 @@ const SSOFirstScreen = ({ hidden }) => {
                 }
             }
             else {
-                setErrMsg(((_d = userInfo === null || userInfo === void 0 ? void 0 : userInfo._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+                setErrMsg(((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
             }
         }
         else {
-            setErrMsg(((_e = res === null || res === void 0 ? void 0 : res._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+            setErrMsg(((_d = res === null || res === void 0 ? void 0 : res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
         }
     });
     useEffect(() => {
@@ -606,64 +1097,101 @@ const SSOFirstScreen = ({ hidden }) => {
         };
     }, []);
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g, _h;
+        var _e, _f, _g, _h;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) && ((_g = userExist._data) === null || _g === void 0 ? void 0 : _g.is_status) === 'Active') {
+            setShareData({
+                authMethod: 'phone',
+            });
+            if ((_e = userExist._data) === null || _e === void 0 ? void 0 : _e.is_pass) {
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'login' })));
                 addStep({
                     type: SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
                     },
                 });
+                goNext();
             }
             else {
-                registerBySendZaloOTP(phoneNumber, areaCode);
+                let res;
+                if (!((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.provider)) {
+                    res = yield registerBySendZaloOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendZaloOTP(phoneNumber, areaCode);
+                }
+                if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                    setErrMsg(((_g = res._messages) === null || _g === void 0 ? void 0 : _g[0]) || 'API error');
+                    return;
+                }
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
                     type: SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-zalo',
+                        afterAction: 'setup',
                     },
                 });
+                goNext();
             }
-            goNext();
         }
         else {
             setErrMsg(((_h = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _h === void 0 ? void 0 : _h[0]) || 'API error');
         }
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k, _l;
+        var _j, _k, _l, _m;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass) && ((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.is_status) === 'Active') {
+            setShareData({
+                authMethod: 'phone',
+            });
+            if ((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass) {
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'login' })));
                 addStep({
                     type: SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
                     },
                 });
+                goNext();
             }
             else {
-                registerBySendPhoneOTP(phoneNumber, areaCode);
+                let res;
+                if (!((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.provider)) {
+                    res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendPhoneOTP(phoneNumber, areaCode);
+                }
+                if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                    setErrMsg(((_l = res._messages) === null || _l === void 0 ? void 0 : _l[0]) || 'API error');
+                    return;
+                }
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
                     type: SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-sms',
+                        afterAction: 'setup',
                     },
                 });
+                goNext();
             }
-            goNext();
         }
         else {
-            setErrMsg(((_l = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _l === void 0 ? void 0 : _l[0]) || 'API error');
+            setErrMsg(((_m = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _m === void 0 ? void 0 : _m[0]) || 'API error');
         }
     });
     const onClickEmail = () => {
+        setShareData({
+            authMethod: 'mail',
+        });
         addStep({
             type: SSOStepTypeType.EMAIL,
         });
@@ -744,12 +1272,7 @@ const SSOFirstScreen = ({ hidden }) => {
                     marginTop: 'auto',
                 },
             }) },
-            React__default.createElement(Text, { size: "p4", color: 'blue.6' },
-                React__default.createElement(Info, { size: 16, color: theme.colors.primaryBase, style: {
-                        verticalAlign: 'sub',
-                    } }),
-                ' ',
-                "Why We Need Your Information?"),
+            React__default.createElement(CollectInfoText, null),
             React__default.createElement(Text, { size: "p5", color: "gray.6" },
                 "By tapping continue, I confirm that I have read, understand and agree to the",
                 ' ',
@@ -769,33 +1292,90 @@ const SSOFirstScreen = ({ hidden }) => {
 };
 
 const SSOOTPScreen = ({ hidden, index, }) => {
+    const { onClose } = useSSOState();
     const { steps, setSteps, addStep, goNext } = useSSOSteps();
     const [otp, setOtp] = React__default.useState('');
     const [error, setError] = React__default.useState('');
     const currentStepIndex = index;
     const currentStep = steps[currentStepIndex];
-    const { phone, email, otpType, isForgot } = currentStep.config;
+    const { phone, email, otpType, isUpdatePhone, afterAction, setupData } = currentStep.config;
     const isEmail = otpType === 'email';
     const sendOTPCode = (checkResend) => {
         if (checkResend && resendTime > 0)
             return;
         // send otp code logic here
         const { areaCode, phoneNumber } = splitPhone(phone);
-        if (otpType === 'phone-sms') {
-            resendPhoneOTP(phoneNumber, areaCode);
-        }
-        else if (otpType === 'phone-zalo') {
-            resendZaloOTP(phoneNumber, areaCode);
+        if (isUpdatePhone) {
+            if (otpType === 'phone-sms') {
+                resendUpdatePhoneOTP(phoneNumber, areaCode);
+            }
+            else if (otpType === 'phone-zalo') {
+                resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
+            }
         }
-        else if (otpType === 'email') {
-            resendEmailOTP(email);
+        else {
+            if (otpType === 'phone-sms') {
+                resendPhoneOTP(phoneNumber, areaCode);
+            }
+            else if (otpType === 'phone-zalo') {
+                resendZaloOTP(phoneNumber, areaCode);
+            }
+            else if (otpType === 'email') {
+                resendEmailOTP(email);
+            }
         }
         setupResendTimer();
     };
     const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const { areaCode, phoneNumber } = splitPhone(phone);
         // submit otp code logic here
+        if (isUpdatePhone) {
+            let res;
+            if (otpType === 'phone-sms') {
+                res = yield verifyUpdatePhoneOTP(areaCode, otp);
+            }
+            else if (otpType === 'phone-zalo') {
+                res = yield verifyUpdatePhoneZaloOTP(phoneNumber, areaCode, otp);
+            }
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                if (afterAction === 'setup') {
+                    const userInfo = yield getUserInfo();
+                    if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
+                        // log error
+                        setError(((_a = userInfo._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        return;
+                    }
+                    addStep({
+                        type: SSOStepTypeType.SETUP_FULL,
+                        config: {
+                            phone,
+                            userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                        },
+                    });
+                    goNext();
+                }
+                else if (afterAction === 'submitSetup') {
+                    const res = yield updateUserInfo(Object.assign(Object.assign({}, setupData), { validate: '' }));
+                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                    }
+                    else {
+                        // log error
+                        setError(((_b = res._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+                    }
+                }
+                else {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                }
+            }
+            else {
+                // log error
+                setError(((_c = res._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+            }
+            return;
+        }
         let res;
         if (otpType === 'phone-sms') {
             res = yield verifyByPhoneOTP(phoneNumber, areaCode, otp);
@@ -809,31 +1389,36 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
             setOtp('');
             // log error
-            setError(((_a = res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+            setError(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
             return;
         }
-        setCookie(BEARER_TOKEN_COOKIE$1, (_b = res._data) === null || _b === void 0 ? void 0 : _b.token, {
-            domain: window.location.hostname === 'localhost'
-                ? 'localhost'
-                : `.${domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
-            expires: new Date(res._data.expire_in * 1000).toUTCString(),
-        });
-        if (isForgot) {
+        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+        if (afterAction === 'forgot') {
             addStep({
                 type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
             });
+            goNext();
         }
-        else {
-            const userInfo = yield fetchSSOApi('user/profile');
+        else if (afterAction === 'setup') {
+            const userInfo = yield getUserInfo();
+            if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
+                // log error
+                setError(((_e = userInfo._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+                return;
+            }
             addStep({
                 type: SSOStepTypeType.SETUP_FULL,
                 config: {
-                    userInfo: userInfo,
+                    phone,
+                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
                     disabledEmail: isEmail,
                 },
             });
+            goNext();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
-        goNext();
     });
     const swapZaloSms = () => {
         if (isEmail)
@@ -841,15 +1426,16 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         const { areaCode, phoneNumber } = splitPhone(phone);
         const newType = otpType === 'phone-sms' ? 'phone-zalo' : 'phone-sms';
         if (newType === 'phone-sms') {
-            registerBySendPhoneOTP(phoneNumber, areaCode);
+            resendPhoneOTP(phoneNumber, areaCode);
         }
         else {
-            registerBySendZaloOTP(phoneNumber, areaCode);
+            resendZaloOTP(phoneNumber, areaCode);
         }
         setSteps((s) => s.splice(currentStepIndex, 1, Object.assign(Object.assign({}, currentStep), { config: Object.assign(Object.assign({}, currentStep === null || currentStep === void 0 ? void 0 : currentStep.config), { otpType: newType }) })));
     };
     const [resendTime, setResendTime] = React__default.useState(30);
     const setupResendTimer = () => {
+        setResendTime(30);
         const countdown = () => {
             setResendTime((t) => {
                 if (t - 1 > 0) {
@@ -863,11 +1449,14 @@ const SSOOTPScreen = ({ hidden, index, }) => {
     useEffect(() => {
         setupResendTimer();
     }, []);
-    return (React__default.createElement("div", { style: {
+    return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp();
         } },
         React__default.createElement(Stack, { spacing: 8 },
-            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, isEmail ? 'Verify Email' : 'Verify Phone Number'),
             React__default.createElement(Text, { size: "p4" }, isEmail ? (React__default.createElement(React__default.Fragment, null,
                 "Enter the 6-digit OTP sent to your email ",
                 React__default.createElement("b", null, email),
@@ -886,415 +1475,210 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                     height: 40,
                 } },
                 React__default.createElement(Text, { size: "p4" }, "Didn\u2019t receive the code?"),
-                React__default.createElement(Text, { size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) },
+                React__default.createElement(Text, { style: {
+                        pointerEvents: resendTime > 0 ? 'none' : 'auto',
+                        cursor: resendTime > 0 ? 'not-allowed' : 'pointer',
+                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) },
                     "Resend (",
                     resendTime,
                     ")"))),
-        React__default.createElement(Button, { size: "lg", variant: "primary", mt: 12, onClick: submitOtp, fullWidth: true }, "Continue"),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Continue"),
         !isEmail && (React__default.createElement(Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true },
             "Send OTP Code via ",
             otpType === 'phone-sms' ? 'Zalo App' : 'SMS'))));
 };
 
 const SSOPasswordScreen = ({ hidden, index, }) => {
-    var _a;
+    var _a, _b;
+    const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default.useState('');
     const { steps, addStep, goNext } = useSSOSteps();
-    const resetPassword = () => {
-        addStep({
-            type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
-        });
-        goNext();
-    };
     const thisStep = steps[index];
     const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
-    return (React__default.createElement("form", { style: {
-            display: hidden ? 'none' : 'block',
-        }, onSubmit: (e) => {
-            e.preventDefault();
-            const password = e.currentTarget.password.value;
-            // call api to login with email and password, if fail then show error
-            loginByPhonePassword(phone, password)
-                .then((res) => {
-                var _a;
-                if ((_a = res._messages) === null || _a === void 0 ? void 0 : _a[0]) {
-                    setErrMsg(res._messages[0]);
-                }
-                else {
-                    setErrMsg('api error');
-                }
-            })
-                .catch(() => {
-                setErrMsg('api error');
-            });
-        } },
-        React__default.createElement(Stack, { spacing: 8 },
-            React__default.createElement(Text, { size: "s1", weight: "semiBold" },
-                "Welcome back!",
-                React__default.createElement("br", null),
-                "Enter your password"),
-            React__default.createElement(Text, { size: "p4" }, "\u0110\u0103ng nh\u1EADp b\u1EB1ng m\u1EADt kh\u1EA9u c\u1EE7a b\u1EA1n.")),
-        React__default.createElement(Stack, { mt: 24, spacing: 8 },
-            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
-            React__default.createElement(Group, { spacing: 8, align: "center", style: {
-                    height: 40,
-                } },
-                React__default.createElement(Text, { size: "p4" }, "Forgot Password?"),
-                React__default.createElement(Text, { size: "s4", color: "blue.6", style: {
-                        cursor: 'pointer',
-                    }, onClick: resetPassword }, "Reset"))),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Sign In")));
-};
-
-const SSOPasswordForgotPhone = ({ hidden, }) => {
-    const [phone, setPhone] = React__default.useState('');
-    const [errMsg, setErrMsg] = React__default.useState('');
-    const { locale } = useSSOState();
-    const { addStep, goNext } = useSSOSteps();
-    const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            resendZaloOTP(phoneNumber, areaCode);
-            addStep({
-                type: SSOStepTypeType.OTP,
-                config: {
-                    phone,
-                    otpType: 'phone-zalo',
-                    isForgot: true,
-                },
-            });
-            goNext();
-        }
-        else {
-            setErrMsg(((_a = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
-        }
-    });
-    const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            registerBySendPhoneOTP(phoneNumber, areaCode);
+    const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
+    const resetPassword = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        if (phone) {
             addStep({
-                type: SSOStepTypeType.OTP,
-                config: {
-                    phone,
-                    otpType: 'phone-sms',
-                    isForgot: true,
-                },
-            });
-            goNext();
-        }
-        else {
-            setErrMsg(((_b = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
-        }
-    });
-    return (React__default.createElement("div", { style: {
-            display: hidden ? 'none' : 'block',
-        } },
-        React__default.createElement(Stack, { spacing: 8 },
-            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Reset password"),
-            React__default.createElement(Text, { size: "p4" }, "Please provide the phone number you used to create your account.")),
-        React__default.createElement(Stack, { mt: 24, spacing: 16 },
-            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
-            errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS"))));
-};
-
-const BackgroundHeader = () => (React__default.createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
-        position: 'absolute',
-        top: 0,
-        left: '50%',
-        zIndex: 0,
-        transform: 'translateX(-50%)',
-        pointerEvents: 'none',
-    } },
-    React__default.createElement("circle", { opacity: ".2", cx: "146", cy: "109", r: "146", fill: "url(#paint0_linear_908_34610)" }),
-    React__default.createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_34610)" }),
-    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_34610)" }),
-    React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_34610)" }),
-    React__default.createElement("path", { d: "M163.327 94.716c-.522-3.187-7.981-5.714-17.11-5.714s-16.589 2.527-17.111 5.714h-.032v26.428h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032V94.716z", fill: "#545E73" }),
-    React__default.createElement("path", { d: "M146.217 118.286c-9.468 0-17.143-2.718-17.143-6.071v8.928h.032c.522 3.187 7.982 5.714 17.111 5.714 9.128 0 16.588-2.527 17.11-5.714h.032v-8.928c0 3.353-7.675 6.071-17.142 6.071", fill: "#2B62CD" }),
-    React__default.createElement("path", { d: "M129.074 111.859v.358q.002-.18.032-.358zm34.25 0q.031.178.032.358v-.358z", fill: "#38454F" }),
-    React__default.createElement("path", { d: "M146.217 109.714c-9.468 0-17.143-2.719-17.143-6.071v8.928h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.928c0 3.352-7.675 6.071-17.142 6.071", fill: "#2D87F3" }),
-    React__default.createElement("path", { d: "M129.074 103.287v.357q.002-.18.032-.357zm34.25 0q.031.178.032.357v-.357z", fill: "#556080" }),
-    React__default.createElement("path", { d: "M146.217 101.145c9.467 0 17.142-2.719 17.142-6.072s-7.675-6.071-17.142-6.071c-9.468 0-17.143 2.718-17.143 6.071s7.675 6.072 17.143 6.072", fill: "#91CAFF" }),
-    React__default.createElement("path", { d: "M146.217 101.144c-9.468 0-17.143-2.719-17.143-6.072v8.929h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.929c0 3.353-7.675 6.072-17.142 6.072", fill: "#45A4FF" }),
-    React__default.createElement("path", { d: "M129.074 94.717v.357q.002-.18.032-.357zm34.25 0q.031.177.032.357v-.357z", fill: "#8697CB" }),
-    React__default.createElement("path", { d: "M156.36 129.002a8.57 8.57 0 0 0 8.571-8.571 8.571 8.571 0 1 0-8.571 8.571", fill: "#00B16A" }),
-    React__default.createElement("path", { d: "M161.054 116.273a.714.714 0 0 0-.995.178l-3.997 5.743-2.82-2.316a.714.714 0 0 0-.906 1.105l3.418 2.806a.72.72 0 0 0 1.04-.144l4.438-6.377a.716.716 0 0 0-.178-.995", fill: "#fff" }),
-    React__default.createElement("defs", null,
-        React__default.createElement("linearGradient", { id: "paint0_linear_908_34610", x1: "147.5", y1: "141", x2: "36.5", y2: "30", gradientUnits: "userSpaceOnUse" },
-            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
-            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })),
-        React__default.createElement("linearGradient", { id: "paint1_linear_908_34610", x1: "218.376", y1: "63.134", x2: "61", y2: "109", gradientUnits: "userSpaceOnUse" },
-            React__default.createElement("stop", { stopColor: "#fff" }),
-            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
-        React__default.createElement("linearGradient", { id: "paint2_linear_908_34610", x1: "146.5", y1: "61", x2: "146.5", y2: "156", gradientUnits: "userSpaceOnUse" },
-            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: ".6" }),
-            React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
-        React__default.createElement("linearGradient", { id: "paint3_linear_908_34610", x1: "178.979", y1: "98.35", x2: "108.338", y2: "98.35", gradientUnits: "userSpaceOnUse" },
-            React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
-            React__default.createElement("stop", { offset: "1", stopColor: "#fff" })))));
-
-const CustomerSupportIcon = () => {
-    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default.createElement("g", { clipPath: "url(#clip0_911_24123)" },
-            React__default.createElement("path", { d: "M23.3 16.625c-.042-1.1.166-4.401.166-4.401.073-.27.15-.594.205-.854C25.33 3.783 20.246.75 16 .75c-1.133 0-2.488.413-3.13 1.203a.82.82 0 0 1-.503.307c-2.862.46-4.742 4.183-4.062 8.77q.087.586.23 1.19v.002c.183 1.009.231 3.303.165 4.403-.271 4.482-5.173 8.453-1.985 11.608 8.41 1.974 10.202 2.142 18.57 0 3.187-3.155-1.81-7.122-1.985-11.608", fill: "#9B4E4E" }),
-            React__default.createElement("path", { d: "M24.675 14.972a3.2 3.2 0 0 0-.64-.718.25.25 0 1 0-.302.399q.308.261.53.6a1.41 1.41 0 0 1 .177 1.562c-.465.892-1.84 1.63-3.614 2.043q.139.221.264.451c1.85-.457 3.275-1.267 3.794-2.263a1.89 1.89 0 0 0-.21-2.074", fill: "#473049" }),
-            React__default.createElement("path", { d: "M18.545 22.798c-.35.41-2.09 4.555-2.535 5.29-.448-.735-2.198-4.89-2.545-5.3.351-.358.597-.808.707-1.297q.096-.405.115-.82c.365.137 3.063.134 3.428-.003v.003q.018.4.11.79c.107.505.357.969.72 1.337", fill: "#FF977B" }),
-            React__default.createElement("path", { d: "M17.824 21.46a3.39 3.39 0 0 1-3.652.03q.095-.404.115-.82c.365.138 3.062.135 3.427-.002v.003q.018.4.11.79", fill: "#FF7364" }),
-            React__default.createElement("path", { d: "M25.284 28.233c.153.66-.362 1.082-1.08 1.472-.917.5-3.717 1.55-8.205 1.55s-7.287-1.05-8.205-1.55c-.717-.39-1.232-.812-1.08-1.472.048-.187.126-.365.233-.525.535-.84 1.567-2.198 4.2-3.598q.335-.174.692-.33c.075 1.013 2.985.21 2.985.21a.96.96 0 0 1 .57.835c.038.888.168 2.528.615 3.263.445-.735.575-2.375.613-3.263a.96.96 0 0 1 .57-.835s2.907.81 2.985-.202q.347.151.675.322c2.632 1.4 3.665 2.758 4.2 3.598.107.16.185.338.232.525", fill: "#F9E0B4" }),
-            React__default.createElement("path", { d: "M22.317 12.023c.359-.006.715.05 1.055.165.785.282 1.33.962 1.2 2.3-.105 1.1-.647 1.752-1.317 2.03-.461.188-.97.217-1.45.085.277-.97.555-3.88.512-4.58m-12.124 4.579a2.26 2.26 0 0 1-1.448-.082c-.672-.28-1.215-.93-1.322-2.033-.123-1.287.375-1.965 1.112-2.265a3 3 0 0 1 1.145-.2c-.042.7.235 3.61.513 4.58", fill: "#4B3956" }),
-            React__default.createElement("path", { d: "M22.319 12.021c.04.7-.235 3.61-.513 4.581-.285.996-1.532 3.582-5.285 4.418a2.4 2.4 0 0 1-1.044 0c-3.752-.836-5-3.422-5.284-4.418-.278-.97-.554-3.88-.513-4.58 1.219-.669.668-2.955 1.56-5.057.556-1.307 1.305-1.644 1.722-1.727a.9.9 0 0 0 .533-.338c1.6-2.056 4.794-.95 5.966 1.225 1.066 1.977 1.225 4.918 2.858 5.896", fill: "#FFB497" }),
-            React__default.createElement("path", { d: "M20.13 23.118c.067.217.083.446.048.67-.077 1.012-.52 2.735-1.227 2.542-1.018-.277-1.758-2.34-1.758-2.34.518-.23 1.003-.782 1.353-1.192q.068-.086.132-.16a.463.463 0 0 1 .625-.103c.295.153.683.345.828.583m-5.306.872s-.74 2.063-1.758 2.34c-.71.193-1.152-1.537-1.227-2.55a1.5 1.5 0 0 1 .047-.662c.145-.238.533-.43.828-.583a.463.463 0 0 1 .625.103l.125.15c.347.41.837.972 1.36 1.202", fill: "#F7F0DF" }),
-            React__default.createElement("path", { d: "M14.94 16.018a.306.306 0 0 0-.3.385 1.414 1.414 0 0 0 2.72 0 .307.307 0 0 0-.3-.385z", fill: "#fff" }),
-            React__default.createElement("path", { d: "M12.776 11.492h-.05a.676.676 0 0 0-.675.676v.541c0 .374.302.676.676.676h.049a.676.676 0 0 0 .676-.676v-.54a.676.676 0 0 0-.676-.677m6.448 1.893h.05a.676.676 0 0 0 .675-.676v-.541a.676.676 0 0 0-.676-.676h-.049a.676.676 0 0 0-.676.675v.542c0 .373.303.676.676.676", fill: "#9B4E4E" }),
-            React__default.createElement("path", { d: "M16.017 29.117h-.034a.47.47 0 0 0-.471.472v.034c0 .26.21.471.471.471h.034c.26 0 .472-.21.472-.471v-.034a.47.47 0 0 0-.472-.472", fill: "#fff" }),
-            React__default.createElement("path", { d: "M16.003 15.2c-.008 0-.69-.01-.69-.402a.25.25 0 0 1 .455-.142 1 1 0 0 0 .235.044.8.8 0 0 0 .229-.044.25.25 0 0 1 .456.142c0 .391-.679.402-.685.402", fill: "#FF7364" }),
-            React__default.createElement("path", { d: "M11.532 12.095a.25.25 0 0 1-.225-.36 1.62 1.62 0 0 1 1.338-.752c.396-.017.782.124 1.075.39a.25.25 0 1 1-.333.374 1 1 0 0 0-.742-.264 1.14 1.14 0 0 0-.888.473.25.25 0 0 1-.225.14m-.451-1.716a.25.25 0 0 1-.175-.43c.606-.587 2.632-.888 3.235-.48a.25.25 0 0 1-.281.415c-.37-.253-2.149-.02-2.606.425a.25.25 0 0 1-.173.07m9.387 1.715a.25.25 0 0 1-.226-.14 1.14 1.14 0 0 0-.887-.472 1 1 0 0 0-.742.264.25.25 0 1 1-.332-.373c.293-.267.68-.408 1.075-.391a1.62 1.62 0 0 1 1.337.752.25.25 0 0 1-.225.36m.452-1.715a.25.25 0 0 1-.174-.07c-.457-.444-2.235-.677-2.605-.426a.25.25 0 0 1-.281-.414c.603-.408 2.628-.108 3.234.48a.25.25 0 0 1-.175.43zm2.71 1.175c-.135-.78-.492-2.643-2.005-5.64-.06-.125-.092-.258.005-.355a.254.254 0 0 1 .355.005c.795.817 1.67 2.882 1.9 4.565zM10.163 6.313c-.015.025-1.525 2.925-1.83 4.89l-.028-.173q-.1-.658-.127-1.322C8.54 7.94 9.673 6.16 9.73 6.063a.25.25 0 0 1 .34-.093.25.25 0 0 1 .093.343", fill: "#844040" }),
-            React__default.createElement("path", { d: "M23.29 17.917c-1.345.813-3.559 1.331-5.908 1.3a.254.254 0 0 0-.253.247.25.25 0 0 0 .246.253l.23.002c2.522 0 4.831-.603 6.2-1.543a23 23 0 0 1-.516-.259", fill: "#473049" }),
-            React__default.createElement("path", { d: "M16.138 20.42c.686 0 1.241-.426 1.241-.952s-.555-.952-1.241-.952-1.242.426-1.242.952.556.952 1.242.952", fill: "#4B3956" })),
-        React__default.createElement("defs", null,
-            React__default.createElement("clipPath", { id: "clip0_911_24123" },
-                React__default.createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
-};
-
-const HealthUpdateIcon = () => {
-    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default.createElement("path", { d: "M20.69 3.066 4.714 5.456a1.714 1.714 0 0 0-1.442 1.95l3.01 20.106a1.714 1.714 0 0 0 1.948 1.442l15.975-2.39a1.714 1.714 0 0 0 1.441-1.95L22.638 4.507a1.714 1.714 0 0 0-1.949-1.441", fill: "#1B89E5" }),
-        React__default.createElement("path", { d: "m4.488 5.49 16.427-2.458 3.13 20.914-16.427 2.458z", fill: "#fff" }),
-        React__default.createElement("path", { d: "m13.559 8.067-.567.084a.83.83 0 0 0-.696.942l.02.141a.18.18 0 0 1-.15.203l-.14.021a.83.83 0 0 0-.697.942l.085.568a.83.83 0 0 0 .942.696l.141-.021a.18.18 0 0 1 .203.15l.022.14a.83.83 0 0 0 .942.697l.566-.085a.83.83 0 0 0 .697-.941l-.021-.142a.18.18 0 0 1 .15-.203l.141-.021a.83.83 0 0 0 .697-.943l-.085-.565a.83.83 0 0 0-.942-.697l-.142.022a.18.18 0 0 1-.203-.15l-.02-.142a.83.83 0 0 0-.943-.696m6.553 5.392-9.31 1.393a.32.32 0 0 0 .094.634l9.31-1.393a.32.32 0 1 0-.095-.634m.299 2.303L8.74 17.508a.32.32 0 0 0 .096.634l11.67-1.746a.32.32 0 0 0-.096-.634m-.591 2.436L9.039 19.81a.32.32 0 1 0 .095.634l10.78-1.613a.32.32 0 0 0-.095-.634m-1.084 2.51-9.397 1.406a.32.32 0 0 0 .095.634l9.397-1.407a.32.32 0 1 0-.095-.633m2.318-.347-.828.124a.32.32 0 0 0 .095.634l.828-.124a.32.32 0 0 0-.095-.634", fill: "#78C5EF" }),
-        React__default.createElement("path", { d: "m27.358 4.303-.805-.273a1.26 1.26 0 0 0-1.596.789l-4.406 13.013.494 2.544a.442.442 0 0 0 .728.246l1.937-1.72 2.61-7.71.224.075a.583.583 0 0 0 .739-.365l1.357-4.007a2.045 2.045 0 0 0-1.282-2.592", fill: "#36B1F2" }),
-        React__default.createElement("path", { d: "M26.32 11.443a.25.25 0 0 1-.236-.33l1.614-4.768a.25.25 0 1 1 .474.16l-1.615 4.768a.25.25 0 0 1-.237.17", fill: "#1B89E5" }),
-        React__default.createElement("path", { d: "M17.67 5.535 8.324 6.934a1.15 1.15 0 0 1-1.307-.967l-.098-.654a.44.44 0 0 1 .368-.497l10.754-1.61a.437.437 0 0 1 .498.368l.097.654a1.15 1.15 0 0 1-.967 1.307z", fill: "#3C3854" })));
-};
-
-const PersonalizeIcon = () => {
-    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default.createElement("path", { d: "M31.364 22.343a5 5 0 0 0-1.713-1.477c-.847-.488-1.52-.816-1.638-1.931h-1.761c-.12 1.115-.797 1.443-1.644 1.931a5 5 0 0 0-1.712 1.477c-.33.438-.095.709.331.936.723.386 2.4.827 3.903.827 1.502 0 3.18-.441 3.902-.827.426-.227.662-.498.332-.936", fill: "#F78181" }),
-        React__default.createElement("path", { d: "M21.765 14c-.006-3.907-4.11-7.388-7.666-4.77a.4.4 0 0 1-.129.065c-.958.303-1.65 1.213-2.108 2.305-1.408 3.347.2 7.77-.291 11.538h9.938c-.185-2.536.26-6.777.256-9.138", fill: "#FF6671" }),
-        React__default.createElement("path", { d: "M5.354 9.745c-3.033 0-5.268 3.012-4.76 6.07.424 2.568 3.008 2.747 3.008 2.747l3.5-.003s2.586-.175 3.012-2.743c.507-3.06-1.728-6.07-4.76-6.07", fill: "#3A417C" }),
-        React__default.createElement("path", { d: "M9.073 22.755c-.688.367-2.288.79-3.72.79s-3.03-.423-3.72-.79c-.408-.218-.63-.475-.318-.893.43-.588.99-1.07 1.635-1.407.205-.118.393-.203.563-.283h.002c.503-.235.843-.415.928-1.207h1.822c.085.797.428.975.935 1.21.17.08.355.165.558.28.644.339 1.202.82 1.632 1.407.315.418.09.675-.317.893", fill: "#BF6666" }),
-        React__default.createElement("path", { d: "M31.332 22.342a5.04 5.04 0 0 0-1.712-1.477 9 9 0 0 1-.815-.498 3.43 3.43 0 0 1-3.373-.005c-.245.178-.547.325-.855.503a5 5 0 0 0-1.712 1.477c-.33.44-.095.71.33.938.722.385 2.4.827 3.902.827s3.18-.442 3.903-.827c.427-.228.662-.498.332-.938", fill: "#3A417C" }),
-        React__default.createElement("path", { d: "M28.232 9.496c-1.05-.28-3.25-.14-3.708 1.205a.46.46 0 0 1-.18.24c-1.035.682-1.353 1.643-.862 3.845h7.298c.738-4.148-1.278-4.95-2.548-5.29", fill: "#FFB45A" }),
-        React__default.createElement("path", { d: "M8.402 14.623a.51.51 0 0 1 .229.432 5.9 5.9 0 0 1-.278 1.793c-.262.697-.942 1.882-2.245 2.152a4 4 0 0 1-.757.09 4 4 0 0 1-.76-.09c-1.303-.27-1.98-1.455-2.243-2.152a5.9 5.9 0 0 1-.278-1.793.51.51 0 0 1 .229-.432c.99-.668 2.339-.862 3.052-.86.71-.002 2.06.192 3.051.86", fill: "#CE7A7A" }),
-        React__default.createElement("path", { d: "M30.781 14.786a1.2 1.2 0 0 0-.469-.053.45.45 0 0 1-.225-.04c-.956-.438-.852-1.208-.955-1.723-.407-2.036-2.745-1.94-3.408-1.24a.36.36 0 0 1-.19.11c-.87.175-1.371 1.948-1.469 2.68a.24.24 0 0 1-.232.209q-.18 0-.35.057c-.448.157-.572.675-.392 1.157a1.03 1.03 0 0 0 .948.725.255.255 0 0 1 .267.175 3.31 3.31 0 0 0 1.945 2.092 2.13 2.13 0 0 0 1.762 0 3.3 3.3 0 0 0 1.945-2.092.254.254 0 0 1 .267-.175 1.03 1.03 0 0 0 .947-.725c.181-.482.056-1-.391-1.157m-9.271 8.351a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
-        React__default.createElement("path", { d: "M21.51 23.137a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
-        React__default.createElement("path", { d: "M18.682 13.703a3.32 3.32 0 0 1 1.206 3.398 3.63 3.63 0 0 1-2.229 2.489 3.5 3.5 0 0 1-1.118.213 3.5 3.5 0 0 1-1.12-.213 3.63 3.63 0 0 1-2.228-2.49 8.5 8.5 0 0 1-.284-2.55c.137-2.045.975-3.52 2.095-3.245a.25.25 0 0 0 .182-.023c1.377-.755 1.672 1.03 3.496 2.421", fill: "#FFAEAE" }),
-        React__default.createElement("path", { d: "M21.12 24.238c-.85.452-2.81.972-4.575.972s-3.735-.52-4.585-.972c-.5-.268-.777-.585-.387-1.1a5.65 5.65 0 0 1 1.735-1.573 6.03 6.03 0 0 0 3.232.788 6.1 6.1 0 0 0 3.253-.775 5.7 5.7 0 0 1 1.717 1.56c.388.515.11.832-.39 1.1", fill: "#5C8EFF" }),
-        React__default.createElement("path", { d: "M9.073 22.755c-.688.368-2.288.79-3.72.79s-3.03-.422-3.72-.79c-.408-.217-.63-.475-.318-.892.43-.588.99-1.07 1.635-1.408.205-.117.393-.202.563-.282h.002c.557.318 1.192.47 1.833.44a3.47 3.47 0 0 0 1.852-.438c.17.08.355.165.558.28a4.8 4.8 0 0 1 1.632 1.408c.315.417.09.675-.317.892", fill: "#4856B5" })));
-};
-
-const SecurityIcon = () => {
-    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default.createElement("path", { d: "M16 29.625c1.196 0 2.348-.639 3.327-1.31 5.423-3.715 6.606-5.558 6.995-6.163.436-.68 1.533-2.23 2.73-12.356.33-2.804-1.143-5.19-3.893-6.066a31.65 31.65 0 0 0-18.319 0c-2.75.874-4.222 3.262-3.892 6.067 1.196 10.125 2.293 11.674 2.73 12.355.388.605 1.572 2.448 6.994 6.163.98.671 2.13 1.31 3.328 1.31", fill: "#9DBA22" }),
-        React__default.createElement("path", { d: "M25.142 7.18c-2.902-1.307-6.095-1.645-9.143-1.645s-6.241.338-9.143 1.645c-.7.316-1.115.77-1.04 1.365.382 3.052 1.583 11.235 2.192 12.128 1.21 1.777 5.533 4.67 7.267 5.788a1.37 1.37 0 0 0 1.448 0c1.733-1.119 6.056-4.011 7.267-5.788.609-.893 1.81-9.075 2.193-12.128.074-.595-.34-1.049-1.041-1.365", fill: "#BFDF46" }),
-        React__default.createElement("path", { d: "M15.798 19.264c-1.522-.418-2.486-1.494-2.992-3.333a9.2 9.2 0 0 1-.177-4.156c.109-.644.715-1.192 1.434-.802q1.159.616 2.377 1.102c2.909 1.205 3.817 4.07 2.732 5.783-.578.912-1.922 1.806-3.375 1.406", fill: "#fff" }),
-        React__default.createElement("path", { d: "M20.667 20.13a.3.3 0 0 1-.095-.015c-2.152-.684-4.24-2.662-4.838-4.08a.313.313 0 0 1 .508-.35q.045.045.067.106c.461 1.092 2.311 3.048 4.451 3.728a.313.313 0 0 1-.094.61", fill: "#9DBA22" })));
-};
-
-const ServiceIcon = () => {
-    return (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default.createElement("g", { clipPath: "url(#clip0_911_3434)" },
-            React__default.createElement("path", { d: "M30.466 17.553c.714-.548.988-1.39.611-1.881s-1.261-.444-1.975.104c-.714.549-.988 1.391-.611 1.882s1.261.444 1.975-.105", fill: "#563960" }),
-            React__default.createElement("path", { d: "M30.122 7.72a2.2 2.2 0 0 1-.438.37 2.355 2.355 0 0 1-2.787-3.79l.022-.017a2.356 2.356 0 0 1 3.203 3.437", fill: "#E8E2E2" }),
-            React__default.createElement("path", { d: "M16.474 3.996c-.544-.568-1.058-1.45-1.082-2.29l-1.395.7a1.394 1.394 0 1 0 1.247 2.491l1.159-.583.259-.14a3 3 0 0 1-.188-.178", fill: "#E5395E" }),
-            React__default.createElement("path", { d: "M18.934 2.175a1.39 1.39 0 0 1-.77 1.246l-1.472.738-.256.138a2.52 2.52 0 0 1-1.189-1.331 2 2 0 0 1-.042-1.165l.353-.191 1.358-.68a1.392 1.392 0 0 1 2.018 1.245", fill: "#F9AF2B" }),
-            React__default.createElement("path", { d: "M5.507 6.695c-.407.705-1.475.86-2.425.362L2.975 7a3 3 0 0 1-.358-.248c.005-.012 1.05-.635 1.355-1.157.258-.44.25-1.335.268-1.38q.136.058.265.132.132.078.257.168c.795.585 1.128 1.515.745 2.18", fill: "#F44A52" }),
-            React__default.createElement("path", { d: "M4.343 5.848a2.9 2.9 0 0 1-1.285 1.197L2.976 7a2.6 2.6 0 0 1-.398-.28c-.692-.587-.965-1.442-.605-2.067.378-.655 1.323-.833 2.215-.463a3 3 0 0 1 .51.28c.029.485-.095.967-.355 1.378", fill: "#E8E2E2" }),
-            React__default.createElement("path", { d: "M1.87 17.24a1.12 1.12 0 1 0 0-2.24 1.12 1.12 0 0 0 0 2.24", fill: "#F9AF2B" }),
-            React__default.createElement("path", { d: "M30.123 7.72a2.2 2.2 0 0 1-.437.37c0-1.013-1.5-3.058-3.153-3.418q.162-.206.365-.372l.023-.018c1.65.45 3.052 2.16 3.202 3.438", fill: "#C3C7C9" }),
-            React__default.createElement("path", { d: "M25.295 17.4v9.637c0 2.13-1.745 3.225-3.855 3.518-2.707.375-8.128.375-10.835 0-2.11-.29-3.855-1.387-3.855-3.517v-9.637a3.86 3.86 0 0 1 1.354-2.93c.229-.194.412-.436.537-.71h14.767c.12.275.303.518.534.71q.16.135.303.29a3.85 3.85 0 0 1 1.05 2.64", fill: "#1B89E5" }),
-            React__default.createElement("path", { d: "M16.568 17.151h-1.093a1.58 1.58 0 0 0-1.58 1.58v.272a.34.34 0 0 1-.34.34h-.272a1.58 1.58 0 0 0-1.58 1.58v1.095a1.58 1.58 0 0 0 1.58 1.58h.272a.34.34 0 0 1 .34.34v.272a1.58 1.58 0 0 0 1.58 1.58h1.093a1.58 1.58 0 0 0 1.58-1.58v-.273a.34.34 0 0 1 .34-.34h.274a1.58 1.58 0 0 0 1.58-1.58v-1.092a1.58 1.58 0 0 0-1.58-1.58h-.273a.34.34 0 0 1-.341-.34v-.274a1.58 1.58 0 0 0-1.58-1.58", fill: "#fff" }),
-            React__default.createElement("path", { d: "M24.137 13.762H7.907a.47.47 0 0 1-.471-.47v-2.7a2.583 2.583 0 0 1 2.552-2.554c3.017-.1 9.05-.1 12.067 0a2.583 2.583 0 0 1 2.553 2.552v2.7a.473.473 0 0 1-.471.472", fill: "#E8E2E2" })),
-        React__default.createElement("defs", null,
-            React__default.createElement("clipPath", { id: "clip0_911_3434" },
-                React__default.createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getContents = (t) => {
-    return [
-        {
-            label: 'Personalized Experience',
-            description: 'Your name, gender, and date of birth help us provide tailored health advice and personalized care plans that fit your unique needs.',
-            icon: React__default.createElement(PersonalizeIcon, null),
-        },
-        {
-            label: 'Timely Health Updates',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default.createElement(HealthUpdateIcon, null),
-        },
-        {
-            label: 'Enhanced Security',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default.createElement(SecurityIcon, null),
-        },
-        {
-            label: 'Quick Customer Support',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default.createElement(CustomerSupportIcon, null),
-        },
-        {
-            label: 'Service Improvement',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default.createElement(ServiceIcon, null),
-        },
-    ];
-};
-const CollectInfoTextPopup = () => {
-    const [opened, setOpened] = React__default.useState(false);
-    useTranslations();
-    const contents = getContents();
-    const [mobileDragOffset, setMobileDragOffset] = useState(0);
-    const dragStartYRef = useRef(0);
-    const mobileDragOffsetRef = useRef(mobileDragOffset);
-    mobileDragOffsetRef.current = mobileDragOffset;
-    const throttleSetMobileDragOffset = useMemo(() => {
-        return throttle(setMobileDragOffset, 70);
-    }, []);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Text, { size: "p4", onClick: () => {
-                setOpened(true);
-                setMobileDragOffset(0);
-            }, color: "blue.6", style: {
-                cursor: 'pointer',
-            } },
-            React__default.createElement(Info, { size: 16, color: '#2D87F3', style: {
-                    verticalAlign: 'sub',
-                } }),
-            ' ',
-            "Why We Need Your Information?"),
-        React__default.createElement("style", { key: mobileDragOffset }, `
-        .collect-info-text-popup .mantine-Modal-inner {
-          transform: translateY(${Math.round(mobileDragOffset)}px);
-        }
-      `),
-        React__default.createElement(Modal, { opened: opened, onClose: () => setOpened(false), withCloseButton: false, styles: (theme) => ({
-                body: {
-                    padding: '32px 24px',
-                    position: 'relative',
-                    background: 'linear-gradient(180deg, #91CAFF 0%,  #CFE8FF 100px, #FFFFFF 200px)',
-                    [theme.fn.smallerThan('sm')]: {
-                        height: '100%',
-                    },
-                },
-                content: {
-                    [theme.fn.smallerThan('sm')]: {
-                        width: '100%',
-                        height: '100%',
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0,
-                        maxWidth: '100%',
-                        maxHeight: '100%',
-                    },
-                },
-                inner: {
-                    [theme.fn.smallerThan('sm')]: {
-                        padding: 0,
-                        left: 0,
-                        right: 0,
-                        top: 120,
-                        // transform: `translateY(${Math.round(mobileDragOffset)}px)`,
-                        display: 'block',
-                        transition: 'transform 70ms',
-                    },
-                },
-            }), className: "collect-info-text-popup" },
-            React__default.createElement(Box, { sx: (theme) => ({
-                    [theme.fn.largerThan('sm')]: {
-                        display: 'none',
-                    },
-                    padding: 8,
-                    width: '100%',
-                    cursor: 'grab',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                }), draggable: true, onDrag: (e) => {
-                    if (e.clientY < 0)
-                        return;
-                    throttleSetMobileDragOffset(e.clientY - dragStartYRef.current);
-                }, onDragStart: (e) => {
-                    dragStartYRef.current = e.clientY;
-                }, onDragEnd: (e) => {
-                    if (e.clientY - dragStartYRef.current > 100) {
-                        setMobileDragOffset(window.innerHeight);
-                        setTimeout(() => {
-                            setOpened(false);
-                        }, 100);
+                type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+            });
+        }
+        else {
+            const existRes = yield checkUserExist({ email });
+            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
+                let res;
+                if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                    res = yield registerBySendEmailOTP(email);
+                }
+                else {
+                    res = yield resendEmailOTP(email);
+                }
+                if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                    setErrMsg(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+                    return;
+                }
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        email,
+                        otpType: 'email',
+                        afterAction: 'forgot',
+                    },
+                });
+            }
+        }
+        goNext();
+    });
+    return (React__default.createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => {
+            e.preventDefault();
+            const password = e.currentTarget.password.value;
+            // call api to login with email and password, if fail then show error
+            if (phone) {
+                loginByPhonePassword(phone, password)
+                    .then((res) => {
+                    var _a;
+                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
                     }
                     else {
-                        throttleSetMobileDragOffset(0);
+                        setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
                     }
-                }, onTouchStart: (e) => {
-                    dragStartYRef.current = e.touches[0].clientY;
-                }, onTouchMove: (e) => {
-                    if (e.touches[0].clientY < 0)
-                        return;
-                    throttleSetMobileDragOffset(e.touches[0].clientY - dragStartYRef.current);
-                }, onTouchEnd: (e) => {
-                    if (e.changedTouches[0].clientY - dragStartYRef.current > 100) {
-                        setMobileDragOffset(window.innerHeight);
-                        setTimeout(() => {
-                            setOpened(false);
-                        }, 100);
+                })
+                    .catch(() => {
+                    setErrMsg('api error');
+                });
+            }
+            else {
+                loginByEmailPassword(email, password)
+                    .then((res) => {
+                    var _a;
+                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
                     }
                     else {
-                        throttleSetMobileDragOffset(0);
+                        setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
                     }
-                } },
-                React__default.createElement(Box, { sx: {
-                        border: '1.5px solid #ADB3BC',
-                        background: 'gray',
-                        borderRadius: 3,
-                        width: 44,
-                    } })),
-            React__default.createElement("div", { style: {
+                })
+                    .catch(() => {
+                    setErrMsg('api error');
+                });
+            }
+        } },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" },
+                "Welcome back!",
+                React__default.createElement("br", null),
+                "Enter your password"),
+            React__default.createElement(Text, { size: "p4" }, "\u0110\u0103ng nh\u1EADp b\u1EB1ng m\u1EADt kh\u1EA9u c\u1EE7a b\u1EA1n.")),
+        React__default.createElement(Stack, { mt: 24, spacing: 8 },
+            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
+            React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
-                React__default.createElement(Button, { variant: "white", sx: (theme) => ({
-                        width: 40,
-                        height: 40,
-                        padding: 8,
-                        background: 'white',
-                        borderRadius: '100%',
-                        [theme.fn.smallerThan('sm')]: {
-                            display: 'none',
-                        },
-                    }), onClick: () => setOpened(false) },
-                    React__default.createElement(ChevronLeft, null))),
-            React__default.createElement(BackgroundHeader, null),
-            React__default.createElement(Stack, { pos: "relative", mt: 100, spacing: 8, style: {
-                    zIndex: 1,
-                } },
-                React__default.createElement(Text, { size: "h4" }, "Why We Need Your Information"),
-                React__default.createElement(Accordion, { styles: {
-                        item: {
-                            borderBottomColor: '#E4E8EC',
-                            paddingBottom: 16,
-                            marginTop: 16,
-                        },
-                        control: {
-                            padding: 0,
-                        },
-                        content: {
-                            padding: 0,
-                            marginTop: 8,
-                        },
-                    } }, contents.map((item, index) => (React__default.createElement(Accordion.Item, { key: index, value: item.label },
-                    React__default.createElement(Accordion.Control, { icon: item.icon },
-                        React__default.createElement(Text, { size: "s3", weight: "semiBold" }, item.label)),
-                    React__default.createElement(Accordion.Panel, null,
-                        React__default.createElement(Text, { size: "p3" }, item.description))))))))));
+                React__default.createElement(Text, { size: "p4" }, "Forgot Password?"),
+                React__default.createElement(Text, { size: "s4", color: "blue.6", style: {
+                        cursor: 'pointer',
+                    }, onClick: resetPassword }, "Reset"))),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Sign In")));
+};
+
+const SSOPasswordForgotPhone = ({ hidden, }) => {
+    const [phone, setPhone] = React__default.useState('');
+    const [errMsg, setErrMsg] = React__default.useState('');
+    const { locale } = useSSOState();
+    const { addStep, goNext, setShareData } = useSSOSteps();
+    const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const { areaCode, phoneNumber } = splitPhone(phone);
+        const userExist = yield checkUserExist({ phone: phoneNumber });
+        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+            setShareData({
+                authMethod: 'phone',
+            });
+            let res;
+            if (!((_a = userExist._data) === null || _a === void 0 ? void 0 : _a.provider)) {
+                res = yield registerBySendZaloOTP(phoneNumber, areaCode);
+            }
+            else {
+                res = yield resendZaloOTP(phoneNumber, areaCode);
+            }
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                setErrMsg(((_b = res._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+                return;
+            }
+            setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
+            addStep({
+                type: SSOStepTypeType.OTP,
+                config: {
+                    phone,
+                    otpType: 'phone-zalo',
+                    afterAction: 'forgot',
+                },
+            });
+            goNext();
+        }
+        else {
+            setErrMsg(((_c = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+        }
+    });
+    const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e, _f;
+        const { areaCode, phoneNumber } = splitPhone(phone);
+        const userExist = yield checkUserExist({ phone: phoneNumber });
+        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+            setShareData({
+                authMethod: 'phone',
+            });
+            let res;
+            if (!((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider)) {
+                res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
+            }
+            else {
+                res = yield resendPhoneOTP(phoneNumber, areaCode);
+            }
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                setErrMsg(((_e = res._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+                return;
+            }
+            setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
+            addStep({
+                type: SSOStepTypeType.OTP,
+                config: {
+                    phone,
+                    otpType: 'phone-sms',
+                    afterAction: 'forgot',
+                },
+            });
+            goNext();
+        }
+        else {
+            setErrMsg(((_f = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _f === void 0 ? void 0 : _f[0]) || 'API error');
+        }
+    });
+    return (React__default.createElement("div", { style: {
+            display: hidden ? 'none' : 'block',
+        } },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Reset password"),
+            React__default.createElement(Text, { size: "p4" }, "Please provide the phone number you used to create your account.")),
+        React__default.createElement(Stack, { mt: 24, spacing: 16 },
+            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
+            errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
+            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
+            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS"))));
 };
 
+const CheckGrayIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M7.053 9.43 5.505 7.883a.48.48 0 0 0-.349-.142.47.47 0 0 0-.354.142.48.48 0 0 0-.145.351q0 .207.145.352l1.83 1.83q.18.18.421.18.24 0 .422-.18l3.709-3.71a.48.48 0 0 0 .142-.348.47.47 0 0 0-.142-.354.48.48 0 0 0-.351-.145.48.48 0 0 0-.352.145zm.948 4.903a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.012-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.666 8q0-1.315.499-2.47a6.4 6.4 0 0 1 1.353-2.01 6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.157.498 2.012 1.353t1.354 2.01q.498 1.156.499 2.47 0 1.314-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498m-.002-1q2.234 0 3.784-1.55T13.333 8t-1.55-3.783-3.784-1.55-3.783 1.55T2.666 8t1.55 3.783 3.783 1.55", fill: "#8C8C8C" })));
+const CheckGreenIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M7.053 9.43 5.505 7.883a.48.48 0 0 0-.349-.142.47.47 0 0 0-.354.142.48.48 0 0 0-.145.351q0 .207.145.352l1.83 1.83q.18.18.421.18.24 0 .422-.18l3.709-3.71a.48.48 0 0 0 .142-.348.47.47 0 0 0-.142-.354.48.48 0 0 0-.351-.145.48.48 0 0 0-.352.145zm.948 4.903a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.012-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.666 8q0-1.315.499-2.47a6.4 6.4 0 0 1 1.353-2.01 6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.157.498 2.012 1.353t1.354 2.01q.498 1.156.499 2.47 0 1.314-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498", fill: "#00B16A" })));
+const CheckRedIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "m8.001 8.703 2.049 2.048q.138.14.348.142a.47.47 0 0 0 .355-.142.48.48 0 0 0 .145-.35.48.48 0 0 0-.145-.352L8.703 8l2.05-2.049a.48.48 0 0 0 .141-.348.47.47 0 0 0-.141-.354.48.48 0 0 0-.352-.145.48.48 0 0 0-.351.145L8.001 7.298l-2.048-2.05a.48.48 0 0 0-.349-.14.47.47 0 0 0-.354.14.48.48 0 0 0-.145.352q0 .207.145.351l2.049 2.05-2.049 2.048a.48.48 0 0 0-.142.348.47.47 0 0 0 .142.354.48.48 0 0 0 .351.145.48.48 0 0 0 .352-.145zm.001 5.63a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.011-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.668 8q0-1.315.499-2.47A6.4 6.4 0 0 1 3.52 3.52a6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.156.498 2.012 1.353.855.855 1.354 2.01.499 1.156.499 2.47t-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498", fill: "#F44D2C" })));
+
 const SSOPasswordWithConfirm = (_a) => {
     var { form } = _a, props = __rest(_a, ["form"]);
     const [atLeast8Chars, setAtLeast8Chars] = React__default.useState(undefined);
@@ -1304,31 +1688,32 @@ const SSOPasswordWithConfirm = (_a) => {
         if (typeof password === 'undefined')
             return;
         setAtLeast8Chars(password.length >= 8);
-        setAtLeastOneUpper(!!password.match(/[A-Z]/));
+        setAtLeastOneUpper(!!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/));
     }, [password]);
     return (React__default.createElement(Stack, Object.assign({ spacing: 12 }, props),
         React__default.createElement(PasswordInput, Object.assign({ name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", label: "Password", required: true, withAsterisk: true }, form.getInputProps('password'))),
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "n1" },
-                atLeast8Chars ? (React__default.createElement(CheckCircle, { color: theme.colors.green600 })) : typeof atLeast8Chars === 'undefined' ? (React__default.createElement(CheckCircle, null)) : (React__default.createElement(CircleBorder, { color: theme.colors.red600, isSolid: true })),
+                atLeast8Chars ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
                 ' ',
                 "At least 8 characters."),
             React__default.createElement(Text, { size: "n1" },
-                atLeastOneUpper ? (React__default.createElement(CheckCircle, { color: theme.colors.green600 })) : typeof atLeastOneUpper === 'undefined' ? (React__default.createElement(CheckCircle, null)) : (React__default.createElement(CircleBorder, { color: theme.colors.red600, isSolid: true })),
+                atLeastOneUpper ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
                 ' ',
-                "At least one uppercase letter and one number.")),
+                "At least one uppercase letter, one lowercase letter, and one number.")),
         React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: "X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u", label: "Confirm Password", required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
 };
 
 const SSOPasswordForgotSetup = ({ hidden }) => {
-    const { onClose } = useSSOState();
+    const { steps, goBack, currentStepIndex, addStep, goNext } = useSSOSteps();
     const form = useForm({
         validate: yupResolver(yup.object().shape({
             password: yup
                 .string()
                 .required('Password is required')
-                .min(8)
-                .matches(/[A-Z]/, 'Password must contain at least one uppercase letter'),
+                .min(8, ' ')
+                .max(50, ' ')
+                .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, ' '),
             confirmPassword: yup
                 .string()
                 .required('Confirm password is required')
@@ -1338,14 +1723,36 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         })),
     });
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         const { password, confirmPassword } = values;
         if (password.length >= 8 &&
-            password.match(/[A-Z]/) &&
+            password.length <= 50 &&
+            password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
             password === confirmPassword) {
             const res = yield resetPassword(password, confirmPassword);
             if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                // close popup
-                onClose === null || onClose === void 0 ? void 0 : onClose();
+                showNotification({
+                    type: 'success',
+                    message: 'Password has been reset successfully',
+                });
+                // back to login step
+                const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
+                const foundPasswordStep = steps.find((step) => step.type === SSOStepTypeType.PASSWORD);
+                const diffIndex = currentStepIndex - foundPasswordIndex;
+                for (let i = 0; i < diffIndex; i++) {
+                    goBack();
+                }
+                goBack();
+                addStep(foundPasswordStep);
+                goNext();
+                // onClose?.()
+            }
+            else {
+                // toast error message
+                showNotification({
+                    type: 'danger',
+                    message: ((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error',
+                });
             }
         }
     });
@@ -1357,8 +1764,8 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Setup your password"),
                 React__default.createElement(Text, { size: "p4" }, "Set up your login password and other details to complete the registration process.")),
             React__default.createElement(SSOPasswordWithConfirm, { form: form }),
-            React__default.createElement(CollectInfoTextPopup, null),
-            React__default.createElement(Button, { size: "lg", variant: "primary", fullWidth: true }, "Save"))));
+            React__default.createElement(CollectInfoText, null),
+            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, "Save"))));
 };
 
 const SSOPhoneVerify = ({ hidden, }) => {
@@ -1378,18 +1785,21 @@ const SSOPhoneVerify = ({ hidden, }) => {
                         phone,
                     },
                 });
+                goNext();
             }
             else {
-                registerBySendZaloOTP(phoneNumber, areaCode);
+                resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
                 addStep({
                     type: SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-zalo',
+                        isUpdatePhone: true,
+                        afterAction: 'setup',
                     },
                 });
+                goNext();
             }
-            goNext();
         }
         else {
             setErrMsg(((_c = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
@@ -1400,66 +1810,40 @@ const SSOPhoneVerify = ({ hidden, }) => {
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.is_pass) && ((_e = userExist._data) === null || _e === void 0 ? void 0 : _e.is_status) === 'Active') {
+            if ((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.is_pass) {
                 addStep({
                     type: SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
                     },
                 });
+                goNext();
             }
             else {
-                registerBySendPhoneOTP(phoneNumber, areaCode);
+                const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
+                if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                    setErrMsg(((_e = res === null || res === void 0 ? void 0 : res._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+                    return;
+                }
                 addStep({
                     type: SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-sms',
+                        isUpdatePhone: true,
+                        afterAction: 'setup',
                     },
                 });
+                goNext();
             }
-            goNext();
         }
         else {
             setErrMsg(((_f = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _f === void 0 ? void 0 : _f[0]) || 'API error');
         }
     });
-    return (React__default.createElement("form", { style: {
+    return (React__default.createElement("div", { style: {
             display: hidden ? 'none' : 'block',
-        }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
-            var _g, _h, _j;
-            e.preventDefault();
-            const email = e.currentTarget.email.value;
-            const existRes = yield checkUserExist({ email });
-            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
-                if (((_g = existRes._data) === null || _g === void 0 ? void 0 : _g.is_pass) &&
-                    ((_h = existRes._data) === null || _h === void 0 ? void 0 : _h.is_status) === 'Active') {
-                    // go to password screen
-                    addStep({
-                        type: SSOStepTypeType.PASSWORD,
-                        config: {
-                            email,
-                        },
-                    });
-                    goNext();
-                }
-                else {
-                    // go to register screen
-                    registerBySendEmailOTP(email);
-                    addStep({
-                        type: SSOStepTypeType.OTP,
-                        config: {
-                            email,
-                            otpType: 'email',
-                        },
-                    });
-                    goNext();
-                }
-            }
-            else {
-                setErrMsg(((_j = existRes._messages) === null || _j === void 0 ? void 0 : _j[0]) || 'api error');
-            }
-        }) },
+        } },
         React__default.createElement(Stack, { spacing: 24 },
             React__default.createElement(Stack, { spacing: 8 },
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
@@ -1469,56 +1853,124 @@ const SSOPhoneVerify = ({ hidden, }) => {
                     React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
                 React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
                 React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
-            React__default.createElement(CollectInfoTextPopup, null))));
+            React__default.createElement(CollectInfoText, null))));
 };
 
+const FemaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M9.907.476C7.828.428 5.535 2.36 4.817 4.593c-1.192 3.7.154 9.554-1.391 13.089l10.542-.056c.649-3.603.786-7.28.41-10.922-.159-1.46-.4-3.184-1.33-4.294C12.02 1.184 11.02.624 10.514.514a2.4 2.4 0 0 0-.607-.038", fill: "#262626" }),
+    React__default.createElement("path", { d: "M14.224 18.144H5.532c-1.44 0-2.196-.447-1.206-1.493a7 7 0 0 1 .531-.502c.537-.457 1.743-1.437 2.57-1.921.513-.3.894-.78 1.068-1.348q.108-.418.143-.847h2.48q.035.43.143.847a2.36 2.36 0 0 0 1.066 1.348c.83.484 2.034 1.464 2.572 1.921q.28.238.532.502c.99 1.046.233 1.493-1.207 1.493", fill: "#FFB497" }),
+    React__default.createElement("path", { d: "M15.841 17.15c.41.686.031 1.06-.556 1.401-.604.35-2.454 1.086-5.407 1.086S5.076 18.9 4.471 18.55c-.587-.34-.965-.715-.555-1.4q.327-.538.76-.985a9.3 9.3 0 0 1 2.64-1.846l2.59 2.726 2.573-2.707a9.3 9.3 0 0 1 2.6 1.827h.003c.287.297.542.628.759.985", fill: "#FC488D" }),
+    React__default.createElement("path", { d: "M6.037 7.275a.95.95 0 0 0-.763-.012c-.442.225-.502.809-.353 1.227.19.538.782 1.076 1.414.871z", fill: "#FFB497" }),
+    React__default.createElement("path", { d: "M6.334 8.688a.23.23 0 0 1-.192-.104.66.66 0 0 0-.514-.249.23.23 0 0 1-.003-.46c.023 0 .6-.005.902.457a.23.23 0 0 1-.193.356m4.929 4.192c-.519.285-1.054.501-1.384.501s-.865-.216-1.383-.501q.108-.418.143-.847h2.481q.034.43.143.847", fill: "#FF977B" }),
+    React__default.createElement("path", { d: "M13.564 6.966c-.181-1.907-1.68-4.121-2.63-3.686a.18.18 0 0 1-.194-.028C9.154 1.846 9.156 6.759 6.035 7.274c.071 2.186.776 3.652 1.512 4.224.667.52 1.781 1.116 2.33 1.116s1.664-.596 2.332-1.116c.77-.6 1.577-2.186 1.355-4.532", fill: "#FCCAAF" }),
+    React__default.createElement("path", { d: "M11.786 7.978a.387.387 0 1 0 0-.775.387.387 0 0 0 0 .775", fill: "#404040" }),
+    React__default.createElement("path", { d: "M11.098 7.092a.85.85 0 0 1 .417-.26c.15-.04.307-.048.46-.022q.218.034.413.136.069.03.143.03l.045-.001a.157.157 0 0 1 .163.153.2.2 0 0 1-.012.065.34.34 0 0 1-.207.188.45.45 0 0 1-.323-.02 1.1 1.1 0 0 0-.287-.072.8.8 0 0 0-.268.014.5.5 0 0 0-.207.104l-.018.015a.23.23 0 0 1-.319-.33m-.157-1.074c.35-.09.711-.116 1.07-.076a2.5 2.5 0 0 1 1.012.349.179.179 0 0 1-.177.31 2.2 2.2 0 0 0-.875-.253 2.5 2.5 0 0 0-.908.113.23.23 0 0 1-.134-.44z", fill: "#262626" }),
+    React__default.createElement("path", { d: "M7.971 7.978a.387.387 0 1 0 0-.775.387.387 0 0 0 0 .775", fill: "#404040" }),
+    React__default.createElement("path", { d: "M8.324 7.409a.5.5 0 0 0-.207-.105.8.8 0 0 0-.268-.014 1.1 1.1 0 0 0-.288.073.45.45 0 0 1-.322.019.34.34 0 0 1-.208-.188.158.158 0 0 1 .15-.217l.047.001q.075 0 .143-.03.195-.102.412-.136c.153-.026.31-.018.46.022a.85.85 0 0 1 .416.26.23.23 0 0 1-.317.33zm.37-.948a2.5 2.5 0 0 0-.907-.113 2.2 2.2 0 0 0-.876.253.179.179 0 0 1-.176-.31h.001a2.5 2.5 0 0 1 1.013-.35c.358-.039.72-.013 1.069.077a.23.23 0 0 1-.11.447l-.01-.003z", fill: "#262626" }),
+    React__default.createElement("path", { d: "M10.887 9.971a.15.15 0 0 0-.19-.094l-.012.005a.2.2 0 0 1-.118.004c-.046-.01-.108-.032-.193-.05a.6.6 0 0 0-.397.053.6.6 0 0 0-.397-.053c-.084.019-.145.041-.192.05a.2.2 0 0 1-.118-.004l-.012-.004a.15.15 0 0 0-.132.265.5.5 0 0 0 .283.082c.092 0 .165-.013.217-.012.053.001.152.115.188.145a.28.28 0 0 0 .36-.033c.02-.024.101-.111.155-.112.054 0 .126.012.218.012a.5.5 0 0 0 .282-.082.15.15 0 0 0 .058-.172", fill: "#F44D2C" }),
+    React__default.createElement("path", { d: "M10.142 8.676a.23.23 0 0 0-.173.078.4.4 0 0 1-.092.015.4.4 0 0 1-.093-.015.23.23 0 0 0-.403.152c0 .32.49.324.496.324.005 0 .494-.004.494-.324a.23.23 0 0 0-.23-.23", fill: "#FF977B" }),
+    React__default.createElement("path", { d: "M10.026 10.691h-.294a.23.23 0 1 0 0 .46h.294a.23.23 0 0 0 0-.46", fill: "#F44D2C" }),
+    React__default.createElement("path", { d: "M11.796 18.906a.45.45 0 0 1-.402-.628c.7-1.683-.73-4.184-.36-6.07a9 9 0 0 0 1.09-.687c.771-.6 1.578-2.186 1.356-4.532-.178-1.869-1.621-4.033-2.574-3.71l-.008.001-.007-.005a.013.013 0 0 1 .001-.016c.267-.299.343-1.113-.318-1.782-.498-.505-.665-.992-.418-.979 1.971.11 4.022 2.014 4.7 4.117.79 2.454.252 5.67.611 8.706.23 1.94 1.62 5.74-3.671 5.585", fill: "#262626" })));
+const MaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M10.334 16.266c-3.177 0-3.932-2.198-3.444-2.426.155-.073.312-.14.465-.21.487-.136.801-.72.966-1.133s.213-.762.219-.997l.19.37q.102.06.21.107a3.27 3.27 0 0 0 2.789 0c.072-.031.532-.437.599-.477l-.1.498c.005.226.063.286.14.499.222.59.41.89.955 1.138q.226.1.456.205c.153.071.017 2.426-3.445 2.426", fill: "#FF977B" }),
+    React__default.createElement("path", { d: "M17.623 17.018c.503.8.038 1.233-.68 1.63-.74.407-2.994 1.263-6.609 1.263s-5.869-.856-6.61-1.264c-.717-.396-1.182-.83-.68-1.63.43-.685 1.662-2.158 3.845-3.177.155-.073.312-.14.466-.21.695 1.15 2.091 1.4 2.985 1.4s2.286-.25 2.983-1.395q.225.1.456.205c2.183 1.019 3.415 2.492 3.844 3.178", fill: "#2D87F3" }),
+    React__default.createElement("path", { d: "M12.852 12.533c-.72.35-1.573.539-2.447.543a5.8 5.8 0 0 1-2.458-.517c.117-.22.18-.453.188-.688l.003-.002q.143.06.296.107c.617.205 1.29.312 1.972.312a6.3 6.3 0 0 0 2.269-.419l.002.002c.007.226.066.45.175.662", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M14.755 7.579H5.61c-.213-2.439.17-4.883 1.27-5.997a.97.97 0 0 1 .98-.242c.205.066.731.01.906-.234.14-.197.714-.443 1.08-.104a.5.5 0 0 0 .334.127h.003a.52.52 0 0 0 .335-.127c.365-.339.939-.093 1.078.104.176.245.703.3.908.234a.97.97 0 0 1 .98.242c1.1 1.114 1.482 3.558 1.27 5.997", fill: "#404040" }),
+    React__default.createElement("path", { d: "M14.02 6.912a1 1 0 0 1 .728-.007c.5.203.641.795.438 1.417-.2.617-.906 1.045-1.517.826-.179-.587-.062-1.716.351-2.236M6.607 9.147c-.611.219-1.317-.208-1.517-.825-.203-.622-.063-1.214.437-1.417a1 1 0 0 1 .728.007c.612.412.71 1.838.352 2.235", fill: "#FF977B" }),
+    React__default.createElement("path", { d: "M13.887 8.263a.156.156 0 0 1-.125-.25 1.05 1.05 0 0 1 .804-.417.156.156 0 1 1-.003.312h-.001a.73.73 0 0 0-.55.292.16.16 0 0 1-.125.063m-7.498-.008a.16.16 0 0 1-.125-.063.7.7 0 0 0-.545-.282.16.16 0 0 1-.16-.151.156.156 0 0 1 .15-.161 1.02 1.02 0 0 1 .805.408.156.156 0 0 1-.125.25z", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M12.353 3.765c-.545.131-.883.448-2.2.448s-1.656-.317-2.201-.448c-1.02-.247-1.649 2.672-1.647 3.883.001.18.028.696.054 1.2l.029.493q.03.34.152.66c1.108 3.11 6.118 3.096 7.347-.04.002-.085.015-.324.032-.62l.028-.493c.026-.504.053-1.02.053-1.2.002-1.211-.625-4.13-1.647-3.883", fill: "#FFB497" }),
+    React__default.createElement("path", { d: "M12.348 6.946a.359.359 0 1 0-.717 0v.14a.359.359 0 1 0 .717 0zm-4.421.141a.359.359 0 0 0 .718 0v-.14a.359.359 0 1 0-.718 0z", fill: "#595959" }),
+    React__default.createElement("path", { d: "M11.344 6.96a.2.2 0 0 1-.061-.013.15.15 0 0 1-.082-.198c.081-.196.348-.278.557-.312.381-.062.889-.017 1.102.228a.156.156 0 1 1-.236.206c-.1-.116-.446-.174-.772-.132-.24.032-.35.102-.363.13a.16.16 0 0 1-.145.091", fill: "#404040" }),
+    React__default.createElement("path", { d: "M10.137 8.963c-.008 0-.772-.033-.772-.373a.156.156 0 0 1 .305-.048c.147.068.306.105.467.11.163-.005.324-.042.472-.11a.156.156 0 0 1 .305.048c0 .34-.77.373-.777.373", fill: "#FF6F4D" }),
+    React__default.createElement("path", { d: "M11.122 6.393a.157.157 0 0 1-.051-.304c.687-.234 1.688-.344 2.26-.03a.156.156 0 0 1-.15.274c-.463-.254-1.38-.163-2.009.052a.2.2 0 0 1-.05.008m-2.19.572a.16.16 0 0 1-.144-.097c-.013-.027-.123-.097-.363-.129-.325-.043-.672.016-.772.131a.156.156 0 1 1-.236-.205c.214-.245.721-.29 1.103-.228.209.034.475.116.556.311a.156.156 0 0 1-.144.217m.222-.571a.2.2 0 0 1-.05-.009c-.629-.215-1.546-.306-2.009-.051a.156.156 0 1 1-.15-.274c.572-.315 1.572-.206 2.26.03a.156.156 0 0 1-.05.304", fill: "#404040" }),
+    React__default.createElement("path", { d: "m11.12 9.547-.019.001a8 8 0 0 1-1.928 0 .156.156 0 1 0-.037.31c.665.08 1.337.08 2.003 0a.156.156 0 0 0-.019-.31", fill: "#D84023" })));
+
 // always has name, gender dob
 const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
     const { locale = 'vi-VN' } = useSSOState();
-    return (React__default.createElement(Stack, { spacing: 8 },
-        needPhone && (React__default.createElement(Input.Wrapper, Object.assign({ label: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i", withAsterisk: true }, form.getInputProps('phone')),
-            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
-                    form.setFieldValue('phone', value);
-                }, isError: !!form.getInputProps('phone').error, required: true, name: "phone" }))),
-        // email is disabled
+    return (React__default.createElement(Stack, { spacing: 12 },
+        needPhone && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Input.Wrapper, Object.assign({ label: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i", withAsterisk: true }, form.getInputProps('phone')),
+                React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
+                        form.setFieldValue('phone', value);
+                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone" })),
+            React__default.createElement(Group, { spacing: 24 },
+                React__default.createElement(Text, { size: "p4" }, "Nh\u1EADn OTP qua"),
+                React__default.createElement(Radio.Group, Object.assign({ name: "otpMethod", styles: {
+                        root: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flexWrap: 'wrap',
+                            gap: 24,
+                        },
+                    } }, form.getInputProps('otpMethod')),
+                    React__default.createElement(Radio, { value: "zalo", label: "Zalo", styles: {
+                            label: {
+                                paddingLeft: 8,
+                            },
+                        } }),
+                    React__default.createElement(Radio, { value: "sms", label: "SMS", styles: {
+                            label: {
+                                paddingLeft: 8,
+                            },
+                        } }))))),
         needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: "Email", disabled: isEmailDisable }, form.getInputProps('email')))),
-        React__default.createElement(Input, Object.assign({ name: "name", label: "Name", withAsterisk: true, required: true }, form.getInputProps('name'))),
+        React__default.createElement(Input, Object.assign({ name: "name", label: "Name", withAsterisk: true, required: true, placeholder: "Enter your name" }, form.getInputProps('name'))),
         React__default.createElement(Input.Wrapper, Object.assign({ label: "Gender", withAsterisk: true }, form.getInputProps('gender')),
             React__default.createElement(Group, null,
-                React__default.createElement(Button, { type: "button", sx: {
-                        flex: 1,
+                React__default.createElement(Button, { type: "button", styles: {
+                        root: {
+                            flex: 1,
+                        },
+                        leftIcon: {
+                            marginRight: 8,
+                        },
+                        inner: {
+                            justifyContent: 'start',
+                        },
                     }, variant: form.getInputProps('gender').value === 'female'
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    } }, "Female"),
-                React__default.createElement(Button, { type: "button", sx: {
-                        flex: 1,
+                    }, leftIcon: React__default.createElement(FemaleIcon, null) }, "Female"),
+                React__default.createElement(Button, { type: "button", styles: {
+                        root: {
+                            flex: 1,
+                        },
+                        leftIcon: {
+                            marginRight: 8,
+                        },
+                        inner: {
+                            justifyContent: 'start',
+                        },
                     }, variant: form.getInputProps('gender').value === 'male'
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    } }, "Male"))),
-        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: "Birthday", withAsterisk: true, required: true }, form.getInputProps('dob')))));
+                    }, leftIcon: React__default.createElement(MaleIcon, null) }, "Male"))),
+        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: "Birthday", withAsterisk: true, required: true, placeholder: "Enter your birthday" }, form.getInputProps('dob')))));
 };
 
 const SSOSetupScreen = ({ hidden, index, }) => {
     const { onClose, source } = useSSOState();
-    const { steps } = useSSOSteps();
+    const { goNext, steps, addStep, shareData } = useSSOSteps();
+    const [errMsg, setErrMsg] = React__default.useState('');
     const currentStep = steps[index];
     const config = currentStep === null || currentStep === void 0 ? void 0 : currentStep.config;
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
-    const isEmailDisable = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && !!(config === null || config === void 0 ? void 0 : config.disabledEmail);
     const needPass = !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.is_pass);
     const needPhone = !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at);
-    const needEmail = !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || isEmailDisable;
     // const isNew = !!userInfo?.is_new
+    const authMethod = shareData === null || shareData === void 0 ? void 0 : shareData.authMethod;
+    const authFlow = shareData === null || shareData === void 0 ? void 0 : shareData.authFlow;
+    const isEmailDisable = authMethod === 'google' || authMethod === 'mail';
+    const needEmail = authFlow !== 'verify-phone';
     const form = useForm({
-        initialValues: Object.assign({}, (needEmail
+        initialValues: Object.assign(Object.assign({}, (needPhone
             ? {
-                email: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || '',
+                otpMethod: 'zalo',
             }
-            : {})),
+            : {})), { dob: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.birthday) ? new Date(userInfo.birthday) : undefined, name: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || undefined, email: isEmailDisable ? (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || undefined : undefined }),
         validateInputOnBlur: true,
         validate: yupResolver(yup.object().shape(Object.assign(Object.assign(Object.assign(Object.assign({}, (needPass
             ? {
@@ -1526,7 +1978,8 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                     .string()
                     .required('Password is required')
                     .min(8, ' ')
-                    .matches(/[A-Z]/, ' '),
+                    .max(50, ' ')
+                    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, ' '),
                 confirmPassword: yup
                     .string()
                     .required('Confirm password is required')
@@ -1537,6 +1990,10 @@ const SSOSetupScreen = ({ hidden, index, }) => {
             : {})), (needPhone
             ? {
                 phone: yup.string().required('Phone number is required'),
+                otpMethod: yup
+                    .string()
+                    .required('OTP method is required')
+                    .oneOf(['zalo', 'sms']),
             }
             : {})), (needEmail
             ? {
@@ -1548,9 +2005,10 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                 .oneOf(['male', 'female']), dob: yup.date().required('Date of birth is required'), name: yup.string().required('Name is required') }))),
     });
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const { password, confirmPassword, phone, gender, name, dob } = values;
+        var _a, _b, _c, _d;
+        const { password, confirmPassword, phone, gender, name, dob, otpMethod } = values;
         const { phoneNumber, areaCode } = splitPhone(phone || '');
+        // validate only, delay set data to after otp
         const res = yield updateUserInfo({
             name,
             birthday: dayjs(dob).format('YYYY-MM-DD'),
@@ -1561,15 +2019,86 @@ const SSOSetupScreen = ({ hidden, index, }) => {
             area_code: areaCode,
             gender: gender === 'male' ? 1 : 0,
             source,
+            validate: 'true',
         });
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            setCookie(BEARER_TOKEN_COOKIE$1, (_a = res._data) === null || _a === void 0 ? void 0 : _a.token, {
-                domain: window.location.hostname === 'localhost'
-                    ? 'localhost'
-                    : `.${domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
-                expires: new Date(res._data.expire_in * 1000).toUTCString(),
-            });
+            // if need phone and has phone then start phone verify step, close after done
+            if (needPhone && phone) {
+                const setupData = {
+                    name,
+                    birthday: dayjs(dob).format('YYYY-MM-DD'),
+                    email: values.email,
+                    password,
+                    confirm_password: confirmPassword,
+                    phone_number: phoneNumber,
+                    area_code: areaCode,
+                    gender: gender === 'male' ? 1 : 0,
+                    source,
+                };
+                if (otpMethod === 'zalo') {
+                    const res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
+                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                        setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        return;
+                    }
+                    addStep({
+                        type: SSOStepTypeType.OTP,
+                        config: {
+                            phone,
+                            otpType: 'phone-zalo',
+                            isUpdatePhone: true,
+                            afterAction: 'submitSetup',
+                            setupData,
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
+                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                        setErrMsg(((_b = res === null || res === void 0 ? void 0 : res._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+                        return;
+                    }
+                    addStep({
+                        type: SSOStepTypeType.OTP,
+                        config: {
+                            phone,
+                            otpType: 'phone-sms',
+                            isUpdatePhone: true,
+                            afterAction: 'submitSetup',
+                            setupData,
+                        },
+                    });
+                    goNext();
+                }
+            }
+            else {
+                // close?
+                const res = yield updateUserInfo({
+                    name,
+                    birthday: dayjs(dob).format('YYYY-MM-DD'),
+                    email: values.email,
+                    password,
+                    confirm_password: confirmPassword,
+                    phone_number: phoneNumber,
+                    area_code: areaCode,
+                    gender: gender === 'male' ? 1 : 0,
+                    source,
+                    validate: '',
+                });
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                }
+                else {
+                    setErrMsg(((_c = res._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+                    return;
+                }
+            }
+        }
+        else {
+            // toast error message
+            setErrMsg(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
         }
     });
     return (React__default.createElement("form", { style: {
@@ -1581,7 +2110,8 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                 React__default.createElement(Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
             needPass && React__default.createElement(SSOPasswordWithConfirm, { form: form }),
             React__default.createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form }),
-            React__default.createElement(CollectInfoTextPopup, null),
+            React__default.createElement(CollectInfoText, null),
+            errMsg && (React__default.createElement(Text, { color: "red.6", size: "p4" }, errMsg)),
             React__default.createElement(Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone ? 'Verify Phone Number' : 'Save'))));
 };
 
@@ -1612,11 +2142,29 @@ const SSOScreenRenderer = () => {
     })));
 };
 
-const SSOV2 = ({ onClose, locale, source = 'default' }) => {
-    return (React__default.createElement(SSOStateProvider, { onClose: onClose, locale: locale, source: source },
-        React__default.createElement(SSOStepsProvider, null,
+const SSOV2 = ({ onClose: onCloseProps, locale, source = 'default', defaultSteps, }) => {
+    const { isOpen, setOpen, returnUrl, setMounted } = useSSOV2Store();
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+        };
+    }, []);
+    if (!isOpen) {
+        return null;
+    }
+    const onClose = (success) => {
+        if (success && returnUrl) {
+            window.location.href = returnUrl;
+            return;
+        }
+        setOpen(false);
+        onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
+    };
+    return createPortal(React__default.createElement(SSOStateProvider, { onClose: onClose, locale: locale, source: source },
+        React__default.createElement(SSOStepsProvider, { defaultSteps: defaultSteps },
             React__default.createElement(SSOPopupWrapper, { opened: true, onClose: onClose },
-                React__default.createElement(SSOScreenRenderer, null)))));
+                React__default.createElement(SSOScreenRenderer, null)))), getPopupWrapperDom());
 };
 
 export { SSOV2 };