s-platform-landing-section 0.1.22 → 0.1.23

package/dist/index.modern.js

@@ -147,7 +147,6 @@ var LinkToPage = function LinkToPage(props) {
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return Link ? /*#__PURE__*/React__default.createElement(Link, otherProps, props.children) : /*#__PURE__*/React__default.createElement("a", otherProps, props.children);
 };
-var SSHOP_SPA_TOKEN = "sshop-spa-token";
 var genLinkSearch = function genLinkSearch(keyword) {
   return "/tim-kiem?tu-khoa=" + keyword;
 };
@@ -882,6 +881,8 @@ var Input = forwardRef(function (props, ref) {
     style = _props$style === void 0 ? {} : _props$style,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+    _props$onKeyDown = props.onKeyDown,
+    onKeyDown = _props$onKeyDown === void 0 ? function () {} : _props$onKeyDown,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$defaultValue = props.defaultValue,
@@ -960,6 +961,9 @@ var Input = forwardRef(function (props, ref) {
     _setValue(value);
     onChange === null || onChange === void 0 ? void 0 : onChange(value);
   };
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  };
   var changeQuantity = function changeQuantity(quantity) {
     var newValue = parseInt(value) + quantity;
     if (!disabled && newValue > min && (max === null || newValue <= max)) {
@@ -1000,7 +1004,10 @@ var Input = forwardRef(function (props, ref) {
     onChange: handleOnChange,
     required: required,
     className: _inputClassName,
-    ref: refInput
+    ref: refInput,
+    onKeyDown: function onKeyDown(e) {
+      handleOnKeyDown(e);
+    }
   }), suffix ? /*#__PURE__*/React__default.createElement("div", null, suffix) : null, isHidden ? /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick() {
       changeHidden();
@@ -1020,12 +1027,19 @@ var Hero1 = function Hero1(props) {
   var _sectionData$, _sectionData$$srcImag, _sectionData$2, _sectionData$3, _sectionData$4, _sectionData$4$button, _sectionData$4$button2, _sectionData$5, _sectionData$5$button, _sectionData$5$button2, _sectionData$6, _sectionData$6$button, _sectionData$6$button2;
   var shopConfigStyle = props.shopConfigStyle,
     data = props.data,
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link;
   var _useState = useState(""),
     value = _useState[0],
     setValue = _useState[1];
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var handleSearch = function handleSearch(e) {
+    if ((e === null || e === void 0 ? void 0 : e.key) === "Enter" && value && value.length > 0) {
+      router === null || router === void 0 ? void 0 : router.push(genLinkSearch(value));
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : (_sectionData$$srcImag = _sectionData$.srcImages) === null || _sectionData$$srcImag === void 0 ? void 0 : _sectionData$$srcImag[0]) + ")"
@@ -1053,6 +1067,9 @@ var Hero1 = function Hero1(props) {
     icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, null),
     wrapClassName: "w-full",
     inputClassName: "w-full",
+    onKeyDown: function onKeyDown(e) {
+      handleSearch(e);
+    },
     onChange: setValue
   }), value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
@@ -1079,7 +1096,7 @@ var Hero2 = function Hero2(props) {
     alt: data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title,
     className: "w-full object-cover min-h-[30vh] md:min-h-[50vh] max-h-[100vh]"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute flex flex-col gap-1 md:gap-4 absolute w-1/2 lg:w-1/3  top-2 sm:top-[20%] xl:top-1/4 right-[2%] lg:right-[15%]"
+    className: "absolute flex flex-col gap-1 md:gap-4 absolute w-1/2 lg:w-[40%]  top-2 sm:top-[20%] xl:top-1/4 right-[2%] lg:right-[15%]"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName,
@@ -8030,10 +8047,12 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
   }, /*#__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, {
+    return /*#__PURE__*/React__default.createElement(LinkToPage, {
       key: index,
+      href: getLinkServiceDetail(product === null || product === void 0 ? void 0 : product.productInfo)
+    }, /*#__PURE__*/React__default.createElement(ProductItem1, {
       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, {
@@ -8120,6 +8139,12 @@ var ModalNotification = function ModalNotification(props) {
     style = _props$style === void 0 ? {} : _props$style,
     _props$buttonClassNam = props.buttonClassName,
     buttonClassName = _props$buttonClassNam === void 0 ? "" : _props$buttonClassNam;
+  useEffect(function () {
+    document.body.style.overflow = "hidden";
+    return function () {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
   var handleClickOutside = function handleClickOutside(event) {
     event.stopPropagation();
     if (onClose) {
@@ -8131,7 +8156,9 @@ var ModalNotification = function ModalNotification(props) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 ",
-    onClick: handleClickOutside
+    onClick: function onClick(e) {
+      return handleClickOutside(e);
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-center relative " + className,
     onClick: function onClick(e) {
@@ -8141,7 +8168,9 @@ var ModalNotification = function ModalNotification(props) {
     ref: modalRef
   }, props === null || props === void 0 ? void 0 : props.children, isButtonClose && /*#__PURE__*/React__default.createElement("button", {
     className: "absolute top-4 right-4 " + buttonClassName,
-    onClick: onClose
+    onClick: function onClick(e) {
+      return handleClickOutside(e);
+    }
   }, /*#__PURE__*/React__default.createElement(RxCross2, null))));
 };
 
@@ -8944,7 +8973,6 @@ var BookingForm = function BookingForm(props) {
   var _EmployeeController = EmployeeController(_extends({}, props)),
     _EmployeeController$l = _EmployeeController.listEmployment,
     listEmployment = _EmployeeController$l === void 0 ? [] : _EmployeeController$l;
-  var token = js_cookie === null || js_cookie === void 0 ? void 0 : js_cookie.get(SSHOP_SPA_TOKEN);
   var _ProductController = ProductController(_extends({}, props, {
       params: productsParams
     })),
@@ -9115,6 +9143,7 @@ var BookingForm = function BookingForm(props) {
     inputClassName: "w-full focus:outline-none focus:ring-0"
   }), /*#__PURE__*/React__default.createElement(InputPhoneNumber, {
     ref: inputPhoneNumberRef,
+    name: "customerPhone",
     label: "Số điện thoại",
     placeholder: "Nhập số điện thoại",
     rules: [{
@@ -9409,44 +9438,6 @@ var ProductDetailController = function ProductDetailController(props) {
   };
 };
 
-var ServiceDetail1 = function ServiceDetail1(props) {
-  var shopConfigStyle = props.shopConfigStyle;
-  var _ProductDetailControl = ProductDetailController(props),
-    product = _ProductDetailControl.product;
-  console.log('product', product);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_DEFAULT_CLASS + " !py-0"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-3 gap-6 bg-bgSecondary"
-  }, /*#__PURE__*/React__default.createElement(ProductImage, {
-    product: product,
-    className: "w-full aspect-square rounded-2xl"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-2"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "font-semibold text-2xl"
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
-    product: product,
-    className: "mt-6"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-4 mt-6"
-  }, /*#__PURE__*/React__default.createElement("div", null, "Th\u1EDDi l\u01B0\u1EE3ng: "), /*#__PURE__*/React__default.createElement("div", null, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-4 mt-6"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    label: "ĐẶT LỊCH",
-    shopConfigStyle: shopConfigStyle
-  })), /*#__PURE__*/React__default.createElement("p", {
-    className: "text-lg mt-12 pt-6 border-t border-stroke"
-  }, "M\xF4 t\u1EA3"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6",
-    dangerouslySetInnerHTML: {
-      __html: product === null || product === void 0 ? void 0 : product.description
-    }
-  }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray3 mt-2"
-  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
-};
-
 var CartController = function CartController(props) {
   var addToCart = props.addToCart,
     dispatch = props.dispatch;
@@ -9472,7 +9463,7 @@ var CartController = function CartController(props) {
   };
 };
 
-var TreatmentDetail1 = function TreatmentDetail1(props) {
+var ServiceDetail1 = function ServiceDetail1(props) {
   var _product$images;
   var shopConfigStyle = props.shopConfigStyle,
     shopConfig = props.shopConfig;
@@ -9529,34 +9520,168 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " mt-6 mb-12 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 gap-6 bg-bgSecondary"
+    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 md:gap-6 bg-bgSecondary"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-4 col-span-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "rounded-2xl p-2 border"
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
-    className: "w-full aspect-square object-cover rounded-2xl"
+    className: "w-full aspect-square object-contain rounded-2xl"
   }) : /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full aspect-square object-contain rounded-2xl"
+    className: "w-full aspect-square !object-contain rounded-2xl"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
+  }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
+    return /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.imageUrl,
+      key: item === null || item === void 0 ? void 0 : item.imageId,
+      alt: "",
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      onClick: function onClick() {
+        handleDisplayImage(item);
+      }
+    });
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-3 mt-4 lg:mt-0"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "font-semibold text-2xl"
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
+    product: product,
+    className: "mt-3 md:mt-6 text-[22px]"
   }), /*#__PURE__*/React__default.createElement("div", {
+    className: " text-lg py-3"
+  }, "Th\u1EDDi gian: " + getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(Button, {
+    label: "ĐẶT LỊCH NGAY",
+    shopConfigStyle: shopConfigStyle,
+    onClick: function onClick(e) {
+      return handleOpenModalBooking(e);
+    }
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-lg mt-12 text-xl pb-1 pt-6 border-t border-stroke"
+  }, "M\xF4 t\u1EA3 s\u1EA3n ph\u1EA9m"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "h-max"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: descriptionRef,
+    className: "" + (isSeeMore && !hiddenButton ? "h-full mb-4" : "max-h-[700px] overflow-hidden"),
+    dangerouslySetInnerHTML: {
+      __html: product === null || product === void 0 ? void 0 : product.description
+    }
+  }), !isSeeMore && !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "h-10 relative -mt-10 rounded-b-lg",
+    style: {
+      background: "linear-gradient(to top, #81818169  0%, #00000003 50%)"
+    }
+  }) : null, !hiddenButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full flex justify-center mt-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: isSeeMore ? "Thu nhỏ" : "Xem thêm",
+    className: " bottom-0 z-50",
+    onClick: function onClick() {
+      setIsSeeMore(!isSeeMore);
+    }
+  })) : null) : /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray3 mt-2"
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin"))), isBooking ? /*#__PURE__*/React__default.createElement(ModalNotification, {
+    onClose: handleCloseModal
+  }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    isModalBooking: isBooking,
+    className: "overflow-y-auto hide-scrollbar max-h-[80vh]",
+    onCloseFormBooking: handleCloseModal,
+    defaultValue: dataBooking,
+    shopConfig: shopConfig,
+    shopConfigStyle: shopConfigStyle
+  })) : null);
+};
+
+var TreatmentDetail1 = function TreatmentDetail1(props) {
+  var _product$images;
+  var shopConfigStyle = props.shopConfigStyle,
+    shopConfig = props.shopConfig;
+  var _ProductDetailControl = ProductDetailController(props),
+    product = _ProductDetailControl.product;
+  var _useState = useState(),
+    displayImage = _useState[0],
+    setDisplayImage = _useState[1];
+  var _useState2 = useState(false),
+    isSeeMore = _useState2[0],
+    setIsSeeMore = _useState2[1];
+  var _useState3 = useState(true),
+    hiddenButton = _useState3[0],
+    setHiddenButton = _useState3[1];
+  var descriptionRef = useRef();
+  var _useState4 = useState(false),
+    isBooking = _useState4[0],
+    setIsBooking = _useState4[1];
+  var _useState5 = useState([]),
+    dataBooking = _useState5[0],
+    setDataBooking = _useState5[1];
+  useEffect(function () {
+    if (product) {
+      if (descriptionRef.current) {
+        var descriptionHeight = descriptionRef.current.offsetHeight;
+        if (descriptionHeight >= 700) {
+          setHiddenButton(false);
+        }
+      }
+    }
+  }, [product]);
+  var handleDisplayImage = function handleDisplayImage(item) {
+    setDisplayImage(item);
+  };
+  var handleOpenModalBooking = function handleOpenModalBooking(event) {
+    try {
+      event.stopPropagation();
+      setDataBooking([_extends({}, product, {
+        quantity: 1,
+        technical: {},
+        oldService: false,
+        label: product === null || product === void 0 ? void 0 : product.productName,
+        value: product === null || product === void 0 ? void 0 : product.productId
+      })]);
+      setIsBooking(true);
+    } catch (error) {
+      console.log("::::::::::errrorrrrr::::::", error);
+    }
+  };
+  var handleCloseModal = function handleCloseModal() {
+    setIsBooking(false);
+    setDataBooking([]);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SECTION_CLASS + " mt-6 mb-12 " + ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === 'fashion_1' ? "bg-bgSecondary pb-8" : "bg-background")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-5 md:gap-6 bg-bgSecondary"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 col-span-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "rounded-2xl p-2 border"
+  }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
+    src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
+    className: "w-full aspect-square object-contain rounded-2xl"
+  }) : /*#__PURE__*/React__default.createElement(ProductImage, {
+    product: product,
+    className: "w-full aspect-square !object-contain rounded-2xl"
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 w-[80vw] overflow-x-auto md:w-full md:gap-2 md:flex-wrap"
   }, product === null || product === void 0 ? void 0 : (_product$images = product.images) === null || _product$images === void 0 ? void 0 : _product$images.map(function (item) {
     return /*#__PURE__*/React__default.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.imageUrl,
       key: item === null || item === void 0 ? void 0 : item.imageId,
       alt: "",
-      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
+      className: (displayImage ? "" : "first:border first:opacity-100 first:brightness-100") + " h-16 w-16 object-cover rounded-lg \n                                                " + ((displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageId) === (item === null || item === void 0 ? void 0 : item.imageId) ? "border" : "opacity-50 brightness-75 bg-background"),
       onClick: function onClick() {
         handleDisplayImage(item);
       }
     });
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-3"
+    className: "col-span-3 mt-4 lg:mt-0"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "font-semibold text-2xl"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
     product: product,
-    className: "mt-6 text-[22px]"
+    className: "mt-3 md:mt-6 text-[22px]"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: " text-lg py-3"
   }, "Th\u1EDDi gian: " + getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(Button, {
@@ -9593,6 +9718,7 @@ var TreatmentDetail1 = function TreatmentDetail1(props) {
   }, "Kh\xF4ng c\xF3 th\xF4ng tin"))), isBooking ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
   }, /*#__PURE__*/React__default.createElement(BookingForm, {
+    isModalBooking: isBooking,
     className: "overflow-y-auto hide-scrollbar max-h-[80vh]",
     onCloseFormBooking: handleCloseModal,
     defaultValue: dataBooking,
@@ -10235,23 +10361,17 @@ var Products10 = function Products10(props) {
 };
 
 var listFilter = [{
+  label: "Tất cả",
+  value: "all"
+}, {
   label: "Khuyến mãi",
-  value: "discount",
-  filter: {
-    isDiscount: true
-  }
+  value: "discount"
 }, {
   label: "Nổi bật",
-  value: "isHighlight",
-  filter: {
-    isHighlight: true
-  }
+  value: "isHighlight"
 }, {
   label: "Giá thấp đến cao",
-  value: "sortPriceDESC",
-  filter: {
-    isHighlight: true
-  }
+  value: "sortPriceDESC"
 }];
 var Products11 = function Products11(props) {
   var _productsFilter$slice;
@@ -10279,6 +10399,9 @@ var Products11 = function Products11(props) {
   var _useState4 = useState([]),
     productsFilter = _useState4[0],
     setProductsFilter = _useState4[1];
+  var _useState5 = useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
+    filterItem = _useState5[0],
+    setFilterItem = _useState5[1];
   var _CategoryController = CategoryController(_extends({}, props, {
       params: params
     })),
@@ -10302,6 +10425,7 @@ var Products11 = function Products11(props) {
   var handleChooseCategory = function handleChooseCategory(category) {
     setCategorySelected(category);
     setFirstLoading(true);
+    setFilterItem(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]);
     setParams(function (prev) {
       return _extends({}, prev, {
         categoryId: category === null || category === void 0 ? void 0 : category.categoryId,
@@ -10323,6 +10447,7 @@ var Products11 = function Products11(props) {
     }
   }, [products]);
   var handleFilter = function handleFilter(item) {
+    setFilterItem(item);
     if ((item === null || item === void 0 ? void 0 : item.value) === "sortPriceDESC") {
       var productsCopy = [].concat(products);
       productsCopy === null || productsCopy === void 0 ? void 0 : productsCopy.sort(function (a, b) {
@@ -10348,26 +10473,32 @@ var Products11 = function Products11(props) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-4 gap-6"
+    className: SECTION_CLASS + " grid grid-cols-1 !mt-0 md:grid-cols-4 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "md:sticky top-20 self-start"
+    className: "md:sticky top-0 self-start"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4"
   }, categories === null || categories === void 0 ? void 0 : categories.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "px-6 py-2 hover:bg-gray-100 hover:text-primary cursor-pointer rounded-lg " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (item === null || item === void 0 ? void 0 : item.categoryId) ? " bg-primary text-textButton" : ""),
+      key: "sdjfdh-" + index,
       onClick: function onClick() {
         handleChooseCategory(item);
-      },
-      key: "sdjfdh-" + index
+      }
     }, item === null || item === void 0 ? void 0 : item.cateName);
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "md:col-span-3 flex flex-col gap-8"
-  }, /*#__PURE__*/React__default.createElement(CarouselItem, {
-    data: listFilter,
-    isNavigateButton: false,
-    onClick: handleFilter
-  }), loading && firstLoading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "md:col-span-3 flex flex-col gap-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-4"
+  }, listFilter === null || listFilter === void 0 ? void 0 : listFilter.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "kgkf-" + index,
+      className: ((filterItem === null || filterItem === void 0 ? void 0 : filterItem.value) === (item === null || item === void 0 ? void 0 : item.value) ? "bg-primary text-textButton" : "bg-background") + " \n                    w-max border border-primary py-1 px-2 md:py-2 md:px-3 rounded-lg cursor-pointer whitespace-nowrap",
+      onClick: function onClick() {
+        handleFilter(item);
+      }
+    }, item === null || item === void 0 ? void 0 : item.label);
+  })), loading && firstLoading ? /*#__PURE__*/React__default.createElement("div", {
     className: "w-full h-96 mb-1 flex justify-center items-center"
   }, /*#__PURE__*/React__default.createElement(Loading, null)) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6 lg:gap-8"
