s-platform-landing-section 0.1.29 → 0.1.31

package/dist/index.js

@@ -332,7 +332,7 @@ var NavBar7 = function NavBar7(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 gap-6 justify-between items-center py-1.5 px-4 xl:px-20"
+    className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: "/",
@@ -342,7 +342,7 @@ var NavBar7 = function NavBar7(props) {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl text-primary font-fredoka text-wrap line-clamp-2 leading-tight"
+    className: "text-xl md:text-2xl text-primary text-wrap line-clamp-2 leading-tight"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
   }, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB === void 0 ? void 0 : (_shopConfigStyle$navB2 = _shopConfigStyle$navB.filter(function (e) {
@@ -372,7 +372,7 @@ var NavBar7 = function NavBar7(props) {
     dropdownClassName: "right-0 top-8",
     className: "flex gap-4 items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "font-semibold"
+    className: "font-semibold whitespace-nowrap"
   }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name), /*#__PURE__*/React__default.createElement(io5.IoChevronDownOutline, {
     className: "text-gray3",
     size: 24
@@ -385,16 +385,18 @@ var NavBar7 = function NavBar7(props) {
     href: "/dang-nhap"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
-    shopConfigStyle: shopConfigStyle
+    shopConfigStyle: shopConfigStyle,
+    className: "whitespace-nowrap"
   })), /*#__PURE__*/React__default.createElement("a", {
     href: "https://sodofin.vn/account",
     target: "_blank"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng ký",
     shopConfigStyle: shopConfigStyle,
-    type: 'outline'
+    type: 'outline',
+    className: "whitespace-nowrap"
   })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative lg:hidden flex gap-4 items-center px-4 py-1.5"
+    className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
     Link: Link,
     href: "/",
@@ -404,7 +406,7 @@ var NavBar7 = function NavBar7(props) {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl font-fredoka text-wrap text-primary line-clamp-2"
+    className: "text-xl md:text-2xl text-wrap text-primary line-clamp-2"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -663,7 +665,7 @@ var NavBar1 = function NavBar1(props) {
     dropdownClassName: "right-0 top-8",
     className: "flex gap-4 items-center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "font-semibold"
+    className: "font-semibold whitespace-nowrap"
   }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name), /*#__PURE__*/React__default.createElement(io5.IoChevronDownOutline, {
     className: "text-gray3",
     size: 24
@@ -676,14 +678,16 @@ var NavBar1 = function NavBar1(props) {
     href: "/dang-nhap"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng nhập",
-    shopConfigStyle: shopConfigStyle
+    shopConfigStyle: shopConfigStyle,
+    className: "whitespace-nowrap"
   })), /*#__PURE__*/React__default.createElement("a", {
     href: "https://sodofin.vn/account",
     target: "_blank"
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Đăng ký",
     shopConfigStyle: shopConfigStyle,
-    type: 'outline'
+    type: 'outline',
+    className: "whitespace-nowrap"
   })))), /*#__PURE__*/React__default.createElement("div", {
     className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
   }, /*#__PURE__*/React__default.createElement(LinkToPage, {
@@ -695,7 +699,7 @@ var NavBar1 = function NavBar1(props) {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: "text-xl md:text-2xl font-fredoka text-wrap text-primary"
+    className: "text-xl md:text-2xl text-wrap text-primary"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: function onClick() {
@@ -728,7 +732,7 @@ var NavBar1 = function NavBar1(props) {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     className: "h-14 w-14 bg-cover bg-no-repeat"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "text-xl font-semibold line-clamp-1"
+    className: "text-xl line-clamp-1"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName))), /*#__PURE__*/React__default.createElement("button", {
     className: "text-gray4",
     onClick: function onClick() {
@@ -1106,7 +1110,8 @@ var Hero2 = function Hero2(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium line-clamp-1 ",
     style: {
-      fontSize: "clamp(1.25rem, 3vw, 2.5rem)"
+      fontSize: "clamp(1.25rem, 3vw, 3.5rem)",
+      lineHeight: "1.5"
     }
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.title), /*#__PURE__*/React__default.createElement("div", {
     className: "text-xs line-clamp-2 md:line-clamp-3 text-ellipsis sm:text-base md:text-xl lg:text-2xl"
@@ -1155,7 +1160,7 @@ var Hero6 = function Hero6(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data4 = data.data) === null || _data$data4 === void 0 ? void 0 : (_data$data4$ = _data$data4[0]) === null || _data$data4$ === void 0 ? void 0 : _data$data4$.title) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-1 md:gap-4 lg:gap-6 "
   }, data !== null && data !== void 0 && (_data$data5 = data.data) !== null && _data$data5 !== void 0 && (_data$data5$ = _data$data5[0]) !== null && _data$data5$ !== void 0 && _data$data5$.description ? /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1 md:line-clamp-2",
+    className: "line-clamp-1 md:line-clamp-2 pb-1",
     style: {
       fontSize: "clamp(0.75rem, 3vw, 1.5rem)"
     }
@@ -8051,6 +8056,16 @@ var Loading = function Loading(props) {
   });
 };
 
+var NotFoundProduct = function NotFoundProduct(props) {
+  var _props$text = props.text,
+    text = _props$text === void 0 ? "sản phẩm" : _props$text;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "h-60 flex flex-col justify-center items-center text-xl text-gray4"
+  }, /*#__PURE__*/React__default.createElement(fa.FaBoxOpen, {
+    size: 80
+  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 ", text));
+};
+
 var TreatmentsCategory7 = function TreatmentsCategory7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
@@ -8122,23 +8137,13 @@ var TreatmentsCategory7 = function TreatmentsCategory7(props) {
     }, /*#__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, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, {
+    text: "d\u1ECBch v\u1EE5"
+  })), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
 
-var NotFoundProduct = function NotFoundProduct(props) {
-  var _props$text = props.text,
-    text = _props$text === void 0 ? "sản phẩm" : _props$text;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "h-60 flex flex-col justify-center items-center text-xl text-gray4"
-  }, /*#__PURE__*/React__default.createElement(fa.FaBoxOpen, {
-    size: 80
-  }), /*#__PURE__*/React__default.createElement("div", null, "Kh\xF4ng c\xF3 ", text));
-};
-
 var TreatmentsList6 = function TreatmentsList6(props) {
   var _products$slice;
   var data = props.data,
@@ -9403,7 +9408,7 @@ var TreatmentsList7 = function TreatmentsList7(props) {
       key: index
     }, /*#__PURE__*/React__default.createElement(ProductImage, {
       product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
+      className: "!aspect-[16/11] rounded-2xl"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: ''
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -9858,7 +9863,7 @@ var ProductItem3 = function ProductItem3(props) {
     className: "w-full border border-stroke rounded-2xl " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-t-2xl"
+    className: "w-full h-48 md:h-60 xl:h-[304px] rounded-t-2xl"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 flex flex-col gap-2 md:gap-4 items-start"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9950,7 +9955,7 @@ var ProductItem6 = function ProductItem6(props) {
     className: "w-full border border-stroke flex flex-col gap-2 md:gap-4 rounded-2xl p-2 md:p-4 xl:p-6 " + className
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full h-40 sm:h-56 lg:h-60 xl:h-64 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full h-48 md:h-60 xl:h-72 rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "text start line-clamp-1  w-full overflow-hidden text-ellipsis"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10006,7 +10011,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
     className: "w-full flex flex-col gap-4 rounded-2xl p-1"
   }, /*#__PURE__*/React__default.createElement(ProductImage, {
     product: product,
-    className: "w-full w-full h-44 md:h-56 lg:h-64 xl:h-72 bg-cover bg-no-repeat rounded-2xl"
+    className: "w-full w-full h-[189px] md:h-[238px] xl:h-[304px] rounded-2xl"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "line-clamp-1 mb-2 font-medium text-lg"
   }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
@@ -10204,47 +10209,65 @@ var Products2 = function Products2(props) {
   }), " "))));
 };
 
-var Pagination = function Pagination(props) {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? 24 : _props$size,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$total_pages = props.total_pages,
-    total_pages = _props$total_pages === void 0 ? 0 : _props$total_pages,
-    _props$has_next = props.has_next,
-    has_next = _props$has_next === void 0 ? true : _props$has_next,
-    _props$has_previous = props.has_previous,
-    has_previous = _props$has_previous === void 0 ? false : _props$has_previous,
-    _props$current_page = props.current_page,
-    current_page = _props$current_page === void 0 ? 0 : _props$current_page,
-    _props$onPageChange = props.onPageChange,
-    onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange;
+var Pagination = function Pagination(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$total_pages = _ref.total_pages,
+    total_pages = _ref$total_pages === void 0 ? 1 : _ref$total_pages,
+    _ref$current_page = _ref.current_page,
+    current_page = _ref$current_page === void 0 ? 1 : _ref$current_page,
+    _ref$onPageChange = _ref.onPageChange,
+    onPageChange = _ref$onPageChange === void 0 ? function () {} : _ref$onPageChange;
   var handlePageChange = function handlePageChange(page) {
-    onPageChange(page);
+    if (page >= 0 && page <= total_pages - 1) {
+      onPageChange(page);
+    }
+  };
+  var generatePageNumbers = function generatePageNumbers() {
+    if (total_pages <= 5) {
+      return Array.from({
+        length: total_pages
+      }, function (_, i) {
+        return i + 1;
+      });
+    }
+    var pages = [1];
+    if (current_page > 3) pages.push("...");
+    var start = Math.max(2, current_page - 1);
+    var end = Math.min(total_pages - 1, current_page + 2);
+    for (var i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    if (current_page < total_pages - 2) pages.push("...");
+    pages.push(total_pages);
+    return pages;
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-4 items-center justify-self-center " + className
+    className: "flex gap-4 justify-center items-center " + className
   }, /*#__PURE__*/React__default.createElement(io5.IoChevronBackOutline, {
-    className: has_previous ? "text-primary cursor-pointer" : "text-gray3",
+    className: current_page > 0 ? "text-primary cursor-pointer" : "text-gray3 cursor-not-allowed",
     size: size,
     onClick: function onClick() {
-      if (has_previous) handlePageChange(current_page - 1);
+      return handlePageChange(current_page - 1);
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center space-x-1"
-  }, Array(total_pages).fill().map(function (_, index) {
+  }, generatePageNumbers().map(function (page, index) {
     return /*#__PURE__*/React__default.createElement("button", {
       key: index,
       onClick: function onClick() {
-        return handlePageChange(index);
+        return typeof page === "number" && handlePageChange(page - 1);
       },
-      className: "px-4 py-1 rounded-md " + (index === current_page ? 'bg-primary text-textButton' : 'bg-transparent text-primary') + " hover:opacity-80"
-    }, index + 1);
+      className: "px-4 py-1 rounded-md " + (page === current_page + 1 ? "bg-primary text-white" : "bg-transparent text-primary") + " hover:opacity-80 " + (page === "..." ? "cursor-default text-gray-500" : ""),
+      disabled: page === "..."
+    }, page);
   })), /*#__PURE__*/React__default.createElement(io5.IoChevronForwardOutline, {
-    className: has_next ? "text-primary cursor-pointer" : "text-gray3",
+    className: current_page < total_pages - 1 ? "text-primary cursor-pointer" : "text-gray3 cursor-not-allowed",
     size: size,
     onClick: function onClick() {
-      if (has_next) handlePageChange(current_page + 1);
+      return handlePageChange(current_page + 1);
     }
   }));
 };
@@ -10268,11 +10291,9 @@ var Products3 = function Products3(props) {
     }),
     productParams = _useState[0],
     setProductParams = _useState[1];
-  var _useState2 = React.useState(false),
-    setIsAutoGetList = _useState2[1];
-  var _useState3 = React.useState(),
-    categorySelected = _useState3[0],
-    setCategorySelected = _useState3[1];
+  var _useState2 = React.useState(),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: productParams
     })),
