s-platform-landing-section 0.1.11 → 0.1.14

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useRef, useEffect, forwardRef, useImperativeHandle, createElement, memo } from 'react';
 import { IoCartOutline, IoChevronDownOutline, IoInformationCircleOutline, IoLogOutOutline, IoBagOutline, IoSearchOutline, IoChevronBackOutline, IoChevronForwardOutline, IoLocationOutline, IoCallOutline } from 'react-icons/io5';
-import { FaUserCircle, FaFacebookF, FaFacebookMessenger, FaAngleUp, FaAngleDown, FaCheckCircle, FaBoxOpen, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FaUserCircle, FaFacebookF, FaFacebookMessenger, FaBoxOpen, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { FiMenu, FiShoppingCart, FiSearch } from 'react-icons/fi';
 import { RxCross2 } from 'react-icons/rx';
 import { SiZalo, SiVisa } from 'react-icons/si';
@@ -762,15 +762,15 @@ var Input = forwardRef(function (props, ref) {
     for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
       var _e$pattern, _e$validate;
       var e = _step.value;
-      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
+      if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && (value === '' || value === null)) {
         _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))) {
+      } else if (value !== "" && (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;
-      } else if ((e === null || e === void 0 ? void 0 : e.type) === "validate" && e !== null && e !== void 0 && e.validate && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
+      } else if (value !== "" && (e === null || e === void 0 ? void 0 : e.type) === "validate" && e !== null && e !== void 0 && e.validate && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
         _setError(e === null || e === void 0 ? void 0 : e.message);
         count++;
         break;
@@ -985,54 +985,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;
@@ -7331,55 +7284,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;
@@ -7539,7 +7445,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++) {
@@ -7549,13 +7455,130 @@ function _extends$1() {
     return n;
   }, _extends$1.apply(null, arguments);
 }
-function SvgImageGallery(props) {
+function SvgAngleSmallLeft(props) {
   return /*#__PURE__*/createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: 512,
+    height: 512
+  }, props), _path || (_path = /*#__PURE__*/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__*/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__*/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 = useRef(null);
+  var _useState = useState(true),
+    isScrolledToLeft = _useState[0],
+    setIsScrolledToLeft = _useState[1];
+  var _useState2 = 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);
+    }
+  };
+  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__*/createElement("svg", _extends$3({
     height: 512,
     viewBox: "0 0 24 24",
     width: 512,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/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__*/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"
@@ -7608,233 +7631,285 @@ var ProductImage = function ProductImage(props) {
   });
 };
 
-var ModalNotification = function ModalNotification(props) {
-  var modalRef = 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();
-      }
-    }
-  };
-  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(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 EmployeeController = function EmployeeController(props) {
-  var _props$isAutoGetList = props.isAutoGetList,
-    isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
-    shopConfig = props.shopConfig;
-  var _useState = 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 = useState(),
+    displayPrice = _useState[0],
+    setDisplayPrice = _useState[1];
+  var _useState2 = useState(),
+    displayPriceBeforeDiscount = _useState2[0],
+    setDisplayPriceBeforeDiscount = _useState2[1];
   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 = 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 = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var selectRef = useRef(null);
-  var _useState2 = useState(""),
-    error = _useState2[0],
-    _setError = _useState2[1];
-  var _useState3 = useState(""),
-    inputSearch = _useState3[0],
-    setInputSearch = _useState3[1];
-  var _useState4 = useState(defaultValue),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = useState(options),
-    listOptions = _useState5[0],
-    setListOptions = _useState5[1];
-  var dropdownRef = useRef(null);
-  var _useState6 = useState('bottom'),
-    dropdownPosition = _useState6[0],
-    setDropdownPosition = _useState6[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    if (isMulti) setValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(function () {
-    setListOptions(options);
-    if (!isMulti) setValue(defaultValue);
-  }, [options]);
-  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 = 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 = useState(0),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  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(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 = useState({
+      size: 12,
+      types: "1"
+    }),
+    params = _useState[0],
+    setParams = _useState[1];
+  var _useState2 = 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 = 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();
+      }
     }
   };
   useEffect(function () {
@@ -7843,45 +7918,260 @@ var Select = forwardRef(function (props, ref) {
       document.removeEventListener('click', handleClickOutside);
     };
   }, []);
-  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(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 = useState([]),
+    listEmployment = _useState[0],
+    setListEmployment = _useState[1];
+  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);
     }
   };
