s-platform-landing-section 0.1.21 → 0.1.23

package/dist/index.js

@@ -22,6 +22,7 @@ require('slick-carousel/slick/slick-theme.css');
 var ai = require('react-icons/ai');
 var go = require('react-icons/go');
 var hi = require('react-icons/hi');
+var md = require('react-icons/md');
 var ri = require('react-icons/ri');
 var gi = require('react-icons/gi');
 
@@ -132,7 +133,7 @@ var getLinkNewsDetail = function getLinkNewsDetail(news) {
 };
 var getLinkNewsByCategory = function getLinkNewsByCategory(news) {
   var slug = genProductSlugVi(news === null || news === void 0 ? void 0 : news.catName, news === null || news === void 0 ? void 0 : news.catId);
-  return "/tin-tuc/" + slug;
+  return "/tin-tuc-theo-danh-muc/" + slug;
 };
 var getLinkProductsByCategory = function getLinkProductsByCategory(product) {
   if (product !== null && product !== void 0 && product.categoryName) {
@@ -149,7 +150,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;
 };
@@ -539,7 +539,8 @@ var NavBar1 = function NavBar1(props) {
     _props$useSelector = props.useSelector,
     useSelector = _props$useSelector === void 0 ? null : _props$useSelector,
     _props$logout = props.logout,
-    logout = _props$logout === void 0 ? function () {} : _props$logout;
+    logout = _props$logout === void 0 ? function () {} : _props$logout,
+    data = props.data;
   var cartItems = useSelector === null || useSelector === void 0 ? void 0 : useSelector(function (state) {
     var _state$cart;
     return state === null || state === void 0 ? void 0 : (_state$cart = state.cart) === null || _state$cart === void 0 ? void 0 : _state$cart.items;
@@ -597,7 +598,11 @@ var NavBar1 = function NavBar1(props) {
       top: "-100px"
     }
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.defaultDomain, " | ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName), /*#__PURE__*/React__default.createElement("div", {
-    className: "hidden lg:flex justify-end items-center gap-6 px-20 py-2 bg-primary"
+    className: "hidden lg:flex justify-between items-center px-20 py-2 bg-primary"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-background text-xl"
+  }, data === null || data === void 0 ? void 0 : data.title), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-6 "
   }, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium border-r pr-6 text-background"
   }, "Hotline: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone) : null, /*#__PURE__*/React__default.createElement("div", {
