s-platform-landing-section 0.1.12 → 0.1.15

package/dist/index.js

@@ -15,6 +15,9 @@ var bs = require('react-icons/bs');
 var lu = require('react-icons/lu');
 var DatePicker = _interopDefault(require('react-datepicker'));
 require('react-datepicker/dist/react-datepicker.css');
+var Slider = _interopDefault(require('react-slick'));
+require('slick-carousel/slick/slick.css');
+require('slick-carousel/slick/slick-theme.css');
 var ai = require('react-icons/ai');
 var go = require('react-icons/go');
 var ri = require('react-icons/ri');
@@ -649,9 +652,9 @@ var SvgIcon = function SvgIcon(_ref) {
 var SectionTitle1 = function SectionTitle1(props) {
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-center text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, /*#__PURE__*/React__default.createElement("div", {
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-32 h-0.5 rounded-full bg-secondary"
@@ -659,7 +662,7 @@ var SectionTitle1 = function SectionTitle1(props) {
     className: "w-9 h-9 text-secondary"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: " w-32 h-0.5 rounded-full bg-secondary"
-  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
@@ -988,54 +991,7 @@ var Hero10 = function Hero10(props) {
   })));
 };
 
-var Dash = function Dash(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? "#ccc" : _props$color,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
-    style: {
-      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
-      height: "1px"
-    }
-  });
-};
-
-var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
-var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
-
 var Hero11 = function Hero11(props) {
-  var _data$data;
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "" + SECTION_DEFAULT_CLASS
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-2"
-  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
-    var _it$srcImages;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: it === null || it === void 0 ? void 0 : (_it$srcImages = it.srcImages) === null || _it$srcImages === void 0 ? void 0 : _it$srcImages[0]
-    }));
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
-
-var Hero11$1 = function Hero11(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
@@ -7334,55 +7290,8 @@ var Hero13 = function Hero13(props) {
   }));
 };
 
-var Features1 = function Features1(props) {
-  var _data$data;
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " relative"
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
-  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index,
-      className: "pt-6 col-span-3 md:col-span-1"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "relative w-40 h-24 flex items-center justify-center m-auto md:m-0"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "absolute w-40 h-24 rounded-2xl z-10 bg-primary"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
-    }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
-      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
-      }
-    })) : /*#__PURE__*/React__default.createElement("div", {
-      className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
-      style: {
-        backgroundImage: "url(" + it.srcImage + ")"
-      }
-    })), /*#__PURE__*/React__default.createElement("p", {
-      className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg"
-    }, it.title), /*#__PURE__*/React__default.createElement("div", {
-      className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full bg-secondary"
-    }), /*#__PURE__*/React__default.createElement("p", {
-      className: "text-base mx-auto md:mx-0 text-center md:text-start"
-    }, it.description));
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
+var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
+var SECTION_CLASS = "my-6 md:my-12 px-4 xl:px-20 bg-background";
 
 var Features2 = function Features2(props) {
   var data = props.data;
@@ -7542,7 +7451,7 @@ var ProductController = function ProductController(props) {
   };
 };
 
-var _path, _path2, _path3;
+var _path;
 function _extends$1() {
   return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -7552,13 +7461,130 @@ function _extends$1() {
     return n;
   }, _extends$1.apply(null, arguments);
 }
-function SvgImageGallery(props) {
+function SvgAngleSmallLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 512,
+    height: 512
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
+  })));
+}
+
+var _path$1;
+function _extends$2() {
+  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$2.apply(null, arguments);
+}
+function SvgAngleSmallRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 512,
+    height: 512
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
+  })));
+}
+
+var ScrollHorizontal = function ScrollHorizontal(props) {
+  var _props$datas = props.datas,
+    datas = _props$datas === void 0 ? [] : _props$datas,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$renderItem = props.renderItem,
+    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
+  var scrollContainerRef = React.useRef(null);
+  var _useState = React.useState(true),
+    isScrolledToLeft = _useState[0],
+    setIsScrolledToLeft = _useState[1];
+  var _useState2 = React.useState(false),
+    isScrolledToRight = _useState2[0],
+    setIsScrolledToRight = _useState2[1];
+  var checkScrollPosition = function checkScrollPosition() {
+    if (scrollContainerRef.current) {
+      var _scrollContainerRef$c = scrollContainerRef.current,
+        _scrollLeft = _scrollContainerRef$c.scrollLeft,
+        scrollWidth = _scrollContainerRef$c.scrollWidth,
+        clientWidth = _scrollContainerRef$c.clientWidth;
+      setIsScrolledToLeft(_scrollLeft === 0);
+      setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
+    }
+  };
+  var scrollLeft = function scrollLeft() {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({
+        left: -200,
+        behavior: "smooth"
+      });
+      setTimeout(checkScrollPosition, 300);
+    }
+  };
+  var scrollRight = function scrollRight() {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({
+        left: 200,
+        behavior: "smooth"
+      });
+      setTimeout(checkScrollPosition, 300);
+    }
+  };
+  React.useEffect(function () {
+    checkScrollPosition();
+  }, [datas]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex " + className,
+    style: style
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full overflow-x-hidden",
+    ref: scrollContainerRef,
+    onScroll: checkScrollPosition
+  }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
+    return renderItem(item, index);
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 items-center px-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    onClick: scrollLeft,
+    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToLeft ? "bg-gray4" : "bg-primary")
+  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
+    width: 24,
+    height: 24,
+    fill: "#fff"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    onClick: scrollRight,
+    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
+  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
+    width: 24,
+    height: 24,
+    fill: "#fff"
+  }))));
+};
+
+var _path$2, _path2, _path3;
+function _extends$3() {
+  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$3.apply(null, arguments);
+}
+function SvgImageGallery(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     height: 512,
     viewBox: "0 0 24 24",
     width: 512,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M17.453 24c-.168 0-.34-.021-.51-.066L1.48 19.793a2.018 2.018 0 01-1.414-2.45l1.951-7.272a.5.5 0 01.966.258l-1.95 7.27c-.139.53.179 1.082.71 1.229L17.2 22.967a.995.995 0 001.217-.704l.781-2.894a.499.499 0 11.966.26l-.78 2.89A1.997 1.997 0 0117.453 24z"
   })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     d: "M22 18H6c-1.103 0-2-.897-2-2V4c0-1.103.897-2 2-2h16c1.103 0 2 .897 2 2v12c0 1.103-.897 2-2 2zM6 3c-.551 0-1 .449-1 1v12c0 .551.449 1 1 1h16c.551 0 1-.449 1-1V4c0-.551-.449-1-1-1z"
