s-platform-landing-section 0.1.14 → 0.1.16

package/dist/index.modern.js

@@ -12,6 +12,9 @@ import { BsCurrencyDollar } from 'react-icons/bs';
 import { LuSearch } from 'react-icons/lu';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 import { AiOutlineShoppingCart } from 'react-icons/ai';
 import { GoCreditCard } from 'react-icons/go';
 import { RiDeleteBin7Line } from 'react-icons/ri';
@@ -208,7 +211,7 @@ var Options = function Options(props) {
 };
 
 var NavBar7 = function NavBar7(props) {
-  var _routes$find, _routes$filter, _routes$filter2;
+  var _routes$find, _shopConfigStyle$navB, _shopConfigStyle$navB2, _shopConfigStyle$navB3, _shopConfigStyle$navB4;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -254,17 +257,6 @@ var NavBar7 = function NavBar7(props) {
       className: "text-gray3"
     })
   }];
-  useEffect(function () {
-    if ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "cafe_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "grocery_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "fashion_1") {
-      routes === null || routes === void 0 ? void 0 : routes.forEach(function (route) {
-        if ((route === null || route === void 0 ? void 0 : route.name) === "home" || (route === null || route === void 0 ? void 0 : route.name) === "products" || (route === null || route === void 0 ? void 0 : route.name) === "about") {
-          route.isShow = true;
-        } else {
-          route.isShow = false;
-        }
-      });
-    }
-  }, [shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode]);
   useEffect(function () {
     var totalItem = cartItems === null || cartItems === void 0 ? void 0 : cartItems.reduce(function (total, item) {
       return total + (item === null || item === void 0 ? void 0 : item.quantity);
@@ -303,9 +295,9 @@ var NavBar7 = function NavBar7(props) {
     className: "text-xl md:text-2xl whitespace-nowrap font-semibold text-primary"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
-  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+  }, 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) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (item, index) {
+  })) === null || _shopConfigStyle$navB2 === void 0 ? void 0 : _shopConfigStyle$navB2.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
@@ -388,9 +380,9 @@ var NavBar7 = function NavBar7(props) {
     }
   }, /*#__PURE__*/React__default.createElement(RxCross2, {
     size: 24
-  })), /*#__PURE__*/React__default.createElement("div", null, routes === null || routes === void 0 ? void 0 : (_routes$filter2 = routes.filter(function (e) {
+  })), /*#__PURE__*/React__default.createElement("div", null, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB3 = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB3 === void 0 ? void 0 : (_shopConfigStyle$navB4 = _shopConfigStyle$navB3.filter(function (e) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter2 === void 0 ? void 0 : _routes$filter2.map(function (item, index) {
+  })) === null || _shopConfigStyle$navB4 === void 0 ? void 0 : _shopConfigStyle$navB4.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
@@ -402,7 +394,7 @@ var NavBar7 = function NavBar7(props) {
 };
 
 var NavBar1 = function NavBar1(props) {
-  var _routes$find, _routes$filter, _routes$filter2;
+  var _routes$find, _shopConfigStyle$navB, _shopConfigStyle$navB2, _shopConfigStyle$navB3, _shopConfigStyle$navB4;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -448,17 +440,6 @@ var NavBar1 = function NavBar1(props) {
       className: "text-gray3"
     })
   }];
-  useEffect(function () {
-    if ((shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "cafe_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "grocery_1" || (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode) === "fashion_1") {
-      routes === null || routes === void 0 ? void 0 : routes.forEach(function (route) {
-        if ((route === null || route === void 0 ? void 0 : route.name) === "home" || (route === null || route === void 0 ? void 0 : route.name) === "products" || (route === null || route === void 0 ? void 0 : route.name) === "about") {
-          route.isShow = true;
-        } else {
-          route.isShow = false;
-        }
-      });
-    }
-  }, [shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingTemplateCode]);
   useEffect(function () {
     var totalItem = cartItems === null || cartItems === void 0 ? void 0 : cartItems.reduce(function (total, item) {
       return total + (item === null || item === void 0 ? void 0 : item.quantity);
@@ -516,9 +497,9 @@ var NavBar1 = function NavBar1(props) {
     className: "text-xl md:text-2xl whitespace-nowrap font-semibold text-primary"
   }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
     className: "hidden lg:flex flex-1 items-center gap-4"
-  }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
+  }, 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) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (item, index) {
+  })) === null || _shopConfigStyle$navB2 === void 0 ? void 0 : _shopConfigStyle$navB2.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
@@ -608,9 +589,9 @@ var NavBar1 = function NavBar1(props) {
     }
   }, /*#__PURE__*/React__default.createElement(RxCross2, {
     size: 24
-  }))), /*#__PURE__*/React__default.createElement("div", null, routes === null || routes === void 0 ? void 0 : (_routes$filter2 = routes.filter(function (e) {
+  }))), /*#__PURE__*/React__default.createElement("div", null, shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$navB3 = shopConfigStyle.navBarMenus) === null || _shopConfigStyle$navB3 === void 0 ? void 0 : (_shopConfigStyle$navB4 = _shopConfigStyle$navB3.filter(function (e) {
     return e === null || e === void 0 ? void 0 : e.isShow;
-  })) === null || _routes$filter2 === void 0 ? void 0 : _routes$filter2.map(function (item, index) {
+  })) === null || _shopConfigStyle$navB4 === void 0 ? void 0 : _shopConfigStyle$navB4.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(LinkToPage, {
       Link: Link,
       href: item === null || item === void 0 ? void 0 : item.route,
@@ -646,9 +627,9 @@ var SvgIcon = function SvgIcon(_ref) {
 var SectionTitle1 = function SectionTitle1(props) {
   var _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data;
-  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "text-center text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
-  }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, /*#__PURE__*/React__default.createElement("div", {
+  }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-center"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "w-32 h-0.5 rounded-full bg-secondary"
@@ -656,7 +637,7 @@ var SectionTitle1 = function SectionTitle1(props) {
     className: "w-9 h-9 text-secondary"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: " w-32 h-0.5 rounded-full bg-secondary"
-  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
@@ -7643,6 +7624,11 @@ var pattern = {
   phoneNumberPattern: /^(?:\+84|0)\d{9}$/
 };
 var numberPattern = /^\d+$/;
+var getYoutubeVideoIdByUrl = function getYoutubeVideoIdByUrl(url) {
+  var regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/;
+  var match = url === null || url === void 0 ? void 0 : url.match(regex);
+  return match ? match[1] : null;
+};
 
 function getMinMax(array, field) {
   if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
@@ -9026,6 +9012,9 @@ var TreatmentsList7 = function TreatmentsList7(props) {
   var _useState3 = useState([]),
     dataBooking = _useState3[0],
     setDataBooking = _useState3[1];
+  var _useState4 = useState(0),
+    currentSlide = _useState4[0],
+    setCurrentSlide = _useState4[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: params
     })),
@@ -9052,23 +9041,18 @@ var TreatmentsList7 = function TreatmentsList7(props) {
     setIsOpenModal(false);
     setDataBooking([]);
   };
-  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
-  }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+  var renderItemSlide = function renderItemSlide(product, index) {
     var _product$productInfo, _product$productInfo2;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
-      key: "rthirr-" + index
+      className: "w-full"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "block " + (index % 2 ? "md:hidden" : "")
+      className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
+      key: index
     }, /*#__PURE__*/React__default.createElement(ProductImage, {
       product: product === null || product === void 0 ? void 0 : product.productInfo,
       className: "aspect-video rounded-2xl"
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "text-left " + (index % 2 ? "md:text-right" : "")
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: ''
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "font-medium text-2xl"
     }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
@@ -9083,13 +9067,49 @@ var TreatmentsList7 = function TreatmentsList7(props) {
       onClick: function onClick(event) {
         handleOpenModalBooking(event, product);
       }
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "hidden " + (index % 2 ? "md:block" : "")
-    }, /*#__PURE__*/React__default.createElement(ProductImage, {
-      product: product === null || product === void 0 ? void 0 : product.productInfo,
-      className: "aspect-video rounded-2xl"
-    })));
-  })), /*#__PURE__*/React__default.createElement(Dash, {
+    }))));
+  };
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  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(Slider, {
+    className: "center",
+    infinite: true,
+    slidesToShow: 1,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    }
+  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
+    return renderItemSlide(product, index);
+  }))), /*#__PURE__*/React__default.createElement(Dash, {
     color: secondary
   }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
     onClose: handleCloseModal
@@ -9530,7 +9550,7 @@ var TreatmentItem1 = function TreatmentItem1(props) {
   }))));
 };
 
