@hhgtech/hhg-components 1.29.110 → 1.29.111

package/build/esm/ssoV2.js

@@ -0,0 +1,1622 @@
+import React__default, { createContext, useState, useEffect, useRef, useMemo } from 'react';
+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 { 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 { setCookie } from './miscCookieHelper.js';
+import { theme } from './miscTheme.js';
+import { domainLocales } from './constantsDomainLocales.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 '@mantine/carousel';
+import 'classnames';
+import './useUniqueId-7d9bfd02.js';
+import './translationsContext-b39ae826.js';
+import 'string-format';
+
+const SSOStateContext = createContext({
+    locale: LOCALE.Vietnam,
+    onClose: () => false,
+    source: 'default',
+});
+const SSOStateProvider = ({ children, locale = LOCALE.Vietnam, onClose, source = 'default', }) => {
+    return (React__default.createElement(SSOStateContext.Provider, { value: {
+            locale,
+            onClose,
+            source,
+        } }, 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: [
+        {
+            type: SSOStepTypeType.FIRST,
+        },
+    ],
+    setSteps: () => false,
+    goNext: () => false,
+    goBack: () => false,
+    addStep: () => false,
+});
+const SSOStepsProvider = ({ children }) => {
+    const [steps, setSteps] = useState([
+        {
+            type: SSOStepTypeType.FIRST,
+        },
+    ]);
+    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));
+};
+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,
+                        background: 'white',
+                        borderRadius: '100%',
+                    }, onClick: goBack },
+                    React__default.createElement(ChevronLeft, null))),
+                showLogo && (React__default.createElement(LogoIcon, { type: logoType, height: 32, width: 'unset' })),
+                showClose && (React__default.createElement(Button, { variant: "white", style: {
+                        width: 40,
+                        height: 40,
+                        padding: 8,
+                        background: 'white',
+                        borderRadius: '100%',
+                    }, onClick: onCloseClick },
+                    React__default.createElement(Close, null)))),
+            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"))));
+};
+
+const SSO_V2_PATHS = {
+    LOGIN_BY_SOCIAL: 'member/social-login',
+    EMAIL: {
+        REGISTER_BY_SEND_OTP: 'login/login-with-email',
+        LOGIN_BY_PASSWORD: 'member/login',
+        VERIFY_BY_OTP: 'login/email-verify-code',
+        SEND_OTP: 'login/email-resend-otp-code', // FOR RESEND OTP IN CASE FAIL
+    },
+    PHONE: {
+        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'
+    },
+    ZALO: {
+        REGISTER_BY_SEND_OTP: 'login/login-with-zalo',
+        SEND_OTP: 'login/zalo/sent-otp',
+        VERIFY_BY_OTP: 'login/zalo-verify-code'
+    },
+    RESET_PASSWORD: 'login/reset-password',
+    CHECK_USER_EXIST: 'member/check-user-exist',
+    UPDATE_USER_INFO: 'login/update-first-info',
+};
+
+const locale = process.env.UNIFY_LOCALE || 'vi-VN';
+const websiteId = LOCALE_SPECS[locale].SITE_ID;
+LOCALE_SPECS[locale].PHONE;
+const allAvailableAreaCodes = Object.keys(LOCALE_SPECS).map((locale) => LOCALE_SPECS[locale].PHONE);
+const getSSOV2ApiUrl = (path) => {
+    return `${getCurrentSsoUrl(locale)}/api/v2/${path}`;
+};
+const getSSOApiUrl = (path) => {
+    return `${getCurrentSsoUrl(locale)}/api/${path}`;
+};
+const BEARER_TOKEN_COOKIE = 'hhg_user_token';
+// NOTICE: RUN ONLY CLIENT SIDE
+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];
+    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);
+    }
+    catch (error) {
+        console.error(error);
+        return null;
+    }
+    return response === null || response === void 0 ? void 0 : response.json();
+});
+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];
+    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);
+    }
+    catch (error) {
+        console.error(error);
+        return null;
+    }
+    return response === null || response === void 0 ? void 0 : response.json();
+});
+const resetPassword = (password, confirmPassword) => __awaiter(void 0, void 0, void 0, function* () {
+    return fetchSSOV2Api(SSO_V2_PATHS.RESET_PASSWORD, {
+        method: 'POST',
+        body: JSON.stringify({
+            "password": password,
+            "confirm-password": confirmPassword
+        }),
+    });
+});
+// "email":"kenny_test2201_11@mailinator.com"
+// "phone_number":"906911910"
+const checkUserExist = ({ email, phone // no +
+ }) => __awaiter(void 0, void 0, void 0, function* () {
+    // "provider": "email",
+    // "is_pass": true,
+    // "is_status": "Active"
+    const formData = new FormData();
+    if (email) {
+        formData.append('email', email);
+    }
+    else {
+        formData.append('phone_number', phone);
+    }
+    return fetchSSOV2Api(SSO_V2_PATHS.CHECK_USER_EXIST, {
+        method: 'POST',
+        body: formData
+    });
+});
+// "name": "Huy Tran 888",
+// "birthday": "1989-04-26",
+// "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 
+// "area_code":"+84", // require khi có phone number
+// "gender": 1,
+// "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]) {
+            formData.append(key, data[key]);
+        }
+    });
+    return fetchSSOV2Api(SSO_V2_PATHS.UPDATE_USER_INFO, {
+        method: 'POST',
+        body: formData
+    });
+});
+const GoogleAuthClientId = isProduction ? '289442006438-040a42cbidr6v5d178f3iqi9q95821r3.apps.googleusercontent.com' : '289442006438-cihobuq1h3r4426pur7u0e43fqdnep59.apps.googleusercontent.com';
+const FacebookAppId = '2759888574045636';
+
+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
+    });
+});
+const resendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('email', email);
+    return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.SEND_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+const verifyByEmailOTP = (email, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('email', email);
+    formData.append('code', otpCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.VERIFY_BY_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+
+const SSOEmailScreen = ({ hidden, }) => {
+    const [errMsg, setErrMsg] = React__default.useState('');
+    const { addStep, goNext } = useSSOSteps();
+    return (React__default.createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            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') {
+                    // 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(((_c = existRes._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'api error');
+            }
+        }) },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Continue with email"),
+            React__default.createElement(Text, { size: "p4" }, "S\u1EED d\u1EE5ng email c\u1EE7a b\u1EA1n \u0111\u1EC3 ti\u1EBFp t\u1EE5c \u0111\u0103ng nh\u1EADp ho\u1EB7c \u0111\u0103ng k\u00FD")),
+        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
+        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 registerBySendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    formData.append('website_id', websiteId);
+    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.REGISTER_BY_SEND_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+// "phone_number": "906911910",
+// "area_code":"+84",
+const resendPhoneOTP = (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.SEND_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+// "otp_code":"212616",
+// "phone_number": "906911910",
+// "area_code":"+84"
+const verifyByPhoneOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    formData.append('otp_code', otpCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.PHONE.VERIFY_BY_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);
+    formData.append('social', social);
+    formData.append('website_id', websiteId);
+    return fetchSSOV2Api(SSO_V2_PATHS.LOGIN_BY_SOCIAL, {
+        method: 'POST',
+        body: formData,
+    });
+});
+
+// "phone_number": "906911910",
+// "area_code":"+84",
+const registerBySendZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    formData.append('website_id', websiteId);
+    return fetchSSOV2Api(SSO_V2_PATHS.ZALO.REGISTER_BY_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+// "phone_number": "906911910",
+// "area_code":"+84",
+const resendZaloOTP = (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.SEND_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+// "otp_code":"212616",
+// "phone_number": "906911910",
+// "area_code":"+84"
+const verifyByZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('otp_code', otpCode);
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.ZALO.VERIFY_BY_OTP, {
+        method: 'POST',
+        body: formData
+    });
+});
+
+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" }),
+        React__default.createElement("path", { d: "M15.75 5.625h-7.5C6 5.625 4.5 6.75 4.5 9.375v5.25c0 2.625 1.5 3.75 3.75 3.75h7.5c2.25 0 3.75-1.125 3.75-3.75v-5.25c0-2.625-1.5-3.75-3.75-3.75m.352 4.568-2.347 1.875c-.495.397-1.125.592-1.755.592s-1.267-.195-1.755-.592l-2.347-1.875a.577.577 0 0 1-.09-.795.56.56 0 0 1 .787-.09l2.348 1.874c.57.458 1.537.458 2.107 0l2.348-1.875c.24-.194.6-.157.787.09a.57.57 0 0 1-.082.796", fill: "#fff" })),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "clip0_869_25628" },
+            React__default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+
+const StyledPhone = styled(Phone) `
+  position: relative;
+  .PhoneInputCountry {
+    background: unset;
+    border: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    padding-right: 0;
+    min-width: 100px;
+    .PhoneInputCountryIcon {
+      min-width: 70px;
+      .PhoneInputCountryIconImg {
+        margin: auto;
+      }
+    }
+  }
+  .PhoneInputInput {
+    border-radius: 8px;
+    border-left-width: 1px;
+    line-height: 46px;
+    padding-left: 105px;
+  }
+`;
+
+const SSOFirstScreen = ({ hidden }) => {
+    const [phone, setPhone] = React__default.useState('');
+    const [errMsg, setErrMsg] = React__default.useState('');
+    const { locale, onClose } = useSSOState();
+    const { addStep, goNext } = useSSOSteps();
+    const handleLoginBySocial = (credential, provider) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e;
+        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');
+            if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) === 1) {
+                if ((_b = userInfo._data) === null || _b === void 0 ? void 0 : _b.is_new) {
+                    addStep({
+                        type: SSOStepTypeType.SETUP_FULL,
+                        config: {
+                            userInfo,
+                            disabledEmail: true,
+                        },
+                    });
+                    goNext();
+                }
+                else if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified)) {
+                    addStep({
+                        type: SSOStepTypeType.VERIFY_PHONE,
+                    });
+                    goNext();
+                }
+                else {
+                    onClose();
+                }
+            }
+            else {
+                setErrMsg(((_d = userInfo === null || userInfo === void 0 ? void 0 : userInfo._messages) === null || _d === void 0 ? void 0 : _d[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');
+        }
+    });
+    useEffect(() => {
+        const script = document.createElement('script');
+        script.src = 'https://accounts.google.com/gsi/client';
+        script.async = true;
+        document.body.appendChild(script);
+        window.googleAuthCallback = (authData) => __awaiter(void 0, void 0, void 0, function* () {
+            if (authData === null || authData === void 0 ? void 0 : authData.credential) {
+                handleLoginBySocial(authData.credential, 'google');
+            }
+            else {
+                setErrMsg('Google login failed');
+            }
+        });
+        const fbScript = document.createElement('script');
+        fbScript.src = 'https://connect.facebook.net/en_US/sdk.js';
+        fbScript.async = true;
+        document.body.appendChild(fbScript);
+        window.fbAsyncInit = function () {
+            window.FB.init({
+                appId: FacebookAppId,
+                cookie: true,
+                xfbml: true,
+                version: 'v20.0', // Use this Graph API version for this call.
+            });
+        };
+        return () => {
+            document.body.removeChild(script);
+            document.body.removeChild(fbScript);
+        };
+    }, []);
+    const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _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') {
+                addStep({
+                    type: SSOStepTypeType.PASSWORD,
+                    config: {
+                        phone,
+                    },
+                });
+            }
+            else {
+                registerBySendZaloOTP(phoneNumber, areaCode);
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-zalo',
+                    },
+                });
+            }
+            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;
+        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') {
+                addStep({
+                    type: SSOStepTypeType.PASSWORD,
+                    config: {
+                        phone,
+                    },
+                });
+            }
+            else {
+                registerBySendPhoneOTP(phoneNumber, areaCode);
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-sms',
+                    },
+                });
+            }
+            goNext();
+        }
+        else {
+            setErrMsg(((_l = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _l === void 0 ? void 0 : _l[0]) || 'API error');
+        }
+    });
+    const onClickEmail = () => {
+        addStep({
+            type: SSOStepTypeType.EMAIL,
+        });
+        goNext();
+    };
+    return (React__default.createElement("div", { style: {
+            display: hidden ? 'none' : 'flex',
+            flexDirection: 'column',
+            height: '100%',
+        } },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Sign in or Sign up"),
+            React__default.createElement(Text, { size: "p4" }, "Continue with your phone number, email or your socials to log in or sign up.")),
+        React__default.createElement(Stack, { mt: 24, spacing: 24 },
+            React__default.createElement(Stack, { spacing: 16 },
+                React__default.createElement(Input.Wrapper, { error: errMsg },
+                    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(Stack, { spacing: 16, align: "center" },
+                React__default.createElement(Text, { size: "p4" }, "Or continue with"),
+                React__default.createElement(Group, { spacing: 24 },
+                    React__default.createElement("div", { style: {
+                            position: 'relative',
+                            width: 48,
+                            height: 48,
+                        } },
+                        React__default.createElement("div", { id: "g_id_onload", "data-client_id": GoogleAuthClientId, "data-context": "signin", "data-ux_mode": "popup", "data-callback": "googleAuthCallback", "data-auto_prompt": "false" }),
+                        React__default.createElement("div", { className: "g_id_signin", "data-type": "icon", "data-shape": "circle", "data-theme": "outline", "data-text": "signin_with", "data-size": "large", style: {
+                                transform: 'translate(4px,4px) scale(1.1)',
+                            } }),
+                        React__default.createElement(Button, { variant: "white", style: {
+                                width: 48,
+                                height: 48,
+                                padding: 12,
+                                background: '#F7F9FC',
+                                borderRadius: '100%',
+                                position: 'absolute',
+                                pointerEvents: 'none',
+                                top: 0,
+                                left: 0,
+                            }, onClick: () => {
+                                const googleButton = document.querySelector('.g_id_signin');
+                                googleButton === null || googleButton === void 0 ? void 0 : googleButton.dispatchEvent(new Event('click'));
+                            } },
+                            React__default.createElement(Google, { style: { width: 24, height: 24 } }))),
+                    React__default.createElement(Button, { variant: "white", style: {
+                            width: 48,
+                            height: 48,
+                            padding: 12,
+                            background: '#F7F9FC',
+                            borderRadius: '100%',
+                        }, onClick: () => {
+                            window.FB.login(function (response) {
+                                var _a;
+                                return __awaiter(this, void 0, void 0, function* () {
+                                    if ((_a = response === null || response === void 0 ? void 0 : response.authResponse) === null || _a === void 0 ? void 0 : _a.accessToken) {
+                                        handleLoginBySocial(response.authResponse.accessToken, 'facebook');
+                                    }
+                                    else {
+                                        setErrMsg('Facebook login failed');
+                                    }
+                                });
+                            }, { scope: 'public_profile,email' });
+                        } },
+                        React__default.createElement(Facebook, { style: { width: 24, height: 24 } })),
+                    React__default.createElement(Button, { variant: "white", style: {
+                            width: 48,
+                            height: 48,
+                            padding: 12,
+                            background: '#F7F9FC',
+                            borderRadius: '100%',
+                        }, onClick: onClickEmail },
+                        React__default.createElement(MailIcon, null))))),
+        React__default.createElement(Stack, { spacing: 24, sx: (theme) => ({
+                marginTop: 56,
+                [theme.fn.smallerThan('sm')]: {
+                    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(Text, { size: "p5", color: "gray.6" },
+                "By tapping continue, I confirm that I have read, understand and agree to the",
+                ' ',
+                React__default.createElement("a", { href: "#privacy", target: "_blank", style: {
+                        color: '#262626',
+                        textDecoration: 'underline',
+                    } }, "Privacy Policy"),
+                ' ',
+                "and the",
+                ' ',
+                React__default.createElement("a", { href: "#tos", target: "_blank", style: {
+                        color: '#262626',
+                        textDecoration: 'underline',
+                    } }, "Terms of Service"),
+                ' ',
+                "of Hello Health Group."))));
+};
+
+const SSOOTPScreen = ({ hidden, index, }) => {
+    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 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);
+        }
+        else if (otpType === 'email') {
+            resendEmailOTP(email);
+        }
+        setupResendTimer();
+    };
+    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const { areaCode, phoneNumber } = splitPhone(phone);
+        // submit otp code logic here
+        let res;
+        if (otpType === 'phone-sms') {
+            res = yield verifyByPhoneOTP(phoneNumber, areaCode, otp);
+        }
+        else if (otpType === 'phone-zalo') {
+            res = yield verifyByZaloOTP(phoneNumber, areaCode, otp);
+        }
+        else if (otpType === 'email') {
+            res = yield verifyByEmailOTP(email, otp);
+        }
+        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');
+            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) {
+            addStep({
+                type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
+            });
+        }
+        else {
+            const userInfo = yield fetchSSOApi('user/profile');
+            addStep({
+                type: SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo: userInfo,
+                    disabledEmail: isEmail,
+                },
+            });
+        }
+        goNext();
+    });
+    const swapZaloSms = () => {
+        if (isEmail)
+            return;
+        const { areaCode, phoneNumber } = splitPhone(phone);
+        const newType = otpType === 'phone-sms' ? 'phone-zalo' : 'phone-sms';
+        if (newType === 'phone-sms') {
+            registerBySendPhoneOTP(phoneNumber, areaCode);
+        }
+        else {
+            registerBySendZaloOTP(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 = () => {
+        const countdown = () => {
+            setResendTime((t) => {
+                if (t - 1 > 0) {
+                    setTimeout(() => countdown(), 1000);
+                }
+                return t - 1;
+            });
+        };
+        countdown();
+    };
+    useEffect(() => {
+        setupResendTimer();
+    }, []);
+    return (React__default.createElement("div", { style: {
+            display: hidden ? 'none' : 'block',
+        } },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "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),
+                ".")) : (React__default.createElement(React__default.Fragment, null,
+                "Enter the 6-digit OTP sent to the phone number ",
+                React__default.createElement("b", null, phone),
+                " via",
+                ' ',
+                React__default.createElement("b", null, otpType === 'phone-sms' ? 'SMS' : 'Zalo App'),
+                ". OTP code will expire in ",
+                React__default.createElement("b", null, "10 mins"))))),
+        React__default.createElement(Stack, { mt: 24, spacing: 8 },
+            React__default.createElement(Input.Wrapper, { error: error },
+                React__default.createElement(OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
+            React__default.createElement(Group, { spacing: 8, align: "center", style: {
+                    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) },
+                    "Resend (",
+                    resendTime,
+                    ")"))),
+        React__default.createElement(Button, { size: "lg", variant: "primary", mt: 12, onClick: submitOtp, 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;
+    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);
+            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);
+                    }
+                    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(() => {
+                            setOpened(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: () => 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))))))))));
+};
+
+const SSOPasswordWithConfirm = (_a) => {
+    var { form } = _a, props = __rest(_a, ["form"]);
+    const [atLeast8Chars, setAtLeast8Chars] = React__default.useState(undefined);
+    const [atLeastOneUpper, setAtLeastOneUpper] = React__default.useState(undefined);
+    const password = form.values.password;
+    useEffect(() => {
+        if (typeof password === 'undefined')
+            return;
+        setAtLeast8Chars(password.length >= 8);
+        setAtLeastOneUpper(!!password.match(/[A-Z]/));
+    }, [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 })),
+                ' ',
+                "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 })),
+                ' ',
+                "At least one uppercase 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 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'),
+            confirmPassword: yup
+                .string()
+                .required('Confirm password is required')
+                .test('passwords-match', 'Passwords must match', function (value) {
+                return this.parent.password === value;
+            }),
+        })),
+    });
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        const { password, confirmPassword } = values;
+        if (password.length >= 8 &&
+            password.match(/[A-Z]/) &&
+            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();
+            }
+        }
+    });
+    return (React__default.createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: form.onSubmit(onSubmit) },
+        React__default.createElement(Stack, { spacing: 24 },
+            React__default.createElement(Stack, { spacing: 8 },
+                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"))));
+};
+
+const SSOPhoneVerify = ({ 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, _b, _c;
+        const { areaCode, phoneNumber } = splitPhone(phone);
+        const userExist = yield checkUserExist({ phone: phoneNumber });
+        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+            if (((_a = userExist._data) === null || _a === void 0 ? void 0 : _a.is_pass) && ((_b = userExist._data) === null || _b === void 0 ? void 0 : _b.is_status) === 'Active') {
+                addStep({
+                    type: SSOStepTypeType.PASSWORD,
+                    config: {
+                        phone,
+                    },
+                });
+            }
+            else {
+                registerBySendZaloOTP(phoneNumber, areaCode);
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-zalo',
+                    },
+                });
+            }
+            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) {
+            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') {
+                addStep({
+                    type: SSOStepTypeType.PASSWORD,
+                    config: {
+                        phone,
+                    },
+                });
+            }
+            else {
+                registerBySendPhoneOTP(phoneNumber, areaCode);
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-sms',
+                    },
+                });
+            }
+            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: {
+            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"),
+                React__default.createElement(Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
+            React__default.createElement(Stack, { spacing: 16 },
+                React__default.createElement(Input.Wrapper, { error: errMsg },
+                    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))));
+};
+
+// 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
+        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.Wrapper, Object.assign({ label: "Gender", withAsterisk: true }, form.getInputProps('gender')),
+            React__default.createElement(Group, null,
+                React__default.createElement(Button, { type: "button", sx: {
+                        flex: 1,
+                    }, variant: form.getInputProps('gender').value === 'female'
+                        ? 'secondary'
+                        : 'tertiary', onClick: () => {
+                        form.setFieldValue('gender', 'female');
+                    } }, "Female"),
+                React__default.createElement(Button, { type: "button", sx: {
+                        flex: 1,
+                    }, 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')))));
+};
+
+const SSOSetupScreen = ({ hidden, index, }) => {
+    const { onClose, source } = useSSOState();
+    const { steps } = useSSOSteps();
+    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 form = useForm({
+        initialValues: Object.assign({}, (needEmail
+            ? {
+                email: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) || '',
+            }
+            : {})),
+        validateInputOnBlur: true,
+        validate: yupResolver(yup.object().shape(Object.assign(Object.assign(Object.assign(Object.assign({}, (needPass
+            ? {
+                password: yup
+                    .string()
+                    .required('Password is required')
+                    .min(8, ' ')
+                    .matches(/[A-Z]/, ' '),
+                confirmPassword: yup
+                    .string()
+                    .required('Confirm password is required')
+                    .test('passwords-match', 'Passwords must match', function (value) {
+                    return this.parent.password === value;
+                }),
+            }
+            : {})), (needPhone
+            ? {
+                phone: yup.string().required('Phone number is required'),
+            }
+            : {})), (needEmail
+            ? {
+                email: yup.string().email('Invalid email'),
+            }
+            : {})), { gender: yup
+                .string()
+                .required('Gender is required')
+                .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;
+        const { phoneNumber, areaCode } = splitPhone(phone || '');
+        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,
+        });
+        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(),
+            });
+        }
+    });
+    return (React__default.createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: form.onSubmit(onSubmit) },
+        React__default.createElement(Stack, { spacing: 24 },
+            React__default.createElement(Stack, { spacing: 8 },
+                React__default.createElement(Text, { size: "s1", weight: "semiBold" }, "Almost done!"),
+                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(Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone ? 'Verify Phone Number' : 'Save'))));
+};
+
+const SSOScreenRenderer = () => {
+    const { steps, currentStepIndex } = useSSOSteps();
+    return (React__default.createElement(React__default.Fragment, null, steps.map((step, index) => {
+        const isCurrentStep = index === currentStepIndex;
+        switch (step.type) {
+            case SSOStepTypeType.FIRST:
+                return React__default.createElement(SSOFirstScreen, { key: index, hidden: !isCurrentStep });
+            case SSOStepTypeType.PASSWORD:
+                return (React__default.createElement(SSOPasswordScreen, { key: index, hidden: !isCurrentStep, index: index }));
+            case SSOStepTypeType.FORGOT_PASSWORD_PHONE:
+                return (React__default.createElement(SSOPasswordForgotPhone, { key: index, hidden: !isCurrentStep, index: index }));
+            case SSOStepTypeType.FORGOT_PASSWORD_SETUP:
+                return (React__default.createElement(SSOPasswordForgotSetup, { key: index, hidden: !isCurrentStep }));
+            case SSOStepTypeType.OTP:
+                return (React__default.createElement(SSOOTPScreen, { key: index, hidden: !isCurrentStep, index: index }));
+            case SSOStepTypeType.EMAIL:
+                return (React__default.createElement(SSOEmailScreen, { key: index, hidden: !isCurrentStep, index: index }));
+            case SSOStepTypeType.SETUP_FULL:
+                return (React__default.createElement(SSOSetupScreen, { key: index, hidden: !isCurrentStep, index: index }));
+            case SSOStepTypeType.VERIFY_PHONE:
+                return (React__default.createElement(SSOPhoneVerify, { key: index, hidden: !isCurrentStep, index: index }));
+            default:
+                return React__default.createElement("div", { key: index }, "Not found");
+        }
+    })));
+};
+
+const SSOV2 = ({ onClose, locale, source = 'default' }) => {
+    return (React__default.createElement(SSOStateProvider, { onClose: onClose, locale: locale, source: source },
+        React__default.createElement(SSOStepsProvider, null,
+            React__default.createElement(SSOPopupWrapper, { opened: true, onClose: onClose },
+                React__default.createElement(SSOScreenRenderer, null)))));
+};
+
+export { SSOV2 };