-  var handleSearch = function handleSearch(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 = 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 = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var selectRef = useRef(null);
+  var _useState2 = useState(""),
+    error = _useState2[0],
+    _setError = _useState2[1];
+  var _useState3 = useState(""),
+    inputSearch = _useState3[0],
+    setInputSearch = _useState3[1];
+  var _useState4 = useState(defaultValue),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = useState(options),
+    listOptions = _useState5[0],
+    setListOptions = _useState5[1];
+  var dropdownRef = useRef(null);
+  var _useState6 = useState('bottom'),
+    dropdownPosition = _useState6[0],
+    setDropdownPosition = _useState6[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (isMulti) setValue(defaultValue);
+  }, [defaultValue]);
+  useEffect(function () {
+    setListOptions(options);
+    if (!isMulti) setValue(defaultValue);
+  }, [options]);
+  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);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  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) {
     var searchValue = e.target.value;
     setInputSearch(searchValue);
     if (handleSearchOption && typeof handleSearchOption === 'function') {
@@ -8162,7 +8452,7 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
         _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))) {
+      } else if (value !== "" && (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;
@@ -8187,9 +8477,9 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center h-10 rounded-lg border " + className
+    className: "flex items-center h-10 rounded-lg border border-stroke " + className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "border-r-2 "
+    className: "border-stroke border-r-2 "
   }, /*#__PURE__*/React__default.createElement(Select$1, {
     className: 'w-max border-0 !rounded-none !rounded-l-lg',
     defaultValue: countryCode,
@@ -8225,19 +8515,6 @@ var InputPhoneNumber = 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}));
 });
@@ -8710,476 +8987,119 @@ var BookingForm = function BookingForm(props) {
       fontSize: "150px"
     }
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2"
-  }, "Kh\xE1ch h\xE0ng: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerName), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2"
-  }, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerPhone), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4"
-  }, "Th\u1EDDi gian: ", dayjs_min(dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.scheduleDate).format("DD/MM/YYYY")), token ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    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 = useState({
-      size: 10,
-      types: "1,10",
-      isHighlight: true
-    }),
-    params = _useState[0];
-  var _useState2 = useState(false),
-    isOpenModal = _useState2[0],
-    setIsOpenModal = _useState2[1];
-  var _useState3 = 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__*/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__*/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__*/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__*/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 = useRef(null);
-  var _useState = useState(true),
-    isScrolledToLeft = _useState[0],
-    setIsScrolledToLeft = _useState[1];
-  var _useState2 = 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);
-    }
-  };
-  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 = useState(),
-    displayPrice = _useState[0],
-    setDisplayPrice = _useState[1];
-  var _useState2 = useState(),
-    displayPriceBeforeDiscount = _useState2[0],
-    setDisplayPriceBeforeDiscount = _useState2[1];
-  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 = 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 = useState(0),
-    selectedCategory = _useState2[0],
-    setSelectedCategory = _useState2[1];
-  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(FaBoxOpen, {
-    size: 80
-  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 s\u1EA3n ph\u1EA9m"));
+    className: "mb-2"
+  }, "Kh\xE1ch h\xE0ng: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerName), /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2"
+  }, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerPhone), /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4"
+  }, "Th\u1EDDi gian: ", dayjs_min(dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.scheduleDate).format("DD/MM/YYYY")), token ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    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 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 = useState({
-      size: 12,
-      types: "1"
+      size: 10,
+      types: "1,10",
+      isHighlight: true
     }),