@@ -10286,16 +10307,12 @@ var Products3 = function Products3(props) {
       }
     })),
     categories = _CategoryController.categories;
-  React.useEffect(function () {
-    setCategorySelected(categories === null || categories === void 0 ? void 0 : categories[0]);
-  }, [categories]);
   React.useEffect(function () {
     if (categorySelected) {
       setProductParams(_extends({}, productParams, {
         page: 0,
         categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId
       }));
-      setIsAutoGetList(true);
     }
   }, [categorySelected]);
   var onSelectCategory = function onSelectCategory(category) {
@@ -10319,7 +10336,16 @@ var Products3 = function Products3(props) {
     className: "text-xl"
   }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
     className: "overflow-y-auto max-h-96"
-  }, categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + (!(categorySelected !== null && categorySelected !== void 0 && categorySelected.categoryId) ? "text-primary" : "text-textSecondary"),
+    onClick: function onClick() {
+      return onSelectCategory({
+        categoryId: undefined
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement(io.IoIosHeartEmpty, {
+    size: 24
+  }), /*#__PURE__*/React__default.createElement("div", null, "T\u1EA5t c\u1EA3")), categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (category === null || category === void 0 ? void 0 : category.categoryId) ? "text-primary" : "text-textSecondary"),
       key: index,
@@ -10334,7 +10360,7 @@ var Products3 = function Products3(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-3 text-center"
   }, loading ? /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full justify-center p-12"
+    className: "flex w-full justify-center items-center p-12 h-[700px]"
   }, /*#__PURE__*/React__default.createElement(Loading, {
     size: 32
   })) : (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
@@ -10560,10 +10586,8 @@ var Products11 = function Products11(props) {
     }
   }, [categories]);
   React.useEffect(function () {
-    if ((products === null || products === void 0 ? void 0 : products.length) > 0) {
-      setProductsFilter(products);
-    }
-  }, [products]);
+    setProductsFilter(products);
+  }, [products, categorySelected]);
   var handleFilter = function handleFilter(item) {
     setFilterItem(item);
     if ((item === null || item === void 0 ? void 0 : item.value) === "sortPriceDESC") {
@@ -10580,14 +10604,18 @@ var Products11 = function Products11(props) {
       });
       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;
+      setParams(function (prev) {
+        return _extends({}, prev, {
+          isHighlight: true
+        });
       });
-      setProductsFilter(_productsCopy2);
     } else {
-      setProductsFilter(products);
+      setParams(function (prev) {
+        return _extends({}, prev, {
+          categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId,
+          size: 12
+        });
+      });
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -10595,7 +10623,7 @@ var Products11 = function Products11(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "md:sticky top-0 self-start"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4"
+    className: " flex flex-col gap-2 rounded-3xl bg-bgSecondary p-4 max-h-96 overflow-y-auto"
   }, 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" : ""),
@@ -10778,19 +10806,24 @@ var ProductSearch1 = function ProductSearch1(props) {
     setProductsFilter = _useState[1];
   var _useState2 = React.useState({
       productName: keywordValue,
-      size: 20
+      size: 12
     }),
     params = _useState2[0],
     setParams = _useState2[1];
   var _useState3 = React.useState(true),
     isGetMore = _useState3[0],
     setIsGetMore = _useState3[1];
+  var _useState4 = React.useState(false),
+    isAutoGetList = _useState4[0],
+    setIsAutoGetList = _useState4[1];
   var _ProductController = ProductController(_extends({}, props, {
-      params: params
+      params: params,
+      isAutoGetList: isAutoGetList
     })),
     products = _ProductController.products,
     loading = _ProductController.loading;
   React.useEffect(function () {
+    setIsAutoGetList(true);
     setParams(function (prev) {
       return _extends({}, prev, {
         productName: keywordValue
@@ -10816,14 +10849,16 @@ var ProductSearch1 = function ProductSearch1(props) {
       });
       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;
+      setParams(function (prev) {
+        return _extends({}, prev, {
+          isHighlight: true
+        });
       });
-      setProductsFilter(_productsCopy);
     } else {
-      setProductsFilter(products);
+      setParams({
+        size: 12,
+        productName: keywordValue
+      });
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -12112,7 +12147,7 @@ var Footer1 = function Footer1(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     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"
+    className: "mb-3 text-md md:text-lg"
   }, "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"
@@ -12248,7 +12283,7 @@ var Footer7 = function Footer7(props) {
     src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
     alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
   }), /*#__PURE__*/React__default.createElement("h3", {
-    className: " text-2xl md:text-3xl font-semibold ms-2",
+    className: " text-2xl md:text-3xl ms-2",
     style: {
       color: primary
     }
@@ -12735,7 +12770,7 @@ var Contact1 = function Contact1(props) {
   }, /*#__PURE__*/React__default.createElement(si.SiZalo, {
     size: 40,
     className: "p-2 text-textButton bg-primary"
-  }), /*#__PURE__*/React__default.createElement("div", null, "Zalo: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+  }), /*#__PURE__*/React__default.createElement("div", null, "Zalo: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? /*#__PURE__*/React__default.createElement("a", {
     Link: Link,
     className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6",
     href: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage,
@@ -12743,7 +12778,7 @@ var Contact1 = function Contact1(props) {
   }, /*#__PURE__*/React__default.createElement(fa.FaFacebookF, {
     size: 40,
     className: "p-2 text-textButton bg-primary"
-  }), /*#__PURE__*/React__default.createElement("div", null, "Facebook")) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+  }), /*#__PURE__*/React__default.createElement("div", null, "Facebook")) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? /*#__PURE__*/React__default.createElement("a", {
     Link: Link,
     className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6",
     href: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger,
@@ -13746,7 +13781,11 @@ var SearchBar2 = function SearchBar2(props) {
   var _useState2 = React.useState(""),
     valueSearch = _useState2[0],
     setSearchValue = _useState2[1];
-  var _ProductController = ProductController(_extends({}, props)),
+  var _useState3 = React.useState(false),
+    isAutoGetList = _useState3[0];
+  var _ProductController = ProductController(_extends({}, props, {
+      isAutoGetList: isAutoGetList
+    })),
     getProductListSearch = _ProductController.getProductListSearch;
   React.useEffect(function () {
     if (valueSearch === "") {
@@ -13791,7 +13830,7 @@ var SearchBar2 = function SearchBar2(props) {
       backgroundSize: "cover"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full md:w-1/2 py-6 mx-auto px-6 flex flex-col h-full gap-4"
+    className: "w-full md:w-2/3 lg:w-1/2 py-6 mx-auto md:px-6 flex flex-col h-full gap-4"
   }, /*#__PURE__*/React__default.createElement(Input, {
     icons: /*#__PURE__*/React__default.createElement(io5.IoSearchOutline, {
       className: "text-gray3"
@@ -13819,9 +13858,7 @@ var SearchBar2 = function SearchBar2(props) {
     }, item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : _item$productInfo.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
       product: item === null || item === void 0 ? void 0 : item.productInfo
     })));
-  })) : /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto"
-  }, data === null || data === void 0 ? void 0 : data.sectionDescription))));
+  })) : null)));
 };
 
 var SearchBar5 = function SearchBar5(props) {
@@ -13942,8 +13979,9 @@ var ShopHighlights2 = function ShopHighlights2(props) {
     Link = _props$Link === void 0 ? null : _props$Link;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: SECTION_CLASS + " my-0 md:my-0 !bg-bgSecondary py-6 grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6"
+    className: SECTION_CLASS + " my-0 md:my-0 !bg-bgSecondary py-6 grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6"
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    var _item$title;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
@@ -13961,7 +13999,7 @@ var ShopHighlights2 = function ShopHighlights2(props) {
       className: "w-16 h-16 p-3 rounded-full bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "font-medium text-lg"
-    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+    }, item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
       className: "flex-grow text-gray3 leading-relaxed"
     }, item === null || item === void 0 ? void 0 : item.description)));
   }));
@@ -13975,6 +14013,7 @@ var ShopHighlights5 = function ShopHighlights5(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: SECTION_CLASS + " grid md:grid-cols-3 py-6 gap-4 lg:gap-6 bg-bgSecondary"
   }, sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    var _item$title;
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       href: convertURL(item === null || item === void 0 ? void 0 : item.route) || (item === null || item === void 0 ? void 0 : item.link) || "#",
       Link: Link
@@ -13991,8 +14030,8 @@ var ShopHighlights5 = function ShopHighlights5(props) {
       alt: "logo",
       className: "w-16 h-16 rounded-full bg-primary"
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "font-medium text-xl text-textHeading pt-2 border-t border-textHeading"
-    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "font-semibold text-xl text-textHeading pt-2 border-t border-textHeading"
+    }, item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toUpperCase()), /*#__PURE__*/React__default.createElement("div", {
       className: "flex-grow leading-relaxed"
     }, item === null || item === void 0 ? void 0 : item.description)));
   }));