@hhgtech/hhg-components 1.29.520-beta-6 → 1.29.520-beta-8

package/build/{index-b50849bd.js → index-a205287a.js}

@@ -1,35 +1,37 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-6f5f4144.js');
+var index = require('./index-19ae89ad.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-40fb8ed9.js');
-var normalizeLink = require('./normalizeLink-e170b277.js');
+var index$2 = require('./index-2936f660.js');
+var normalizeLink = require('./normalizeLink-20b1ac2b.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-014698aa.js');
-var utils = require('./utils-413c4bc9.js');
-var index$3 = require('./index-ed1d2e5d.js');
-var types = require('./types-86107c58.js');
+var index$1 = require('./index-eb6d749b.js');
+var utils = require('./utils-5e01fba2.js');
+var index$3 = require('./index-8c22d3df.js');
+var types = require('./types-36f20f12.js');
 var styled = require('@emotion/styled');
-var utils$1 = require('./utils-cdd50a11.js');
+var utils$1 = require('./utils-1608e424.js');
 var core = require('@mantine/core');
 var api = require('@react-google-maps/api');
 var classNames = require('classnames');
-var index$4 = require('./index-950fd486.js');
-var constants = require('./constants-ff052b48.js');
-var index$5 = require('./index-031f06f7.js');
-var localizeNumberFormat = require('./localizeNumberFormat-48cb9ce2.js');
-var tslib_es6 = require('./tslib.es6-30934a8d.js');
+var index$4 = require('./index-f45cbe15.js');
+var constants = require('./constants-7f0b49d2.js');
+var index$5 = require('./index-29bb2709.js');
+var localizeNumberFormat = require('./localizeNumberFormat-4d878deb.js');
+var tslib_es6 = require('./tslib.es6-51d1718e.js');
 var hooks = require('@mantine/hooks');
-var index$8 = require('./index-cb5445c1.js');
+var index$8 = require('./index-99965030.js');
 var PhoneInputBase = require('react-phone-number-input');
-var index$7 = require('./index-d7b0cefa.js');
-var index$a = require('./index-9fa3c0de.js');
-var index$6 = require('./index-118cca2a.js');
-var index$b = require('./index-1c4c29a6.js');
-var index$9 = require('./index-3620fa4e.js');
-var index$c = require('./index-4219e52e.js');
-var index$d = require('./index-6bcd40ef.js');
+var index$7 = require('./index-64321da6.js');
+var index$a = require('./index-0d2250b3.js');
+var index$6 = require('./index-6550d336.js');
+var index$b = require('./index-04f8890f.js');
+var index$9 = require('./index-52700cb9.js');
+var index$c = require('./index-9b8c506b.js');
+var Close = require('./Close-5b95b043.js');
+var index$d = require('./index-fd7cf219.js');
+var index$e = require('./index-183f1203.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -65,6 +67,10 @@ const Clock = (props) => (React__namespace.createElement("svg", Object.assign({
     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 Comment = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "none" }, props),
+    React__namespace.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__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
     React__namespace.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: "#8C8C8C", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -969,7 +975,7 @@ const StyledCollectPhoneForm = styled__default["default"].div `
     }
   }
 `;