@@ -10868,8 +10999,8 @@ var ProductDetail10 = function ProductDetail10(props) {
   var _product$images2;
   var shopConfigStyle = props.shopConfigStyle,
     shopConfig = props.shopConfig,
-    _props$handleRedirect = props.handleRedirect,
-    handleRedirect = _props$handleRedirect === void 0 ? function () {} : _props$handleRedirect;
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router;
   var _ProductDetailControl = ProductDetailController(props),
     product = _ProductDetailControl.product;
   var _useState = useState(),
@@ -10967,7 +11098,7 @@ var ProductDetail10 = function ProductDetail10(props) {
           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("/gio-hang");
+            router === null || router === void 0 ? void 0 : router.push("/gio-hang");
           });
         }
       }();
@@ -11097,8 +11228,8 @@ var ProductDetail11 = function ProductDetail11(props) {
   var _product$images2, _product$images3, _product$images4, _product$images5, _product$attributes, _product$attributes2;
   var shopConfigStyle = props.shopConfigStyle,
     shopConfig = props.shopConfig,
-    _props$handleRedirect = props.handleRedirect,
-    handleRedirect = _props$handleRedirect === void 0 ? function () {} : _props$handleRedirect;
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router;
   var _ProductDetailControl = ProductDetailController(props),
     product = _ProductDetailControl.product;
   var _useState = useState(),
@@ -11196,7 +11327,7 @@ var ProductDetail11 = function ProductDetail11(props) {
           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("/gio-hang");
+            router === null || router === void 0 ? void 0 : router.push("/gio-hang");
           });
         }
       }();
