s-platform-landing-section 0.1.14 → 0.1.15

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';
@@ -646,9 +649,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 +659,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 +7646,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 +9034,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 +9063,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 +9089,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
@@ -10653,6 +10695,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 +12855,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, 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, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map