s-platform-landing-section 0.1.14 → 0.1.16

package/dist/index.js

@@ -15,6 +15,9 @@ var bs = require('react-icons/bs');
 var lu = require('react-icons/lu');
 var DatePicker = _interopDefault(require('react-datepicker'));
 require('react-datepicker/dist/react-datepicker.css');
+var Slider = _interopDefault(require('react-slick'));
+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 ri = require('react-icons/ri');
@@ -211,7 +214,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 = React.useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -257,17 +260,6 @@ var NavBar7 = function NavBar7(props) {
       className: "text-gray3"
     })
   }];
-  React.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]);
   React.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);
@@ -306,9 +298,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,
@@ -391,9 +383,9 @@ var NavBar7 = function NavBar7(props) {
     }
   }, /*#__PURE__*/React__default.createElement(rx.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,
@@ -405,7 +397,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 = React.useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -451,17 +443,6 @@ var NavBar1 = function NavBar1(props) {
       className: "text-gray3"
     })
   }];
-  React.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]);
   React.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);
@@ -519,9 +500,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,
@@ -611,9 +592,9 @@ var NavBar1 = function NavBar1(props) {
     }
   }, /*#__PURE__*/React__default.createElement(rx.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,
@@ -649,9 +630,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"
@@ -659,7 +640,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);
 };
@@ -7646,6 +7627,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)) {
@@ -9029,6 +9015,9 @@ var TreatmentsList7 = function TreatmentsList7(props) {
   var _useState3 = React.useState([]),
     dataBooking = _useState3[0],
     setDataBooking = _useState3[1];
+  var _useState4 = React.useState(0),
+    currentSlide = _useState4[0],
+    setCurrentSlide = _useState4[1];
   var _ProductController = ProductController(_extends({}, props, {
       params: params
     })),
@@ -9055,23 +9044,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", {
@@ -9086,13 +9070,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
@@ -9533,7 +9553,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,
@@ -10656,6 +10676,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 = React.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;
@@ -12750,10 +12836,37 @@ var ShopHighlights7 = function ShopHighlights7(props) {
   }));
 };
 
+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);
+};
+
 exports.About1 = About1;
 exports.About5 = About5;
 exports.Address1 = Address1;
 exports.Banner1 = Banner1;
+exports.Banner2 = Banner2;
 exports.Banner3 = Banner3;
 exports.Banner7 = Banner7;
 exports.BannerFull1 = BannerFull1;
@@ -12802,12 +12915,12 @@ exports.ProductItem5 = ProductItem5;
 exports.ProductItem6 = ProductItem6;
 exports.ProductItem7 = ProductItem7;
 exports.ProductList5 = ProductList5;
+exports.ProductList7 = ProductList7;
 exports.ProductSale2 = ProductSale2;
 exports.ProductSearch1 = ProductSearch1;
 exports.Products10 = Products10;
 exports.Products2 = Products2;
 exports.Products3 = Products3;
-exports.ProductsList7 = ProductsList7;
 exports.ProductsTop1 = ProductsTop1;
 exports.SearchBar2 = SearchBar2;
 exports.SearchBar5 = SearchBar5;
@@ -12828,4 +12941,5 @@ exports.TreatmentItem1 = TreatmentItem1;
 exports.TreatmentsCategory7 = TreatmentsCategory7;
 exports.TreatmentsList6 = TreatmentsList6;
 exports.TreatmentsList7 = TreatmentsList7;
+exports.VideoFull1 = VideoFull1;
 //# sourceMappingURL=index.js.map