-const StyledButton = styled__default["default"](index$6.Button) `
+const StyledButton$1 = styled__default["default"](index$6.Button) `
   &.mantine-Button-root {
     border-radius: 12px;
     border: 1px solid;
@@ -988,7 +994,7 @@ const StyledButton = styled__default["default"](index$6.Button) `
   }
 `;
 styled__default["default"](index$1.DrawerBottom) ``;
-const StyledPhone = styled__default["default"](index$7.Phone) `
+const StyledPhone$1 = styled__default["default"](index$7.Phone) `
   --custom-primary-text: #111111;
   .PhoneInputCountry {
     pointer-events: none;
@@ -1011,7 +1017,7 @@ const StyledPhone = styled__default["default"](index$7.Phone) `
     }
   }
 `;
-const StyledInputWrapper = styled__default["default"](index$7.Input.Wrapper) `
+const StyledInputWrapper$1 = styled__default["default"](index$7.Input.Wrapper) `
   --phone-input-space-x: -8px;
   .mantine-Text-root[data-size='c1'] {
     font-size: 0.75rem;
@@ -1032,7 +1038,7 @@ const formPhoneType = {
     ZALO: 'Zalo',
     WHATS_APP: 'Whatsapp',
 };
-const DEFAULT_COUNTRY_CODE = 'VN';
+const DEFAULT_COUNTRY_CODE$1 = 'VN';
 function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLoading, locale, }) {
     const { t } = index.useTranslations();
     const [phone, setPhone] = React.useState('');
@@ -1045,7 +1051,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
                 setErrorMessage(t('collectPhoneNumber.phoneRequired'));
                 return;
             }
-            const phoneData = PhoneInputBase.parsePhoneNumber(value, DEFAULT_COUNTRY_CODE);
+            const phoneData = PhoneInputBase.parsePhoneNumber(value, DEFAULT_COUNTRY_CODE$1);
             if (!(phoneData === null || phoneData === void 0 ? void 0 : phoneData.isValid())) {
                 setErrorMessage(t('collectPhoneNumber.inputInvalid'));
             }
@@ -1064,7 +1070,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
     const handleSubmit = () => {
         validatePhone(phone);
         setIsSubmitted(true);
-        const phoneData = PhoneInputBase.parsePhoneNumber(phone, DEFAULT_COUNTRY_CODE);
+        const phoneData = PhoneInputBase.parsePhoneNumber(phone, DEFAULT_COUNTRY_CODE$1);
         if (phoneData && phoneData.isValid()) {
             const areaCode = phoneData.countryCallingCode;
             onSubmit({
@@ -1085,16 +1091,16 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
             React__namespace["default"].createElement(index$8.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
                     'leadgen-form_field_error': !!(isSubmitted && errorMessage),
                 }) },
-                React__namespace["default"].createElement(index$8.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$9.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                React__namespace["default"].createElement(index$8.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper$1, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$9.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$7.ErrorIcon, { size: 12 }),
                         React__namespace["default"].createElement(index$9.Text, { size: "c1", variant: "error" }, errorMessage))) },
                     React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                             '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, index$a.GlobalTextStyleNew(theme)[index$a.CustomStylesType.LEADGEN].p2), { fontWeight: index$a.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$1, { 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$1], 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(StyledButton$1, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                 React__namespace["default"].createElement("div", null, t('collectPhoneNumber.action')),
                 React__namespace["default"].createElement("img", { src: Right, alt: "arrow icon", width: 20, height: 20 })))));
 }
@@ -1108,7 +1114,7 @@ function CollectPhoneSuccess({ onClose }) {
                 React__namespace["default"].createElement("h5", { className: "mb-1" }, t('collectPhoneNumber.titleSuccess')),
                 React__namespace["default"].createElement("p", { className: "description" }, t('collectPhoneNumber.descriptionSuccess')))),
         React__namespace["default"].createElement("div", { className: "action" },
-            React__namespace["default"].createElement(StyledButton, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
+            React__namespace["default"].createElement(StyledButton$1, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
 }
 
 exports.EPopupCollectPhoneStep = void 0;
@@ -1161,6 +1167,384 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
             currentStep === exports.EPopupCollectPhoneStep.SUCCESS && (React__namespace["default"].createElement(CollectPhoneSuccess, { onClose: handleClose })))));
 }
 