@@ -620,7 +625,7 @@ var NavBar1 = function NavBar1(props) {
   }, /*#__PURE__*/React__default.createElement(si.SiZalo, {
     size: 24,
     className: "p-1 rounded bg-background text-primary"
-  })))), /*#__PURE__*/React__default.createElement("div", {
+  }))))), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20 sticky top-0 z-50 bg-background shadow "
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
@@ -879,6 +884,8 @@ var Input = React.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,
@@ -957,6 +964,9 @@ var Input = React.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)) {
@@ -997,7 +1007,10 @@ var Input = React.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();
@@ -1017,12 +1030,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 = React.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]) + ")"
@@ -1050,6 +1070,9 @@ var Hero1 = function Hero1(props) {
     icons: /*#__PURE__*/React__default.createElement(io5.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,
@@ -1076,7 +1099,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,
@@ -7583,6 +7606,11 @@ var ProductController = function ProductController(props) {
             var _res$data2, _res$data3;
             setProducts(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
             setPage(res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.page);
+            var url = new URL(window.location.href);
+            if (/^(\/(danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
+              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
+              window.history.replaceState({}, '', url.pathname + url.search);
+            }
           }
           setLoading(false);
         });
@@ -7621,6 +7649,7 @@ var ProductController = function ProductController(props) {
   };
   return {
     products: products,
+    setProducts: setProducts,
     loading: loading,
     page: page,
     getProductListSearch: getProductListSearch
@@ -8021,10 +8050,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, {
@@ -8111,6 +8142,12 @@ var ModalNotification = function ModalNotification(props) {
     style = _props$style === void 0 ? {} : _props$style,
     _props$buttonClassNam = props.buttonClassName,
     buttonClassName = _props$buttonClassNam === void 0 ? "" : _props$buttonClassNam;
+  React.useEffect(function () {
+    document.body.style.overflow = "hidden";
+    return function () {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
   var handleClickOutside = function handleClickOutside(event) {
     event.stopPropagation();
     if (onClose) {
@@ -8122,7 +8159,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) {
@@ -8132,7 +8171,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(rx.RxCross2, null))));
 };
 
@@ -8900,7 +8941,9 @@ var BookingForm = function BookingForm(props) {
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
     _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className;
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$isModalBooking = props.isModalBooking,
+    isModalBooking = _props$isModalBooking === void 0 ? false : _props$isModalBooking;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
     background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
@@ -8927,13 +8970,12 @@ var BookingForm = function BookingForm(props) {
   var _useState7 = React.useState(false),
     isOpenPopup = _useState7[0],
     setIsOpenPopup = _useState7[1];
-  var _useState8 = React.useState({}),
-    dataBooking = _useState8[0],
-    setDataBooking = _useState8[1];
+  var _useState8 = React.useState(false),
+    isHiddenForm = _useState8[0],
+    setIsHiddenForm = _useState8[1];
   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
     })),
@@ -9056,11 +9098,14 @@ var BookingForm = function BookingForm(props) {
           return Promise.resolve(createSchedule(customerName, customerPhone, scheduleDate, services, shopId)).then(function (response) {
             var _response$data, _response$data$status;
             if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) === '200') {
-              var _response$data2, _inputPhoneNumberRef$3, _inputNameRef$current3;
-              setDataBooking(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.data);
+              var _inputPhoneNumberRef$3, _inputNameRef$current3, _inputDateRef$current4;
+              if (isModalBooking) {
+                setIsHiddenForm(true);
+              }
               setIsOpenPopup(true);
               inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$3 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$3 === void 0 ? void 0 : _inputPhoneNumberRef$3.setValue("");
               inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current3 = inputNameRef.current) === null || _inputNameRef$current3 === void 0 ? void 0 : _inputNameRef$current3.setValue("");
+              inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current4 = inputDateRef.current) === null || _inputDateRef$current4 === void 0 ? void 0 : _inputDateRef$current4.setValue(new Date());
               setListProductSelected([]);
             }
           });
@@ -9073,7 +9118,7 @@ var BookingForm = function BookingForm(props) {
   };
   var handleClosePopup = function handleClosePopup() {
     setIsOpenPopup(false);
-    setDataBooking({});
+    setIsHiddenForm(false);
   };
   var handleSearchProducts = function handleSearchProducts(value) {
     setProductsParams(function (prev) {
@@ -9082,7 +9127,7 @@ var BookingForm = function BookingForm(props) {
       });
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isHiddenForm ? /*#__PURE__*/React__default.createElement("div", {
     className: "grid gap-4 rounded-2xl p-6 border  " + className,
     style: {
       backgroundColor: background
@@ -9101,6 +9146,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: [{
@@ -9214,32 +9260,23 @@ var BookingForm = function BookingForm(props) {
     label: "Đặt lịch ngay",
     shopConfigStyle: shopConfigStyle,
     onClick: handleSubmit
-  })), isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
+  }))) : null, isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
     onCloseFormBooking: onCloseFormBooking,
     onClose: handleClosePopup
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "bg-white rounded-lg shadow-lg p-6 max-w-sm flex flex-col items-center justify-center min-w-[320px] md:min-w-[650px] min-h-[420px] md:min-h-[380px] lg:h-auto "
+    className: "bg-white rounded-lg shadow-lg p-6 lg:px-16 lg:pb-10 max-w-sm flex gap-4 flex-col items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "h-20 mb-4 flex items-center justify-center"
+    className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement(fa.FaCheckCircle, {
     className: "h-full text-green-500",
     style: {
-      fontSize: "150px"
+      fontSize: "56px"
     }
   })), /*#__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
-  })))));
+    className: "font-medium text-2xl"
+  }, "\u0110\u1EB7t l\u1ECBch th\xE0nh c\xF4ng"), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, "Ch\xFAng t\xF4i \u0111\xE3 ghi nh\u1EADn th\xF4ng tin c\u1EE7a b\u1EA1n v\xE0 s\u1EBD li\xEAn h\u1EC7 l\u1EA1i ngay"))));
 };
 
 var TreatmentsList7 = function TreatmentsList7(props) {
@@ -9364,7 +9401,8 @@ var TreatmentsList7 = function TreatmentsList7(props) {
     onCloseFormBooking: handleCloseModal,
     defaultValue: dataBooking,
     shopConfig: shopConfig,
-    shopConfigStyle: shopConfigStyle
+    shopConfigStyle: shopConfigStyle,
+    isModalBooking: isOpenModal
   })) : null);
 };
 
@@ -9403,44 +9441,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;
@@ -9466,7 +9466,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;
@@ -9523,34 +9523,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 = React.useState(),
+    displayImage = _useState[0],
+    setDisplayImage = _useState[1];
+  var _useState2 = React.useState(false),
+    isSeeMore = _useState2[0],
+    setIsSeeMore = _useState2[1];
+  var _useState3 = React.useState(true),
+    hiddenButton = _useState3[0],
+    setHiddenButton = _useState3[1];
+  var descriptionRef = React.useRef();
+  var _useState4 = React.useState(false),
+    isBooking = _useState4[0],
+    setIsBooking = _useState4[1];
+  var _useState5 = React.useState([]),
+    dataBooking = _useState5[0],
+    setDataBooking = _useState5[1];
+  React.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, {
@@ -9587,6 +9721,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,
@@ -10228,8 +10363,21 @@ var Products10 = function Products10(props) {
   })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null));
 };
 
+var listFilter = [{
+  label: "Tất cả",
+  value: "all"
+}, {
+  label: "Khuyến mãi",
+  value: "discount"
+}, {
+  label: "Nổi bật",
+  value: "isHighlight"
+}, {
+  label: "Giá thấp đến cao",
+  value: "sortPriceDESC"
+}];
 var Products11 = function Products11(props) {
-  var _products$slice;
+  var _productsFilter$slice;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$Link = props.Link,
@@ -10251,6 +10399,12 @@ var Products11 = function Products11(props) {
   var _useState3 = React.useState({}),
     categorySelected = _useState3[0],
     setCategorySelected = _useState3[1];
+  var _useState4 = React.useState([]),
+    productsFilter = _useState4[0],
+    setProductsFilter = _useState4[1];
+  var _useState5 = React.useState(listFilter === null || listFilter === void 0 ? void 0 : listFilter[0]),
+    filterItem = _useState5[0],
+    setFilterItem = _useState5[1];
   var _CategoryController = CategoryController(_extends({}, props, {
       params: params
     })),
@@ -10274,6 +10428,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,
@@ -10284,36 +10439,73 @@ var Products11 = function Products11(props) {
   React.useEffect(function () {
     if ((categories === null || categories === void 0 ? void 0 : categories.length) > 0 && params !== null && params !== void 0 && params.categoryId) {
       var category = categories === null || categories === void 0 ? void 0 : categories.find(function (item) {
-        return (item === null || item === void 0 ? void 0 : item.categoryId) == categoryId;
+        return (item === null || item === void 0 ? void 0 : item.categoryId) == (params === null || params === void 0 ? void 0 : params.categoryId);
       });
       setCategorySelected(category);
     }
-  }, [params === null || params === void 0 ? void 0 : params.categoryId, categories]);
-  console.log("check page:::::::", page);
+  }, [categories]);
+  React.useEffect(function () {
+    if ((products === null || products === void 0 ? void 0 : products.length) > 0) {
+      setProductsFilter(products);
+    }
+  }, [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) {
+        var _b$productInfo, _a$productInfo;
+        return +(b === null || b === void 0 ? void 0 : (_b$productInfo = b.productInfo) === null || _b$productInfo === void 0 ? void 0 : _b$productInfo.price) - (a === null || a === void 0 ? void 0 : (_a$productInfo = a.productInfo) === null || _a$productInfo === void 0 ? void 0 : _a$productInfo.price);
+      });
+      setProductsFilter(productsCopy);
+    } else if ((item === null || item === void 0 ? void 0 : item.value) === "discount") {
+      var _productsCopy = [].concat(products);
+      _productsCopy === null || _productsCopy === void 0 ? void 0 : _productsCopy.filter(function (product) {
+        return (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price);
+      });
+      setProductsFilter(_productsCopy);
+    } else if ((item === null || item === void 0 ? void 0 : item.value) === "isHighlight") {
+      var _productsCopy3;
+      var _productsCopy2 = [].concat(products);
+      _productsCopy2 = (_productsCopy3 = _productsCopy2) === null || _productsCopy3 === void 0 ? void 0 : _productsCopy3.filter(function (product) {
+        return (product === null || product === void 0 ? void 0 : product[item === null || item === void 0 ? void 0 : item.value]) === true;
+      });
+      setProductsFilter(_productsCopy2);
+    } else {
+      setProductsFilter(products);
+    }
+  };
   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: "rounded-3xl bg-bgSecondary p-4"
+    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(LinkToPage, {
-      href: getLinkProductsByCategory(item),
-      Link: Link
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "px-6 py-3 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" : ""),
+    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));
+      }
+    }, item === null || item === void 0 ? void 0 : item.cateName);
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "md:col-span-3 flex flex-col gap-8"
-  }, loading && firstLoading ? /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full h-80 flex justify-center items-center"
-  }, /*#__PURE__*/React__default.createElement(Loading, null)) : /*#__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"
-  }, (products === null || products === void 0 ? void 0 : products.length) > 0 ? products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, index) {
+  }, (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.length) > 0 ? productsFilter === null || productsFilter === void 0 ? void 0 : (_productsFilter$slice = productsFilter.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _productsFilter$slice === void 0 ? void 0 : _productsFilter$slice.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       href: getLinkProductDetail(product === null || product === void 0 ? void 0 : product.productInfo),
       Link: Link,
@@ -10326,7 +10518,7 @@ var Products11 = function Products11(props) {
     }));
   }) : /*#__PURE__*/React__default.createElement("div", {
     className: "md:col-span-2 lg:col-span-3 mt-20 m-auto"
-  }, /*#__PURE__*/React__default.createElement(NotFoundProduct, null))), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(NotFoundProduct, null)))), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full m-auto"
   }, (page === null || page === void 0 ? void 0 : page.total_pages) > 1 ? /*#__PURE__*/React__default.createElement(Pagination, {
     total_pages: page === null || page === void 0 ? void 0 : page.total_pages,
@@ -10442,8 +10634,21 @@ var ProductSale2 = function ProductSale2(props) {
   })) : null;
 };
 
