s-platform-landing-section 0.1.31 → 0.1.33

package/dist/index.js

@@ -21,8 +21,8 @@ require('slick-carousel/slick/slick.css');
 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 ri = require('react-icons/ri');
+var hi = require('react-icons/hi');
 var gi = require('react-icons/gi');
 
 var Button = function Button(props) {
@@ -166,6 +166,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,
@@ -1110,7 +1207,7 @@ var Hero2 = function Hero2(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "font-medium line-clamp-1 ",
     style: {
-      fontSize: "clamp(1.25rem, 3vw, 3.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", {
@@ -9435,7 +9532,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,
@@ -10029,6 +10126,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,
@@ -10042,7 +10140,7 @@ var ProductList7 = function ProductList7(props) {
     _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
     secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
   var _useState = React.useState({
-      size: 4
+      size: 8
     }),
     params = _useState[0];
   var _ProductController = ProductController(_extends({}, props, {
@@ -10056,16 +10154,16 @@ var ProductList7 = function ProductList7(props) {
   }, /*#__PURE__*/React__default.createElement(SectionTitle, {
     data: data,
     shopConfigStyle: shopConfigStyle
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), (products === null || products === void 0 ? void 0 : products.length) > 0 ? /*#__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, {
+  })) : /*#__PURE__*/React__default.createElement(NotFoundProduct, null), (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, {
@@ -10335,7 +10433,7 @@ var Products3 = function Products3(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl"
   }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
-    className: "overflow-y-auto max-h-96"
+    className: "overflow-y-auto max-h-96 scroll-container pr-3"
   }, /*#__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() {
@@ -12056,6 +12154,101 @@ function SvgVnpay(props) {
   }))));
 }
 
+var dataFake = [{
+  title: "Đa dạng thanh toán",
+  data: [{
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    label: "Chuyển khoản",
+    link: ""
+  }, {
+    svgImage: "",
+    srcImage: /*#__PURE__*/React__default.createElement(bs.BsCurrencyDollar, null),
+    label: "Tiền mặt",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(SvgVnpay, null),
+    svgImage: "",
+    label: "VNPay",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(SvgVietQr, null),
+    svgImage: "",
+    label: "VietQR",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(go.GoCreditCard, null),
+    svgImage: "",
+    label: "Thẻ ATM",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaCcVisa, null),
+    svgImage: "",
+    label: "Thẻ Quốc tế",
+    link: ""
+  }]
+}, {
+  title: "Thông tin hữu ích",
+  data: [{
+    srcImage: /*#__PURE__*/React__default.createElement(io.IoMdCheckmarkCircleOutline, null),
+    svgImage: "",
+    label: "Chính sách bảo hành",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, null),
+    svgImage: "",
+    label: "Chính sách đổi trả",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(lu.LuShoppingBag, null),
+    svgImage: "",
+    label: "Hướng dẫn mua hàng online",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(ai.AiOutlineInfoCircle, null),
+    svgImage: "",
+    label: "Giới thiệu về chúng tôi",
+    link: ""
+  }]
+}, {
+  title: "Mạng xã hội",
+  data: [{
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaFacebookF, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Facebook",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaYoutube, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Youtube",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(fa.FaTiktok, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Tiktok",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(ri.RiMessengerFill, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Messenger",
+    link: ""
+  }, {
+    srcImage: /*#__PURE__*/React__default.createElement(si.SiZalo, {
+      className: "p-1 rounded bg-primary text-white"
+    }),
+    svgImage: "",
+    label: "Zalo",
+    link: ""
+  }]
+}];
 var Links1 = function Links1(props) {
   var data = props.data,
     _props$SectionTitle = props.SectionTitle,
@@ -12069,26 +12262,23 @@ var Links1 = function Links1(props) {
     shopConfigStyle: shopConfigStyle
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8 w-full bg-background"
-  }, [1, 2, 3].map(function (item, index) {
+  }, dataFake === null || dataFake === void 0 ? void 0 : dataFake.map(function (item, index) {
+    var _item$data;
     return /*#__PURE__*/React__default.createElement("div", {
-      key: "qwikf-" + index + " "
+      key: "qwikf-" + index + " ",
+      className: "h-full overflow-hidden rounded-b-xl"
     }, /*#__PURE__*/React__default.createElement("h3", {
       className: "text-lg md:text-2xl font-semibold mb-4"
-    }, "\u0110a d\u1EA1ng thanh to\xE1n"), /*#__PURE__*/React__default.createElement("div", {
-      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl bg-bgSecondary "
-    }, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(fa6.FaArrowsRotate, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), "  Chuy\u1EC3n kho\u1EA3n"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(bs.BsCurrencyDollar, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Ti\u1EC1n m\u1EB7t"), /*#__PURE__*/React__default.createElement("label", {
-      className: "flex items-center gap-[18px]"
-    }, /*#__PURE__*/React__default.createElement(SvgVietQr, null), "VietQR"), /*#__PURE__*/React__default.createElement("label", {
-      className: "flex items-center gap-[18px]"
-    }, /*#__PURE__*/React__default.createElement(SvgVnpay, null), "VNPay"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(go.GoCreditCard, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Th\u1EBB ATM"), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(si.SiVisa, {
-      className: "inline-block\t text-primary text-2xl mb-1 me-3"
-    }), " Th\u1EBB Qu\u1ED1c t\u1EBF")));
+    }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("div", {
+      className: "leading-10 flex flex-col bg-background2 p-4 rounded-xl bg-bgSecondary h-full"
+    }, item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.map(function (it, idx) {
+      return /*#__PURE__*/React__default.createElement("label", {
+        className: "flex gap-4 items-center",
+        key: "ikgf-" + idx
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "text-primary text-2xl"
+      }, it === null || it === void 0 ? void 0 : it.srcImage), it === null || it === void 0 ? void 0 : it.label);
+    })));
   })));
 };
 
@@ -12620,31 +12810,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 = React.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(hi.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(hi.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
   }));
 };
@@ -13937,7 +14195,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",
@@ -13948,7 +14206,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(io5.IoSearchOutline, {
       className: "text-gray3"
@@ -13979,7 +14237,7 @@ 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 lg: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, {
@@ -14143,7 +14401,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,