s-platform-landing-section 0.1.30 → 0.1.32

package/dist/index.modern.js

@@ -18,7 +18,7 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { AiOutlineShoppingCart, AiOutlinePhone } from 'react-icons/ai';
 import { GoCreditCard, GoClock } from 'react-icons/go';
-import { HiOutlineLocationMarker } from 'react-icons/hi';
+import { HiOutlineLocationMarker, HiOutlineArrowNarrowLeft, HiOutlineArrowNarrowRight } from 'react-icons/hi';
 import { RiDeleteBin7Line } from 'react-icons/ri';
 import { GiNewspaper } from 'react-icons/gi';
 
@@ -163,6 +163,103 @@ var urlMappings = {
 function convertURL(path) {
   return urlMappings[path] || path;
 }
+var ROUTE = {
+  HOME: {
+    name: "home",
+    label: "Trang chủ",
+    route: "/",
+    isShow: true
+  },
+  PRODUCTS: {
+    name: "products",
+    label: "Sản phẩm",
+    route: "/products",
+    isShow: true
+  },
+  PRODUCTS_BY_CATEGORY: {
+    name: "products_by_category",
+    label: "Sản phẩm theo danh mục",
+    route: "/products/:slug"
+  },
+  PRODUCT: {
+    name: "product",
+    label: "Chi tiết sản phẩm",
+    route: "/product/:slug"
+  },
+  SERVICES: {
+    name: "services",
+    label: "Dịch vụ",
+    route: "/services",
+    isShow: true
+  },
+  SERVICE: {
+    name: "service",
+    label: "Chi tiết dịch vụ",
+    route: "/service/:slug"
+  },
+  BOOKING: {
+    name: "booking",
+    label: "Đặt lịch",
+    route: "/dat-lich",
+    isShow: true
+  },
+  ABOUT: {
+    name: "about",
+    label: "Giới thiệu",
+    route: "/about",
+    isShow: true
+  },
+  SALES: {
+    name: "sales",
+    label: "Sản phẩm",
+    route: "/sales"
+  },
+  NEWS: {
+    name: "news",
+    label: "Tin tức",
+    route: "/news"
+  },
+  NEWS_BY_CATEGORY: {
+    name: "news_by_category",
+    label: "Tin tức theo danh mục",
+    route: "/news/:slug"
+  },
+  NEWS_DETAIL: {
+    name: "news_detail",
+    label: "Tin tức",
+    route: "/news/:slug/:languageCode"
+  },
+  CARTS: {
+    name: "carts",
+    label: "Giỏ hàng",
+    route: "/carts"
+  },
+  ORDERS: {
+    name: "orders",
+    label: "Đơn hàng",
+    route: "/orders"
+  },
+  ORDER: {
+    name: "order",
+    label: "Chi tiết đơn hàng",
+    route: "/order"
+  },
+  ACCOUNT: {
+    name: "account",
+    label: "Tài khoản",
+    route: "/account"
+  },
+  PROFILE: {
+    name: "profile",
+    label: "Tài khoản",
+    route: "/profile"
+  },
+  SEARCH: {
+    name: "search",
+    label: "Tìm kiếm",
+    route: "/search"
+  }
+};
 
 var Options = function Options(props) {
   var _props$className = props.className,
@@ -329,7 +426,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: "/",
@@ -369,7 +466,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(IoChevronDownOutline, {
     className: "text-gray3",
     size: 24
@@ -382,16 +479,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: "/",
@@ -660,7 +759,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(IoChevronDownOutline, {
     className: "text-gray3",
     size: 24
@@ -673,14 +772,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, {
@@ -1103,7 +1204,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, 4vw, 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"
@@ -1152,7 +1254,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)"
     }
@@ -8048,6 +8150,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(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,
@@ -8119,23 +8231,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(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,
@@ -9400,7 +9502,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", {
@@ -9427,7 +9529,7 @@ var TreatmentsList7 = function TreatmentsList7(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-12 w-full"
   }, (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(Slider, {
-    infinite: true,
+    infinite: (products === null || products === void 0 ? void 0 : products.length) > 1 ? true : false,
     slidesToShow: 1,
     slidesToScroll: 1,
     speed: 500,
@@ -9855,7 +9957,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", {
@@ -9947,7 +10049,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, {
@@ -10003,7 +10105,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, {
@@ -10021,6 +10123,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
 };
 
 var ProductList7 = function ProductList7(props) {
+  var _products$slice;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
@@ -10034,7 +10137,7 @@ var ProductList7 = function ProductList7(props) {
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   var _useState = useState({
-      size: 4
+      size: 8
     }),
     params = _useState[0];
   var _ProductController = ProductController(_extends({}, props, {
@@ -10050,21 +10153,21 @@ var ProductList7 = function ProductList7(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
-  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+  }, products === null || products === void 0 ? void 0 : (_products$slice = products.slice(0, 4)) === null || _products$slice === void 0 ? void 0 : _products$slice.map(function (product, index) {
     return /*#__PURE__*/React__default.createElement(ProductItem, {
       Link: Link,
       shopConfigStyle: shopConfigStyle,
       key: index,
       product: product === null || product === void 0 ? void 0 : product.productInfo
     });
-  })), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
+  })), (products === null || products === void 0 ? void 0 : products.length) > 4 ? /*#__PURE__*/React__default.createElement(LinkToPage, {
     href: "/san-pham",
     Link: Link
   }, /*#__PURE__*/React__default.createElement(Button, {
     label: "Xem tất cả",
     shopConfigStyle: shopConfigStyle,
     className: "mt-12"
-  })) : null), /*#__PURE__*/React__default.createElement(Dash, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null)), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
@@ -10201,47 +10304,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(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(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);
     }
   }));
 };
@@ -10265,11 +10386,9 @@ var Products3 = function Products3(props) {
     }),
     productParams = _useState[0],
     setProductParams = _useState[1];
-  var _useState2 = useState(false),
-    setIsAutoGetList = _useState2[1];
-  var _useState3 = useState(),
-    categorySelected = _useState3[0],
-    setCategorySelected = _useState3[1];
+  var _useState2 = useState(),
+    categorySelected = _useState2[0],
+    setCategorySelected = _useState2[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: productParams
     })),
@@ -10283,16 +10402,12 @@ var Products3 = function Products3(props) {
       }
     })),
     categories = _CategoryController.categories;