+var listFilter$1 = [{
+  label: "Khuyến mãi",
+  value: "discount",
+  filter: {
+    isDiscount: true
+  }
+}, {
+  label: "Nổi bật",
+  value: "isHighlight",
+  filter: {
+    isHighlight: true
+  }
+}];
 var ProductSearch1 = function ProductSearch1(props) {
-  var _window, _window$location;
+  var _window, _window$location, _productsFilter$slice;
   var _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
     _props$SectionTitle = props.SectionTitle,
@@ -10453,12 +10658,12 @@ var ProductSearch1 = function ProductSearch1(props) {
     shopConfigStyle = props.shopConfigStyle;
   var queryParams = new URLSearchParams((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.search);
   var keywordValue = queryParams === null || queryParams === void 0 ? void 0 : queryParams.get('tu-khoa');
-  var _useState = React.useState(0),
-    length = _useState[0],
-    setLength = _useState[1];
+  var _useState = React.useState([]),
+    productsFilter = _useState[0],
+    setProductsFilter = _useState[1];
   var _useState2 = React.useState({
       productName: keywordValue,
-      size: 24
+      size: 12
     }),
     params = _useState2[0],
     setParams = _useState2[1];
@@ -10477,36 +10682,34 @@ var ProductSearch1 = function ProductSearch1(props) {
       });
     });
   }, [keywordValue]);