@@ -7611,233 +7637,290 @@ var ProductImage = function ProductImage(props) {
   });
 };
 
-var ModalNotification = function ModalNotification(props) {
-  var modalRef = React.useRef(null);
-  var onClose = props.onClose,
-    onCloseFormBooking = props.onCloseFormBooking,
-    _props$isButtonClose = props.isButtonClose,
-    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose;
-  var handleClickOutside = function handleClickOutside(event) {
-    if (modalRef.current && !modalRef.current.contains(event.target)) {
-      if (onClose) onClose();
-      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
-        onCloseFormBooking();
-      }
-    }
-  };
-  React.useEffect(function () {
-    document.addEventListener('click', handleClickOutside);
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 "
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: " flex items-center justify-center relative bg-red",
-    ref: modalRef
-  }, props === null || props === void 0 ? void 0 : props.children, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
-    className: "absolute top-4 right-4",
-    onClick: onClose
-  }, /*#__PURE__*/React__default.createElement(rx.RxCross2, null))));
+var formatCurrency = function formatCurrency(amount) {
+  if (isNaN(amount)) {
+    return '0 ₫';
+  }
+  var roundedAmount = Math.round(amount);
+  var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  return formattedAmount + " \u20AB";
 };
-
-var getEmployeeListApi = function getEmployeeListApi(shopId) {
-  return api({
-    method: "get",
-    url: "/chain-employment-profile/filter-employ-by-customer",
-    params: {
-      shopIds: shopId
-    },
-    headers: {
-      shopId: shopId
-    }
-  });
+var pattern = {
+  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
+};
+var numberPattern = /^\d+$/;
+var getYoutubeVideoIdByUrl = function getYoutubeVideoIdByUrl(url) {
+  var regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/;
+  var match = url === null || url === void 0 ? void 0 : url.match(regex);
+  return match ? match[1] : null;
 };
 
-var EmployeeController = function EmployeeController(props) {
-  var _props$isAutoGetList = props.isAutoGetList,
-    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
-    shopConfig = props.shopConfig;
-  var _useState = React.useState([]),
-    listEmployment = _useState[0],
-    setListEmployment = _useState[1];
+function getMinMax(array, field) {
+  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
+    return null;
+  }
+  var _array$reduce = array.reduce(function (acc, obj) {
+      var value = obj[field];
+      return {
+        min: value < acc.min ? value : acc.min,
+        max: value > acc.max ? value : acc.max
+      };
+    }, {
+      min: array[0][field],
+      max: array[0][field]
+    }),
+    min = _array$reduce.min,
+    max = _array$reduce.max;
+  return {
+    min: min,
+    max: max
+  };
+}
+var ProductPrice = function ProductPrice(props) {
+  var product = props.product,
+    variant = props.variant,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  var _useState = React.useState(),
+    displayPrice = _useState[0],
+    setDisplayPrice = _useState[1];
+  var _useState2 = React.useState(),
+    displayPriceBeforeDiscount = _useState2[0],
+    setDisplayPriceBeforeDiscount = _useState2[1];
   React.useEffect(function () {
-    if (isAutoGetList) {
-      getListEmployee();
+    if (variant) {
+      genProductPrice([variant]);
+    } else if (product) {
+      genProductPrice(product.variants);
     }
-  }, [isAutoGetList]);
-  var getListEmployee = function getListEmployee() {
-    try {
-      return Promise.resolve(_catch(function () {
-        return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).then(function (res) {
-          var _res$data, _res$data$status;
-          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
-            var _res$data2;
-            setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
-          }
-          return res;
-        });
-      }, function (e) {
-        console.log(e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
+  }, [product, variant]);
+  var genProductPrice = function genProductPrice(variants) {
+    var mPrice = getMinMax(variants, 'price');
+    var mPriceBeforeDiscount = getMinMax(variants, 'priceBeforeDiscount');
+    if (mPrice && mPriceBeforeDiscount) {
+      var _displayPriceBeforeDiscount = formatCurrency(mPriceBeforeDiscount.min);
+      var _displayPrice = formatCurrency(mPrice.min);
+      if (mPrice.min !== mPrice.max) {
+        _displayPrice += " - " + formatCurrency(mPrice.max);
+      }
+      if (mPriceBeforeDiscount.min !== mPriceBeforeDiscount.max) {
+        _displayPriceBeforeDiscount += " - " + formatCurrency(mPriceBeforeDiscount.max);
+      }
+      setDisplayPrice(_displayPrice);
+      setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
+    } else {
+      var _displayPrice2 = formatCurrency(product === null || product === void 0 ? void 0 : product.price);
+      setDisplayPrice(_displayPrice2);
     }
   };
-  return {
-    listEmployment: listEmployment,
-    getListEmployee: getListEmployee
-  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-gray3 line-through mr-2"
+  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-primary font-semibold",
+    style: style
+  }, displayPrice));
 };
 
-var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
-  return api({
-    method: "post",
-    url: "/spa-schedule/customer/create",
-    data: data,
-    headers: {
-      shopId: shopId
-    }
-  });
+var ProductItem1 = function ProductItem1(props) {
+  var product = props.product;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "!w-20 rounded-lg"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-4 border-b border-stroke flex-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex mt-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-1 text-gray3"
+  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product
+  }))));
 };