-var ProductsList7 = function ProductsList7(props) {
+var ProductList7 = function ProductList7(props) {
   var _props$shopConfigStyl = props.shopConfigStyle,
     shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
     _props$data = props.data,
@@ -10653,6 +10673,72 @@ var Banner1 = function Banner1(props) {
   })));
 };
 
+var Banner2 = function Banner2(props) {
+  var data = props.data,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  var sectionData = data === null || data === void 0 ? void 0 : data.data;
+  var _useState = useState(0),
+    currentSlide = _useState[0],
+    setCurrentSlide = _useState[1];
+  function RenderArrow(props) {
+    var className = props.className,
+      style = props.style,
+      onClick = props.onClick;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: className,
+      style: _extends({}, style, {
+        display: "none"
+      }),
+      onClick: onClick
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), /*#__PURE__*/React__default.createElement(Slider, {
+    className: "center",
+    infinite: false,
+    slidesToShow: 2,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    prevArrow: /*#__PURE__*/React__default.createElement(RenderArrow, null),
+    beforeChange: function beforeChange(oldIndex, newIndex) {
+      return setCurrentSlide(newIndex);
+    },
+    dots: true,
+    customPaging: function customPaging(i) {
+      return i === currentSlide ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-primary mt-4"
+      }) : /*#__PURE__*/React__default.createElement("div", {
+        className: "w-4 h-1 rounded-full bg-gray-300 mt-4"
+      });
+    },
+    centerPadding: "20px",
+    responsive: [{
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 1
+      }
+    }]
+  }, (sectionData === null || sectionData === void 0 ? void 0 : sectionData.length) > 0 && (sectionData === null || sectionData === void 0 ? void 0 : sectionData.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: 'px-2'
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.srcImage,
+      alt: "",
+      className: "rounded-2xl",
+      key: index
+    }));
+  }))));
+};
+
 var Banner3 = function Banner3(props) {
   var data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
@@ -12747,5 +12833,31 @@ var ShopHighlights7 = function ShopHighlights7(props) {
   }));
 };
 
-export { About1, About5, Address1, Banner1, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsList7, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7 };
+var VideoFull1 = function VideoFull1(props) {
+  var _data$data, _data$data$;
+  var shopConfigStyle = props.shopConfigStyle,
+    data = props.data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
+  console.log("VideoFull1 data", data);
+  var youtubeVideoId = getYoutubeVideoIdByUrl(data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$ = _data$data[0]) === null || _data$data$ === void 0 ? void 0 : _data$data$.link);
+  console.log("VideoFull1 youtubeVideoId", youtubeVideoId);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "" + SECTION_DEFAULT_CLASS
+  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }), youtubeVideoId ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full aspect-video"
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    className: "w-full h-full",
+    src: "https://www.youtube.com/embed/" + youtubeVideoId,
+    title: "YouTube video player",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true
+  })) : null);
+};
+
+export { About1, About5, Address1, Banner1, Banner2, Banner3, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Hero1, Hero10, Hero11 as Hero12, Hero13, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, PageTitle1, Partner1, ProductCategory2, ProductDetail10, ProductHighlight1, ProductHot1, ProductHot3, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products2, Products3, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, Select$1 as Select, ServiceDetail1, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map