+  React.useEffect(function () {
+    if ((products === null || products === void 0 ? void 0 : products.length) > 0) setProductsFilter(products);
+  }, [products]);
   var handleGetMoreProducts = function handleGetMoreProducts() {
     setIsGetMore(false);
-    setLength(function (prev) {
-      return prev + 4;
+    setParams(function (prev) {
+      return _extends({}, prev, {
+        size: (prev === null || prev === void 0 ? void 0 : prev.size) + 4
+      });
     });
   };
-  var listFilter = [{
-    label: "Khuyến mãi",
-    value: "discount",
-    filter: {
-      isDiscount: true
-    }
-  }, {
-    label: "Nổi bật",
-    value: "highlight",
-    filter: {
-      isHighlight: true
-    }
-  }];
   var handleFilter = function handleFilter(item) {
-    setParams(function (prev) {
-      var _Object$keys;
-      var newParams = _extends({}, prev);
-      Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(newParams)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (key) {
-        if (key !== 'productName' && key !== 'size') {
-          delete newParams[key];
-        }
+    if ((item === null || item === void 0 ? void 0 : item.value) === "discount") {
+      var productsCopy = [].concat(products);
+      productsCopy === null || productsCopy === void 0 ? void 0 : productsCopy.filter(function (product) {
+        return (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price);
       });
-      return _extends({}, newParams, item === null || item === void 0 ? void 0 : item.filter);
-    });
+      setProductsFilter(productsCopy);
+    } else if ((item === null || item === void 0 ? void 0 : item.value) === "isHighlight") {
+      var _productsCopy2;
+      var _productsCopy = [].concat(products);
+      _productsCopy = (_productsCopy2 = _productsCopy) === null || _productsCopy2 === void 0 ? void 0 : _productsCopy2.filter(function (product) {
+        return (product === null || product === void 0 ? void 0 : product[item === null || item === void 0 ? void 0 : item.value]) === true;
+      });
+      setProductsFilter(_productsCopy);
+    } else {
+      setProductsFilter(products);
+    }
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " flex flex-col gap-4 md:gap-6 "
@@ -10518,20 +10721,20 @@ var ProductSearch1 = function ProductSearch1(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "text-lg"
   }, "T\u1EEB kh\xF3a \"", keywordValue, "\" (", products === null || products === void 0 ? void 0 : products.length, " s\u1EA3n ph\u1EA9m)"), /*#__PURE__*/React__default.createElement(CarouselItem, {
-    data: listFilter,
+    data: listFilter$1,
     isNavigateButton: false,
     onClick: handleFilter
   }), 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", {
+  }, /*#__PURE__*/React__default.createElement(Loading, null)) : (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.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.slice(0, 8 + length).map(function (product, idx) {
+  }, productsFilter === null || productsFilter === void 0 ? void 0 : (_productsFilter$slice = productsFilter.slice(0, (params === null || params === void 0 ? void 0 : params.size) - 4)) === null || _productsFilter$slice === void 0 ? void 0 : _productsFilter$slice.map(function (product, idx) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       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) > 8 + length ? /*#__PURE__*/React__default.createElement(Button, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), !loading && (productsFilter === null || productsFilter === void 0 ? void 0 : productsFilter.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),
@@ -10799,8 +11002,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 = React.useState(),
@@ -10898,7 +11101,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");
           });
         }
       }();
