import * as React from 'react';
import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
import { u as useTranslations } from './index-960c3169.js';
import { getCookie } from './miscCookieHelper.js';
import { C as CommonGAssets } from './index-43584299.js';
import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-0bc93fbf.js';
import { theme } from './miscTheme.js';
import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-d0599279.js';
import { g as getTogetherUserPostsApiPath } from './utils-5b0a0cb8.js';
import { B as Button } from './index-96c62ad5.js';
import { w as workingDays } from './types-e758ca0d.js';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-32d7d5af.js';
import { rem, clsx, Flex, Box } from '@mantine/core';
import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';
import classNames from 'classnames';
import { b as basePath, Z as ZINDEX_SSO } from './index-a8162282.js';
import { L as LOCALISED_SLUGS } from './constants-67be5c94.js';
import { T as Text } from './index-579b84f2.js';
import { f as formatPhoneNumber } from './localizeNumberFormat-857f6d60.js';
import { a as __awaiter } from './tslib.es6-ab63fd84.js';
import { useDisclosure } from '@mantine/hooks';
import { D as DrawerBottom } from './index-9c46abab.js';
import { u as useTextStyles, T as TextField } from './index-1b8a552a.js';
import { parsePhoneNumber } from 'react-phone-number-input';
import { P as Phone, I as Input, E as ErrorIcon } from './index-c3177e04.js';
import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-38e03570.js';
import { B as Button$1 } from './index-f71a880f.js';
import { M as MAPPED_LOCALE } from './index-4e6b8a2b.js';
import { T as Text$1 } from './index-d0a1200e.js';
import { G as GenderOptionControl } from './index-f3c67a5d.js';
import { C as Close } from './index-417311da.js';
import { M as MAPPED_LOCALE$1 } from './utils-42d7e284.js';
import { I as ImageWrap } from './index-74fcf0aa.js';
import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-e8f762ab.js';

/* eslint-disable prettier/prettier */
const Check = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),
    React.createElement("circle", { cx: 39.5, cy: 40, r: 36, fill: "#00B16A" }),
    React.createElement("path", { d: "M25.6113 40.5543L34.5002 51.6654L53.3891 28.332", stroke: "white", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Clock = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none" }, props),
    React.createElement("path", { d: "M6 11.25C8.8995 11.25 11.25 8.8995 11.25 6C11.25 3.10051 8.8995 0.75 6 0.75C3.10051 0.75 0.75 3.10051 0.75 6C0.75 8.8995 3.10051 11.25 6 11.25Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M6 3.25V6L8 7.75", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Comment = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "none" }, props),
    React.createElement("path", { d: "M20.0002 3.33203C29.1902 3.33203 36.6671 10.0621 36.6672 18.332C36.6672 18.8686 36.6342 19.4005 36.5725 19.9238C35.5792 29.1272 26.1203 35.6308 24.2336 36.8408L23.3333 37.417C21.8711 38.2196 21.7181 37.0263 21.6799 36.7295C21.6746 36.6884 21.6713 36.665 21.6672 36.666V33.2539C11.7339 34.1789 3.33325 27.097 3.33325 18.332C3.3334 10.0622 10.8104 3.33209 20.0002 3.33203ZM13.3333 16.666C12.4131 16.6663 11.6674 17.4118 11.6672 18.332C11.6672 19.2524 12.413 19.9988 13.3333 19.999C14.2537 19.999 15.0002 19.2525 15.0002 18.332C15.0001 17.4117 14.2536 16.666 13.3333 16.666ZM20.0002 16.666C19.0799 16.6661 18.3334 17.4117 18.3333 18.332C18.3333 19.2525 19.0798 19.999 20.0002 19.999C20.9207 19.999 21.6672 19.2525 21.6672 18.332C21.6671 17.4117 20.9206 16.666 20.0002 16.666ZM26.6672 16.666C25.7468 16.666 25.0004 17.4117 25.0002 18.332C25.0002 19.2525 25.7468 19.999 26.6672 19.999C27.5876 19.9989 28.3333 19.2524 28.3333 18.332C28.3331 17.4117 27.5875 16.6661 26.6672 16.666Z", fill: "#2D87F3" })));

