@hhgtech/hhg-components 1.29.425 → 1.29.427

package/build/{popupCollectPhone-3a70de20.js → index-3db34d6c.js}

@@ -1,28 +1,36 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-089be51a.js');
+var index = require('./index-5ec81cca.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-2663b000.js');
-var normalizeLink = require('./normalizeLink-638a6b47.js');
+var index$2 = require('./index-c20fff5e.js');
+var normalizeLink = require('./normalizeLink-b57c525b.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-46196d8a.js');
-var index$3 = require('./index-5a21af30.js');
-var index$4 = require('./index-4b672aee.js');
-var tslib_es6 = require('./tslib.es6-1f319ffe.js');
+var index$1 = require('./index-1e9b97a1.js');
+var index$3 = require('./index-96fb4841.js');
+var index$4 = require('./index-66453094.js');
+var types = require('./types-333bb648.js');
+var styled = require('@emotion/styled');
+var api = require('@react-google-maps/api');
+var cn = require('classnames');
+var index$5 = require('./index-77176185.js');
+var constants = require('./constants-c75d902a.js');
+var index$6 = require('./index-ddd2b7cb.js');
+var localizeNumberFormat = require('./localizeNumberFormat-a61caeed.js');
+var tslib_es6 = require('./tslib.es6-080a907c.js');
 var hooks = require('@mantine/hooks');
 var core = require('@mantine/core');
+var index$7 = require('./index-83e82160.js');
 var vaul = require('vaul');
-var styled = require('@emotion/styled');
-var index$5 = require('./index-14f470b9.js');
-var index$6 = require('./index-2ec21423.js');
-var index$9 = require('./index-b3e4e007.js');
+var index$a = require('./index-010f3437.js');
 var PhoneInputBase = require('react-phone-number-input');
-var text = require('./text-ba4d7d89.js');
-var index$8 = require('./index-896cb554.js');
-var index$7 = require('./index-d1ec8e7a.js');
-var index$b = require('./index-4f9c33df.js');
-var index$a = require('./index-b5dd07cd.js');
+var text = require('./text-5ca13f79.js');
+var index$9 = require('./index-bb77e0cd.js');
+var index$8 = require('./index-1db811a4.js');
+var index$c = require('./index-20ccf63a.js');
+var index$b = require('./index-29ce9a07.js');
+var index$d = require('./index-7026b771.js');
+var index$e = require('./index-5d7a2ba1.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -46,12 +54,18 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var cn__default = /*#__PURE__*/_interopDefault(cn);
 
 /* eslint-disable prettier/prettier */
 const Check = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),
     React__namespace.createElement("circle", { cx: 39.5, cy: 40, r: 36, fill: "#00B16A" }),
     React__namespace.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__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none" }, props),
