s-platform-landing-section 0.1.10-alpha.10 → 0.1.10-alpha.12

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React__default, { useState, useRef, useEffect, createElement, forwardRef, useImperativeHandle, memo, useCallback } from 'react';
+import React__default, { useState, useRef, useEffect, createElement, forwardRef, useImperativeHandle, memo } from 'react';
 import { IoCartOutline, IoChevronDownOutline, IoInformationCircleOutline, IoLogOutOutline, IoLocationOutline, IoChevronBackOutline, IoChevronForwardOutline, IoCallOutline } from 'react-icons/io5';
 import { FaUserCircle, FaPhone, FaChevronLeft, FaChevronRight, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowLeft, FaArrowRight as FaArrowRight$1, FaFacebookSquare, FaFacebookMessenger, FaFacebookF } from 'react-icons/fa';
 import { FiMenu } from 'react-icons/fi';
@@ -6,7 +6,7 @@ import { RxCross2 } from 'react-icons/rx';
 import { PiHandbagSimpleLight } from 'react-icons/pi';
 import { CiSearch } from 'react-icons/ci';
 import { BsFilterLeft, BsCurrencyDollar } from 'react-icons/bs';
-import { FaMinus, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
+import { FaMinus, FaRegEyeSlash, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
 import { LuSearch } from 'react-icons/lu';
 import { IoMdCheckmark, IoIosHeartEmpty } from 'react-icons/io';
 import DatePicker from 'react-datepicker';
@@ -7347,13 +7347,18 @@ var Input = forwardRef(function (props, ref) {
     _props$min = props.min,
     min = _props$min === void 0 ? 0 : _props$min,
     _props$max = props.max,
-    max = _props$max === void 0 ? null : _props$max;
+    max = _props$max === void 0 ? null : _props$max,
+    _props$isHidden = props.isHidden,
+    isHidden = _props$isHidden === void 0 ? false : _props$isHidden;
   var _useState = useState(defaultValue),
     value = _useState[0],
     _setValue = _useState[1];
   var _useState2 = useState(""),
     error = _useState2[0],
     _setError = _useState2[1];
+  var _useState3 = useState(type),
+    typeInput = _useState3[0],
+    setTypeInput = _useState3[1];
   var refInput = useRef();
   useImperativeHandle(ref, function () {
     return {
@@ -7384,6 +7389,10 @@ var Input = forwardRef(function (props, ref) {
         _setError(e === null || e === void 0 ? void 0 : e.message);
         count++;
         break;
+      } else if ((e === null || e === void 0 ? void 0 : e.type) === "validate" && !(e !== null && e !== void 0 && e.validate)) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
       }
     }
     if (count) {
@@ -7408,8 +7417,13 @@ var Input = forwardRef(function (props, ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
   };
+  var changeHidden = function changeHidden() {
+    if (typeInput === "text") setTypeInput("password");else {
+      setTypeInput("text");
+    }
+  };
   var _className = "h-10 py-1 px-2 border border-stroke rounded  " + className;
-  var _inputClassName = (isQuantity ? "text-center w-12" : "") + " " + inputClassName + " focus:outline-none focus:ring-0";
+  var _inputClassName = (isQuantity ? "text-center w-12" : "") + " focus:outline-none focus:ring-0 " + inputClassName;
   var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
     return (e === null || e === void 0 ? void 0 : e.type) === "required";
   }));
@@ -7427,7 +7441,7 @@ var Input = forwardRef(function (props, ref) {
       return changeQuantity(-1);
     }
   }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, /*#__PURE__*/React__default.createElement("input", {
-    type: type,
+    type: typeInput,
     name: name,
     value: value,
     placeholder: placeholder,
@@ -7435,7 +7449,13 @@ var Input = forwardRef(function (props, ref) {
     required: required,
     className: _inputClassName,
     ref: refInput
-  }), isQuantity ? /*#__PURE__*/React__default.createElement("button", {
+  }), isHidden ? /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick() {
+      changeHidden();
+    }
+  }, /*#__PURE__*/React__default.createElement(FaRegEyeSlash, {
+    className: "font-semibold"
+  })) : null, isQuantity ? /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick() {
       return changeQuantity(1);
     }
@@ -7453,14 +7473,18 @@ var Select = forwardRef(function (props, ref) {
     placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
+    _props$optionClassNam = props.optionClassName,
+    optionClassName = _props$optionClassNam === void 0 ? "" : _props$optionClassNam,
+    _props$wrapClassName = props.wrapClassName,
+    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
+    _props$selectClassNam = props.selectClassName,
+    selectClassName = _props$selectClassNam === void 0 ? "" : _props$selectClassNam,
     _props$rules = props.rules,
     rules = _props$rules === void 0 ? [] : _props$rules,
     options = props.options,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
     handleSearchOption = props.handleSearchOption,
-    _props$wrapClassName = props.wrapClassName,
-    wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
     _props$isMulti = props.isMulti,
     isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
     _props$onClick = props.onClick,
@@ -7470,7 +7494,8 @@ var Select = forwardRef(function (props, ref) {
     _props$funcDelete = props.funcDelete,
     funcDelete = _props$funcDelete === void 0 ? function () {} : _props$funcDelete,
     _props$isSearch = props.isSearch,
-    isSearch = _props$isSearch === void 0 ? true : _props$isSearch;
+    isSearch = _props$isSearch === void 0 ? true : _props$isSearch,
+    renderItem = props.renderItem;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -7492,21 +7517,12 @@ var Select = forwardRef(function (props, ref) {
     dropdownPosition = _useState6[0],
     setDropdownPosition = _useState6[1];
   var inputRef = useRef(null);
-  useEffect(function () {
-    if (isMulti) return;else {
-      setIsOpen(false);
-      setInputSearch("");
-      setListOptions(options);
-    }
-  }, [value]);
   useEffect(function () {
     if (isMulti) setValue(defaultValue);
   }, [defaultValue]);
   useEffect(function () {
     setListOptions(options);
-    if (!isMulti) {
-      setValue({});
-    }
+    if (!isMulti) setValue(defaultValue);
   }, [options]);
   useEffect(function () {
     var _inputRef$current;
@@ -7612,7 +7628,10 @@ var Select = forwardRef(function (props, ref) {
     return (value === null || value === void 0 ? void 0 : value.value) == valueId;
   };
   var handleSelection = function handleSelection(item) {
-    if (isMulti === false) setValue(item);
+    if (!isMulti) {
+      setValue(item);
+      setIsOpen(false);
+    }
     onClick === null || onClick === void 0 ? void 0 : onClick(item);
   };
   var handleDeleteSelection = function handleDeleteSelection(e, item) {
@@ -7628,21 +7647,24 @@ var Select = forwardRef(function (props, ref) {
   }, " *") : null;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: selectRef,
-    className: wrapClassName + " relative "
+    className: "relative " + wrapClassName
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: labelClassName + " mb-1"
+    className: "mb-1 " + labelClassName
   }, label, " ", labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: className + " flex flex-col gap-2 rounded-lg"
+    className: "flex flex-col gap-2 rounded-lg w-full border " + className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "w-full h-10 bg-transparent flex justify-between items-center px-3 py-2",
+    className: "w-full h-10 bg-transparent flex justify-between items-center px-3 py-2 " + selectClassName,
     onClick: handleToggleSelect
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-between items-center w-full"
   }, isEmpty(value) || isMulti ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-gray3 line-clamp-1"
   }, placeholder) : /*#__PURE__*/React__default.createElement("div", {
-    className: "line-clamp-1"
-  }, value === null || value === void 0 ? void 0 : value.label), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full text-start pointer-events-none",
+    dangerouslySetInnerHTML: {
+      __html: value === null || value === void 0 ? void 0 : value.label
+    }
+  }), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick(e) {
       handleDeleteSelection(e, value);
     }
@@ -7657,7 +7679,7 @@ var Select = forwardRef(function (props, ref) {
     style: {
       background: "#FFFFFF"
     },
-    className: className + " overflow-y-auto max-h-72  absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2')
+    className: "overflow-y-auto max-h-72  absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2') + " " + optionClassName
   }, /*#__PURE__*/React__default.createElement("div", null, isSearch ? /*#__PURE__*/React__default.createElement("div", {
     className: "px-3 flex items-center border-b-[1px]"
   }, /*#__PURE__*/React__default.createElement(LuSearch, {
@@ -7680,7 +7702,7 @@ var Select = forwardRef(function (props, ref) {
       }
     }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
       className: (checkSelection(item === null || item === void 0 ? void 0 : item.value) ? "" : 'invisible') + " inline me-2 w-4"
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), renderItem ? renderItem(item) : /*#__PURE__*/React__default.createElement("div", {
       className: " whitespace-nowrap line-clamp-1"
     }, item === null || item === void 0 ? void 0 : item.label));
   }) : /*#__PURE__*/React__default.createElement("div", {
@@ -7696,6 +7718,8 @@ var DateTimePicker = forwardRef(function (props, ref) {
     label = _props$label === void 0 ? "" : _props$label,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
     rules = props.rules;
@@ -7762,7 +7786,7 @@ var DateTimePicker = forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
     selected: value,
     onChange: function onChange(date) {
@@ -7795,12 +7819,22 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
     rules = _props$rules === void 0 ? [] : _props$rules,
     _props$wrapClassName = props.wrapClassName,
     wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
-    inputClassName = props.inputClassName;
-  var _useState = useState(defaultValue),
+    _props$inputClassName = props.inputClassName,
+    inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [{
+      label: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--twemoji\" preserveAspectRatio=\"xMidYMid meet\"><path fill=\"#DA251D\" d=\"M32 5H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z\"></path><path fill=\"#FF0\" d=\"M19.753 16.037L18 10.642l-1.753 5.395h-5.672l4.589 3.333l-1.753 5.395L18 21.431l4.589 3.334l-1.753-5.395l4.589-3.333z\"></path></svg>",
+      country: "Việt Nam",
+      value: "+84"
+    }] : _props$options;
+  var _useState = useState(""),
     value = _useState[0],
     _setValue = _useState[1];
   var _useState2 = useState({
-      label: "+84",
+      label: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--twemoji\" preserveAspectRatio=\"xMidYMid meet\"><path fill=\"#DA251D\" d=\"M32 5H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4z\"></path><path fill=\"#FF0\" d=\"M19.753 16.037L18 10.642l-1.753 5.395h-5.672l4.589 3.333l-1.753 5.395L18 21.431l4.589 3.334l-1.753-5.395l4.589-3.333z\"></path></svg>",
+      country: "Việt Nam",
       value: "+84"
     }),
     countryCode = _useState2[0],
@@ -7808,6 +7842,11 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   var _useState3 = useState(""),
     error = _useState3[0],
     _setError = _useState3[1];
+  useEffect(function () {
+    if (defaultValue) {
+      _setValue("+" + defaultValue);
+    }
+  }, []);
   var handleOnChange = function handleOnChange(event) {
     var value = event.target.value;
     _setValue(value);
@@ -7822,8 +7861,10 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
         return _setValue(text);
       },
       getValue: function getValue() {
-        var phoneNumber = (countryCode === null || countryCode === void 0 ? void 0 : countryCode.value) + (value === null || value === void 0 ? void 0 : value.slice(1));
-        return phoneNumber;
+        if (!(value !== null && value !== void 0 && value.startsWith(countryCode === null || countryCode === void 0 ? void 0 : countryCode.value))) {
+          return (countryCode === null || countryCode === void 0 ? void 0 : countryCode.value) + (value === null || value === void 0 ? void 0 : value.replace(/^0/, ''));
+        }
+        return value;
       },
       setError: function setError(err) {
         return _setError(err);
@@ -7858,25 +7899,37 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
   var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-danger"
   }, " *") : null;
-  var _inputClassName = "h-10 px-2 focus:outline-none focus:ring-0 " + inputClassName;
-  var data = useCallback([{
-    label: "+84",
-    value: "+84"
-  }], []);
+  var _inputClassName = "h-full w-full px-2 focus:outline-none focus:ring-0 " + inputClassName;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapClassName + " flex flex-col"
+    className: "flex flex-col " + wrapClassName
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center h-10 rounded-lg  px-2 py-1 " + className
+    className: "flex items-center h-10 rounded-lg border pr-2 py-1 " + className
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "flex items-center border-r-2"
+    className: "border-r-2"
   }, /*#__PURE__*/React__default.createElement(Select$1, {
-    className: 'w-max',
+    className: 'w-max border-0',
     defaultValue: countryCode,
-    options: data,
+    options: options,
+    optionClassName: "w-max",
     placeholder: "+84",
-    onClick: setCountryCode
+    onClick: setCountryCode,
+    selectClassName: "ps-2 pr-1",
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex gap-3 items-center w-full"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: item === null || item === void 0 ? void 0 : item.label
+        }
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "text-start flex-1 text-sm"
+      }, item === null || item === void 0 ? void 0 : item.country), /*#__PURE__*/React__default.createElement("div", {
+        className: "text-gray3"
+      }, item === null || item === void 0 ? void 0 : item.value));
+    },
+    wrapClassName: "w-full"
   })), /*#__PURE__*/React__default.createElement("input", {
     type: type,
     name: name,
@@ -7899,7 +7952,7 @@ var formatCurrency = function formatCurrency(amount) {
   return formattedAmount + " \u20AB";
 };
 var pattern = {
-  phoneNumberPattern: /^0[0-9]{9}$/
+  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
 };
 var numberPattern = /^\d+$/;
 
@@ -8123,8 +8176,7 @@ var BookingForm = function BookingForm(props) {
       pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
       message: "Số điện thoại không hợp lệ!"
     }],
-    className: "w-full rounded-lg rounded-lg bg-bgSecondary",
-    inputClassName: "w-full"
+    className: "bg-bgSecondary"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "grid grid-cols-1 gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -8135,7 +8187,7 @@ var BookingForm = function BookingForm(props) {
     defaultValue: listProductSelected,
     onClick: handleSelectedProduct,
     handleSearchOption: handleSearchProducts,
-    className: "bg-bgSecondary rounded-lg",
+    className: "bg-bgSecondary",
     rules: [{
       type: "required",
       message: "Bắt buộc chọn dịch vụ"
@@ -9355,9 +9407,9 @@ var ProductDetail10 = function ProductDetail10(props) {
     }
   }, [product]);
   var initVariant = function initVariant() {
-    var _product$variants;
+    var _product$variants, _variant$index;
     var variant = product === null || product === void 0 ? void 0 : (_product$variants = product.variants) === null || _product$variants === void 0 ? void 0 : _product$variants[0];
-    var indexOptions = variant.index.split(",");
+    var indexOptions = variant === null || variant === void 0 ? void 0 : (_variant$index = variant.index) === null || _variant$index === void 0 ? void 0 : _variant$index.split(",");
     setVariant(variant);
     var options = (product === null || product === void 0 ? void 0 : product.optionValues) || [];
     options = options.map(function (e, i) {
@@ -10266,6 +10318,8 @@ var TextArea = forwardRef(function (props, ref) {
     className = _props$className === void 0 ? "" : _props$className,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    _props$labelClassName = props.labelClassName,
+    labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
   var _useState = useState(defaultValue),
@@ -10326,11 +10380,11 @@ var TextArea = forwardRef(function (props, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "" + className
   }, label ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1"
+    className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("textarea", {
     name: "",
     id: "",
-    className: textareaClassName + "  focus:outline-none focus:ring-0",
+    className: "focus:outline-none focus:ring-0 " + textareaClassName,
     placeholder: placeholder,
     value: value,
     onChange: function onChange(e) {
@@ -10966,5 +11020,5 @@ var CartItem = function CartItem(props) {
   }, /*#__PURE__*/React__default.createElement(RiDeleteBin7Line, null), /*#__PURE__*/React__default.createElement("span", null, "X\xF3a"))));
 };
 
-export { About5, Address1, Banner1, Booking1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Input, InputPhoneNumber, Links1, ModalNotification, NavBar7, PageTitle1, Partner1, ProductDetail10, ProductHot3, ProductSale2, Products1, Products10, Products2, Products3, ProductsTop1, SectionTitle1, Select$1 as Select, ServiceDetail1, TextArea, Treatments1, Treatments1$1 as Treatments2 };
+export { About5, Address1, Banner1, Booking1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating10, DateTimePicker, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Input, InputPhoneNumber, Links1, ModalNotification, NavBar7, PageTitle1, Partner1, ProductDetail10, ProductHot3, ProductSale2, Products1, Products10, Products2, Products3, ProductsTop1, SectionTitle1, Select$1 as Select, ServiceDetail1, TextArea, Treatments1, Treatments1$1 as Treatments2 };
 //# sourceMappingURL=index.modern.js.map