-var draftOrderWithoutLoginApi = function draftOrderWithoutLoginApi(shopId, data) {
-  return api({
-    method: "post",
-    url: "/spa/orders/draft-online-without-login",
-    params: {
-      shopId: shopId
-    },
-    data: data,
-    headers: {
-      shopId: shopId
+
+var Dash = function Dash(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? "#ccc" : _props$color,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-[240px] md:max-w-[720px] border-b-0 " + className,
+    style: {
+      backgroundImage: "repeating-linear-gradient(to right, " + color + " 0, " + color + " 10px, transparent 10px, transparent 20px)",
+      height: "1px"
     }
   });
 };
 
-var _excluded$1 = ["productName"];
-var BookingController = function BookingController(props) {
-  _objectDestructuringEmpty(props);
-  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
-    try {
-      return Promise.resolve(_catch(function () {
-        var _Date;
-        var data = {
-          appId: "SSPA",
-          customerName: customerName,
-          customerPhone: customerPhone === null || customerPhone === void 0 ? void 0 : customerPhone.replace("+", ""),
-          isSellService: true,
-          scheduleDate: (_Date = new Date(scheduleDate)) === null || _Date === void 0 ? void 0 : _Date.getTime(),
-          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
-            var productName = _ref.productName,
-              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-            return rest;
-          }),
-          shopId: shopId
-        };
-        return Promise.resolve(createSpaScheduleApi(shopId, data));
-      }, function (e) {
-        console.log(e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
+var Loading = function Loading(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 24 : _props$size;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "border-4 boder-[rgba(255, 255, 255, 0.2)] rounded-full border-t-4 border-t-primary animate-spin",
+    style: {
+      width: size,
+      height: size
     }
-  };
-  return {
-    createSchedule: createSchedule
-  };
+  });
 };
 
-var Select = React.forwardRef(function (props, ref) {
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$labelClassName = props.labelClassName,
-    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$optionClassNam = props.optionClassName,
-    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    _props$selectClassNam = props.selectClassName,
-    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
-    _props$rules = props.rules,
-    rules = _props$rules === void 0 ? [] : _props$rules,
-    options = props.options,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
-    handleSearchOption = props.handleSearchOption,
-    _props$isMulti = props.isMulti,
-    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-    _props$isButtonDelete = props.isButtonDelete,
-    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
-    _props$funcDelete = props.funcDelete,
-    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
-    _props$isSearch = props.isSearch,
-    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
-    renderItem = props.renderItem;
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var selectRef = React.useRef(null);
-  var _useState2 = React.useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  var _useState3 = React.useState(""),
-    inputSearch = _useState3[0],
-    setInputSearch = _useState3[1];
-  var _useState4 = React.useState(defaultValue),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = React.useState(options),
-    listOptions = _useState5[0],
-    setListOptions = _useState5[1];
-  var dropdownRef = React.useRef(null);
-  var _useState6 = React.useState('bottom'),
-    dropdownPosition = _useState6[0],
-    setDropdownPosition = _useState6[1];
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    if (isMulti) setValue(defaultValue);
-  }, [defaultValue]);
-  React.useEffect(function () {
-    setListOptions(options);
-    if (!isMulti) setValue(defaultValue);
-  }, [options]);
-  React.useEffect(function () {
-    var _inputRef$current;
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    var updateDropdownPosition = function updateDropdownPosition() {
-      if (selectRef.current && dropdownRef.current) {
-        var _selectRef$current, _window;
-        var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
-        var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
-        var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
-        if (spaceBelow < spaceAbove) {
-          setDropdownPosition('top');
-        } else {
-          setDropdownPosition('bottom');
+var TreatmentsCategory7 = function TreatmentsCategory7(props) {
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
+  var _useState = React.useState({
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _CategoryController = CategoryController(_extends({}, props, {
+      types: "1"
+    })),
+    categories = _CategoryController.categories;
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
+    loading = _ProductController.loading;
+  var _useState2 = React.useState(0),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  React.useEffect(function () {
+    var newParams = _extends({}, params, {
+      categoryId: selectedCategory
+    });
+    if (!selectedCategory) {
+      delete newParams.categoryId;
+    }
+    setParams(newParams);
+  }, [selectedCategory]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " relative"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
+    datas: [{
+      categoryId: 0,
+      cateName: "Tất cả"
+    }].concat(categories),
+    className: "mt-6 rounded-lg overflow-hidden bg-bgSecondary",
+    renderItem: function renderItem(item, index) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: index,
+        className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
+        onClick: function onClick() {
+          return setSelectedCategory(item.categoryId);
         }
-      }
-    };
-    if (isOpen) {
-      updateDropdownPosition();
-      window.addEventListener('resize', updateDropdownPosition);
+      }, item === null || item === void 0 ? void 0 : item.cateName);
     }
-    return function () {
-      window.removeEventListener('resize', updateDropdownPosition);
-    };
-  }, [isOpen]);
+  }), loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full justify-center p-12"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return /*#__PURE__*/React__default.createElement(ProductItem1, {
+      key: index,
+      product: product === null || product === void 0 ? void 0 : product.productInfo
+    });
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 text-center p-12"
+  }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+var NotFoundProduct = function NotFoundProduct() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
+  }, /*#__PURE__*/React__default.createElement(fa.FaBoxOpen, {
+    size: 80
+  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+};
+
+var TreatmentsList6 = function TreatmentsList6(props) {
+  var _products$slice;
+  var data = props.data,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$TreatmentItem = props.TreatmentItem,
+    TreatmentItem = _props$TreatmentItem === void 0 ? null : _props$TreatmentItem,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+  var _useState = React.useState({
+      size: 12,
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = React.useState(true),
+    isGetMore = _useState2[0],
+    setIsGetMore = _useState2[1];
+  var _ProductController = ProductController(_extends({}, props, {
+      params: params
+    })),
+    products = _ProductController.products,
+    loading = _ProductController.loading;
+  var handleGetMoreProducts = function handleGetMoreProducts() {
+    setIsGetMore(false);
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " flex flex-col gap-8 "
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
+    className: "m-auto mt-20 min-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, params.size - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
+    return /*#__PURE__*/React__default.createElement(TreatmentItem, {
+      Link: Link,
+      shopConfigStyle: shopConfigStyle,
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      key: "htrhr-" + idx
+    });
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
+    label: "Xem thêm",
+    onClick: handleGetMoreProducts,
+    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
+    type: "outline"
+  }) : null);
+};
+
+var ModalNotification = function ModalNotification(props) {
+  var modalRef = React.useRef(null);
+  var onClose = props.onClose,
+    onCloseFormBooking = props.onCloseFormBooking,
+    _props$isButtonClose = props.isButtonClose,
+    isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose;
   var handleClickOutside = function handleClickOutside(event) {
-    var _selectRef$current2;
-    if (selectRef !== null && selectRef !== void 0 && selectRef.current && !(selectRef !== null && selectRef !== void 0 && (_selectRef$current2 = selectRef.current) !== null && _selectRef$current2 !== void 0 && _selectRef$current2.contains(event.target))) {
-      setIsOpen(false);
-      setInputSearch("");
-      setListOptions(options);
+    if (modalRef.current && !modalRef.current.contains(event.target)) {
+      if (onClose) onClose();
+      if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
+        onCloseFormBooking();
+      }
     }
   };
   React.useEffect(function () {
@@ -7846,42 +7929,257 @@ var Select = React.forwardRef(function (props, ref) {
       document.removeEventListener('click', handleClickOutside);
     };
   }, []);
-  React.useImperativeHandle(ref, function () {
-    return {
-      validateData: function validateData() {
-        return _validateData();
-      },
-      setError: function setError(err) {
-        return _setError(err);
-      }
-    };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 "
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: " flex items-center justify-center relative bg-red",
+    ref: modalRef
+  }, props === null || props === void 0 ? void 0 : props.children, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
+    className: "absolute top-4 right-4",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(rx.RxCross2, null))));
+};
+
+var getEmployeeListApi = function getEmployeeListApi(shopId) {
+  return api({
+    method: "get",
+    url: "/chain-employment-profile/filter-employ-by-customer",
+    params: {
+      shopIds: shopId
+    },
+    headers: {
+      shopId: shopId
+    }
   });
-  var isEmpty = function isEmpty(value) {
-    var _Object$keys;
-    if (Array !== null && Array !== void 0 && Array.isArray(value)) return (value === null || value === void 0 ? void 0 : value.length) <= 0;
-    if (typeof value === 'object') return (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0;
-    return false;
-  };
-  var _validateData = function _validateData() {
-    var count = 0;
-    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
-      var _e$pattern;
-      var e = _step.value;
-      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && isEmpty(value)) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
-        _setError(e === null || e === void 0 ? void 0 : e.message);
-        count++;
-        break;
-      }
+};
+
+var EmployeeController = function EmployeeController(props) {
+  var _props$isAutoGetList = props.isAutoGetList,
+    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
+    shopConfig = props.shopConfig;
+  var _useState = React.useState([]),
+    listEmployment = _useState[0],
+    setListEmployment = _useState[1];
+  React.useEffect(function () {
+    if (isAutoGetList) {
+      getListEmployee();
     }
-    if (count) {
-      return false;
-    } else {
-      _setError('');
-      return true;
+  }, [isAutoGetList]);
+  var getListEmployee = function getListEmployee() {
+    try {
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).then(function (res) {
+          var _res$data, _res$data$status;
+          if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
+            var _res$data2;
+            setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
+          }
+          return res;
+        });
+      }, function (e) {
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    listEmployment: listEmployment,
+    getListEmployee: getListEmployee
+  };
+};
+
+var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
+  return api({
+    method: "post",
+    url: "/spa-schedule/customer/create",
+    data: data,
+    headers: {
+      shopId: shopId
+    }
+  });
+};
+var draftOrderWithoutLoginApi = function draftOrderWithoutLoginApi(shopId, data) {
+  return api({
+    method: "post",
+    url: "/spa/orders/draft-online-without-login",
+    params: {
+      shopId: shopId
+    },
+    data: data,
+    headers: {
+      shopId: shopId
+    }
+  });
+};
+
+var _excluded$1 = ["productName"];
+var BookingController = function BookingController(props) {
+  _objectDestructuringEmpty(props);
+  var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
+    try {
+      return Promise.resolve(_catch(function () {
+        var _Date;
+        var data = {
+          appId: "SSPA",
+          customerName: customerName,
+          customerPhone: customerPhone === null || customerPhone === void 0 ? void 0 : customerPhone.replace("+", ""),
+          isSellService: true,
+          scheduleDate: (_Date = new Date(scheduleDate)) === null || _Date === void 0 ? void 0 : _Date.getTime(),
+          services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
+            var productName = _ref.productName,
+              rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+            return rest;
+          }),
+          shopId: shopId
+        };
+        return Promise.resolve(createSpaScheduleApi(shopId, data));
+      }, function (e) {
+        console.log(e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return {
+    createSchedule: createSchedule
+  };
+};
+
+var Select = React.forwardRef(function (props, ref) {
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
+    _props$rules = props.rules,
+    rules = _props$rules === void 0 ? [] : _props$rules,
+    options = props.options,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
+    handleSearchOption = props.handleSearchOption,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    _props$isButtonDelete = props.isButtonDelete,
+    isButtonDelete = _props$isButtonDelete === void 0 ? false : _props$isButtonDelete,
+    _props$funcDelete = props.funcDelete,
+    funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
+    _props$isSearch = props.isSearch,
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = React.useRef(null);
+  var _useState2 = React.useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = React.useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = React.useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = React.useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = React.useRef(null);
+  var _useState6 = React.useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  React.useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  React.useEffect(function () {
+    var _inputRef$current;
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    var updateDropdownPosition = function updateDropdownPosition() {
+      if (selectRef.current && dropdownRef.current) {
+        var _selectRef$current, _window;
+        var selectRect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
+        var spaceBelow = ((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) - (selectRect === null || selectRect === void 0 ? void 0 : selectRect.bottom);
+        var spaceAbove = selectRect === null || selectRect === void 0 ? void 0 : selectRect.top;
+        if (spaceBelow < spaceAbove) {
+          setDropdownPosition('top');
+        } else {
+          setDropdownPosition('bottom');
+        }
+      }
+    };
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener('resize', updateDropdownPosition);
+    }
+    return function () {
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen]);
+  var handleClickOutside = function handleClickOutside(event) {
+    var _selectRef$current2;
+    if (selectRef !== null && selectRef !== void 0 && selectRef.current && !(selectRef !== null && selectRef !== void 0 && (_selectRef$current2 = selectRef.current) !== null && _selectRef$current2 !== void 0 && _selectRef$current2.contains(event.target))) {
+      setIsOpen(false);
+      setInputSearch("");
+      setListOptions(options);
+    }
+  };
+  React.useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      validateData: function validateData() {
+        return _validateData();
+      },
+      setError: function setError(err) {
+        return _setError(err);
+      }
+    };
+  });
+  var isEmpty = function isEmpty(value) {
+    var _Object$keys;
+    if (Array !== null && Array !== void 0 && Array.isArray(value)) return (value === null || value === void 0 ? void 0 : value.length) <= 0;
+    if (typeof value === 'object') return (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) <= 0;
+    return false;
+  };
+  var _validateData = function _validateData() {
+    var count = 0;
+    for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
+      var _e$pattern;
+      var e = _step.value;
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && isEmpty(value)) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
+      }
+    }
+    if (count) {
+      return false;
+    } else {
+      _setError('');
+      return true;
     }
   };
   var handleSearch = function handleSearch(e) {
@@ -8228,19 +8526,6 @@ var InputPhoneNumber = React.forwardRef(function (props, ref) {
   }, error) : null);
 });
 