-    params = _useState[0],
-    setParams = _useState[1];
-  var _useState2 = useState(true),
-    isGetMore = _useState2[0],
-    setIsGetMore = _useState2[1];
+    params = _useState[0];
+  var _useState2 = useState(false),
+    isOpenModal = _useState2[0],
+    setIsOpenModal = _useState2[1];
+  var _useState3 = useState([]),
+    dataBooking = _useState3[0],
+    setDataBooking = _useState3[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([]);
+  };
+  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,
+  }), 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,
-      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);
+      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 ProductDetailController = function ProductDetailController(props) {
@@ -9415,6 +9335,7 @@ var ProductItem2 = function ProductItem2(props) {
     Link = _props$Link === void 0 ? null : _props$Link,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className;
+  console.log("checkkkkkkkk:::::::", className);
   return /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: getLinkProductDetail(product)
@@ -9441,12 +9362,12 @@ var ProductItem3 = function ProductItem3(props) {
     Link: Link,
     href: getLinkProductDetail(product)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full border rounded-2xl " + className
+    className: "w-full border border-stroke rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 flex flex-col gap-4 justify-start"
+    className: "p-4 flex flex-col gap-4 items-start"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "line-clamp-1"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -9467,15 +9388,15 @@ var ProductItem4 = function ProductItem4(props) {
     Link: Link,
     href: getLinkProductDetail(product)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full border flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
+    className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1"
+    className: "text-start line-clamp-1"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
-    className: "text-lg text-start"
+    className: "text-lg text-start mt-2"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex pt-4 gap-2 md:gap-4 border-t items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9506,7 +9427,7 @@ var ProductItem5 = function ProductItem5(props) {
     product: product,
     className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1 mb-2"
+    className: "text-start line-clamp-1 mb-2"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
     className: "text-lg text-start"
@@ -9533,12 +9454,12 @@ var ProductItem6 = function ProductItem6(props) {
     Link: Link,
     href: getLinkProductDetail(product)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full border flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
+    className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
     className: "w-full h-44 sm:h-56 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1"
+    className: "text start line-clamp-1"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
     className: "text-lg text-start"
@@ -9553,6 +9474,32 @@ var ProductItem6 = function ProductItem6(props) {
   }))));
 };
 
+var ProductItem7 = function ProductItem7(props) {
+  var product = props.product,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className;
+  return /*#__PURE__*/React__default.createElement(LinkToPage, {
+    Link: Link,
+    href: getLinkProductDetail(product)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full bg-bgSecondary relative rounded-2xl " + className
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 flex flex-col gap-4 items-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "line-clamp-1"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "text-lg text-start"
+  })), product !== null && product !== void 0 && product.priceBeforeDiscount && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price) ? /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-5 left-0 font-semibold px-3 py-1 bg-danger text-textButton rounded-r-2xl shadow-lg v-max"
+  }, 1 - 100 * (product === null || product === void 0 ? void 0 : product.price) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null));
+};
+
 var TreatmentItem1 = function TreatmentItem1(props) {
   var product = props.product,
     _props$Link = props.Link,
@@ -9583,7 +9530,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,
@@ -9734,13 +9681,12 @@ var Products2 = function Products2(props) {
     primaryColor: primary,
     renderItem: function renderItem(item, index) {
       return /*#__PURE__*/React__default.createElement("div", {
-        key: "carousel-" + index,
-        className: "flex-shrink-0 w-[calc(50%-2px)]  md:w-[calc(34%-16px)] lg:w-[calc(25%-12px)] xl:w-[calc(25%-19px)]"
+        className: "border-0 flex-shrink-0 w-[calc(50%-2px)]  md:w-[calc(34%-16px)] lg:w-[calc(25%-12px)] xl:w-[calc(25%-19px)]"
       }, /*#__PURE__*/React__default.createElement(ProductItem, {
         product: item.productInfo,
+        key: "carousel-" + index,
         Link: Link,
-        shopConfigStyle: shopConfigStyle,
-        className: "border-0 bg-bgSecondary"
+        shopConfigStyle: shopConfigStyle
       }));
     }
   })));
@@ -10278,7 +10224,7 @@ var ProductsTop1 = function ProductsTop1(props) {
   }, products === null || products === void 0 ? void 0 : products.map(function (product, idx) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
-      className: "bg-bgSecondary border-0",
+      className: "border-0",
       shopConfigStyle: shopConfigStyle,
       product: product === null || product === void 0 ? void 0 : product.productInfo,
       key: "htrhr-" + idx
@@ -10399,7 +10345,9 @@ var ProductHighlight1 = function ProductHighlight1(props) {
 var ProductDetail10 = function ProductDetail10(props) {
   var _product$images;
   var shopConfigStyle = props.shopConfigStyle,
-    shopConfig = props.shopConfig;
+    shopConfig = props.shopConfig,
+    _props$handleRedirect = props.handleRedirect,
+    handleRedirect = _props$handleRedirect === void 0 ? function () {} : _props$handleRedirect;
   var _ProductDetailControl = ProductDetailController(props),
     product = _ProductDetailControl.product;
   var _useState = useState(),
@@ -10488,7 +10436,22 @@ var ProductDetail10 = function ProductDetail10(props) {
       return Promise.reject(e);
     }
   };
-  var buyNow = function buyNow() {};
+  var buyNow = function buyNow() {
+    try {
+      var _temp2 = function () {
+        if (validateData()) {
+          var _refInputQuantity$cur3;
+          var quantity = refInputQuantity === null || refInputQuantity === void 0 ? void 0 : (_refInputQuantity$cur3 = refInputQuantity.current) === null || _refInputQuantity$cur3 === void 0 ? void 0 : _refInputQuantity$cur3.getValue();
+          return Promise.resolve(addProductToCart(product, variant, quantity)).then(function () {
+            handleRedirect("/carts");
+          });
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   var handleDisplayImage = function handleDisplayImage(item) {
     setDisplayImage(item);
   };
@@ -10703,6 +10666,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;
@@ -12704,5 +12697,55 @@ var ShopHighlights6 = function ShopHighlights6(props) {
   }));
 };
 
-export { About1, About5, Address1, Banner1, Banner3, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductList5, ProductSale2, ProductSearch1, Products1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, TextArea, TreatmentDetail1, TreatmentItem1, Treatments1, Treatments1$1 as Treatments2, TreatmentsList6 };
+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
+  }));
+};
+
+export { About1, About5, Address1, Banner1, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsList7, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7 };
 //# sourceMappingURL=index.modern.js.map