@@ -11025,11 +11228,11 @@ var ProductDetail10 = function ProductDetail10(props) {
 };
 
 var ProductDetail11 = function ProductDetail11(props) {
-  var _product$images2, _product$images3, _product$attributes, _product$attributes2;
+  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 = React.useState(),
@@ -11127,7 +11330,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");
           });
         }
       }();
@@ -11147,7 +11350,7 @@ var ProductDetail11 = function ProductDetail11(props) {
     className: "grid grid-cols-5 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:block col-span-1 lg:min-h-[240px] lg:max-h-[400px] xl:min-h-[400px] xl:max-h-[480px] overflow-y-auto overflow-hidden no-scrollbar"
-  }, product === null || product === void 0 ? void 0 : (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2.map(function (item) {
+  }, (product === null || product === void 0 ? void 0 : (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2.length) > 0 ? product === null || product === void 0 ? void 0 : (_product$images3 = product.images) === null || _product$images3 === void 0 ? void 0 : _product$images3.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,
@@ -11157,7 +11360,13 @@ var ProductDetail11 = function ProductDetail11(props) {
         handleDisplayImage(item);
       }
     });
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "p-2 border rounded-lg"
+  }, /*#__PURE__*/React__default.createElement(SvgImageGallery, {
+    width: "100%",
+    height: "25%",
+    fill: "#D9D9D9"
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-4 col-span-5 lg:col-span-4 p-4 border border-stroke rounded-2xl"
   }, displayImage ? /*#__PURE__*/React__default.createElement("img", {
     src: displayImage === null || displayImage === void 0 ? void 0 : displayImage.imageUrl,
@@ -11173,7 +11382,7 @@ var ProductDetail11 = function ProductDetail11(props) {
     fill: "#D9D9D9"
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: " block lg:hidden w-full flex gap-4 col-span-5 overflow-x-auto overflow-hidden no-scrollbar"
-  }, product === null || product === void 0 ? void 0 : (_product$images3 = product.images) === null || _product$images3 === void 0 ? void 0 : _product$images3.map(function (item) {
+  }, (product === null || product === void 0 ? void 0 : (_product$images4 = product.images) === null || _product$images4 === void 0 ? void 0 : _product$images4.length) > 0 ? product === null || product === void 0 ? void 0 : (_product$images5 = product.images) === null || _product$images5 === void 0 ? void 0 : _product$images5.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,
@@ -11183,7 +11392,7 @@ var ProductDetail11 = function ProductDetail11(props) {
         handleDisplayImage(item);
       }
     });
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }) : null)), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-2 md:ms-10"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "font-semibold text-2xl"
@@ -11268,8 +11477,8 @@ var ProductDetail11 = function ProductDetail11(props) {
       setIsSeeMore(!isSeeMore);
     }
   })) : null) : /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray3 bg-bgSecondary mt-2"