-var formatCurrency = function formatCurrency(amount) {
-  if (isNaN(amount)) {
-    return '0 ₫';
-  }
-  var roundedAmount = Math.round(amount);
-  var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-  return formattedAmount + " \u20AB";
-};
-var pattern = {
-  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
-};
-var numberPattern = /^\d+$/;
-
 var dayjs_min = createCommonjsModule(function (module, exports) {
 !function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
 });
@@ -8724,465 +9009,142 @@ var BookingForm = function BookingForm(props) {
     className: "mb-4 text-center"
   }, "B\u1EA1n \u0111\xE3 c\xF3 t\xE0i kho\u1EA3n, vui l\xF2ng \u0111\u0103ng nh\u1EADp \u0111\u1EC3 xem chi ti\u1EBFt c\xE1c s\u1EA3n ph\u1EA9m, d\u1ECBch v\u1EE5 li\u1EC7u tr\xECnh m\xE0 b\u1EA1n \u0111ang s\u1EDF h\u1EEFu"), /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
-    shopConfigStyle: shopConfigStyle
-  })))));
-};
-
-var Treatments1 = function Treatments1(props) {
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$shopConfig = props.shopConfig,
-    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  var _useState = React.useState({
-      size: 10,
-      types: "1,10",
-      isHighlight: true
-    }),
-    params = _useState[0];
-  var _useState2 = React.useState(false),
-    isOpenModal = _useState2[0],
-    setIsOpenModal = _useState2[1];
-  var _useState3 = React.useState([]),
-    dataBooking = _useState3[0],
-    setDataBooking = _useState3[1];
-  var _ProductController = ProductController(_extends({}, props, {
-      params: params
-    })),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
-  console.log("treatment1:", products);
-  var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
-    try {
-      var _data$productInfo, _data$productInfo2;
-      event.stopPropagation();
-      setDataBooking([_extends({}, data, {
-        quantity: 1,
-        technical: {},
-        oldService: false,
-        label: data === null || data === void 0 ? void 0 : (_data$productInfo = data.productInfo) === null || _data$productInfo === void 0 ? void 0 : _data$productInfo.productName,
-        value: data === null || data === void 0 ? void 0 : (_data$productInfo2 = data.productInfo) === null || _data$productInfo2 === void 0 ? void 0 : _data$productInfo2.productId
-      })]);
-      setIsOpenModal(true);
-    } catch (error) {
-      console.log("::::::::::errrorrrrr::::::", error);
-    }
-  };
-  var handleCloseModal = function handleCloseModal() {
-    setIsOpenModal(false);
-    setDataBooking([]);
-  };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "" + SECTION_DEFAULT_CLASS
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    var _product$productInfo, _product$productInfo2;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
-      key: "rthirr-" + index
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "block " + (index % 2 ? "md:hidden" : "")
-    }, /*#__PURE__*/React__default.createElement(ProductImage, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "text-left " + (index % 2 ? "md:text-right" : "")
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-2xl"
-    }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-4 text-textBody",
-      dangerouslySetInnerHTML: {
-        __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
-      }
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      label: "Đặt lịch ngay",
-      shopConfigStyle: shopConfigStyle,
-      className: "mt-4",
-      onClick: function onClick(event) {
-        handleOpenModalBooking(event, product);
-      }
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "hidden " + (index % 2 ? "md:block" : "")
-    }, /*#__PURE__*/React__default.createElement(ProductImage, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
-    })));
-  })), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
-    onClose: handleCloseModal
-  }, /*#__PURE__*/React__default.createElement(BookingForm, {
-    className: "overflow-y-auto hide-scrollbar max-h-[80vh] !bg-bgSecondary",
-    onCloseFormBooking: handleCloseModal,
-    defaultValue: dataBooking,
-    shopConfig: shopConfig,
-    shopConfigStyle: shopConfigStyle
-  })) : null);
-};
-
-var _path$1;
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$2.apply(null, arguments);
-}
-function SvgAngleSmallLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: 512,
-    height: 512
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
-  })));
-}
-
-var _path$2;
-function _extends$3() {
-  return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$3.apply(null, arguments);
-}
-function SvgAngleSmallRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: 512,
-    height: 512
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
-  })));
-}
-
-var ScrollHorizontal = function ScrollHorizontal(props) {
-  var _props$datas = props.datas,
-    datas = _props$datas === void 0 ? [] : _props$datas,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$renderItem = props.renderItem,
-    renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
-  var scrollContainerRef = React.useRef(null);
-  var _useState = React.useState(true),
-    isScrolledToLeft = _useState[0],
-    setIsScrolledToLeft = _useState[1];
-  var _useState2 = React.useState(false),
-    isScrolledToRight = _useState2[0],
-    setIsScrolledToRight = _useState2[1];
-  var checkScrollPosition = function checkScrollPosition() {
-    if (scrollContainerRef.current) {
-      var _scrollContainerRef$c = scrollContainerRef.current,
-        _scrollLeft = _scrollContainerRef$c.scrollLeft,
-        scrollWidth = _scrollContainerRef$c.scrollWidth,
-        clientWidth = _scrollContainerRef$c.clientWidth;
-      setIsScrolledToLeft(_scrollLeft === 0);
-      setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
-    }
-  };
-  var scrollLeft = function scrollLeft() {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: -200,
-        behavior: "smooth"
-      });
-      setTimeout(checkScrollPosition, 300);
-    }
-  };
-  var scrollRight = function scrollRight() {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: 200,
-        behavior: "smooth"
-      });
-      setTimeout(checkScrollPosition, 300);
-    }
-  };
-  React.useEffect(function () {
-    checkScrollPosition();
-  }, [datas]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex " + className,
-    style: style
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full overflow-x-hidden",
-    ref: scrollContainerRef,
-    onScroll: checkScrollPosition
-  }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
-    return renderItem(item, index);
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 items-center px-4"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    onClick: scrollLeft,
-    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToLeft ? "bg-gray4" : "bg-primary")
-  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
-    width: 24,
-    height: 24,
-    fill: "#fff"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    onClick: scrollRight,
-    className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
-  }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
-    width: 24,
-    height: 24,
-    fill: "#fff"
-  }))));
-};
-
-function getMinMax(array, field) {
-  if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
-    return null;
-  }
-  var _array$reduce = array.reduce(function (acc, obj) {
-      var value = obj[field];
-      return {
-        min: value < acc.min ? value : acc.min,
-        max: value > acc.max ? value : acc.max
-      };
-    }, {
-      min: array[0][field],
-      max: array[0][field]
-    }),
-    min = _array$reduce.min,
-    max = _array$reduce.max;
-  return {
-    min: min,
-    max: max
-  };
-}
-var ProductPrice = function ProductPrice(props) {
-  var product = props.product,
-    variant = props.variant,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
-  var _useState = React.useState(),
-    displayPrice = _useState[0],
-    setDisplayPrice = _useState[1];
-  var _useState2 = React.useState(),
-    displayPriceBeforeDiscount = _useState2[0],
-    setDisplayPriceBeforeDiscount = _useState2[1];
-  React.useEffect(function () {
-    if (variant) {
-      genProductPrice([variant]);
-    } else if (product) {
-      genProductPrice(product.variants);
-    }
-  }, [product, variant]);
-  var genProductPrice = function genProductPrice(variants) {
-    var mPrice = getMinMax(variants, 'price');
-    var mPriceBeforeDiscount = getMinMax(variants, 'priceBeforeDiscount');
-    if (mPrice && mPriceBeforeDiscount) {
-      var _displayPriceBeforeDiscount = formatCurrency(mPriceBeforeDiscount.min);
-      var _displayPrice = formatCurrency(mPrice.min);
-      if (mPrice.min !== mPrice.max) {
-        _displayPrice += " - " + formatCurrency(mPrice.max);
-      }
-      if (mPriceBeforeDiscount.min !== mPriceBeforeDiscount.max) {
-        _displayPriceBeforeDiscount += " - " + formatCurrency(mPriceBeforeDiscount.max);
-      }
-      setDisplayPrice(_displayPrice);
-      setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
-    } else {
-      var _displayPrice2 = formatCurrency(product === null || product === void 0 ? void 0 : product.price);
-      setDisplayPrice(_displayPrice2);
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className
-  }, displayPriceBeforeDiscount !== displayPrice && displayPriceBeforeDiscount != null ? /*#__PURE__*/React__default.createElement("span", {
-    className: "text-gray3 line-through mr-2"
-  }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
-    className: "text-primary font-semibold",
-    style: style
-  }, displayPrice));
-};
-
-var ProductItem1 = function ProductItem1(props) {
-  var product = props.product;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "!w-20 rounded-lg"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "ml-4 border-b border-stroke flex-1"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-lg"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex mt-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex-1 text-gray3"
-  }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product
-  }))));
-};
-
-var Loading = function Loading(props) {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? 24 : _props$size;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "border-4 boder-[rgba(255, 255, 255, 0.2)] rounded-full border-t-4 border-t-primary animate-spin",
-    style: {
-      width: size,
-      height: size
-    }
-  });
-};
-
-var Treatments1$1 = function Treatments1(props) {
-  var _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$data = props.data,
-    data = _props$data === void 0 ? {} : _props$data,
-    _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
-  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
-    _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
-    secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
-  var _useState = React.useState({
-      types: "1"
-    }),
-    params = _useState[0],
-    setParams = _useState[1];
-  var _CategoryController = CategoryController(_extends({}, props, {
-      types: "1"
-    })),
-    categories = _CategoryController.categories;
-  var _ProductController = ProductController(_extends({}, props, {
-      params: params
-    })),
-    _ProductController$pr = _ProductController.products,
-    products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
-    loading = _ProductController.loading;
-  var _useState2 = React.useState(0),
-    selectedCategory = _useState2[0],
-    setSelectedCategory = _useState2[1];
-  React.useEffect(function () {
-    var newParams = _extends({}, params, {
-      categoryId: selectedCategory
-    });
-    if (!selectedCategory) {
-      delete newParams.categoryId;
-    }
-    setParams(newParams);
-  }, [selectedCategory]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " relative"
-  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
-    data: data,
-    shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
-    datas: [{
-      categoryId: 0,
-      cateName: "Tất cả"
-    }].concat(categories),
-    className: "mt-6 rounded-lg overflow-hidden bg-bgSecondary",
-    renderItem: function renderItem(item, index) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: index,
-        className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
-        onClick: function onClick() {
-          return setSelectedCategory(item.categoryId);
-        }
-      }, item === null || item === void 0 ? void 0 : item.cateName);
-    }
-  }), loading ? /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full justify-center p-12"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
-  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
-    return /*#__PURE__*/React__default.createElement(ProductItem1, {
-      key: index,
-      product: product === null || product === void 0 ? void 0 : product.productInfo
-    });
-  })) : /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray3 text-center p-12"
-  }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
-    color: secondary
-  }));
-};
-
-var NotFoundProduct = function NotFoundProduct() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "h-60 flex flex-col justify-center items-center text-xl text-gray3"
-  }, /*#__PURE__*/React__default.createElement(fa.FaBoxOpen, {
-    size: 80
-  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+    shopConfigStyle: shopConfigStyle
+  })))));
 };
 