+const StyledRequestConsultationForm = styled__default["default"].div `
+  padding-top: 16px;
+  padding-bottom: 16px;
+  width: 100%;
+  ${utils$1.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;
+    ${utils$1.MediaQueries.mbUp} {
+      margin-bottom: 24px;
+    }
+  }
+
+  .formHeaderIcon {
+    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: ${miscTheme.theme.colors.white};
+    border: none;
+    cursor: pointer;
+    color: ${miscTheme.theme.colors.gray800};
+    :hover {
+      background: ${miscTheme.theme.colors.gray100};
+    }
+  }
+
+  .formTitleBlock {
+    padding: 0 24px 24px;
+  }
+
+  .formTitle {
+    font-weight: 600;
+    font-size: 1.375rem;
+    line-height: 2rem;
+    letter-spacing: -0.4px;
+    color: ${miscTheme.theme.colors.gray800};
+    margin-bottom: 12px;
+  }
+
+  .formSubtitle {
+    color: ${miscTheme.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: ${miscTheme.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: 8px 24px 0px;
+    width: 100%;
+    &.actionBox {
+      border-top: 0.5px solid ${miscTheme.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__default["default"](index$6.Button) `
+  &.mantine-Button-root {
+    border-radius: 12px;
+    border: 1px solid;
+    font-size: 15px;
+
+    &.tertiary {
+      border-color: ${miscTheme.theme.colors.neutral200};
+    }
+  }
+
+  .mantine-Button-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+`;
+const StyledDrawerBottom = styled__default["default"](index$1.DrawerBottom) `
+  .mantine-Modal-body {
+    padding: 0;
+    height: 100%;
+  }
+`;
+const StyledPhone = styled__default["default"](index$7.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__default["default"](index$7.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;
+  }
+`;
+
+exports.EGender = void 0;
+(function (EGender) {
+    EGender["Male"] = "male";
+    EGender["Female"] = "female";
+})(exports.EGender || (exports.EGender = {}));
+const DEFAULT_COUNTRY_CODE = 'VN';
+function RequestConsultationForm({ onSubmit, onClose, title, isLoading, locale, }) {
+    const { t } = index.useTranslations();
+    const [name, setName] = React.useState('');
+    const [phone, setPhone] = React.useState('');
+    const [gender, setGender] = React.useState(exports.EGender.Female);
+    const [nameError, setNameError] = React.useState('');
+    const [phoneError, setPhoneError] = React.useState('');
+    const [genderError, setGenderError] = React.useState('');
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const { classes } = index$8.useTextStyles();
+    const defaultCountry = (locale ? index$b.MAPPED_LOCALE[locale] || 'VN' : 'VN');
+    const validatePhone = (value) => {
+        try {
+            if (!value) {
+                setPhoneError(t('collectPhoneNumber.phoneRequired'));
+                return false;
+            }
+            const phoneData = PhoneInputBase.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 === exports.EGender.Male || gender === exports.EGender.Female;
+        if (!hasGender) {
+            setGenderError(t('popupRequestConsultation.genderRequired'));
+        }
+        else {
+            setGenderError('');
+        }
+        if (!hasName || !phoneValid || !hasGender)
+            return;
+        const phoneData = PhoneInputBase.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__namespace["default"].createElement(StyledRequestConsultationForm, null,
+        React__namespace["default"].createElement("div", { className: "formHeader" },
+            React__namespace["default"].createElement("div", { className: "formHeaderIcon" },
+                React__namespace["default"].createElement(Comment, { width: 24, height: 24 })),
+            React__namespace["default"].createElement("button", { type: "button", className: "formCloseButton", onClick: onClose, "aria-label": t('common.action.close') },
+                React__namespace["default"].createElement(Close.Close, { width: 20, height: 20 }))),
+        React__namespace["default"].createElement("div", { className: "formTitleBlock" },
+            React__namespace["default"].createElement("h2", { className: "formTitle" }, title || t('popupRequestConsultation.title')),
+            React__namespace["default"].createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.subtitle'))),
+        React__namespace["default"].createElement("div", { className: "info" },
+            React__namespace["default"].createElement(index$8.TextField, { shrink: !!name, className: core.clsx('leadgen-form_input w-full', {
+                    'leadgen-form_field_error': !!(isSubmitted && nameError),
+                }) },
+                React__namespace["default"].createElement(index$8.TextField.Control, { htmlFor: "request_consultation_name_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && nameError), labelElement: "div", label: React__namespace["default"].createElement(index$9.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.yourName')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                        nameError && (React__namespace["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__namespace["default"].createElement(index$7.ErrorIcon, { size: 12 }),
+                        React__namespace["default"].createElement(index$9.Text, { size: "c1", variant: "error" }, nameError))) },
+                    React__namespace["default"].createElement(index$7.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__namespace["default"].createElement(index$8.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
+                    'leadgen-form_field_error': !!(isSubmitted && phoneError),
+                }) },
+                React__namespace["default"].createElement(index$8.TextField.Control, { htmlFor: "request_consultation_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && phoneError), labelElement: "div", label: React__namespace["default"].createElement(index$9.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.phoneLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                        phoneError && (React__namespace["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__namespace["default"].createElement(index$7.ErrorIcon, { size: 12 }),
+                        React__namespace["default"].createElement(index$9.Text, { size: "c1", variant: "error" }, phoneError))) },
+                    React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
+                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, index$a.GlobalTextStyleNew(theme)[index$a.CustomStylesType.LEADGEN].p2), { fontWeight: index$a.FontWeight.halfBold }),
+                        }) },
+                        React__namespace["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__namespace["default"].createElement(React__namespace["default"].Fragment, null) })))))),
+            React__namespace["default"].createElement(index$c.GenderOptionControl, { 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',
+                    },
+                } })),
+        React__namespace["default"].createElement("div", { className: "action actionBox" },
+            React__namespace["default"].createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading }, t('popupRequestConsultation.action')))));
+}
+
+function RequestConsultationSuccess({ onClose, }) {
+    const { t } = index.useTranslations();
+    return (React__namespace["default"].createElement(StyledRequestConsultationForm, { className: "formSuccess" },
+        React__namespace["default"].createElement("div", { className: "formTitleBlock" },
+            React__namespace["default"].createElement(Check, { width: 64, height: 64 })),
+        React__namespace["default"].createElement("div", { className: "formTitleBlock" },
+            React__namespace["default"].createElement("h2", { className: "formTitle" }, t('popupRequestConsultation.titleSuccess')),
+            React__namespace["default"].createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.descriptionSuccess'))),
+        React__namespace["default"].createElement("div", { className: "action" },
+            React__namespace["default"].createElement(StyledButton, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
+}
+
+exports.EPopupRequestConsultationStep = void 0;
+(function (EPopupRequestConsultationStep) {
+    EPopupRequestConsultationStep[EPopupRequestConsultationStep["FORM"] = 0] = "FORM";
+    EPopupRequestConsultationStep[EPopupRequestConsultationStep["SUCCESS"] = 1] = "SUCCESS";
+})(exports.EPopupRequestConsultationStep || (exports.EPopupRequestConsultationStep = {}));
+function PopupRequestConsultation({ children, isMobile, onSubmit, isOpen: isOpenProp, onOpenChange, drawerProps = {}, }) {
+    const modalState = hooks.useDisclosure(isOpenProp);
+    const [currentStep, setCurrentStep] = React.useState(exports.EPopupRequestConsultationStep.FORM);
+    const [isOpen, { open, toggle, close }] = modalState;
+    const [isLoading, setIsLoading] = React.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) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsLoading(true);
+            yield onSubmit(data);
+            setCurrentStep(exports.EPopupRequestConsultationStep.SUCCESS);
+        }
+        catch (error) {
+            console.log('🚀 ~ handleSubmit ~ error:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    React.useEffect(() => {
+        if (isOpen) {
+            setCurrentStep(exports.EPopupRequestConsultationStep.FORM);
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        handleOpenChange(isOpenProp);
+    }, [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(StyledDrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: false, fadeFromIndex: index$4.ZINDEX_SSO - 9e6, zIndex: index$4.ZINDEX_SSO, repositionInputs: false, isLinear: true, withCloseButton: false, fullScreen: isMobile }, drawerProps),
+            currentStep === exports.EPopupRequestConsultationStep.FORM && (React__namespace["default"].createElement(RequestConsultationForm, { onSubmit: handleSubmit, onClose: handleClose, isLoading: isLoading })),
+            currentStep === exports.EPopupRequestConsultationStep.SUCCESS && (React__namespace["default"].createElement(RequestConsultationSuccess, { onClose: handleClose })))));
+}
+
 const StyledHospitalInfo = styled__default["default"].div `
   display: flex;
   align-items: center;
@@ -1196,7 +1580,7 @@ const StyledHospitalInfo = styled__default["default"].div `
     flex: 1 1 0%;
   }
 `;
-const StyledImageWrap = styled__default["default"](index$c.ImageWrap) `
+const StyledImageWrap = styled__default["default"](index$d.ImageWrap) `
   /* object-contain object-center aspect-square  */
   width: 44px;
   height: 44px;
@@ -1299,7 +1683,7 @@ const StyledInsuranceContainer = styled__default["default"].div `
     padding: 1rem 0;
   }
 `;
-const StyledInsuranceList = styled__default["default"](index$d.InsuranceList) `
+const StyledInsuranceList = styled__default["default"](index$e.InsuranceList) `
   gap: 8px;
   margin-top: 1rem;
   & .insuranceItem > .insuranceLogo {
@@ -1323,7 +1707,7 @@ function ProductInsuranceInfo({ hospitalInfo, isMobile = false, }) {
             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$d.PaymentList, { payments: hospitalInfo.accepted_payments, isMobile: isMobile })))));
+            React__namespace["default"].createElement(index$e.PaymentList, { payments: hospitalInfo.accepted_payments, isMobile: isMobile })))));
 }
 
 const defaultValue = {
@@ -1381,7 +1765,7 @@ const StyledPositionOfButton = styled__default["default"].div `
   display: flex;
   justify-content: flex-end;
 `;
-const StyledArrowRightBlue = styled__default["default"](index$d.ArrowRightBlue) `
+const StyledArrowRightBlue = styled__default["default"](index$e.ArrowRightBlue) `
   width: 0.65rem;
   height: 0.65rem;
   & > path {
@@ -1399,11 +1783,11 @@ const DoctorExpertise = (props) => {
         isShowReadMoreButton;
     return (React__namespace["default"].createElement(DoctorExpertiseProvider, { value: doctorInformation },
         React__namespace["default"].createElement(StyledCard, { className: className, style: style },
-            React__namespace["default"].createElement(index$d.DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
+            React__namespace["default"].createElement(index$e.DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
             isShowBodySection && (React__namespace["default"].createElement(StyledBodySection, { className: "body-section" },
                 React__namespace["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__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: index$d.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__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
+                    ((_c = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _c === void 0 ? void 0 : _c.length) > 0 && (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: index$e.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__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
                     children),
                 isShowReadMoreButton && (React__namespace["default"].createElement(StyledPositionOfButton, null,
                     React__namespace["default"].createElement(StyledReadMore, { onClick: onClickReadMore },
@@ -1415,14 +1799,14 @@ DoctorExpertise.Expertise = () => {
     const { t } = index.useTranslations();
     if (!expertise)
         return null;
-    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
+    return (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
 };
 DoctorExpertise.OtherHighlights = () => {
     const { otherHighlights } = React.useContext(DoctorExpertiseContext);
     const { t } = index.useTranslations();
     if (!otherHighlights)
         return null;
-    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
+    return (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
 };
 
 const ArticleCardStyled = styled__default["default"].div `
