@hhgtech/hhg-components 1.29.425-beta-2 → 1.29.425-beta-4

package/build/{popupCollectPhone-ca4f6a85.js → popupCollectPhone-1ef379af.js}

@@ -1,28 +1,33 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-9a941bcb.js');
+var index = require('./index-3026d89e.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-a6d75a65.js');
-var normalizeLink = require('./normalizeLink-bf331b6d.js');
+var index$2 = require('./index-7f8dde46.js');
+var normalizeLink = require('./normalizeLink-a802a193.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-69bd1d53.js');
-var index$3 = require('./index-41ed91f0.js');
-var index$4 = require('./index-88317cf3.js');
-var tslib_es6 = require('./tslib.es6-f7fe8e6c.js');
+var index$1 = require('./index-957cbccf.js');
+var index$3 = require('./index-bad730f6.js');
+var index$4 = require('./index-30dda4ce.js');
+var styled = require('@emotion/styled');
+var api = require('@react-google-maps/api');
+var cn = require('classnames');
+var index$5 = require('./index-24c020f3.js');
+var constants = require('./constants-7daf8503.js');
+var index$6 = require('./index-07c2be00.js');
+var localizeNumberFormat = require('./localizeNumberFormat-c4789cf0.js');
+var tslib_es6 = require('./tslib.es6-70a6c8f7.js');
 var hooks = require('@mantine/hooks');
 var core = require('@mantine/core');
-var index$5 = require('./index-a475dfb2.js');
+var index$7 = require('./index-fe5e2652.js');
 var vaul = require('vaul');
-var styled = require('@emotion/styled');
-var index$6 = require('./index-792cb71f.js');
-var index$9 = require('./index-9fb011e2.js');
+var index$a = require('./index-76606025.js');
 var PhoneInputBase = require('react-phone-number-input');
-var text = require('./text-2c8a82ac.js');
-var index$8 = require('./index-01cf6a34.js');
-var index$7 = require('./index-d6b35815.js');
-var index$b = require('./index-6936df42.js');
-var index$a = require('./index-26e56883.js');
+var text = require('./text-0303cc0b.js');
+var index$9 = require('./index-2933bb15.js');
+var index$8 = require('./index-03f74da6.js');
+var index$c = require('./index-696114cb.js');
+var index$b = require('./index-6b76dbdb.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -46,6 +51,7 @@ 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),
@@ -443,7 +449,380 @@ 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;
+  }
+`;
+
+const workingDays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+function OpeningHours({ workingTimes }) {
+    const { t } = index.useTranslations();
+    const formatData = React.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__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)))))));
+}
+
+/* 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 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 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 = ({ className, hospital, hasNoCard, isFullWidth, height = 256, width = 768, isUsingEmbedMap = true, isCardFloating = false, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    const { latitude, longitude, address, name: hospitalName } = hospital;
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+    const center = {
+        lng: lng,
+        lat: 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
+        // <a
+        //   href={`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`}
+        //   target="_blank"
+        //   rel="noreferrer"
+        //   role="button"
+        //   tabIndex={0}
+        //   aria-label="Navigate to Google Maps to view full directions to your desination"
+        //   className={styles.directionsNo}
+        //   data-event-category="Care"
+        //   data-event-action="Get Direction Click"
+        //   data-event-label={`https://${domainLocales[locale]}${basePath}${asPath}`}
+        // >
+        //   {f({
+        //     id: 'map.viewDirections',
+        //     defaultMessage: 'View directions',
+        //   })}
+        // </a>
+        )));
+};
+
+/* 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" })));
+
+// 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;
+`;
+
+function ClinicInfo({ hospitalInfo, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }) {
+    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(index$1.DistanceTag, { 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 +846,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;
@@ -507,7 +886,7 @@ const StyledDrawerBottomContent = styled__default["default"](vaul.Drawer.Content
 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);
@@ -524,7 +903,7 @@ 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$5.useDrawerDrag();
+    const { isDragging, handleDragStart, handleDragEnd } = index$7.useDrawerDrag();
     if (isMobile) {
         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,
@@ -590,7 +969,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;
@@ -609,7 +988,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;
@@ -632,7 +1011,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;
@@ -659,7 +1038,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) {
@@ -703,17 +1082,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')),
@@ -777,12 +1156,13 @@ 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 })))));
 }
 
 exports.Check = Check;
+exports.ClinicInfo = ClinicInfo;
 exports.CollectPhoneForm = CollectPhoneForm;
 exports.HelloZalo = HelloZalo;
 exports.NavHeader = NavHeader;

package/build/{post-adc85722.js → post-2b221d02.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-f7fe8e6c.js');
+var tslib_es6 = require('./tslib.es6-70a6c8f7.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var togetherComponentGlobalContext = require('./utils-aad86504.js');
+var togetherComponentGlobalContext = require('./utils-147fe055.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/build/profileNavigation.js

@@ -3,43 +3,43 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index$4 = require('./index-792cb71f.js');
-var index$3 = require('./index-01cf6a34.js');
+var index$4 = require('./index-24c020f3.js');
+var index$3 = require('./index-2933bb15.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-5bb503e6.js');
-var index$2 = require('./index-a6d75a65.js');
-require('./index-6936df42.js');
-var index$1 = require('./index-26e56883.js');
-require('./index-d6b35815.js');
-require('./index.styles-cde775fc.js');
-var index = require('./index-9a941bcb.js');
+require('./index-43e07dd6.js');
+var index$2 = require('./index-7f8dde46.js');
+require('./index-696114cb.js');
+var index$1 = require('./index-6b76dbdb.js');
+require('./index-03f74da6.js');
+require('./index.styles-e05e408a.js');
+var index = require('./index-3026d89e.js');
 require('@mantine/hooks');
-require('./text-2c8a82ac.js');
-require('./utils-001ce113.js');
-require('./index-6757fa5e.js');
-var ChevronDown = require('./ChevronDown-55b59eab.js');
-var normalizeLink = require('./normalizeLink-bf331b6d.js');
+require('./text-0303cc0b.js');
+require('./utils-173e219d.js');
+require('./index-77cda7fe.js');
+var ChevronDown = require('./ChevronDown-e307dd35.js');
+var normalizeLink = require('./normalizeLink-a802a193.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-require('./translationsContext-60bd7667.js');
+require('./translationsContext-ccb637f6.js');
 require('date-fns/locale');
 require('./constantsSite.js');
-require('./Locale-2b8616e4.js');
+require('./Locale-10f7b2fc.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./tslib.es6-f7fe8e6c.js');
+require('./tslib.es6-70a6c8f7.js');
 require('@hhgtech/icons/other');
-require('./index-5560c476.js');
+require('./index-a66681a5.js');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-d76afac9.js');
+require('./useUniqueId-139bd5bb.js');
 require('@hhgtech/icons/core');
 require('dayjs');
 require('@mantine/notifications');
-require('./shared-ce807a63.js');
+require('./shared-33448178.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/progressBar.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-f7fe8e6c.js');
+var tslib_es6 = require('./tslib.es6-70a6c8f7.js');
 var React = require('react');
 var throttle = require('lodash/throttle');
 var styled = require('@emotion/styled');