-  useEffect(function () {
-    setCategorySelected(categories === null || categories === void 0 ? void 0 : categories[0]);
-  }, [categories]);
   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) {
@@ -10316,7 +10431,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(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,
@@ -10331,7 +10455,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", {
@@ -10557,10 +10681,8 @@ var Products11 = function Products11(props) {
     }
   }, [categories]);
   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") {
@@ -10577,14 +10699,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", {
@@ -10592,7 +10718,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" : ""),
@@ -10775,19 +10901,24 @@ var ProductSearch1 = function ProductSearch1(props) {
     setProductsFilter = _useState[1];
   var _useState2 = useState({
       productName: keywordValue,
-      size: 20
+      size: 12
     }),
     params = _useState2[0],
     setParams = _useState2[1];
   var _useState3 = useState(true),
     isGetMore = _useState3[0],
     setIsGetMore = _useState3[1];
+  var _useState4 = 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;
   useEffect(function () {
+    setIsAutoGetList(true);
     setParams(function (prev) {
       return _extends({}, prev, {
         productName: keywordValue
@@ -10813,14 +10944,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", {
@@ -12582,31 +12715,99 @@ var Employees1 = function Employees1(props) {
 };
 
 var Gallery1 = function Gallery1(props) {
-  var _data$data;
+  var _data$data, _data$data2, _ROUTE$BOOKING;
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$SectionTitle = props.SectionTitle,
-    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$Link = props.Link,
+    Link = _props$Link === void 0 ? null : _props$Link;
   var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
-  console.log("Gallery1 data", data);
+  var sliderRef = useRef(null);
+  var settings = {
+    infinite: true,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    speed: 500,
+    autoplay: false,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    dots: false,
+    swipe: true,
+    touchMove: true,
+    arrows: false,
+    responsive: [{
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 3,
+        slidesToScroll: 1
+      }
+    }, {
+      breakpoint: 1023,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 1
+      }
+    }, {
+      breakpoint: 635,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+      }
+    }]
+  };
+  var goToNext = function goToNext() {
+    if (sliderRef.current) {
+      sliderRef.current.slickNext();
+    }
+  };
+  var goToPrev = function goToPrev() {
+    if (sliderRef.current) {
+      sliderRef.current.slickPrev();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "" + SECTION_DEFAULT_CLASS
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1 md:gap-2"
-  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
+  }), (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-10"
+  }, /*#__PURE__*/React__default.createElement(Slider, _extends({}, settings, {
+    ref: sliderRef
+  }), data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.map(function (it, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: index
+      key: index,
+      className: "px-0 sm:px-4 md:px-4 pointer-events-none lg:px-6"
     }, /*#__PURE__*/React__default.createElement("img", {
-      src: it === null || it === void 0 ? void 0 : it.srcImage
+      src: it === null || it === void 0 ? void 0 : it.srcImage,
+      className: "rounded-2xl object-cover"
     }));
-  }))), /*#__PURE__*/React__default.createElement(Dash, {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-6 items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-6 mt-2 items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary cursor-pointer hover:scale-110 duration-200 hover:opacity-80",
+    onClick: goToPrev
+  }, /*#__PURE__*/React__default.createElement(HiOutlineArrowNarrowLeft, {
+    size: 34
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-primary cursor-pointer hover:scale-110 duration-200 hover:opacity-80",
+    onClick: goToNext
+  }, /*#__PURE__*/React__default.createElement(HiOutlineArrowNarrowRight, {
+    size: 34
+  }))), /*#__PURE__*/React__default.createElement(LinkToPage, {
+    href: ROUTE === null || ROUTE === void 0 ? void 0 : (_ROUTE$BOOKING = ROUTE.BOOKING) === null || _ROUTE$BOOKING === void 0 ? void 0 : _ROUTE$BOOKING.route,
+    Link: Link
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "\u0110\u1EB6T L\u1ECACH NGAY",
+    shopConfigStyle: shopConfigStyle
+  })))) : null), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }));
 };