@@ -13357,7 +13488,7 @@ var SearchProduct1 = function SearchProduct1(props) {
       }
     }))
   }), (listProducts === null || listProducts === void 0 ? void 0 : listProducts.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "max-h-64 overflow-y-auto flex flex-col gap-2 pr-3"
+    className: "max-h-64 overflow-y-auto flex flex-col scroll-container gap-2 pr-3"
   }, listProducts === null || listProducts === void 0 ? void 0 : listProducts.map(function (item) {
     var _item$productInfo, _item$productInfo2;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
@@ -13445,7 +13576,7 @@ var SearchBar2 = function SearchBar2(props) {
     placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
     onChange: setSearchValue
   }), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "max-h-64 overflow-y-auto flex flex-col gap-2"
+    className: "max-h-64 overflow-y-auto scroll-container flex flex-col gap-2"
   }, products === null || products === void 0 ? void 0 : products.map(function (item, index) {
     var _item$productInfo;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
@@ -13472,10 +13603,17 @@ var SearchBar5 = function SearchBar5(props) {
   var _data$data, _data$data2, _data$data3, _data$data4, _data$data5;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router,
     data = props.data;
   var _useState = useState(""),
     value = _useState[0],
     setValue = _useState[1];
+  var handleSearch = function handleSearch(e) {
+    if ((e === null || e === void 0 ? void 0 : e.key) === "Enter" && value && value.length > 0) {
+      router === null || router === void 0 ? void 0 : router.push(genLinkSearch(value));
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " md:mt-6"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13496,6 +13634,9 @@ var SearchBar5 = function SearchBar5(props) {
     }),
     wrapClassName: "w-full sm:w-[60%] md:w-[50%] lg:w-[40%]",
     className: "w-full bg-bgSecondary  mb-2 md:h-12",
+    onKeyDown: function onKeyDown(e) {
+      handleSearch(e);
+    },
     style: {
       borderRadius: "32px"
     },
@@ -13518,10 +13659,17 @@ var SearchBar6 = function SearchBar6(props) {
   var _data$data, _data$data2, _data$data3, _data$data4, _data$data5;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router,
     data = props.data;
   var _useState = useState(""),
     value = _useState[0],
     setValue = _useState[1];
+  var handleSearch = function handleSearch(e) {
+    if ((e === null || e === void 0 ? void 0 : e.key) === "Enter" && value && value.length > 0) {
+      router === null || router === void 0 ? void 0 : router.push(genLinkSearch(value));
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full flex flex-col justify-center px-3 md:px-6 gap-2 lg:gap-3 items-center h-32 lg:h-44 ",
     style: {
@@ -13543,7 +13691,10 @@ var SearchBar6 = function SearchBar6(props) {
     wrapClassName: " w-full h-full",
     inputClassName: "w-full",
     placeholder: data !== null && data !== void 0 && data.sectionTitle ? data === null || data === void 0 ? void 0 : data.sectionTitle : "Tìm kiếm sản phẩm",
-    onChange: setValue
+    onChange: setValue,
+    onKeyDown: function onKeyDown(e) {
+      handleSearch(e);
+    }
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, value && (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: genLinkSearch(value)