s-platform-landing-section 0.1.10-alpha.11 → 0.1.10-alpha.14

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,21 @@ 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,
+    icons = props.icons,
+    _props$iconsClassName = props.iconsClassName,
+    iconsClassName = _props$iconsClassName === void 0 ? "" : _props$iconsClassName;
   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 {
@@ -7374,7 +7382,7 @@ var Input = forwardRef(function (props, ref) {
   var _validateData = function _validateData() {
     var count = 0;
     for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
-      var _e$pattern;
+      var _e$pattern, _e$validate;
       var e = _step.value;
       if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
         _setError(e === null || e === void 0 ? void 0 : e.message);
@@ -7384,6 +7392,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 && !(e !== null && e !== void 0 && (_e$validate = e.validate) !== null && _e$validate !== void 0 && _e$validate.call(e))) {
+        _setError(e === null || e === void 0 ? void 0 : e.message);
+        count++;
+        break;
       }
     }
     if (count) {
@@ -7408,6 +7420,11 @@ 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" : "") + " focus:outline-none focus:ring-0 " + inputClassName;
   var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
@@ -7426,8 +7443,13 @@ var Input = forwardRef(function (props, ref) {
     onClick: function onClick() {
       return changeQuantity(-1);
     }
-  }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, /*#__PURE__*/React__default.createElement("input", {
-    type: type,
+  }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, icons ? /*#__PURE__*/React__default.createElement("div", {
+    className: "object-cover\t " + iconsClassName,
+    dangerouslySetInnerHTML: {
+      __html: icons
+    }
+  }) : null, /*#__PURE__*/React__default.createElement("input", {
+    type: typeInput,
     name: name,
     value: value,
     placeholder: placeholder,
@@ -7435,7 +7457,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);
     }
@@ -7445,7 +7473,6 @@ var Input = forwardRef(function (props, ref) {
 });
 
 var Select = forwardRef(function (props, ref) {
-  var _Object$values;
   var _props$label = props.label,
     label = _props$label === void 0 ? "" : _props$label,
     _props$labelClassName = props.labelClassName,
@@ -7498,13 +7525,6 @@ 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]);
@@ -7616,7 +7636,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) setValue(item);
+    if (!isMulti) {
+      setValue(item);
+      setIsOpen(false);
+    }
     onClick === null || onClick === void 0 ? void 0 : onClick(item);
   };
   var handleDeleteSelection = function handleDeleteSelection(e, item) {
@@ -7644,14 +7667,12 @@ var Select = forwardRef(function (props, ref) {
     className: "flex justify-between items-center w-full"
   }, isEmpty(value) || isMulti ? /*#__PURE__*/React__default.createElement("div", {
     className: "text-gray3 line-clamp-1"
-  }, placeholder) : renderItem && !isEmpty(value) && !isMulti ? /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full",
+  }, placeholder) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full text-start pointer-events-none",
     dangerouslySetInnerHTML: {
-      __html: Object === null || Object === void 0 ? void 0 : (_Object$values = Object.values(value)) === null || _Object$values === void 0 ? void 0 : _Object$values[0]
+      __html: value === null || value === void 0 ? void 0 : value.label
     }
-  }) : /*#__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", {
+  }), isButtonDelete && !isEmpty(value) ? /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick(e) {
       handleDeleteSelection(e, value);
     }
@@ -7810,13 +7831,18 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
     inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
     _props$labelClassName = props.labelClassName,
     labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
-    buttonClassName = props.buttonClassName;
-  var _useState = useState(defaultValue),
+    _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({
-      icons: "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n<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>",
-      label: "Việt Nam",
+      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],
@@ -7824,6 +7850,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);
@@ -7838,8 +7869,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);
@@ -7875,40 +7908,36 @@ var InputPhoneNumber = forwardRef(function (props, ref) {
     className: "text-danger"
   }, " *") : null;
   var _inputClassName = "h-full w-full px-2 focus:outline-none focus:ring-0 " + inputClassName;
-  var data = useCallback([{
-    icons: "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n<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>",
-    label: "Việt Nam",
-    value: "+84"
-  }], []);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col " + wrapClassName
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     className: "mb-1 " + labelClassName
   }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center h-10 rounded-lg border 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 " + buttonClassName
+    className: "border-r-2"
   }, /*#__PURE__*/React__default.createElement(Select$1, {
     className: 'w-max border-0',
     defaultValue: countryCode,
-    options: data,
+    options: options,
     optionClassName: "w-max",
     placeholder: "+84",
     onClick: setCountryCode,
-    selectClassName: "ps-0 pr-1",
+    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.icons
+          __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.label), /*#__PURE__*/React__default.createElement("div", {
+      }, 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,
@@ -7931,7 +7960,7 @@ var formatCurrency = function formatCurrency(amount) {
   return formattedAmount + " \u20AB";
 };
 var pattern = {
-  phoneNumberPattern: /^0[0-9]{9}$/
+  phoneNumberPattern: /^(?:\+84|0)\d{9}$/
 };
 var numberPattern = /^\d+$/;