-var TreatmentsList6 = function TreatmentsList6(props) {
-  var _products$slice;
-  var data = props.data,
-    _props$Link = props.Link,
-    Link = _props$Link === void 0 ? null : _props$Link,
+var TreatmentsList7 = function TreatmentsList7(props) {
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
     _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
-    _props$TreatmentItem = props.TreatmentItem,
-    TreatmentItem = _props$TreatmentItem === void 0 ? null : _props$TreatmentItem,
-    _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   var _useState = React.useState({
-      size: 12,
-      types: "1"
+      size: 10,
+      types: "1,10",
+      isHighlight: true
     }),
-    params = _useState[0],
-    setParams = _useState[1];
-  var _useState2 = React.useState(true),
-    isGetMore = _useState2[0],
-    setIsGetMore = _useState2[1];
+    params = _useState[0];
+  var _useState2 = React.useState(false),
+    isOpenModal = _useState2[0],
+    setIsOpenModal = _useState2[1];
+  var _useState3 = React.useState([]),
+    dataBooking = _useState3[0],
+    setDataBooking = _useState3[1];
+  var _useState4 = React.useState(0),
+    currentSlide = _useState4[0],
+    setCurrentSlide = _useState4[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: params
     })),
-    products = _ProductController.products,
-    loading = _ProductController.loading;
-  var handleGetMoreProducts = function handleGetMoreProducts() {
-    setIsGetMore(false);
-    setParams(function (prev) {
-      return _extends({}, prev, {
-        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
-      });
-    });
+    _ProductController$pr = _ProductController.products,
+    products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
+  console.log("treatment1:", products);
+  var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
+    try {
+      var _data$productInfo, _data$productInfo2;
+      event.stopPropagation();
+      setDataBooking([_extends({}, data, {
+        quantity: 1,
+        technical: {},
+        oldService: false,
+        label: data === null || data === void 0 ? void 0 : (_data$productInfo = data.productInfo) === null || _data$productInfo === void 0 ? void 0 : _data$productInfo.productName,
+        value: data === null || data === void 0 ? void 0 : (_data$productInfo2 = data.productInfo) === null || _data$productInfo2 === void 0 ? void 0 : _data$productInfo2.productId
+      })]);
+      setIsOpenModal(true);
+    } catch (error) {
+      console.log("::::::::::errrorrrrr::::::", error);
+    }
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " flex flex-col gap-8 "
+  var handleCloseModal = function handleCloseModal() {
+    setIsOpenModal(false);
+    setDataBooking([]);
+  };
+  var renderItemSlide = function renderItemSlide(product, index) {
+    var _product$productInfo, _product$productInfo2;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
+      key: index
+    }, /*#__PURE__*/React__default.createElement(ProductImage, {
+      product: product === null || product === void 0 ? void 0 : product.productInfo,
+      className: "aspect-video rounded-2xl"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: ''
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "font-medium text-2xl"
+    }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
+      className: "mt-4 text-textBody",
+      dangerouslySetInnerHTML: {
+        __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
+      }
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      label: "Đặt lịch ngay",
+      shopConfigStyle: shopConfigStyle,
+      className: "mt-4",
+      onClick: function onClick(event) {
+        handleOpenModalBooking(event, product);
+      }
+    }))));
+  };
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), loading && isGetMore ? /*#__PURE__*/React__default.createElement("div", {
-    className: "m-auto mt-20 min-h-32"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-2 gap-y-4 md:gap-4 xl:gap-6"
-  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, params.size - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, idx) {
-    return /*#__PURE__*/React__default.createElement(TreatmentItem, {
-      Link: Link,
-      shopConfigStyle: shopConfigStyle,
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      key: "htrhr-" + idx
-    });
-  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (products === null || products === void 0 ? void 0 : products.length) > (params === null || params === void 0 ? void 0 : params.size) - 4 ? /*#__PURE__*/React__default.createElement(Button, {
-    label: "Xem thêm",
-    onClick: handleGetMoreProducts,
-    className: "mx-auto " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass),
-    type: "outline"
-  }) : null);
+  }), /*#__PURE__*/React__default.createElement(Slider, {
+    className: "center",
+    infinite: true,
+    slidesToShow: 1,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    }
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return renderItemSlide(product, index);
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onClose: handleCloseModal
+  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    className: "overflow-y-auto hide-scrollbar max-h-[80vh] !bg-bgSecondary",
+    onCloseFormBooking: handleCloseModal,
+    defaultValue: dataBooking,
+    shopConfig: shopConfig,
+    shopConfigStyle: shopConfigStyle
+  })) : null);
 };
 
 var ProductDetailController = function ProductDetailController(props) {
@@ -9613,7 +9575,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
   }))));
 };
 