-  }, "Kh\xF4ng c\xF3 th\xF4ng tin")), (product === null || product === void 0 ? void 0 : (_product$attributes = product.attributes) === null || _product$attributes === void 0 ? void 0 : _product$attributes.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-lg text-gray3 rounded-lg p-2"
+  }, "Kh\xF4ng c\xF3 th\xF4ng tin s\u1EA3n ph\u1EA9m")), (product === null || product === void 0 ? void 0 : (_product$attributes = product.attributes) === null || _product$attributes === void 0 ? void 0 : _product$attributes.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "lg:col-span-2"
   }, /*#__PURE__*/React__default.createElement("h2", {
     className: "text-3xl mb-8 font-semibold"
@@ -11676,7 +11885,7 @@ var Footer1 = function Footer1(props) {
   var genShopAddress = function genShopAddress() {
     try {
       var addressJson = JSON.parse(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress);
-      if (addressJson) {
+      if (Array.isArray(addressJson) && addressJson && (addressJson === null || addressJson === void 0 ? void 0 : addressJson.length) > 0) {
         setShopAddressList(addressJson);
       } else {
         setShopAddressList([{
@@ -11712,7 +11921,7 @@ var Footer1 = function Footer1(props) {
     className: " col-span-2 flex flex-col mb-10 leading-8  sm:mb-0 "
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "mb-3 font-semibold text-md md:text-lg"
-  }, "Th\xF4ng tin li\xEAn h\u1EC7"), shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
+  }, "Th\xF4ng tin li\xEAn h\u1EC7"), Array.isArray(shopAddressList) ? shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF ", index + 1), /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-2 items-center"
     }, /*#__PURE__*/React__default.createElement(hi.HiOutlineLocationMarker, {
@@ -11730,7 +11939,7 @@ var Footer1 = function Footer1(props) {
         color: primary
       }
     }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.phone)));
-  })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+  }) : null), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "mb-3 font-semibold text-lg"
   }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
     className: "leading-10 flex flex-col "