/* eslint-disable prettier/prettier */
const Credential = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
    React.createElement("path", { d: "M10.7146 13.4812L11.5779 12.7568C11.7779 12.589 12.0312 12.4968 12.2923 12.4968H13.419C13.9579 12.4968 14.4201 12.1101 14.5135 11.579L14.709 10.469C14.7546 10.2112 14.889 9.97901 15.089 9.81124L15.9523 9.08679C16.3657 8.74012 16.4701 8.14679 16.2001 7.68012L15.6368 6.70346C15.5057 6.47679 15.459 6.21235 15.5046 5.95457L15.7001 4.84457C15.7935 4.31346 15.4923 3.79235 14.9857 3.6079L13.9268 3.22235C13.6812 3.13346 13.4757 2.96012 13.3446 2.73346L12.7812 1.75679C12.5112 1.29012 11.9457 1.08346 11.439 1.2679L10.3801 1.65346C10.1346 1.74235 9.86568 1.74235 9.62012 1.65346L8.56123 1.2679C8.05457 1.08346 7.48901 1.28901 7.21901 1.75679L6.65568 2.73346C6.52457 2.96012 6.31901 3.13235 6.07346 3.22235L5.01457 3.6079C4.5079 3.79235 4.20679 4.31346 4.30012 4.84457L4.49568 5.95457C4.54123 6.21235 4.49457 6.47679 4.36346 6.70346L3.80012 7.68012C3.53012 8.14679 3.63457 8.74012 4.0479 9.08679L4.91123 9.81124C5.11123 9.97901 5.24568 10.2123 5.29123 10.469L5.48679 11.579C5.58012 12.1101 6.04234 12.4968 6.58123 12.4968H7.7079C7.96901 12.4968 8.22234 12.589 8.42234 12.7568L9.28568 13.4812C9.69901 13.8279 10.3012 13.8279 10.7146 13.4812Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M13.6114 15.2778V19.1667L10.0003 16.3889L6.38916 19.1667V15.2778", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M10.0001 9.69347C11.2274 9.69347 12.2223 8.69855 12.2223 7.47125C12.2223 6.24395 11.2274 5.24902 10.0001 5.24902C8.77275 5.24902 7.77783 6.24395 7.77783 7.47125C7.77783 8.69855 8.77275 9.69347 10.0001 9.69347Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Education = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
    React.createElement("g", { clipPath: "url(#clip0_2422_9990)" },
        React.createElement("path", { d: "M15.5 15.5003C14.678 15.5003 13.956 15.0983 13.5 14.4863V18.5003C13.5 18.7023 13.622 18.8853 13.809 18.9623C13.996 19.0413 14.21 18.9973 14.354 18.8543L15.5 17.7083L16.646 18.8543C16.742 18.9503 16.87 19.0003 17 19.0003C17.064 19.0003 17.13 18.9883 17.191 18.9623C17.378 18.8853 17.5 18.7023 17.5 18.5003V14.4863C17.044 15.0983 16.322 15.5003 15.5 15.5003Z", fill: "currentColor" }),
        React.createElement("path", { d: "M11.75 17.25H5.25C4.145 17.25 3.25 16.355 3.25 15.25V4.75C3.25 3.645 4.145 2.75 5.25 2.75H13.75C14.855 2.75 15.75 3.645 15.75 4.75V8", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
        React.createElement("path", { d: "M6.25 6.75H12.75", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
        React.createElement("path", { d: "M6.25 10H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
        React.createElement("path", { d: "M6.25 13.2505H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
        React.createElement("path", { d: "M15.5 15.5C16.8807 15.5 18 14.3807 18 13C18 11.6193 16.8807 10.5 15.5 10.5C14.1193 10.5 13 11.6193 13 13C13 14.3807 14.1193 15.5 15.5 15.5Z", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" })),
    React.createElement("defs", null,
        React.createElement("clipPath", { id: "clip0_2422_9990" },
            React.createElement("rect", { width: 18, height: 18, fill: "white", transform: "translate(1 1)" })))));

/* eslint-disable prettier/prettier */
const Email = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
    React.createElement("path", { d: "M2 4.66668C2 4.31305 2.14048 3.97392 2.39052 3.72387C2.64057 3.47382 2.97971 3.33334 3.33333 3.33334H12.6667C13.0203 3.33334 13.3594 3.47382 13.6095 3.72387C13.8595 3.97392 14 4.31305 14 4.66668V11.3333C14 11.687 13.8595 12.0261 13.6095 12.2762C13.3594 12.5262 13.0203 12.6667 12.6667 12.6667H3.33333C2.97971 12.6667 2.64057 12.5262 2.39052 12.2762C2.14048 12.0261 2 11.687 2 11.3333V4.66668Z", stroke: "#111111", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M2 4.66666L8 8.66666L14 4.66666", stroke: "#111111", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const HelloZalo = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 85 49", fill: "none" }, props),
    React.createElement("g", { clipPath: "url(#clip0_4296_167461)" },
        React.createElement("rect", { x: 0.446777, y: 6.57019, width: 42, height: 42, rx: 12, transform: "rotate(-9 0.446777 6.57019)", fill: "url(#paint0_linear_4296_167461)" })),
    React.createElement("g", { filter: "url(#filter0_d_4296_167461)" },
        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22.0704 15.8758C22.0399 15.6835 21.9937 15.478 21.949 15.2821C21.8766 14.911 21.6943 14.5612 21.4056 14.242C20.7176 13.4843 19.8778 13.1977 18.9096 13.394C18.3946 13.5068 18.0388 13.811 17.8488 14.2998C17.6892 14.7096 17.7052 15.1677 17.8916 15.5559C18.0774 15.9402 18.4069 16.2218 18.8154 16.3484C19.03 16.4217 19.1016 16.5041 19.1099 16.6921L19.1108 16.6978L20.8289 27.5452C20.8334 27.5738 20.8363 27.6046 20.8395 27.6372C20.8469 27.7083 20.8568 27.7828 20.8777 27.8537C20.9096 27.9931 20.875 28.0708 20.7489 28.1493C20.1621 28.5233 19.9468 29.0863 20.112 29.8214C20.2773 30.5818 20.9404 31.0467 21.7218 30.9522C21.7563 30.9487 21.7906 30.9433 21.8249 30.9378C23.2472 30.7126 24.1124 29.3478 24.0029 28.2253C23.9862 28.021 23.9665 27.8231 23.9343 27.6194L23.0054 21.7549C22.9023 21.1037 22.801 20.4522 22.6998 19.8007C22.4943 18.5158 22.2877 17.1862 22.0704 15.8758Z", fill: "url(#paint1_radial_4296_167461)" }),
        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1017 28.7679C16.8433 28.7015 16.7458 28.5783 16.7271 28.3002L14.9771 17.251C14.9662 17.1083 15.0045 17.03 15.1188 16.963C15.1867 16.923 15.258 16.8805 15.3117 16.8251C15.8063 16.374 15.9509 15.6484 15.6692 15.0158C15.3717 14.3817 14.7876 14.0585 14.1038 14.1531C14.0867 14.1558 14.0696 14.1586 14.0524 14.1613C13.2432 14.2894 12.6134 14.7249 12.1809 15.4571C11.8782 15.9734 11.7746 16.5637 11.8774 17.213L12.8469 23.3345C13.0116 24.3741 13.1798 25.4113 13.3473 26.4446C13.5146 27.4759 13.6813 28.5035 13.8444 29.5336C13.9855 30.4247 14.6791 31.4391 15.9127 31.6985C16.2352 31.7626 16.5295 31.7726 16.8018 31.7294C16.9598 31.7044 17.1091 31.6612 17.2535 31.5993C17.8075 31.3633 18.1509 30.7955 18.1257 30.1554C18.1011 29.5074 17.681 28.9377 17.1017 28.7679Z", fill: "url(#paint2_radial_4296_167461)" }),
        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M33.5518 28.5261L33.4621 28.3666L33.2972 28.4103C33.1886 28.4392 32.6966 28.5366 32.2214 28.6295C31.1557 28.8392 31.0258 28.8695 30.9791 28.8945L30.8763 28.9479L30.8966 29.0637C31.1931 30.7266 30.2735 31.9692 29.3939 32.5281C29.032 32.7572 28.6159 32.9519 28.1252 33.1194C26.8906 33.5199 25.613 33.7222 24.3304 33.7205C23.7168 33.7161 23.1571 33.633 22.6675 33.4744C21.9917 33.2496 21.4545 32.8155 21.0733 32.183C20.9885 32.0422 20.9077 31.8891 20.8296 31.7415C20.7378 31.5686 20.6533 31.4044 20.5743 31.2881C20.2226 30.7309 19.5433 30.5086 18.9603 30.7591C18.3548 31.015 18.0228 31.6297 18.1511 32.2555C18.2243 32.6186 18.3468 32.9486 18.5761 33.3983C18.8115 33.849 19.142 34.2846 19.5269 34.6569C20.2278 35.3481 21.0901 35.8264 22.1587 36.1158C23.1874 36.3998 24.2868 36.4892 25.5177 36.386C25.9642 36.3464 26.3817 36.2959 26.7778 36.2332C27.6213 36.0996 28.3625 35.912 29.0561 35.6577C30.085 35.2898 30.9185 34.8338 31.6054 34.2663C32.9455 33.1523 34.1597 31.7732 33.5518 28.5261Z", fill: "url(#paint3_radial_4296_167461)" }),
        React.createElement("path", { d: "M30.3378 16.8439C26.9562 17.3795 24.6466 20.6048 25.1898 24.034C25.7329 27.4632 28.9261 29.8169 32.3077 29.2813C35.6893 28.7457 37.9989 25.5205 37.4557 22.0913C36.9126 18.662 33.7194 16.3083 30.3378 16.8439ZM34.6453 22.5364C34.9397 24.3947 33.6885 26.1446 31.8568 26.4347C30.0251 26.7248 28.2948 25.4491 28.0002 23.5889C27.7058 21.7305 28.957 19.9806 30.7887 19.6905C32.6204 19.4004 34.3507 20.6761 34.6453 22.5364Z", fill: "url(#paint4_radial_4296_167461)" }),
        React.createElement("path", { d: "M32.7364 23.0984C32.7097 22.328 32.0636 21.7251 31.2933 21.7517C30.5229 21.7784 29.92 22.4245 29.9466 23.1948C29.9733 23.9652 30.6194 24.5681 31.3898 24.5415C32.1601 24.5148 32.763 23.8687 32.7364 23.0984Z", fill: "url(#paint5_radial_4296_167461)" })),
    React.createElement("path", { d: "M68.2974 17.9266C68.8728 18.0177 69.4481 18.1088 70.0248 18.2002C69.4816 21.569 68.9476 24.9406 68.4232 28.3123C67.8724 28.144 66.8779 28.3563 66.7847 27.573C67.2588 24.3542 67.8003 21.1432 68.2974 17.9266Z", fill: "#0068FF" }),
    React.createElement("path", { d: "M50.6775 15.2582C53.3548 15.6795 56.0318 16.0856 58.7044 16.5282C58.6025 17.0496 58.4825 17.6162 58.064 17.9844C55.874 19.9719 53.7183 21.9951 51.5296 23.9828C53.471 24.3027 55.4156 24.6024 57.3589 24.9102C57.2507 25.3591 57.3264 25.9141 56.9689 26.2617C56.7434 26.4872 56.4118 26.4113 56.1337 26.37C53.7044 25.9715 51.2689 25.6119 48.8428 25.2015C48.9308 24.6889 49.0263 24.1211 49.4505 23.769C51.6175 21.7875 53.8035 19.8254 55.9633 17.8373C54.1135 17.547 52.265 17.2391 50.4124 16.9663C50.4904 16.3958 50.5847 15.8264 50.6775 15.2582Z", fill: "#0068FF" }),
    React.createElement("path", { d: "M73.9347 21.2294C75.9287 21.104 77.8179 22.6996 78.0446 24.6794C78.3933 26.757 76.8148 28.9114 74.7254 29.1964C72.937 29.5249 71.0326 28.4246 70.4014 26.7243C69.8948 25.4618 70.0924 23.9451 70.9067 22.8574C71.6036 21.8941 72.7509 21.2908 73.9347 21.2294ZM73.6319 22.9329C72.3914 23.1613 71.532 24.4907 71.8077 25.718C72.0144 26.8698 73.1867 27.7401 74.3502 27.5807C75.6656 27.4784 76.6666 26.115 76.4099 24.8275C76.2252 23.5636 74.8801 22.6385 73.6319 22.9329Z", fill: "#0068FF" }),
    React.createElement("path", { d: "M59.4453 20.3739C60.5538 19.3727 62.2662 19.0638 63.6311 19.6992C64.0843 19.8934 64.4747 20.1972 64.8481 20.5134C64.864 20.3867 64.8943 20.1344 64.9103 20.0077C65.4512 20.0906 65.9901 20.1774 66.531 20.2603C66.129 22.7812 65.727 25.3021 65.3341 27.8258C64.9388 27.7522 64.5277 27.7352 64.1502 27.5929C63.8943 27.4383 63.8571 27.1258 63.7872 26.8646C62.1123 27.7871 59.811 27.1531 58.7952 25.546C57.6906 23.9701 57.991 21.6311 59.4453 20.3739ZM61.5751 21.0577C60.264 21.2982 59.4084 22.8028 59.8547 24.0558C60.2132 25.2647 61.6485 25.9759 62.8263 25.5273C63.9114 25.1603 64.5807 23.9286 64.3155 22.817C64.0781 21.6164 62.7719 20.7578 61.5751 21.0577Z", fill: "#0068FF" }),
    React.createElement("path", { d: "M50.7263 1.42608C52.1821 1.42705 53.6267 1.65448 55.0566 1.91395L54.9152 2.00841C52.8428 2.94085 51.0183 4.38272 49.5862 6.14245C46.7159 9.66507 45.1671 14.1229 44.6491 18.5996C44.2607 22.25 44.553 26.0288 45.8972 29.4683C46.1165 30.0804 46.5513 30.6594 46.451 31.3446C46.2763 32.821 45.3317 34.0887 44.1839 34.982C44.2377 35.0593 44.2901 35.1363 44.3438 35.2136C45.1036 36.3622 45.9347 37.4603 46.7113 38.5979C47.8003 40.3074 49.1014 41.8745 50.1593 43.6066C47.9922 43.2963 45.7889 43.0505 43.7164 42.3084C41.1101 41.3608 39.0181 39.1185 38.2728 36.4462C37.8103 34.8964 37.8588 33.253 38.0552 31.666C39.2081 24.378 40.3622 17.0916 41.5176 9.80546C41.9328 7.37463 42.9815 4.92865 44.9816 3.39361C46.5812 2.07834 48.6606 1.3876 50.7263 1.42608Z", fill: "#0068FF" }),
    React.createElement("path", { d: "M54.9152 2.00841C55.2292 1.97016 55.5473 1.99304 55.8599 2.03293C61.2199 2.9025 66.5867 3.72914 71.9484 4.58798C73.3793 4.83248 74.8363 4.96427 76.2247 5.40825C78.171 5.87049 79.9352 7.00503 81.1923 8.55554C82.7539 10.6052 83.3345 13.2927 82.9654 15.823C81.8407 22.9326 80.7098 30.0466 79.591 37.1544C79.5656 37.193 79.5158 37.2731 79.4902 37.313C77.2405 39.1481 74.4417 40.1882 71.6072 40.6988C67.792 41.3594 63.8519 41.1423 60.093 40.25C56.34 39.3201 52.6631 37.719 49.7694 35.1051C48.0036 35.5774 46.1268 35.6486 44.3438 35.2136C44.2901 35.1363 44.2377 35.0593 44.1839 34.982C45.3317 34.0887 46.2763 32.821 46.451 31.3446C46.5513 30.6594 46.1165 30.0804 45.8972 29.4683C44.553 26.0288 44.2607 22.25 44.6491 18.5996C45.1671 14.1229 46.7159 9.66507 49.5862 6.14245C51.0183 4.38272 52.8428 2.94085 54.9152 2.00841ZM68.2974 17.9266C67.8003 21.1432 67.2588 24.3542 66.7847 27.573C66.8779 28.3563 67.8724 28.144 68.4232 28.3123C68.9476 24.9406 69.4816 21.569 70.0248 18.2002C69.4481 18.1088 68.8728 18.0177 68.2974 17.9266ZM50.6775 15.2582C50.5847 15.8264 50.4904 16.3958 50.4124 16.9663C52.265 17.2391 54.1135 17.547 55.9633 17.8373C53.8035 19.8254 51.6175 21.7875 49.4505 23.769C49.0263 24.1211 48.9308 24.6889 48.8428 25.2015C51.2689 25.6119 53.7044 25.9715 56.1337 26.37C56.4118 26.4113 56.7434 26.4872 56.9689 26.2617C57.3264 25.9141 57.2507 25.3591 57.3589 24.9102C55.4156 24.6024 53.471 24.3027 51.5296 23.9828C53.7183 21.9951 55.874 19.9719 58.064 17.9844C58.4825 17.6162 58.6025 17.0496 58.7044 16.5282C56.0318 16.0856 53.3548 15.6795 50.6775 15.2582ZM73.9347 21.2294C72.7509 21.2908 71.6036 21.8941 70.9067 22.8574C70.0924 23.9451 69.8948 25.4618 70.4014 26.7243C71.0326 28.4246 72.937 29.5249 74.7254 29.1964C76.8148 28.9114 78.3933 26.757 78.0446 24.6794C77.8179 22.6996 75.9287 21.104 73.9347 21.2294ZM59.4453 20.3739C57.991 21.6311 57.6906 23.9701 58.7952 25.546C59.811 27.1531 62.1123 27.7871 63.7872 26.8646C63.8571 27.1258 63.8943 27.4383 64.1502 27.5929C64.5277 27.7352 64.9388 27.7522 65.3341 27.8258C65.727 25.3021 66.129 22.7812 66.531 20.2603C65.9901 20.1774 65.4512 20.0906 64.9103 20.0077C64.8943 20.1344 64.864 20.3867 64.8481 20.5134C64.4747 20.1972 64.0843 19.8934 63.6311 19.6992C62.2662 19.0638 60.5538 19.3727 59.4453 20.3739Z", fill: "white" }),
    React.createElement("path", { d: "M61.5753 21.0583C62.7721 20.7584 64.0782 21.6169 64.3156 22.8176C64.5809 23.9292 63.9115 25.1608 62.8264 25.5278C61.6487 25.9765 60.2133 25.2652 59.8549 24.0564C59.4085 22.8034 60.2641 21.2988 61.5753 21.0583Z", fill: "white" }),
    React.createElement("path", { d: "M73.6318 22.9336C74.88 22.6391 76.2251 23.5643 76.4099 24.8281C76.6665 26.1157 75.6656 27.479 74.3502 27.5814C73.1866 27.7408 72.0143 26.8705 71.8077 25.7187C71.5319 24.4913 72.3914 23.1619 73.6318 22.9336Z", fill: "white" }),
    React.createElement("path", { d: "M79.4899 37.3134L79.6141 37.2149C79.3371 39.3198 78.764 41.4713 77.4398 43.1739C75.8969 45.1731 73.4695 46.4549 70.9462 46.5887C69.5321 46.6548 68.1179 46.4954 66.7259 46.2571C62.4354 45.5789 58.1453 44.898 53.8548 44.2199C52.6242 44.0043 51.3785 43.8661 50.1589 43.607C49.1011 41.8749 47.7999 40.3078 46.711 38.5984C45.9343 37.4608 45.1033 36.3627 44.3435 35.214C46.1264 35.649 48.0033 35.5778 49.769 35.1055C52.6628 37.7194 56.3397 39.3205 60.0926 40.2504C63.8515 41.1427 67.7916 41.3598 71.6068 40.6993C74.4413 40.1886 77.2402 39.1485 79.4899 37.3134Z", fill: "#005BE0" }),
    React.createElement("defs", null,
        React.createElement("filter", { id: "filter0_d_4296_167461", x: 7.83887, y: 13.3341, width: 33.696, height: 31.0933, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
            React.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
            React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
            React.createElement("feOffset", { dy: 4 }),
            React.createElement("feGaussianBlur", { stdDeviation: 2 }),
            React.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
            React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" }),
            React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_4296_167461" }),
            React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_4296_167461", result: "shape" })),
        React.createElement("linearGradient", { id: "paint0_linear_4296_167461", x1: 21.4468, y1: 6.57019, x2: 21.4468, y2: 48.5702, gradientUnits: "userSpaceOnUse" },
            React.createElement("stop", { stopColor: "#68B8FE" }),
            React.createElement("stop", { offset: 1, stopColor: "#2C89F3" })),
        React.createElement("radialGradient", { id: "paint1_radial_4296_167461", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(20.9589 22.0707) rotate(81) scale(8.89343 2.07462)" },
            React.createElement("stop", { offset: 0.25, stopColor: "white" }),
            React.createElement("stop", { offset: 1, stopColor: "#C5E1FB" })),
        React.createElement("radialGradient", { id: "paint2_radial_4296_167461", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(14.9033 23.0283) rotate(81) scale(8.89098 2.07896)" },
            React.createElement("stop", { offset: 0.25, stopColor: "white" }),
            React.createElement("stop", { offset: 1, stopColor: "#C5E1FB" })),
        React.createElement("radialGradient", { id: "paint3_radial_4296_167461", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(26.2523 32.9125) rotate(81) scale(3.36206 7.90006)" },
            React.createElement("stop", { offset: 0.25, stopColor: "white" }),
            React.createElement("stop", { offset: 1, stopColor: "#C5E1FB" })),
        React.createElement("radialGradient", { id: "paint4_radial_4296_167461", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(31.3227 23.0626) rotate(81) scale(6.29618 6.20942)" },
            React.createElement("stop", { offset: 0.25, stopColor: "white" }),
            React.createElement("stop", { offset: 1, stopColor: "#C5E1FB" })),
        React.createElement("radialGradient", { id: "paint5_radial_4296_167461", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(31.3415 23.1466) rotate(-1.98088) scale(1.39571 1.39571)" },
            React.createElement("stop", { offset: 0.25, stopColor: "white" }),
            React.createElement("stop", { offset: 1, stopColor: "#C5E1FB" })),
        React.createElement("clipPath", { id: "clip0_4296_167461" },
            React.createElement("rect", { x: 0.446777, y: 6.57019, width: 42, height: 42, rx: 10.5, transform: "rotate(-9 0.446777 6.57019)", fill: "white" })))));

/* eslint-disable prettier/prettier */
const Highlight = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
    React.createElement("path", { d: "M7.76093 1.94434L11.8267 4.92811L16.5893 3.27134L15.0077 8.05978L18.0553 12.0772L13.0127 12.0526L10.1339 16.1928L8.59882 11.3896L3.77148 9.93078L7.86504 6.98645L7.76093 1.94434Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M2.22217 17.7777L5.5555 14.4443", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M1.94434 13.6112L2.49989 13.0557", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M6.38867 18.0556L6.94423 17.5", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

/* eslint-disable prettier/prettier */
const Ellipse = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 4 4", fill: "none" }, props),
    React.createElement("circle", { cx: 2, cy: 2, r: 2, fill: "#BFBFBF" })));

/* eslint-disable prettier/prettier */
const Mobile = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 17 16", fill: "none" }, props),
    React.createElement("path", { d: "M11.3889 1.55566H5.61115C4.62931 1.55566 3.83337 2.3516 3.83337 3.33344V12.6668C3.83337 13.6486 4.62931 14.4446 5.61115 14.4446H11.3889C12.3708 14.4446 13.1667 13.6486 13.1667 12.6668V3.33344C13.1667 2.3516 12.3708 1.55566 11.3889 1.55566Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M7.38892 1.55566V2.44455H9.61114V1.55566", stroke: "currentColor", strokeWidth: 1.33333, strokeLinecap: "round", strokeLinejoin: "round" }),
    React.createElement("path", { d: "M8.49997 12.4448C8.99089 12.4448 9.38886 12.0468 9.38886 11.5559C9.38886 11.065 8.99089 10.667 8.49997 10.667C8.00905 10.667 7.61108 11.065 7.61108 11.5559C7.61108 12.0468 8.00905 12.4448 8.49997 12.4448Z", fill: "currentColor" })));

/* eslint-disable prettier/prettier */
const PhoneInactive = (props) => (React.createElement("svg", Object.assign({ className: "callTrigger", width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none" }, props),
    React.createElement("path", { d: "M14.4198 11.4486L12.526 11.2306C12.0676 11.178 11.6167 11.3358 11.2935 11.659L9.9032 13.0493C8.8368 12.5082 7.8696 11.8025 7.03391 10.9661C6.19747 10.1304 5.4918 9.1632 4.95071 8.0968L6.34101 6.70649C6.66416 6.38334 6.82198 5.93243 6.76938 5.47401L6.55144 3.58018C6.46125 2.82115 5.82247 2.25 5.05592 2.25H3.75579C2.90658 2.25 2.20015 2.95643 2.25276 3.80564C2.45191 7.01386 3.83395 9.89894 5.96751 12.0325C8.10106 14.166 10.9861 15.5481 14.1944 15.7472C15.0436 15.7998 15.75 15.0934 15.75 14.2442V12.9441C15.75 12.1775 15.1788 11.5387 14.4198 11.4486Z", fill: "#8C8C8C" })));

const INTERNAL_CARD_URLS = {
    myBooking: 'booking',
    mySaved: 'saved',
    myHealth: 'health',
    myFamily: 'family',
    myCommunity: 'my-communities',
    // TODO: this is hardcoded for VN, need to adapt to dynamic slug depend on locale
    eCom: '/shop/ho-so/quan-li-don-hang/',
};

var styles$4 = {"navHeader":"uJQBNNg","navAvatar":"TfG3dM5","navHeaderUserInfos":"aMtjFNf","navHeaderUserName":"cSz2RR-","navHeaderMyProfileButton":"GyFm00F"};

function NavHeader({ userInfo, onClickMyProfileButton, themeName = 'helloSites', }) {
    const { t } = useTranslations();
    const nameFirstLetter = useMemo(() => {
        const name = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username);
        if (name && name.length) {
            return name[0].toUpperCase();
        }
        return 'A';
    }, [userInfo === null || userInfo === void 0 ? void 0 : userInfo.username, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name]);
    const handleClickMyProfileButton = () => {
        if (onClickMyProfileButton) {
            onClickMyProfileButton();
        }
    };
    return (React__default.createElement("div", { className: styles$4.navHeader, onClick: handleClickMyProfileButton },
        React__default.createElement(Avatar, { className: styles$4.navAvatar, type: "rounded", size: "xl", avatarUrl: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, firstLetter: nameFirstLetter, backgroundColor: themeName === 'marryBaby'
                ? theme.mbColors.pink
                : theme.colors.secondaryBase }),
        React__default.createElement("div", { className: styles$4.navHeaderUserInfos },
            React__default.createElement("div", { className: styles$4.navHeaderUserName }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username)),
            React__default.createElement("div", { className: styles$4.navHeaderMyProfileButton, style: {
                    '--bg-hellosites': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronRight.svg')})`,
                    '--bg-marrybaby': `url(${CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-arrowRight.svg')})`,
                } }, t('userProfile.nav.header.viewProfile')))));
}

var styles$3 = {"navigationCard":"fVk18fq","navigationCardLabel":"v8TCvUb","navigationCardIconWrapper":"mx7T4V3"};

const iconBgColorMap = {
    myHealth: theme.mbColors.toneYellow,
    myCommunity: theme.mbColors.toneBlue,
    mySaved: theme.mbColors.toneGreen,
};
// type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
const cardIconUrlMap = {
    helloSites: {
        myBooking: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myBooking.svg'),
        myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myCommunity.svg'),
        myFamily: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myFamily.svg'),
        myHealth: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-myHealth.svg'),
        mySaved: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-mySaved.svg'),
        eCom: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-eCom.svg'),
    },
    marryBaby: {
        mySaved: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-mySaved.svg'),
        myCommunity: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myCommunity.svg'),
        myHealth: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-myHealth.svg'),
    },
};
const NavigationCard = ({ type, themeName, className, onClick = () => undefined, }) => {
    const { t } = useTranslations();
    const iconUrl = useMemo(() => {
        var _a, _b;
        return ((_b = (_a = cardIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
    }, [type, themeName]);
    const iconBgColor = useMemo(() => {
        if (themeName !== 'marryBaby') {
            return 'transparent';
        }
        return iconBgColorMap[type];
    }, [type, themeName]);
    function handleCardClick() {
        onClick(type);
    }
    return (React__default.createElement("div", { onClick: handleCardClick, className: `${styles$3.navigationCard} ${className}` },
        React__default.createElement("div", { className: styles$3.navigationCardIconWrapper, style: {
                backgroundColor: iconBgColor,
                backgroundImage: `url("${iconUrl}")`,
            } }),
        React__default.createElement("h3", { className: styles$3.navigationCardLabel }, t(`userProfile.nav.card.${type}`))));
};

const navMenuItemsHelloSites = () => [
    {
        key: 'userProfile.nav.menu.accountSettings',
        icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-settingsWheel.svg'),
        subMenu: [
            // {
            //   key: 'common.profileNavigator.newsletterSubscription',
            //   link: 'subscriptions',
            //   disableLocale: [
            //     'id-ID',
            //     'ms-MY',
            //     'km-KH',
            //     'en-PH',
            //     'tl-PH',
            //     'th-TH',
            //     'my-MM',
            //     'zh-TW',
            //     'hi-IN',
            //   ],
            // },
            {
                key: 'userProfile.nav.menu.password',
                link: 'password',
            },
            {
                key: 'userProfile.nav.menu.disableAccount',
                link: 'disable-account',
                disableLocale: ['hi-IN'],
            },
            {
                key: 'userProfile.nav.menu.dataPrivacy',
                link: 'data-privacy',
                disableLocale: [
                    // 'id-ID',
                    'vi-VN',
                    'ms-MY',
                    'km-KH',
                    'en-PH',
                    'th-TH',
                    'my-MM',
                    'zh-TW',
                    'hi-IN',
                    'tl-PH',
                    // 'vi-VN_MB',
                ],
            },
        ],
    },
    {
        key: 'userProfile.nav.menu.help',
        icon: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-helpCircle.svg'),
        link: 'help',
    },
];
const navMenuItemsMarryBaby = () => [
    {
        key: 'userProfile.nav.menu.password',
        icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-lock.svg'),
        link: 'password',
    },
    {
        key: 'userProfile.nav.menu.logout',
        icon: CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-logOut.svg'),
        link: 'logout',
    },
];

var styles$2 = {"navMenu":"gn6HmGG","navMenuItem":"FCx8FEM","navMenuItemContent":"zMiRxaE","navMenuItemIcon":"lZ2Z9MQ","navMenuItemDropdown":"rwm-agG","navFooterSubMenu":"qMOscoq"};

const NavMenu = ({ themeName, locale, onClickItem }) => {
    const [openKey, setOpenKey] = useState('');
    const navMenuItems = useMemo(() => themeName === 'marryBaby'
        ? navMenuItemsMarryBaby()
        : navMenuItemsHelloSites(), [themeName]);
    function handleParentItemClick(item) {
        if (item.subMenu) {
            setOpenKey((k) => {
                if (k) {
                    return '';
                }
                return item.key;
            });
        }
        else if (onClickItem) {
            onClickItem(item);
        }
    }
    return (React__default.createElement("div", { className: styles$2.navMenu }, navMenuItems.map((item) => (React__default.createElement(NavMenuItem, { key: item.key, item: item, openKey: openKey, onClickItem: handleParentItemClick, locale: locale })))));
};
const NavMenuItem = ({ item, openKey, onClickItem, locale, }) => {
    var _a;
    const { t } = useTranslations();
    if ((_a = item.disableLocale) === null || _a === void 0 ? void 0 : _a.includes(locale)) {
        return null;
    }
    return (React__default.createElement("div", { className: `${styles$2.navMenuItem} nav-menu-item`, "data-is-open": openKey === item.key, key: item.key, "data-has-submenu": !!item.subMenu },
        React__default.createElement("div", { className: styles$2.navMenuItemContent, onClick: () => onClickItem(item) },
            item.icon && (React__default.createElement("div", { className: styles$2.navMenuItemIcon, style: { backgroundImage: `url("${item.icon}")` } })),
            t(item.key),
            item.subMenu && (React__default.createElement("div", { className: styles$2.navMenuItemDropdown, style: {
                    '--after-bg': `url(${CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-chevronDown.svg')})`,
                } }))),
        item.subMenu && (React__default.createElement("div", { className: styles$2.navFooterSubMenu }, item.subMenu.map((subItem) => (React__default.createElement(NavMenuItem, { key: subItem.key, item: subItem, openKey: openKey, onClickItem: onClickItem, locale: locale })))))));
};

var styles$1 = {"userNavScreen":"-AZt1au","navigationCardsWrapper":"IvSIfCI","navigationCard":"eahCJov","logoutButton":"XIyViFs"};

var styles = {"userStats":"_4y-O0w3","wrapper":"kO8iNgD","header":"a1d4E10","headerIcon":"Tdguxxf","headerTitle":"-mOxsaU","headerPoints":"yPeDBNZ"};

const rankIconUrlMap = {
    helloSites: {
        member: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-member.svg'),
        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-ambassador.svg'),
        doctor: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-doctor.svg'),
        expert: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-expert.svg'),
        influencer: () => CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-rank-influencer.svg'),
    },
    marryBaby: {
        member: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-member.svg'),
        ambassador: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-ambassador.svg'),
        doctor: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-doctor.svg'),
        expert: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-expert.svg'),
        influencer: () => CommonGAssets.getAssetPath('userProfileNav/marryBaby/icon-rank-influencer.svg'),
    },
};
const UserStats = ({ themeName, rank = 'member', numberOfPosts = 0, }) => {
    const { t } = useTranslations();
    const iconUrl = useMemo(() => {
        var _a, _b;
        return ((_b = (_a = rankIconUrlMap[themeName]) === null || _a === void 0 ? void 0 : _a[rank]) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
    }, [rank, themeName]);
    return (React__default.createElement("div", { className: styles.userStats, "data-user-rank": rank },
        React__default.createElement("div", { className: styles.wrapper },
            React__default.createElement("div", { className: styles.header },
                React__default.createElement("div", { className: styles.headerIcon, style: { backgroundImage: `url("${iconUrl}")` } }),
                React__default.createElement("h3", { className: styles.headerTitle }, t(`userProfile.userRank.${rank}`)),
                numberOfPosts > 0 && (React__default.createElement("p", { className: styles.headerPoints },
                    numberOfPosts,
                    " ",
                    t('userProfile.nav.header.count.posts')))))));
};

const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'helloSites', cardUrls = INTERNAL_CARD_URLS, enableCare, enableTogether, enableEcom, enableMySaved, userInfo, togetherApiDomain, userPostsNumber, onClickNavigationCard, onClickMyProfileButton, onClickMenuItem, onClickLogout, isUserProfileNavigatorMenuHidden = false, isMyHealthEnabled = false, locale, }) => {
    const { t } = useTranslations();
    const [numberOfPosts, setNumberOfPosts] = useState(userPostsNumber || 0);
    const isMarryBaby = themeName === 'marryBaby';
    useEffect(() => {
        if (userInfo && typeof userPostsNumber === 'undefined') {
            const token = getCookie('hhg_user_token');
            if (!!token) {
                fetch(normalizeLinkSlash(getTogetherUserPostsApiPath(locale, isMarryBaby, togetherApiDomain)), {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                })
                    .then((r) => r.json())
                    .then((r) => {
                    var _a, _b, _c;
                    if ((r === null || r === void 0 ? void 0 : r.status) === 1 && ((_a = r === null || r === void 0 ? void 0 : r.data) === null || _a === void 0 ? void 0 : _a.pagination)) {
                        setNumberOfPosts(((_c = (_b = r === null || r === void 0 ? void 0 : r.data) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.total_items) || 0);
                    }
                })
                    .catch((err) => console.error('Error fetching post number', err));
            }
        }
    }, [
        locale,
        userInfo !== null,
        userPostsNumber,
        togetherApiDomain,
        isMarryBaby,
    ]);
    const cards = useMemo(() => {
        let allCards;
        if (isMarryBaby) {
            allCards = ['myHealth', 'myCommunity', 'mySaved'];
        }
        else {
            allCards = ['myHealth', 'mySaved', 'myBooking', 'myCommunity', 'eCom'];
        }
        return allCards.filter((cardType) => {
            if (cardType === 'myBooking') {
                return enableCare;
            }
            else if (cardType === 'myCommunity') {
                return enableTogether;
            }
            else if (cardType === 'myHealth') {
                return isMyHealthEnabled;
            }
            else if (cardType === 'eCom') {
                return enableEcom;
            }
            else if (cardType === 'mySaved') {
                return enableMySaved;
            }
            return true;
        });
    }, [isMarryBaby, isMyHealthEnabled]);
    const logoutButton = useMemo(() => {
        if (themeName === 'marryBaby') {
            return null;
        }
        return (React__default.createElement(Button, { color: "tertiary", icon: React__default.createElement("img", { src: CommonGAssets.getAssetPath('userProfileNav/helloSites/icon-logOut.svg'), width: 15, height: 15, loading: "lazy" }), size: "md", onClick: onClickLogout, className: styles$1.logoutButton }, t('userProfile.nav.menu.logout')));
    }, [themeName]);
    const push = (link) => {
        if (link.startsWith('http') || link.startsWith('/')) {
            // direct to external link
            window.location.href = normalizeLink(link);
        }
        else if (SSO_URL) {
            // relative link go to user profile
            window.location.href = normalizeLink(`${SSO_URL}${UP_BASEPATH}/${link}`);
        }
    };
    const handleClickMenuItem = (item) => {
        if (item.link === 'logout' && onClickLogout) {
            onClickLogout();
        }
        else if (item.link && !item.subMenu) {
            if (onClickMenuItem) {
                onClickMenuItem(item.link);
            }
            else {
                push(item.link);
            }
        }
    };
    const handleClickCardItem = (item) => {
        const url = cardUrls[item];
        if (onClickNavigationCard) {
            onClickNavigationCard(url);
        }
        else {
            push(url);
        }
    };
    const handleClickViewProfile = () => {
        if (onClickMyProfileButton) {
            onClickMyProfileButton();
        }
        else {
            push('profile');
        }
    };
    if (!userInfo) {
        return null;
    }
    return (React__default.createElement("div", { className: styles$1.userNavScreen, "data-theme": themeName },
        React__default.createElement(NavHeader, { userInfo: userInfo, themeName: themeName, onClickMyProfileButton: handleClickViewProfile }),
        React__default.createElement(UserStats, { themeName: themeName, rank: "member", numberOfPosts: numberOfPosts }),
        React__default.createElement("div", { className: styles$1.navigationCardsWrapper }, cards.map((cardType) => (React__default.createElement(NavigationCard, { className: styles$1.navigationCard, key: cardType, themeName: themeName, type: cardType, onClick: handleClickCardItem })))),
        !isUserProfileNavigatorMenuHidden && (React__default.createElement(React__default.Fragment, null,
            React__default.createElement(NavMenu, { themeName: themeName, locale: locale, onClickItem: handleClickMenuItem }),
            logoutButton))));
};

const StyledOpeningHour = styled.div `
  ${MediaQueries.mbUp} {
    margin: 0;
  }

  color: ${theme.colors.gray1000};
  margin-bottom: 1rem;
  .txt-body-1 {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    ${MediaQueries.mbUp} {
      font-size: 0.9375rem;
      line-height: 1.5rem;
      color: ${theme.colors.gray700};
    }
  }
  .txt-body-2 {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    padding: 0.75rem 0 0;
    font-weight: 500;
    ${MediaQueries.mbUp} {
      padding: 0;
      font-weight: 600;
    }
  }

  .txt-hours {
    font-weight: 500;
    color: ${theme.colors.gray1000};
  }
`;
const StyledFormatDataBox = styled.div `
  ${MediaQueries.mbUp} {
    padding: 8px 0;
    gap: 4px;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid ${theme.colors.neutral100};

  &:last-child {
    border-bottom: 0;
  }
`;

function OpeningHours({ workingTimes }) {
    const { t } = useTranslations();
    const formatData = useMemo(() => {
        const result = [];
        let currentKey = '';
        workingDays.forEach((item) => {
            const dayData = workingTimes[item];
            if (dayData) {
                const dayKey = dayData
                    .map((dayItem) => `${dayItem.start_at}-${dayItem.end_at}`)
                    .join('|');
                if (currentKey === dayKey) {
                    result[result.length - 1] = [...result[result.length - 1], item];
                }
                else {
                    result.push([item]);
                }
                currentKey = dayKey;
            }
        });
        return result.map((item) => {
            var _a;
            if (!item.length) {
                return null;
            }
            let dayLabel = t(`workingDays.${item[0]}`);
            if (item.length > 1) {
                dayLabel = `${dayLabel} - ${t(`workingDays.${item.at(-1)}`)}`;
            }
            return {
                day: dayLabel,
                value: (_a = workingTimes[item[0]]) === null || _a === void 0 ? void 0 : _a.map((item) => `${item.start_at.slice(0, 5)} - ${item.end_at.slice(0, 5)}`).join(', '),
            };
        });
    }, [workingTimes]);
    return (React__default.createElement(StyledOpeningHour, null,
        React__default.createElement("div", { className: "txt-body-2" }, t('detail.openHours')),
        React__default.createElement("div", { className: "opening-hours-container" }, formatData.map((item, index) => (React__default.createElement(StyledFormatDataBox, { className: "txt-body-1", key: index },
            React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.day),
            React__default.createElement("div", { className: "txt-hours" }, item === null || item === void 0 ? void 0 : item.value)))))));
}

const getHospitalUrl = (locale, hospital) => {
    var _a;
    return `/${(_a = LOCALISED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${hospital.slug}-${hospital.id}`;
};

const StyledOMap = styled.div `
  position: relative;
  min-height: calc(var(--mapHeight) + var(--card-height));

  &:not([data-has-card]) {
    --mapCardHeight: calc(var(--mapHeight) + 32px);
    height: var(--mapCardHeight);
  }

  strong {
    font-weight: 700;
    &::after {
      content: ' ';
    }
  }

  iframe {
    max-width: 100%;
    /* padding-top: calc(var(--mapHeight) / var(--mapWidth) * 100%); */
  }

  &[data-has-floating-card='true'] {
    --card-height: 0;

    .card {
      position: absolute;
      top: 10px;
      left: 10px;
      max-width: 329px;
    }
  }

  .map {
    width: 100%;
    height: var(--mapHeight);
    border-radius: 6px 6px 0px 0px;

    @media (max-width: 768px) {
      height: auto;
    }
  }

  .infoList {
    display: flex;
    margin-top: 8px;

    svg {
      min-width: 24px;
      margin-right: 8px;
    }
  }

  a {
    text-decoration: none;
  }

  .directions {
    margin-top: 16px;
  }

  .directionsNo {
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 24px;
    color: ${theme.colors.primaryBase};
  }
`;
const StyledCard$1 = styled.div `
    padding: 16px;
    border: 1px solid ${theme.colors.neutral200} 
    background: ${theme.colors.white}
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-width: 100%;

    &:not([data-is-full-width]) {
      @media (min-width: 768px) {
        width: var(--mapWidth);
      }
    }
`;
const StyledHospitalMoreInfo = styled.div `
  margin-top: 4px;
  color: ${theme.colors.gray600};
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.1px;

  address {
    display: inline;
  }

  .dots {
    display: inline-flex;
    margin: 0 0.5rem;
    vertical-align: middle;

    ~ span {
      color: ${theme.colors.gray500};
    }
  }
`;
const StyledHospitalTitle = styled.a `
  display: flex;
  align-items: center;

  span {
    color: ${theme.colors.gray500};
  }

  svg {
    margin: 0 8px;
  }
`;
const PhoneButton = styled(Button) `
  margin-top: 12px;
  width: max-content;
`;

const Map = (props) => {
    const { className, hospital, hasNoCard, isFullWidth, height = 256, width = 768, isUsingEmbedMap = true, isCardFloating = false, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, } = props;
    const { latitude, longitude, address, name: hospitalName } = hospital;
    const lat = parseFloat(latitude);
    const lng = parseFloat(longitude);
    const center = { lng, lat };
    const mapCard = useRef(null);
    const { t } = useTranslations();
    const onLoad = React__default.useCallback(function callback(map) {
        setTimeout(() => {
            map.setZoom(14);
            map.setCenter(center);
        }, 100);
    }, []);
    const mapOptions = {
        mapTypeControl: false,
        fullscreenControl: false,
    };
    const mapHeight = {
        // '--mapHeight': !hasNoCard ? '440px' : height + 'px',
        '--mapHeight': height + 'px',
        '--mapWidth': width + 'px',
        '--card-height': hasNoCard || isCardFloating || !mapCard.current
            ? 0
            : mapCard.current.clientHeight + 'px',
    };
    return (React__default.createElement(StyledOMap, { className: classNames(className), style: mapHeight, "data-has-card": !hasNoCard || undefined, "data-has-floating-card": isCardFloating || undefined },
        React__default.createElement("div", { className: "map" },
            isUsingEmbedMap ? (React__default.createElement("iframe", { width: width, height: height, style: {
                    border: 0,
                }, className: "aspect-ratio-map", loading: "lazy", allowFullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=${googleMapKey}&q=${hospital.latitude},${hospital.longitude}&zoom=14` })) : (React__default.createElement(LoadScript, { googleMapsApiKey: googleMapKey || '' },
                React__default.createElement(GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 14, onLoad: onLoad, options: mapOptions },
                    React__default.createElement(Marker, { position: center })))),
            !hasNoCard ? (React__default.createElement(StyledCard$1, { className: classNames('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
                React__default.createElement(StyledHospitalTitle, { href: `${basePath}${getHospitalUrl(locale, hospital)}` },
                    React__default.createElement(Text, { size: "s2", type: "semiBold" }, hospitalName)),
                React__default.createElement(StyledHospitalMoreInfo, null,
                    React__default.createElement("address", null, address),
                    distance !== undefined && (React__default.createElement(React__default.Fragment, null,
                        React__default.createElement(IconWrapper, { iconSize: 4, wrapperSize: 16, svgIcon: {
                                fill: theme.colors.gray400,
                            }, wrapperStyle: {
                                transform: 'translateY(-2px)',
                            } },
                            React__default.createElement(Ellipse, null)),
                        React__default.createElement("span", null,
                            distance,
                            " km")))),
                hospital.phone && (React__default.createElement(PhoneButton, { size: "md", color: "tertiary", isBlock: false, onClick: onPhoneHospital, icon: React__default.createElement(PhoneInactive, null), dataEventCategory: dataEventCategory, dataEventAction: dataEventAction, dataEventLabel: dataEventLabel }, isLoggedIn || locale === 'ms-MY'
                    ? hospital.phone
                    : t('doctorInfoComponent.loginToCall'))))) : null)));
};

// import { ThemeProps } from '@hhgtech/hhg-components'
const StyledClinicInfo = styled.div `
  ${MediaQueries.mbUp} {
    display: flex;
    gap: ${rem(24)};
    padding: 0 ${rem(24)} ${rem(24)};
  }

  color: #111111;
  padding: 0 ${rem(16)} ${rem(16)};

  .name {
    ${MediaQueries.mbUp} {
      font-weight: 600;
    }

    font-size: 0.9375rem;
    line-height: 1.5rem;
    font-weight: 500;
  }

  address {
    ${MediaQueries.mbUp} {
      font-size: 0.9375rem;
      line-height: 1.5rem;
      font-style: normal;
    }

    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 400;
  }
  .contact-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    border: ${theme.colors.neutral100} 1px solid;
    border-radius: 12px;
    a {
      text-decoration: none;
      color: currentColor;
      font-size: 0.8125rem;
      line-height: 1.25rem;
      font-weight: 500;
    }
  }
  /* .map-card {
    border: none;
  } */
`;
const StyledMap = styled(Map) `
  &.panel-map {
    --mapCardHeight: --cardHeight;
  }
  iframe {
    ${MediaQueries.mbUp} {
      width: ${rem(180)};
      height: ${rem(180)};
    }
    border-radius: 12px;
    overflow: hidden;
  }
`;
const StyledMobileIcon = styled(Mobile) `
  width: 1rem;
  height: 1rem;
`;
const StyledEmailIcon = styled(Email) `
  width: 1rem;
  height: 1rem;
`;
const StyledContainer = styled.div `
  ${MediaQueries.mbUp} {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .clinic-content {
    display: flex;
    flex-direction: column;
    ${MediaQueries.mbUp} {
      gap: 8px;
    }
    gap: 12px;
  }

  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 4.5px;
  padding-right: 4.5px;
  flex: 1;

  & > * + * {
    margin-top: 0.75rem;
  }
`;
const StyledFlexBox = styled.div `
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
`;
const StyledDistanceTag$1 = styled(DistanceTag) `
  border-radius: 0.75rem !important;
`;
const StyledContact = styled.div `
  display: flex;
  gap: 4px;
  flex-direction: column;
  ${MediaQueries.mbUp} {
    flex-direction: row;
  }
  .contact-item {
    width: fit-content;
  }
`;

function ClinicInfo(props) {
    const { hospitalInfo, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, } = props;
    const hospital = {
        latitude: hospitalInfo.latitude || '',
        longitude: hospitalInfo.longitude || '',
        address: hospitalInfo.address || '',
        name: hospitalInfo.name || '',
        phone: hospitalInfo.phone || '',
        email: hospitalInfo.email || '',
    };
    return (React__default.createElement(StyledClinicInfo, null,
        React__default.createElement(StyledMap, { dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel, googleMapKey: googleMapKey, hasNoCard: true, hospital: hospital, locale: locale, isLoggedIn: isLoggedIn, isFullWidth: true, height: 220, className: "panel-map", onPhoneHospital: onPhoneHospital }),
        React__default.createElement(StyledContainer, null,
            React__default.createElement("div", { className: "clinic-content" },
                React__default.createElement("div", { className: "name" }, hospitalInfo.name),
                React__default.createElement(StyledFlexBox, null,
                    React__default.createElement("address", null, hospitalInfo.address),
                    distance && (React__default.createElement("div", { style: {
                            flexShrink: 0,
                        } },
                        React__default.createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
                React__default.createElement(StyledContact, null,
                    hospitalInfo.phone && (React__default.createElement("div", { className: "contact-item" },
                        React__default.createElement(StyledMobileIcon, null),
                        React__default.createElement("a", { href: `tel:${hospitalInfo.phone}` }, formatPhoneNumber(hospitalInfo.phone)))),
                    hospitalInfo.email && (React__default.createElement("div", { className: "contact-item" },
                        React__default.createElement(StyledEmailIcon, null),
                        React__default.createElement("a", { href: `mailto:${hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.email}` }, hospitalInfo.email))))),
            hospitalInfo.working_times && (React__default.createElement(OpeningHours, { workingTimes: hospitalInfo.working_times })))));
}

const StyledCollectPhoneForm = styled.div `
  .mantine-Input-input.custom_input {
    /* font-size: 16px; */
  }
  .info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding: 24px 16px;
    h5 {
      font-weight: 600;
      font-size: 1.25rem;
      line-height: 1.75rem;
      letter-spacing: -0.4px;
      text-align: center;
    }
    .description {
      color: ${theme.colors.gray700};
      text-align: center;

      font-size: 0.8125rem;

      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: -0.3px;
    }
  }

  .mb-1 {
    margin-bottom: 4px;
  }

  .w-full {
    width: 100%;
  }

  .px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .action {
    padding: 8px 16px;
    &.actionBox {
      border-top: 0.5px solid ${theme.colors.neutral100};
    }
  }
`;
const StyledButton$1 = styled(Button$1) `
  &.mantine-Button-root {
    border-radius: 12px;
    border: 1px solid;
    font-size: 15px;

    &.tertiary {
      border-color: ${theme.colors.neutral200};
    }
  }

  .mantine-Button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
`;
styled(DrawerBottom) ``;
const StyledPhone$1 = styled(Phone) `
  --custom-primary-text: #111111;
  .PhoneInputCountry {
    pointer-events: none;
    --phone-select: 58px;
  }

  &.PhoneInput {
    .PhoneInputCountry {
    }

    .PhoneInputCountryIconCallingCode {
      color: var(--custom-primary-text);
    }

    .PhoneInputInput {
      color: var(--custom-primary-text) !important ;
      :focus {
        color: var(--custom-primary-text) !important ;
      }
    }
  }
`;
const StyledInputWrapper$1 = styled(Input.Wrapper) `
  --phone-input-space-x: -8px;
  .mantine-Text-root[data-size='c1'] {
    font-size: 0.75rem;
  }
  .mantine-Text-root[data-size='p3'] {
    font-size: 0.8125rem;
  }

  .mantine-Text-root[data-size='p2'] {
    font-size: 0.9375rem;
  }
`;

var img = "data:image/svg+xml,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.04169 13.5416L12.5834 9.99998L9.04169 6.45831' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
var Right = img;

const formPhoneType = {
    ZALO: 'Zalo',
    WHATS_APP: 'Whatsapp',
};
const DEFAULT_COUNTRY_CODE$1 = 'VN';
function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLoading, locale, }) {
    const { t } = useTranslations();
    const [phone, setPhone] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [isSubmitted, setIsSubmitted] = useState(false);
    const { classes } = useTextStyles();
    const validatePhone = (value) => {
        try {
            if (!value) {
                setErrorMessage(t('collectPhoneNumber.phoneRequired'));
                return;
            }
            const phoneData = parsePhoneNumber(value, DEFAULT_COUNTRY_CODE$1);
            if (!(phoneData === null || phoneData === void 0 ? void 0 : phoneData.isValid())) {
                setErrorMessage(t('collectPhoneNumber.inputInvalid'));
            }
            else {
                setErrorMessage('');
            }
        }
        catch (error) {
            setErrorMessage(t('collectPhoneNumber.inputInvalid'));
        }
    };
    const handleChange = (value) => {
        validatePhone(value);
        setPhone(value);
    };
    const handleSubmit = () => {
        validatePhone(phone);
        setIsSubmitted(true);
        const phoneData = parsePhoneNumber(phone, DEFAULT_COUNTRY_CODE$1);
        if (phoneData && phoneData.isValid()) {
            const areaCode = phoneData.countryCallingCode;
            onSubmit({
                phone: phoneData.nationalNumber,
                countryCode: phoneData.country,
                callingCode: (areaCode === null || areaCode === void 0 ? void 0 : areaCode.includes('+')) ? areaCode : `+${areaCode}`,
            });
        }
    };
    return (React__default.createElement(StyledCollectPhoneForm, null,
        React__default.createElement("div", { className: "info" },
            formType === formPhoneType.ZALO && (React__default.createElement(HelloZalo, { width: 84, height: 48 })),
            ' ',
            React__default.createElement("h5", { className: "px-3" }, title ||
                t('collectPhoneNumber.title', {
                    name: formType,
                })),
            React__default.createElement(TextField, { shrink: !!phone, className: clsx('leadgen-form_input w-full', {
                    'leadgen-form_field_error': !!(isSubmitted && errorMessage),
                }) },
                React__default.createElement(TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper$1, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                        errorMessage && (React__default.createElement(Flex, { align: 'center', gap: 4 },
                        React__default.createElement(ErrorIcon, { size: 12 }),
                        React__default.createElement(Text$1, { size: "c1", variant: "error" }, errorMessage))) },
                    React__default.createElement(Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { fontWeight: FontWeight.halfBold }),
                        }) },
                        React__default.createElement(StyledPhone$1, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE$1], arrowComponent: () => React__default.createElement(React__default.Fragment, null) }))))))),
        React__default.createElement("div", { className: "action actionBox" },
            React__default.createElement(StyledButton$1, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                React__default.createElement("div", null, t('collectPhoneNumber.action')),
                React__default.createElement("img", { src: Right, alt: "arrow icon", width: 20, height: 20 })))));
}

function CollectPhoneSuccess({ onClose }) {
    const { t } = useTranslations();
    return (React__default.createElement(StyledCollectPhoneForm, null,
        React__default.createElement("div", { className: "info" },
            React__default.createElement(Check, { width: 80, height: 80 }),
            React__default.createElement("div", null,
                React__default.createElement("h5", { className: "mb-1" }, t('collectPhoneNumber.titleSuccess')),
                React__default.createElement("p", { className: "description" }, t('collectPhoneNumber.descriptionSuccess')))),
        React__default.createElement("div", { className: "action" },
            React__default.createElement(StyledButton$1, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
}

var EPopupCollectPhoneStep;
(function (EPopupCollectPhoneStep) {
    EPopupCollectPhoneStep[EPopupCollectPhoneStep["FORM"] = 0] = "FORM";
    EPopupCollectPhoneStep[EPopupCollectPhoneStep["SUCCESS"] = 1] = "SUCCESS";
})(EPopupCollectPhoneStep || (EPopupCollectPhoneStep = {}));
function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, onOpenChange, drawerProps = {}, }) {
    const modalState = useDisclosure(isOpenProp);
    const [currentStep, setCurrentStep] = useState(EPopupCollectPhoneStep.FORM);
    const [isOpen, { open, toggle, close }] = modalState;
    const [isLoading, setIsLoading] = useState(false);
    const handleOpenChange = (isOpen) => {
        if (isOpen) {
            open();
        }
        else {
            close();
        }
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    const handleClose = () => {
        handleOpenChange(false);
    };
    const handleSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
        try {
            setIsLoading(true);
            yield onSubmit(data);
            setCurrentStep(EPopupCollectPhoneStep.SUCCESS);
        }
        catch (error) {
            console.log('🚀 ~ handleSubmit ~ error:', error);
        }
        finally {
            setIsLoading(false);
        }
    });
    useEffect(() => {
        if (isOpen) {
            setCurrentStep(EPopupCollectPhoneStep.FORM);
        }
    }, [isOpen]);
    useEffect(() => {
        handleOpenChange(isOpenProp);
    }, [isOpenProp]);
    return (React__default.createElement(React__default.Fragment, null,
        typeof children === 'function' ? (children(modalState)) : (React__default.createElement("div", { onClick: toggle }, children)),
        React__default.createElement(DrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: isMobile, fadeFromIndex: ZINDEX_SSO - 9e6, zIndex: ZINDEX_SSO, repositionInputs: false, isLinear: currentStep === EPopupCollectPhoneStep.SUCCESS }, drawerProps),
            currentStep === EPopupCollectPhoneStep.FORM && (React__default.createElement(CollectPhoneForm, { onSubmit: handleSubmit, isLoading: isLoading })),
            currentStep === EPopupCollectPhoneStep.SUCCESS && (React__default.createElement(CollectPhoneSuccess, { onClose: handleClose })))));
}

const StyledRequestConsultationForm = styled.div `
  padding-top: 16px;
  padding-bottom: 16px;
  width: 100%;

  & #request_consultation_name_input.mantine-Input-input {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: ${theme.colors.gray1000};
  }

  & #gender-option-control-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.3px;
    color: ${theme.colors.gray600};
  }

  & .radio-group .gender-item .mantine-Radio-label {
    border-radius: 8px;
  }

  & .info {
    .PhoneInput .PhoneInputInput {
      &:focus {
        border-color: unset;
        outline: none;
        box-shadow: none;
      }

      &:hover {
        border-color: unset;
        outline: none;
        box-shadow: none;
      }
    }
  }

  ${MediaQueries.mbUp} {
    width: 420px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .mantine-Input-input.custom_input {
    /* font-size: 16px; */
  }

  .formHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 24px;
    margin-bottom: 34px;
    ${MediaQueries.mbUp} {
      margin-bottom: 24px;
    }
  }

  .formHeaderIcon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    svg {
      width: 40px;
      height: 40px;
    }
  }

  .formCloseButton {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: ${theme.colors.white};
    border: none;
    cursor: pointer;
    color: ${theme.colors.gray800};
    :hover {
      background: ${theme.colors.gray100};
    }
  }

  .formTitleBlock {
    margin-top: 4px;
    padding: 0 24px 24px;
  }

  .formTitle {
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 2rem;
    letter-spacing: -0.4px;
    color: ${theme.colors.gray800};
    margin-bottom: 12px;
  }

  .formSubtitle {
    color: ${theme.colors.gray600};
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: -0.2px;
    margin: 0;
  }

  .info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 0 24px 16px;
    text-align: left;
    h5 {
      font-weight: 600;
      font-size: 1.25rem;
      line-height: 1.75rem;
      letter-spacing: -0.4px;
      text-align: center;
    }
    .description {
      color: ${theme.colors.gray700};
      text-align: center;
      font-size: 0.8125rem;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: -0.3px;
    }
    &.center {
      align-items: center;
    }
  }

  .mb-1 {
    margin-bottom: 4px;
  }

  .w-full {
    width: 100%;
  }

  .px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .action {
    padding: 0px 24px;
    width: 100%;
    &.actionBox {
      border-top: 0.5px solid ${theme.colors.neutral100};
      padding-top: 16px;
    }
  }

  &.formSuccess {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100%;

    .action {
      padding: 0px 24px;
    }
  }
`;
const StyledButton = styled(Button$1) `
  &.mantine-Button-root {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;

    &:hover {
      background-color: ${theme.colors.primaryBase};
    }

    background-color: ${theme.colors.primaryBase};
    color: ${theme.colors.white};

    &.tertiary {
      border-color: ${theme.colors.neutral200};
    }
  }

  .mantine-Button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
`;
const StyledDrawerBottom = styled(DrawerBottom) `
  ${MediaQueries.mbDown} {
    .mantine-Modal-content {
      height: 100dvh;
    }
  }

  .mantine-Modal-body {
    padding: 0;
    height: 100%;

    .formSuccess {
      background: linear-gradient(180deg, #a5d4ff 0%, #ffffff 50%);
    }
  }
`;
const StyledPhone = styled(Phone) `
  --custom-primary-text: #111111;
  .PhoneInputCountry {
    pointer-events: none;
    --phone-select: 58px;
  }

  &.PhoneInput {
    .PhoneInputCountry {
    }

    .PhoneInputCountryIconCallingCode {
      color: var(--custom-primary-text);
    }

    .PhoneInputInput {
      color: var(--custom-primary-text) !important ;
      :focus {
        color: var(--custom-primary-text) !important ;
      }
    }
  }
`;
const StyledInputWrapper = styled(Input.Wrapper) `
  --phone-input-space-x: -8px;
  .mantine-Text-root[data-size='c1'] {
    font-size: 0.75rem;
  }
  .mantine-Text-root[data-size='p3'] {
    font-size: 0.8125rem;
  }

  .mantine-Text-root[data-size='p2'] {
    font-size: 0.9375rem;
  }
`;

var EGender;
(function (EGender) {
    EGender["Male"] = "male";
    EGender["Female"] = "female";
})(EGender || (EGender = {}));
const DEFAULT_COUNTRY_CODE = ['VN', 'MY'];
function RequestConsultationForm({ onSubmit, onClose, title, isLoading, locale, }) {
    const { t } = useTranslations();
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [gender, setGender] = useState(EGender.Female);
    const [nameError, setNameError] = useState('');
    const [phoneError, setPhoneError] = useState('');
    const [genderError, setGenderError] = useState('');
    const [isSubmitted, setIsSubmitted] = useState(false);
    const { classes } = useTextStyles();
    const defaultCountry = (locale ? MAPPED_LOCALE$1[locale] || 'VN' : 'VN');
    const validatePhone = (value) => {
        try {
            if (!value) {
                setPhoneError(t('collectPhoneNumber.phoneRequired'));
                return false;
            }
            const phoneData = parsePhoneNumber(value, defaultCountry);
            if (!(phoneData === null || phoneData === void 0 ? void 0 : phoneData.isValid())) {
                setPhoneError(t('collectPhoneNumber.inputInvalid'));
                return false;
            }
            setPhoneError('');
            return true;
        }
        catch (_a) {
            setPhoneError(t('collectPhoneNumber.inputInvalid'));
            return false;
        }
    };
    const handlePhoneChange = (value) => {
        setPhone(value);
        if (value) {
            validatePhone(value);
        }
        else {
            setPhoneError('');
        }
    };
    const handleSubmit = () => {
        setIsSubmitted(true);
        const hasName = !!(name === null || name === void 0 ? void 0 : name.trim());
        if (!hasName) {
            setNameError(t('popupRequestConsultation.nameRequired'));
        }
        else {
            setNameError('');
        }
        const phoneValid = validatePhone(phone);
        const hasGender = gender === EGender.Male || gender === EGender.Female;
        if (!hasGender) {
            setGenderError(t('popupRequestConsultation.genderRequired'));
        }
        else {
            setGenderError('');
        }
        if (!hasName || !phoneValid || !hasGender)
            return;
        const phoneData = parsePhoneNumber(phone, defaultCountry);
        if (!phoneData || !phoneData.isValid())
            return;
        const areaCode = phoneData.countryCallingCode;
        onSubmit({
            name: name.trim(),
            phone: phoneData.nationalNumber,
            countryCode: phoneData.country,
            callingCode: (areaCode === null || areaCode === void 0 ? void 0 : areaCode.includes('+')) ? areaCode : `+${areaCode}`,
            gender: gender,
        });
    };
    return (React__default.createElement(StyledRequestConsultationForm, null,
        React__default.createElement("div", { className: "formHeader" },
            React__default.createElement("div", { className: "formHeaderIcon" },
                React__default.createElement(Comment, { width: 24, height: 24 })),
            React__default.createElement("button", { type: "button", className: "formCloseButton", onClick: onClose, "aria-label": t('common.action.close') },
                React__default.createElement(Close, { width: 20, height: 20 }))),
        React__default.createElement("div", { className: "formTitleBlock" },
            React__default.createElement("h2", { className: "formTitle" }, title || t('popupRequestConsultation.title')),
            React__default.createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.subtitle'))),
        React__default.createElement("div", { className: "info" },
            React__default.createElement(TextField, { shrink: !!name, className: clsx('leadgen-form_input w-full', {
                    'leadgen-form_field_error': !!(isSubmitted && nameError),
                }) },
                React__default.createElement(TextField.Control, { htmlFor: "request_consultation_name_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && nameError), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.yourName')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                        nameError && (React__default.createElement(Flex, { align: 'center', gap: 4 },
                        React__default.createElement(ErrorIcon, { size: 12 }),
                        React__default.createElement(Text$1, { size: "c1", variant: "error" }, nameError))) },
                    React__default.createElement(Input, { id: "request_consultation_name_input", value: name, onChange: (value) => {
                            setName(value !== null && value !== void 0 ? value : '');
                            if (isSubmitted && nameError)
                                setNameError('');
                        }, placeholder: " ", classNames: { input: `mantine-Input-input ${classes.p2}` } }))))),
            React__default.createElement(TextField, { shrink: !!phone, className: clsx('leadgen-form_input w-full', {
                    'leadgen-form_field_error': !!(isSubmitted && phoneError),
                }) },
                React__default.createElement(TextField.Control, { htmlFor: "request_consultation_phone_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && phoneError), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.phoneLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                        phoneError && (React__default.createElement(Flex, { align: 'center', gap: 4 },
                        React__default.createElement(ErrorIcon, { size: 12 }),
                        React__default.createElement(Text$1, { size: "c1", variant: "error" }, phoneError))) },
                    React__default.createElement(Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { fontWeight: FontWeight.halfBold }),
                        }) },
                        React__default.createElement(StyledPhone, { inputId: "request_consultation_phone_input", onChange: handlePhoneChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: defaultCountry, type: "text", value: phone, "data-control": "tel", countries: DEFAULT_COUNTRY_CODE, arrowComponent: () => React__default.createElement(React__default.Fragment, null) })))))),
            React__default.createElement(GenderOptionControl, { id: "gender-option-control-consultation", label: t('popupRequestConsultation.gender'), type: "button", value: gender || undefined, onChange: (v) => {
                    setGender(v);
                    if (isSubmitted && genderError)
                        setGenderError('');
                }, error: isSubmitted && genderError ? genderError : undefined, styles: {
                    wrapper: {
                        flexDirection: 'row-reverse',
                    },
                }, labelText: {
                    size: 'title2',
                    color: 'gray800',
                    fw: 500,
                } })),
        React__default.createElement("div", { className: "action" },
            React__default.createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading }, t('popupRequestConsultation.action')))));
}

function RequestConsultationSuccess({ onClose, }) {
    const { t } = useTranslations();
    return (React__default.createElement(StyledRequestConsultationForm, { className: "formSuccess" },
        React__default.createElement("div", { className: "formTitleBlock" },
            React__default.createElement(Check, { width: 64, height: 64 })),
        React__default.createElement("div", { className: "formTitleBlock" },
            React__default.createElement("h2", { className: "formTitle" }, t('popupRequestConsultation.titleSuccess')),
            React__default.createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.descriptionSuccess'))),
        React__default.createElement("div", { className: "action" },
            React__default.createElement(StyledButton, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
}

var EPopupRequestConsultationStep;
(function (EPopupRequestConsultationStep) {
    EPopupRequestConsultationStep[EPopupRequestConsultationStep["FORM"] = 0] = "FORM";
    EPopupRequestConsultationStep[EPopupRequestConsultationStep["SUCCESS"] = 1] = "SUCCESS";
})(EPopupRequestConsultationStep || (EPopupRequestConsultationStep = {}));
function PopupRequestConsultation({ children, isMobile, onSubmit, isOpen: isOpenProp, onOpenChange, drawerProps = {}, locale, }) {
    const modalState = useDisclosure(isOpenProp);
    const [currentStep, setCurrentStep] = useState(EPopupRequestConsultationStep.FORM);
    const [isOpen, { open, toggle, close }] = modalState;
    const [isLoading, setIsLoading] = useState(false);
    const handleOpenChange = (isOpen) => {
        if (isOpen) {
            open();
        }
        else {
            close();
        }
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    const handleClose = () => {
        handleOpenChange(false);
    };
    const handleSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
        try {
            setIsLoading(true);
            yield onSubmit(data);
            setCurrentStep(EPopupRequestConsultationStep.SUCCESS);
        }
        catch (error) {
            console.log('🚀 ~ handleSubmit ~ error:', error);
        }
        finally {
            setIsLoading(false);
        }
    });
    useEffect(() => {
        if (isOpen) {
            setCurrentStep(EPopupRequestConsultationStep.FORM);
        }
    }, [isOpen]);
    useEffect(() => {
        handleOpenChange(isOpenProp);
    }, [isOpenProp]);
    return (React__default.createElement(React__default.Fragment, null,
        typeof children === 'function' ? (children(modalState)) : (React__default.createElement("div", { onClick: toggle }, children)),
        React__default.createElement(StyledDrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: false, fadeFromIndex: ZINDEX_SSO - 9e6, zIndex: ZINDEX_SSO, repositionInputs: false, isLinear: true, withCloseButton: false, fullScreen: isMobile }, drawerProps),
            currentStep === EPopupRequestConsultationStep.FORM && (React__default.createElement(RequestConsultationForm, { onSubmit: handleSubmit, onClose: handleClose, isLoading: isLoading, locale: locale })),
            currentStep === EPopupRequestConsultationStep.SUCCESS && (React__default.createElement(RequestConsultationSuccess, { onClose: handleClose })))));
}

const StyledHospitalInfo = styled.div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  .hospitalName {
    color: #111111;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
  }
  .hospitalStatus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;

    font-size: 0.6875rem;
    line-height: 1rem;
    color: ${theme.colors.red600};

    &[data-is-opened='true'] {
      color: ${theme.colors.primaryBase};
    }
  }

  .distanceTag {
    padding: 4px 0px;
  }

  .flex-1 {
    flex: 1 1 0%;
  }
`;
const StyledImageWrap = styled(ImageWrap) `
  /* object-contain object-center aspect-square  */
  width: 44px;
  height: 44px;
  background-color: ${theme.colors.neutral50};
  padding: 2px;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  flex-shrink: 0;
  aspect-ratio: 1;
  align-self: baseline;
`;
const StyledClockIcon = styled(Clock) `
  width: 12px;
  height: 12px;
`;
const StyledArrowRightIcon = styled(ShapedArrowDown) `
  flex-shrink: 0;
  color: ${theme.colors.gray400};
  width: 12px;
  height: 12px;
  transform: rotate(90deg);

  & > path {
    stroke-width: 1.5;
  }
`;
const StyledDistanceTag = styled(DistanceTag) `
  & > span {
    color: ${theme.colors.gray800};
  }

  & {
    border: none;
  }
`;

const checkHospitalStatus = (times) => {
    if (!times) {
        return false;
    }
    const currentDate = new Date();
    const currentShortDay = workingDays.at(currentDate.getDay() - 1);
    const openTime = times[currentShortDay];
    return openTime === null || openTime === void 0 ? void 0 : openTime.some((item) => {
        const [startHour, startMinute] = item.start_at.split(':').map(parseInt);
        const [endHour, endMinute] = item.end_at.split(':').map(parseInt);
        const currentHour = currentDate.getHours();
        const currentMinute = currentDate.getMinutes();
        if (startHour === endHour && endHour == currentHour) {
            return !(currentMinute < startMinute || currentMinute > endMinute);
        }
        return !(currentHour < startHour || currentHour > endHour);
    });
};
function HospitalInfo({ hospitalInfo, distance, className, }) {
    const { t } = useTranslations();
    const [isOpened, setIsOpened] = useState(null);
    useEffect(() => {
        setIsOpened(checkHospitalStatus(hospitalInfo.working_times));
    }, [hospitalInfo.working_times]);
    return (React__default.createElement(StyledHospitalInfo, { className: className },
        React__default.createElement(StyledImageWrap, { src: hospitalInfo.logo, backupSrc: CommonGAssets.getAssetPath('avatar.jpg'), alt: "hospital" }),
        React__default.createElement("div", { className: "flex-1" },
            React__default.createElement("div", { className: "hospitalName" }, hospitalInfo.name),
            hospitalInfo.working_times && isOpened !== null && (React__default.createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
                React__default.createElement(StyledClockIcon, null),
                React__default.createElement(Text$1, { size: "p3", weight: "regular", color: "inherit" }, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
            distance && (React__default.createElement(StyledDistanceTag, { className: classNames({
                    distanceTag: hospitalInfo.working_times === null,
                }), value: `${distance} km` }))),
        React__default.createElement(StyledArrowRightIcon, null)));
}

const StyledInsuranceContainer = styled.div `
  padding: 0 1rem 1.25rem;

  & > :not(:first-child) {
    margin-top: 1.25rem;
  }

  .txt-body-1 {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: ${theme.colors.gray700};
  }
  .txt-body-2 {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: ${theme.colors.gray800};
    font-weight: 600;
  }
  .txt-caption-1 {
    font-size: 0.6875rem;
    line-height: 1rem;
    color: ${theme.colors.gray800};
  }

  h3 {
    padding: 1rem 0;
  }
`;
const StyledInsuranceList = styled(InsuranceList) `
  gap: 8px;
  margin-top: 1rem;
  & .insuranceItem > .insuranceLogo {
    height: 64px;
    border-radius: 12px;
    border-color: ${theme.colors.neutral100};
    & > img {
      height: auto;
      aspect-ratio: 109/64;
    }
  }
`;

function ProductInsuranceInfo({ hospitalInfo, isMobile = false, }) {
    const { t } = useTranslations();
    const isSupportPayment = (hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.accepted_payments) && hospitalInfo.accepted_payments.length > 0;
    return (React__default.createElement(StyledInsuranceContainer, { id: "insurance-container" },
        React__default.createElement("div", null,
            React__default.createElement("h3", { className: "txt-body-2" }, t('common.insurance')),
            React__default.createElement("p", { className: "txt-body-1" }, t('common.insuranceIntro')),
            React__default.createElement(StyledInsuranceList, { insurances: hospitalInfo.insurances, isName: false })),
        isSupportPayment && (React__default.createElement("div", null,
            React__default.createElement("h3", { className: "txt-body-2" }, t('common.paymentMethods')),
            React__default.createElement(PaymentList, { payments: hospitalInfo.accepted_payments, isMobile: isMobile })))));
}

const defaultValue = {
    id: '',
    name: '',
    specialty: '',
    experience: '',
    profileImage: '',
    clinics: '',
    educations: [],
    expertise: '',
    otherHighlights: [],
};
const DoctorExpertiseContext = createContext(defaultValue);
const DoctorExpertiseProvider = ({ children, value }) => {
    return (React__default.createElement(DoctorExpertiseContext.Provider, { value: value }, children));
};

const StyledCard = styled.div `
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: ${theme.colors.blue50};
  border-radius: 12px;
  padding: 0px 4px 4px;

  .body-section {
    width: 100%;
    height: 100%;
  }
`;
const StyledBodySection = styled.div `
  background-color: #ffffffcc;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .flex-item-doctor-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
`;
const StyledReadMore = styled.div `
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
`;
const StyledPositionOfButton = styled.div `
  display: flex;
  justify-content: flex-end;
`;
const StyledArrowRightBlue = styled(ArrowRightBlue) `
  width: 0.65rem;
  height: 0.65rem;
  & > path {
    stroke-width: 1.25;
  }
`;

const DoctorExpertise = (props) => {
    var _a, _b, _c, _d;
    const { className, doctorInformation, onClickReadMore, children, isShowReadMoreButton, style, defaultProfileImage, } = props;
    const { t } = useTranslations();
    const isShowBodySection = ((_a = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _a === void 0 ? void 0 : _a.length) > 0 ||
        ((_b = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _b === void 0 ? void 0 : _b.length) > 0 ||
        children ||
        isShowReadMoreButton;
    return (React__default.createElement(DoctorExpertiseProvider, { value: doctorInformation },
        React__default.createElement(StyledCard, { className: className, style: style },
            React__default.createElement(DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
            isShowBodySection && (React__default.createElement(StyledBodySection, { className: "body-section" },
                React__default.createElement("div", { className: "flex-item-doctor-info" },
                    ((_c = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _c === void 0 ? void 0 : _c.length) > 0 && (React__default.createElement(DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: Clinic, title: t('common.clinicHospital') })),
                    ((_d = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _d === void 0 ? void 0 : _d.length) > 0 && (React__default.createElement(DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
                    children),
                isShowReadMoreButton && (React__default.createElement(StyledPositionOfButton, null,
                    React__default.createElement(StyledReadMore, { onClick: onClickReadMore },
                        React__default.createElement(Text$1, { size: "p2", weight: "halfBold", color: theme.colors.primaryBase }, t('common.readMore')),
                        React__default.createElement(StyledArrowRightBlue, null)))))))));
};
DoctorExpertise.Expertise = () => {
    const { expertise } = useContext(DoctorExpertiseContext);
    const { t } = useTranslations();
    if (!expertise)
        return null;
    return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
};
DoctorExpertise.OtherHighlights = () => {
    const { otherHighlights } = useContext(DoctorExpertiseContext);
    const { t } = useTranslations();
    if (!otherHighlights)
        return null;
    return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
};

const ArticleCardStyled = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${rem(12)};
`;
const ArticleCardContentStyled = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${rem(8)};
`;
const ArticleCardContentTitleStyled = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${rem(4)};
`;
const ArticleDoctorStyled = styled.div `
  display: flex;
  gap: ${rem(4)};
  align-items: center;
`;
const TextSpanStyled = styled.span `
  color: ${theme.colors.gray600};
`;

const ArticleDetailCard = (props) => {
    const { article, doctor, className, style, handleClick, altText } = props;
    const { articleType, articleTitle, articleTypeColor, image, defaultImage } = article || {};
    const { doctorName, doctorAvatar, defaultDoctorAvatar } = doctor || {};
    const { t } = useTranslations();
    return (React__default.createElement(ArticleCardStyled, { className: className, style: style, onClick: handleClick },
        React__default.createElement(ImageWrap, { alt: altText || articleTitle || 'article-image', src: image || defaultImage, style: {
                width: '100%',
                height: rem(143.5),
                objectFit: 'cover',
                borderRadius: rem(4),
            } }),
        React__default.createElement(ArticleCardContentStyled, null,
            React__default.createElement(ArticleCardContentTitleStyled, null,
                React__default.createElement(Text$1, { color: articleTypeColor || theme.colors.green600, size: "c1", weight: "halfBold" }, articleType),
                React__default.createElement(Text$1, { size: "p2", weight: "semiBold", color: theme.colors.gray800, lineClamp: 2 }, articleTitle)),
            React__default.createElement(ArticleDoctorStyled, null,
                React__default.createElement(ImageWrap, { alt: `${t('common.articleCard.reviewedDoctor')} ${doctorName}`, src: doctorAvatar || defaultDoctorAvatar, style: {
                        width: rem(20),
                        height: rem(20),
                        borderRadius: '50%',
                    } }),
                React__default.createElement("div", null,
                    React__default.createElement(Text$1, { size: "c1", weight: "regular", color: theme.colors.gray800, lineClamp: 1 },
                        React__default.createElement(TextSpanStyled, null,
                            t('common.articleCard.reviewedDoctor'),
                            ":"),
                        ' ',
                        doctorName))))));
};

export { ArticleDetailCard as A, ClinicInfo as C, DoctorExpertise as D, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, RequestConsultationForm as R, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, EGender as c, RequestConsultationSuccess as d, EPopupRequestConsultationStep as e, formPhoneType as f, PopupRequestConsultation as g, ProductInsuranceInfo as h, Check as i, Clock as j, Comment as k, Credential as l, Education as m, Email as n, HelloZalo as o, Highlight as p, Ellipse as q, PhoneInactive as r };