-var Products1 = function Products1(props) {
+var ProductsList7 = function ProductsList7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
@@ -10736,6 +10698,72 @@ var Banner1 = function Banner1(props) {
   })));
 };
 
+var Banner2 = function Banner2(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState = React.useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(Slider, {
+    className: "center",
+    infinite: false,
+    slidesToShow: 2,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    },
+    centerPadding: "20px",
+    responsive: [{
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 1
+      }
+    }]
+  }, (sectionData === null || sectionData === void 0 ? void 0 : sectionData.length) > 0 && (sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: 'px-2'
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "",
+      className: "rounded-2xl",
+      key: index
+    }));
+  }))));
+};
+
 var Banner3 = function Banner3(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -10749,6 +10777,36 @@ var Banner3 = function Banner3(props) {
   }));
 };
 
+var Banner7 = function Banner7(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6 grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-2"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
+    var _it$srcImages;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: it === null || it === void 0 ? void 0 : (_it$srcImages = it.srcImages) === null || _it$srcImages === void 0 ? void 0 : _it$srcImages[0]
+    }));
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
 var BannerFull1 = function BannerFull1(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -12750,11 +12808,89 @@ var ShopHighlights6 = function ShopHighlights6(props) {
   }));
 };
 
+var ShopHighlights7 = function ShopHighlights7(props) {
+  var _data$data;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
+    secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_DEFAULT_CLASS + " relative"
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
+  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "pt-6 col-span-3 md:col-span-1"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "relative w-40 h-24 flex items-center justify-center m-auto md:m-0"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "absolute w-40 h-24 rounded-2xl z-10 bg-primary"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
+    }), it !== null && it !== void 0 && it.svgImage ? /*#__PURE__*/React__default.createElement("div", {
+      className: "w-12 text-primary h-16 w-16 z-20 m-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: configSvg(it === null || it === void 0 ? void 0 : it.svgImage)
+      }
+    })) : /*#__PURE__*/React__default.createElement("div", {
+      className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
+      style: {
+        backgroundImage: "url(" + it.srcImage + ")"
+      }
+    })), /*#__PURE__*/React__default.createElement("p", {
+      className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg"
+    }, it.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full bg-secondary"
+    }), /*#__PURE__*/React__default.createElement("p", {
+      className: "text-base mx-auto md:mx-0 text-center md:text-start"
+    }, it.description));
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
+    color: secondary
+  }));
+};
+
+var VideoFull1 = function VideoFull1(props) {
+  var _data$data, _data$data$;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  console.log("VideoFull1 data", data);
+  var youtubeVideoId = getYoutubeVideoIdByUrl(data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.link);
+  console.log("VideoFull1 youtubeVideoId", youtubeVideoId);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), youtubeVideoId ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full aspect-video"
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    className: "w-full h-full",
+    src: "https://www.youtube.com/embed/" + youtubeVideoId,
+    title: "YouTube video player",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true
+  })) : null);
+};
+
 exports.About1 = About1;
 exports.About5 = About5;
 exports.Address1 = Address1;
 exports.Banner1 = Banner1;