@@ -11816,7 +12025,7 @@ var Footer7 = function Footer7(props) {
   var genShopAddress = function genShopAddress() {
     try {
       var addressJson = JSON.parse(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress);
-      if (addressJson) {
+      if (Array.isArray(addressJson) && addressJson && (addressJson === null || addressJson === void 0 ? void 0 : addressJson.length) > 0) {
         setShopAddressList(addressJson);
       } else {
         setShopAddressList([{
@@ -12065,7 +12274,7 @@ var CustomerRating6 = function CustomerRating6(props) {
     _props$SectionTitle = props.SectionTitle,
     SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " !my-0 py-12 bg-bgSecondary"
+    className: SECTION_CLASS + " !my-0 py-12 bg-"
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
@@ -12075,9 +12284,9 @@ var CustomerRating6 = function CustomerRating6(props) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: index,
       className: "relative bg-primary rounded-lg text-textButton px-6 py-4"
-    }, /*#__PURE__*/React__default.createElement(io.IoMdQuote, {
-      size: 30,
-      className: "absolute text-textButton top-[-15px] right-8"
+    }, /*#__PURE__*/React__default.createElement(md.MdOutlineFormatQuote, {
+      size: 43,
+      className: "absolute text-black top-[-20px] right-8"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-end gap-2"
     }, /*#__PURE__*/React__default.createElement("img", {
@@ -12302,7 +12511,7 @@ var Contact1 = function Contact1(props) {
     className: "grid grid-cols-1 lg:grid-cols-2 gap-12 mt-6"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "Trong qu\xE1 tr\xECnh gh\xE9 th\u0103m website, n\u1EBFu qu\xFD kh\xE1ch c\xF3 b\u1EA5t k\u1EF3 th\u1EAFc m\u1EAFc hay c\u1EA7n s\u1EF1 h\u1ED7 tr\u1EE3 n\xE0o, h\xE3y li\xEAn h\u1EC7 v\u1EDBi ch\xFAng t\xF4i theo c\xE1c k\xEAnh sau: "), shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
-  }, /*#__PURE__*/React__default.createElement(fa.FaFacebookF, {
+  }, /*#__PURE__*/React__default.createElement(fa.FaPhoneAlt, {
     size: 40,
     className: "p-2 text-textButton bg-primary"
   }), /*#__PURE__*/React__default.createElement("div", null, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopZalo ? /*#__PURE__*/React__default.createElement("div", {
@@ -13282,7 +13491,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, {
@@ -13370,7 +13579,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, {
@@ -13397,10 +13606,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 = React.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", {
@@ -13421,6 +13637,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"
     },
@@ -13443,10 +13662,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 = React.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: {
@@ -13468,7 +13694,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)
@@ -13714,6 +13943,11 @@ var NewsController = function NewsController(props) {
             var _response$data2, _response$data2$data, _response$data3, _response$data3$data;
             setNewsArticles(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : (_response$data2$data = _response$data2.data) === null || _response$data2$data === void 0 ? void 0 : _response$data2$data.content);
             setPage(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : (_response$data3$data = _response$data3.data) === null || _response$data3$data === void 0 ? void 0 : _response$data3$data.totalElements);
+            var url = new URL(window.location.href);
+            if (/^(\/(tin-tuc-theo-danh-muc))\/[^/]+-\d+$/.test(url.pathname)) {
+              url.pathname = url.pathname.replace(/\/[^/]+-\d+$/, "");
+              window.history.replaceState({}, '', url.pathname + url.search);
+            }
           }
           setLoading(false);
         });
@@ -13909,13 +14143,12 @@ var News1 = function News1(props) {
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$Link = props.Link,
     Link = _props$Link === void 0 ? null : _props$Link,
-    _props$catId = props.catId,
-    catId = _props$catId === void 0 ? "" : _props$catId;
+    catId = props.catId;
   var _useState = React.useState({
       page: 0,
       sort: "timeUpdate,DESC",
-      size: 10,
-      catId: catId
+      catId: catId,
+      size: 10
     }),
     params = _useState[0],
     setParams = _useState[1];
@@ -13945,11 +14178,11 @@ var News1 = function News1(props) {
   React.useEffect(function () {
     if ((newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.length) > 0 && params !== null && params !== void 0 && params.catId) {
       var category = newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.find(function (item) {
-        return (item === null || item === void 0 ? void 0 : item.catId) == catId;
+        return (item === null || item === void 0 ? void 0 : item.catId) == (params === null || params === void 0 ? void 0 : params.catId);
       });
       setCategorySelected(category);
     }
-  }, [params === null || params === void 0 ? void 0 : params.catId, newsCategories]);
+  }, [newsCategories]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid grid-cols-1 md:grid-cols-3 gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13994,18 +14227,29 @@ var News1 = function News1(props) {
   }) : null)), /*#__PURE__*/React__default.createElement("div", {
     className: "sticky top-20 self-start"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center"
+    className: "px-6 py-3 bg-primary rounded-t-lg text-lg text-textButton text-center ",
+    onClick: function onClick() {
+      setParams({
+        page: 0,
+        sort: "timeUpdate,DESC",
+        size: 10
+      });
+    }
   }, "Chuy\xEAn m\u1EE5c"), /*#__PURE__*/React__default.createElement("div", {
     className: "rounded-b-lg bg-bgSecondary"
   }, newsCategories === null || newsCategories === void 0 ? void 0 : newsCategories.map(function (item, index) {
-    return /*#__PURE__*/React__default.createElement(LinkToPage, {
-      href: getLinkNewsByCategory(item),
-      Link: Link,
-      key: "fjhnfg-" + index
-    }, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: "px-6 py-3 hover:bg-gray-100 hover:text-primary cursor-pointer",
-      key: "sdjfdh-" + index
-    }, item === null || item === void 0 ? void 0 : item.catName));
+      key: "sdjfdh-" + index,
+      onClick: function onClick() {
+        setCategorySelected(item);
+        setParams(function (prev) {
+          return _extends({}, prev, {
+            catId: item === null || item === void 0 ? void 0 : item.catId
+          });
+        });
+      }
+    }, item === null || item === void 0 ? void 0 : item.catName);
   }))));
 };