@@ -1455,7 +1839,7 @@ const ArticleDetailCard = (props) => {
     const { doctorName, doctorAvatar, defaultDoctorAvatar } = doctor || {};
     const { t } = index.useTranslations();
     return (React__namespace["default"].createElement(ArticleCardStyled, { className: className, style: style, onClick: handleClick },
-        React__namespace["default"].createElement(index$c.ImageWrap, { alt: altText || articleTitle || 'article-image', src: image || defaultImage, style: {
+        React__namespace["default"].createElement(index$d.ImageWrap, { alt: altText || articleTitle || 'article-image', src: image || defaultImage, style: {
                 width: '100%',
                 height: core.rem(143.5),
                 objectFit: 'cover',
@@ -1466,7 +1850,7 @@ const ArticleDetailCard = (props) => {
                 React__namespace["default"].createElement(index$9.Text, { color: articleTypeColor || miscTheme.theme.colors.green600, size: "c1", weight: "halfBold" }, articleType),
                 React__namespace["default"].createElement(index$9.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray800, lineClamp: 2 }, articleTitle)),
             React__namespace["default"].createElement(ArticleDoctorStyled, null,
-                React__namespace["default"].createElement(index$c.ImageWrap, { alt: `${t('common.articleCard.reviewedDoctor')} ${doctorName}`, src: doctorAvatar || defaultDoctorAvatar, style: {
+                React__namespace["default"].createElement(index$d.ImageWrap, { alt: `${t('common.articleCard.reviewedDoctor')} ${doctorName}`, src: doctorAvatar || defaultDoctorAvatar, style: {
                         width: core.rem(20),
                         height: core.rem(20),
                         borderRadius: '50%',
@@ -1485,6 +1869,7 @@ exports.Check = Check;
 exports.ClinicInfo = ClinicInfo;
 exports.Clock = Clock;
 exports.CollectPhoneForm = CollectPhoneForm;
+exports.Comment = Comment;
 exports.Credential = Credential;
 exports.DoctorExpertise = DoctorExpertise;
 exports.Education = Education;
@@ -1497,7 +1882,10 @@ exports.Mobile = Mobile;
 exports.NavHeader = NavHeader;
 exports.PhoneInactive = PhoneInactive;
 exports.PopupCollectPhone = PopupCollectPhone;
+exports.PopupRequestConsultation = PopupRequestConsultation;
 exports.ProductInsuranceInfo = ProductInsuranceInfo;
+exports.RequestConsultationForm = RequestConsultationForm;
+exports.RequestConsultationSuccess = RequestConsultationSuccess;
 exports.UserProfileNavigation = UserProfileNavigation;
 exports.UserStats = UserStats;
 exports.formPhoneType = formPhoneType;