+exports.Banner2 = Banner2;
 exports.Banner3 = Banner3;
+exports.Banner7 = Banner7;
 exports.BannerFull1 = BannerFull1;
 exports.BannerFull2 = BannerFull2;
 exports.Booking1 = Booking1;
@@ -12769,7 +12905,6 @@ exports.CustomerRating5 = CustomerRating5;
 exports.CustomerRating6 = CustomerRating6;
 exports.DateTimePicker = DateTimePicker;
 exports.Employees1 = Employees1;
-exports.Features1 = Features1;
 exports.Features2 = Features2;
 exports.Features3 = Features3;
 exports.Footer1 = Footer1;
@@ -12777,8 +12912,7 @@ exports.Footer7 = Footer7;
 exports.Gallery1 = Gallery1;
 exports.Hero1 = Hero1;
 exports.Hero10 = Hero10;
-exports.Hero11 = Hero11;
-exports.Hero12 = Hero11$1;
+exports.Hero12 = Hero11;
 exports.Hero13 = Hero13;
 exports.Hero2 = Hero2;
 exports.Hero5 = Hero5;
@@ -12805,10 +12939,10 @@ exports.ProductItem7 = ProductItem7;
 exports.ProductList5 = ProductList5;
 exports.ProductSale2 = ProductSale2;
 exports.ProductSearch1 = ProductSearch1;
-exports.Products1 = Products1;
 exports.Products10 = Products10;
 exports.Products2 = Products2;
 exports.Products3 = Products3;
+exports.ProductsList7 = ProductsList7;
 exports.ProductsTop1 = ProductsTop1;
 exports.SearchBar2 = SearchBar2;
 exports.SearchBar5 = SearchBar5;
@@ -12822,10 +12956,12 @@ exports.ServiceDetail1 = ServiceDetail1;
 exports.ShopHighlights2 = ShopHighlights2;
 exports.ShopHighlights5 = ShopHighlights5;
 exports.ShopHighlights6 = ShopHighlights6;
+exports.ShopHighlights7 = ShopHighlights7;
 exports.TextArea = TextArea;
 exports.TreatmentDetail1 = TreatmentDetail1;
 exports.TreatmentItem1 = TreatmentItem1;
-exports.Treatments1 = Treatments1;
-exports.Treatments2 = Treatments1$1;
+exports.TreatmentsCategory7 = TreatmentsCategory7;
 exports.TreatmentsList6 = TreatmentsList6;
+exports.TreatmentsList7 = TreatmentsList7;
+exports.VideoFull1 = VideoFull1;
 //# sourceMappingURL=index.js.map