+    React__namespace.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__namespace.createElement("path", { d: "M6 3.25V6L8 7.75", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+
 /* eslint-disable prettier/prettier */
 const HelloZalo = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 85 49", fill: "none" }, props),
     React__namespace.createElement("g", { clipPath: "url(#clip0_4296_167461)" },
@@ -102,6 +116,20 @@ const HelloZalo = (props) => (React__namespace.createElement("svg", Object.assig
         React__namespace.createElement("clipPath", { id: "clip0_4296_167461" },
             React__namespace.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 Ellipse = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 4 4", fill: "none" }, props),
+    React__namespace.createElement("circle", { cx: 2, cy: 2, r: 2, fill: "#BFBFBF" })));
+
+/* eslint-disable prettier/prettier */
+const Mobile = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 17 16", fill: "none" }, props),
+    React__namespace.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__namespace.createElement("path", { d: "M7.38892 1.55566V2.44455H9.61114V1.55566", stroke: "currentColor", strokeWidth: 1.33333, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React__namespace.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__namespace.createElement("svg", Object.assign({ className: "callTrigger", width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none" }, props),
+    React__namespace.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',
@@ -443,7 +471,349 @@ const UserProfileNavigation = ({ SSO_URL, UP_BASEPATH = 'user', themeName = 'hel
             logoutButton))));
 };
 
-styled__default["default"](index$5.DrawerComponent) `
+const StyledOpeningHour = styled__default["default"].div `
+  color: #111111;
+  margin-bottom: 1rem;
+  .txt-body-1 {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+  }
+  .txt-body-2 {
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
+  }
+`;
+const StyledFormatDataBox = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`;
+
+function OpeningHours({ workingTimes }) {
+    const { t } = index.useTranslations();
+    const formatData = React.useMemo(() => {
+        const result = [];
+        let currentKey = '';
+        types.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__namespace["default"].createElement(StyledOpeningHour, null,
+        React__namespace["default"].createElement("div", { className: "txt-body-2", style: {
+                padding: '0.75rem 0',
+                fontWeight: 500,
+            } }, t('detail.openHours')),
+        React__namespace["default"].createElement("div", null, formatData.map((item, index) => (React__namespace["default"].createElement(StyledFormatDataBox, { className: "txt-body-1", key: index },
+            React__namespace["default"].createElement("div", null, item === null || item === void 0 ? void 0 : item.day),
+            React__namespace["default"].createElement("div", { style: { fontWeight: 500 } }, item === null || item === void 0 ? void 0 : item.value)))))));
+}
+
+const getHospitalUrl = (locale, hospital) => {
+    var _a;
+    return `/${(_a = constants.LOCALISED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${hospital.slug}-${hospital.id}`;
+};
+
+const StyledOMap = styled__default["default"].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: ${miscTheme.theme.colors.primaryBase};
+  }
+`;
+const StyledCard = styled__default["default"].div `
+    padding: 16px;
+    border: 1px solid ${miscTheme.theme.colors.neutral200} 
+    background: ${miscTheme.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__default["default"].div `
+  margin-top: 4px;
+  color: ${miscTheme.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: ${miscTheme.theme.colors.gray500};
+    }
+  }
+`;
+const StyledHospitalTitle = styled__default["default"].a `
+  display: flex;
+  align-items: center;
+
+  span {
+    color: ${miscTheme.theme.colors.gray500};
+  }
+
+  svg {
+    margin: 0 8px;
+  }
+`;
+const PhoneButton = styled__default["default"](index$4.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 = React.useRef(null);
+    const { t } = index.useTranslations();
+    const onLoad = React__namespace["default"].useCallback(function callback(map) {
+        const bounds = new window.google.maps.LatLngBounds();
+        map.fitBounds(bounds);
+        setTimeout(() => 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__namespace["default"].createElement(StyledOMap, { className: cn__default["default"](className), style: mapHeight, "data-has-card": !hasNoCard || undefined, "data-has-floating-card": isCardFloating || undefined },
+        React__namespace["default"].createElement("div", { className: "map" },
+            isUsingEmbedMap ? (React__namespace["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}` })) : (React__namespace["default"].createElement(api.LoadScript, { googleMapsApiKey: googleMapKey || '' },
+                React__namespace["default"].createElement(api.GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 15, onLoad: onLoad, options: mapOptions },
+                    React__namespace["default"].createElement(api.Marker, { position: center })))),
+            !hasNoCard ? (React__namespace["default"].createElement(StyledCard, { className: cn__default["default"]('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
+                React__namespace["default"].createElement(StyledHospitalTitle, { href: `${index$5.basePath}${getHospitalUrl(locale, hospital)}` },
+                    React__namespace["default"].createElement(index$6.Text, { size: "s2", type: "semiBold" }, hospitalName)),
+                React__namespace["default"].createElement(StyledHospitalMoreInfo, null,
+                    React__namespace["default"].createElement("address", null, address),
+                    distance !== undefined && (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                        React__namespace["default"].createElement(index$1.IconWrapper, { iconSize: 4, wrapperSize: 16, svgIcon: {
+                                fill: miscTheme.theme.colors.gray400,
+                            }, wrapperStyle: {
+                                transform: 'translateY(-2px)',
+                            } },
+                            React__namespace["default"].createElement(Ellipse, null)),
+                        React__namespace["default"].createElement("span", null,
+                            distance,
+                            " km")))),
+                hospital.phone && (React__namespace["default"].createElement(PhoneButton, { size: "md", color: "tertiary", isBlock: false, onClick: onPhoneHospital, icon: React__namespace["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__default["default"].div `
+  color: #111111;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+
+  .name {
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+  }
+
+  address {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+  }
+  .telephone {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
+    gap: 8px;
+    border: ${miscTheme.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__default["default"](Map) `
+  &.panel-map {
+    --mapCardHeight: --cardHeight;
+  }
+  iframe {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+`;
+const StyledMobileIcon = styled__default["default"](Mobile) `
+  width: 1rem;
+  height: 1rem;
+`;
+const StyledContainer = styled__default["default"].div `
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 4.5px;
+  padding-right: 4.5px;
+  flex: 1;
+
+  & > * + * {
+    margin-top: 0.75rem;
+  }
+`;
+const StyledFlexBox = styled__default["default"].div `
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+`;
+const StyledDistanceTag$1 = styled__default["default"](index$1.DistanceTag) `
+  border-radius: 0.75rem !important;
+`;
+
+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 || '',
+    };
+    return (React__namespace["default"].createElement(StyledClinicInfo, null,
+        React__namespace["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__namespace["default"].createElement(StyledContainer, null,
+            React__namespace["default"].createElement("div", { className: "name" }, hospitalInfo.name),
+            React__namespace["default"].createElement(StyledFlexBox, null,
+                React__namespace["default"].createElement("address", null, hospitalInfo.address),
+                distance && (React__namespace["default"].createElement("div", { style: {
+                        flexShrink: 0,
+                    } },
+                    React__namespace["default"].createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
+            hospitalInfo.phone && (React__namespace["default"].createElement("div", { className: "telephone" },
+                React__namespace["default"].createElement(StyledMobileIcon, null),
+                React__namespace["default"].createElement("a", { href: `tel:${hospitalInfo.phone}` }, localizeNumberFormat.formatPhoneNumber(hospitalInfo.phone))))),
+        React__namespace["default"].createElement(OpeningHours, { workingTimes: hospitalInfo.working_times })));
+}
+
+styled__default["default"](index$7.DrawerComponent) `
   /* max-height: 100vh;
   max-height: 100dvh; */
   background-color: white;
@@ -467,7 +837,7 @@ styled__default["default"](index$5.DrawerComponent) `
 `;
 const StyledDrawerBottomContent = styled__default["default"](vaul.Drawer.Content) `
   position: fixed;
-  z-index: ${index$6.ZINDEX_SSO - 9e6 + 1};
+  z-index: ${index$5.ZINDEX_SSO - 9e6 + 1};
   inset: 0;
   background-color: #fff;
   outline: none !important;
@@ -496,11 +866,18 @@ const StyledDrawerBottomContent = styled__default["default"](vaul.Drawer.Content
     border-top-right-radius: 16px;
     /* padding-bottom: 16px; */
   }
+
+  ${(props) => props.isDragging &&
+    `
+      input {
+        caret-color: transparent;
+      }
+    `}
 `;
 const StyledDrawerBottomOverlay = styled__default["default"](vaul.Drawer.Overlay) `
   position: fixed;
   inset: 0;
-  z-index: ${index$6.ZINDEX_SSO - 9e6};
+  z-index: ${index$5.ZINDEX_SSO - 9e6};
   width: 100%;
   max-height: 100%;
   background-color: rgb(0, 0, 0, 0.4);
@@ -517,11 +894,12 @@ const StyledDrawerBottomHandler = styled__default["default"](vaul.Drawer.Handle)
 
 function DrawerBottom(_a) {
     var { children, onClose, isOpen, onOpenChange, isMobile, classNames, isLinear, overlayClassName, contentClassName, handlerClassName } = _a, restProps = tslib_es6.__rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName"]);
+    const { isDragging, handleDragStart, handleDragEnd } = index$7.useDrawerDrag();
     if (isMobile) {
-        return (React__namespace["default"].createElement(vaul.Drawer.Root, Object.assign({ open: isOpen, onOpenChange: onOpenChange }, restProps),
+        return (React__namespace["default"].createElement(vaul.Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, open: isOpen, onOpenChange: onOpenChange }, restProps),
             React__namespace["default"].createElement(vaul.Drawer.Portal, null,
                 React__namespace["default"].createElement(StyledDrawerBottomOverlay, { className: core.clsx(overlayClassName, 'drawer__overlay') }),
-                React__namespace["default"].createElement(StyledDrawerBottomContent, { className: core.clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
+                React__namespace["default"].createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: core.clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
                     React__namespace["default"].createElement(vaul.Drawer.Title, { style: { display: 'none' } }),
                     React__namespace["default"].createElement(StyledDrawerBottomHandler, { className: core.clsx(handlerClassName, 'drawer__handle') }),
                     children))));
@@ -582,7 +960,7 @@ const StyledCollectPhoneForm = styled__default["default"].div `
     }
   }
 `;
-const StyledButton = styled__default["default"](index$7.Button) `
+const StyledButton = styled__default["default"](index$8.Button) `
   &.mantine-Button-root {
     border-radius: 12px;
     border: 1px solid;
@@ -601,7 +979,7 @@ const StyledButton = styled__default["default"](index$7.Button) `
   }
 `;
 styled__default["default"](DrawerBottom) ``;
-const StyledPhone = styled__default["default"](index$8.Phone) `
+const StyledPhone = styled__default["default"](index$9.Phone) `
   --custom-primary-text: #111111;
   .PhoneInputCountry {
     pointer-events: none;
@@ -624,7 +1002,7 @@ const StyledPhone = styled__default["default"](index$8.Phone) `
     }
   }
 `;
-const StyledInputWrapper = styled__default["default"](index$8.Input.Wrapper) `
+const StyledInputWrapper = styled__default["default"](index$9.Input.Wrapper) `
   --phone-input-space-x: -8px;
   .mantine-Text-root[data-size='c1'] {
     font-size: 0.75rem;
@@ -651,7 +1029,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
     const [phone, setPhone] = React.useState('');
     const [errorMessage, setErrorMessage] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
-    const { classes } = index$9.useTextStyles();
+    const { classes } = index$a.useTextStyles();
     const validatePhone = (value) => {
         try {
             if (!value) {
@@ -695,17 +1073,17 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
                 t('collectPhoneNumber.title', {
                     name: formType,
                 })),
-            React__namespace["default"].createElement(index$9.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
+            React__namespace["default"].createElement(index$a.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
                     'leadgen-form_field_error': !!(isSubmitted && errorMessage),
                 }) },
-                React__namespace["default"].createElement(index$9.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$a.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                React__namespace["default"].createElement(index$a.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$b.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                         errorMessage && (React__namespace["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                        React__namespace["default"].createElement(index$9.ErrorIcon, { size: 12 }),
-                        React__namespace["default"].createElement(index$a.Text, { size: "c1", variant: "error" }, errorMessage))) },
+                        React__namespace["default"].createElement(index$a.ErrorIcon, { size: 12 }),
+                        React__namespace["default"].createElement(index$b.Text, { size: "c1", variant: "error" }, errorMessage))) },
                     React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                             '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { fontWeight: text.FontWeight.halfBold }),
                         }) },
-                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$b.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
+                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$c.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
         React__namespace["default"].createElement("div", { className: "action actionBox" },
             React__namespace["default"].createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                 React__namespace["default"].createElement("div", null, t('collectPhoneNumber.action')),
@@ -769,16 +1147,173 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
     }, [isOpenProp]);
     return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         typeof children === 'function' ? (children(modalState)) : (React__namespace["default"].createElement("div", { onClick: toggle }, children)),
-        React__namespace["default"].createElement(DrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: isMobile, fadeFromIndex: index$6.ZINDEX_SSO - 9e6, zIndex: index$6.ZINDEX_SSO, repositionInputs: false, isLinear: currentStep === exports.EPopupCollectPhoneStep.SUCCESS }, drawerProps),
+        React__namespace["default"].createElement(DrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: isMobile, fadeFromIndex: index$5.ZINDEX_SSO - 9e6, zIndex: index$5.ZINDEX_SSO, repositionInputs: false, isLinear: currentStep === exports.EPopupCollectPhoneStep.SUCCESS }, drawerProps),
             currentStep === exports.EPopupCollectPhoneStep.FORM && (React__namespace["default"].createElement(CollectPhoneForm, { onSubmit: handleSubmit, isLoading: isLoading })),
             currentStep === exports.EPopupCollectPhoneStep.SUCCESS && (React__namespace["default"].createElement(CollectPhoneSuccess, { onClose: handleClose })))));
 }
 
+const StyledHospitalInfo = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  border-radius: 12px;
+
+  .hospitalName {
+    color: #111111;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .hospitalStatus {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    color: ${miscTheme.theme.colors.red700};
+    background-color: ${miscTheme.theme.colors.red50};
+    border-radius: 8px;
+
+    font-size: 0.6875rem;
+    line-height: 1rem;
+    margin-right: 2px;
+
+    &[data-is-opened='true'] {
+      color: ${miscTheme.theme.colors.primaryBase};
+      background-color: ${miscTheme.theme.colors.blue50};
+    }
+  }
+
+  .flex-1 {
+    flex: 1 1 0%;
+  }
+`;
+const StyledImageWrap = styled__default["default"](index$d.ImageWrap) `
+  /* object-contain object-center aspect-square  */
+  width: 44px;
+  height: 44px;
+  background-color: ${miscTheme.theme.colors.neutral50};
+  padding: 2px;
+  object-fit: contain;
+  object-position: center;
+  border-radius: 8px;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+`;
+const StyledClockIcon = styled__default["default"](Clock) `
+  width: 12px;
+  height: 12px;
+`;
+const StyledArrowRightIcon = styled__default["default"](index$1.ShapedArrowDown) `
+  flex-shrink: 0;
+  color: ${miscTheme.theme.colors.gray400};
+  width: 12px;
+  height: 12px;
+  transform: rotate(90deg);
+`;
+const StyledDistanceTag = styled__default["default"](index$1.DistanceTag) `
+  & > span {
+    color: ${miscTheme.theme.colors.gray800};
+  }
+`;
+
+const checkHospitalStatus = (times) => {
+    const currentDate = new Date();
+    const currentShortDay = types.workingDays[currentDate.getDay()];
+    const openTime = times[currentShortDay];
+    return 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 || currentHour > endMinute);
+        }
+        return !(currentHour < startHour || currentHour > currentHour);
+    });
+};
+function HospitalInfo({ hospitalInfo, distance, className, }) {
+    const { t } = index.useTranslations();
+    const isOpened = checkHospitalStatus(hospitalInfo.working_times);
+    return (React__namespace["default"].createElement(StyledHospitalInfo, { className: className },
+        React__namespace["default"].createElement(StyledImageWrap, { src: hospitalInfo.logo, backupSrc: index$2.CommonGAssets.getAssetPath('avatar.jpg'), alt: "hospital" }),
+        React__namespace["default"].createElement("div", { className: "flex-1" },
+            React__namespace["default"].createElement("div", { className: "hospitalName" }, hospitalInfo.name),
+            React__namespace["default"].createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
+                React__namespace["default"].createElement(StyledClockIcon, null),
+                React__namespace["default"].createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed'))),
+            distance && React__namespace["default"].createElement(StyledDistanceTag, { value: `${distance} km` })),
+        React__namespace["default"].createElement(StyledArrowRightIcon, null)));
+}
+
+const StyledInsuranceContainer = styled__default["default"].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: ${miscTheme.theme.colors.gray700};
+  }
+  .txt-body-2 {
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
+    color: ${miscTheme.theme.colors.gray800};
+    font-weight: 500;
+  }
+  .txt-caption-1 {
+    font-size: 0.6875rem;
+    line-height: 1rem;
+    color: ${miscTheme.theme.colors.gray800};
+  }
+
+  h3 {
+    padding: 1rem 0;
+  }
+`;
+const StyledInsuranceList = styled__default["default"](index$e.InsuranceList) `
+  gap: 8px;
+  margin-top: 1rem;
+  & .insuranceItem > .insuranceLogo {
+    height: 64px;
+    border-radius: 12px;
+    border-color: ${miscTheme.theme.colors.neutral100};
+    & > img {
+      height: auto;
+      aspect-ratio: 109/64;
+    }
+  }
+`;
+
+function ProductInsuranceInfo({ hospitalInfo, }) {
+    const { t } = index.useTranslations();
+    const isSupportPayment = (hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.accepted_payments) && hospitalInfo.accepted_payments.length > 0;
+    return (React__namespace["default"].createElement(StyledInsuranceContainer, null,
+        React__namespace["default"].createElement("div", null,
+            React__namespace["default"].createElement("h3", { className: "txt-body-2" }, t('common.insurance')),
+            React__namespace["default"].createElement("p", { className: "txt-body-1" }, t('common.insuranceIntro')),
+            React__namespace["default"].createElement(StyledInsuranceList, { insurances: hospitalInfo.insurances, isName: false })),
+        isSupportPayment && (React__namespace["default"].createElement("div", null,
+            React__namespace["default"].createElement("h3", { className: "txt-body-2" }, t('common.paymentMethods')),
+            React__namespace["default"].createElement(index$e.PaymentList, { payments: hospitalInfo.accepted_payments })))));
+}
+
 exports.Check = Check;
+exports.ClinicInfo = ClinicInfo;
+exports.Clock = Clock;
 exports.CollectPhoneForm = CollectPhoneForm;
+exports.Ellipse = Ellipse;
 exports.HelloZalo = HelloZalo;
+exports.HospitalInfo = HospitalInfo;
+exports.Mobile = Mobile;
 exports.NavHeader = NavHeader;
+exports.PhoneInactive = PhoneInactive;
 exports.PopupCollectPhone = PopupCollectPhone;
+exports.ProductInsuranceInfo = ProductInsuranceInfo;
 exports.UserProfileNavigation = UserProfileNavigation;
 exports.UserStats = UserStats;
 exports.formPhoneType = formPhoneType;