@@ -13743,7 +13944,11 @@ var SearchBar2 = function SearchBar2(props) {
   var _useState2 = useState(""),
     valueSearch = _useState2[0],
     setSearchValue = _useState2[1];
-  var _ProductController = ProductController(_extends({}, props)),
+  var _useState3 = useState(false),
+    isAutoGetList = _useState3[0];
+  var _ProductController = ProductController(_extends({}, props, {
+      isAutoGetList: isAutoGetList
+    })),
     getProductListSearch = _ProductController.getProductListSearch;
   useEffect(function () {
     if (valueSearch === "") {
@@ -13788,7 +13993,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(IoSearchOutline, {
       className: "text-gray3"
@@ -13816,9 +14021,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) {
@@ -13897,7 +14100,7 @@ var SearchBar6 = function SearchBar6(props) {
     }
   };
   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 ",
+    className: "w-full flex flex-col justify-center px-3 md:px-6 gap-2 md:gap-4 lg:gap-6 items-center h-40 lg:h-52 ",
     style: {
       background: "url(" + (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.srcImage) + ")",
       backgroundPosition: "center",
@@ -13908,7 +14111,7 @@ var SearchBar6 = function SearchBar6(props) {
   }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.title) : null, data !== null && data !== void 0 && (_data$data4 = data.data) !== null && _data$data4 !== void 0 && _data$data4.description ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-center text-textBody"
   }, data === null || data === void 0 ? void 0 : (_data$data5 = data.data) === null || _data$data5 === void 0 ? void 0 : _data$data5.description) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2 md:gap-4 lg:gap-6 mb-2 md:mb-0 w-full md:w-[70%] h-10 lg:h-12 lg:w-1/2"
+    className: "flex gap-2 md:gap-4 lg:gap-6 mb-2 md:mb-0 w-[90%] sm:w-[70%] h-10 lg:h-12 lg:w-1/2"
   }, /*#__PURE__*/React__default.createElement(Input, {
     icons: /*#__PURE__*/React__default.createElement(IoSearchOutline, {
       className: "text-gray3"
@@ -13939,8 +14142,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 + " !mt-0 !md:mt-0 !bg-bgSecondary py-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md: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) || "#",
@@ -13958,7 +14162,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)));
   }));
@@ -13972,6 +14176,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
@@ -13988,8 +14193,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)));
   }));
@@ -14101,7 +14306,7 @@ var VideoFull1 = function VideoFull1(props) {
     data: data,
     shopConfigStyle: shopConfigStyle
   }), youtubeVideoId ? /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full aspect-video"
+    className: "w-full aspect-video mt-6"
   }, /*#__PURE__*/React__default.createElement("iframe", {
     className: "w-full h-full",
     src: "https://www.youtube.com/embed/" + youtubeVideoId,