s-platform-landing-section 0.1.36-beta.10 → 0.1.36-beta.11

package/dist/index.modern.js

@@ -8501,6 +8501,8 @@ var ModalNotification = function ModalNotification(props) {
     onCloseFormBooking = props.onCloseFormBooking,
     _props$isButtonClose = props.isButtonClose,
     isButtonClose = _props$isButtonClose === void 0 ? true : _props$isButtonClose,
+    _props$isMaskClose = props.isMaskClose,
+    isMaskClose = _props$isMaskClose === void 0 ? false : _props$isMaskClose,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
     _props$style = props.style,
@@ -8515,6 +8517,9 @@ var ModalNotification = function ModalNotification(props) {
   }, []);
   var handleClickOutside = function handleClickOutside(event) {
     event.stopPropagation();
+    if (isMaskClose) {
+      return;
+    }
     if (onClose) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
@@ -16466,5 +16471,192 @@ var NewsDetail1 = function NewsDetail1(props) {
   }))) : null);
 };
 
-export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner4, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, BookingTable1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, CustomerRating8, CustomerRating9, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Gallery1, Gallery2, Gallery3, Hero1, Hero10, Hero11, Hero12, Hero13, Hero14, Hero15, Hero16, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, PageTitle2, PageTitle3, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem10, ProductItem11, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductItem8, ProductItem9, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products12, Products14, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, SectionTitle4, SectionTitle5, Select$1 as Select, ServiceDetail1, ShopHighlights10, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, ShopHighlights8, ShopHighlights9, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
+var submitFormApi = function submitFormApi(landingShopConfigId, data) {
+  return api({
+    method: "post",
+    url: endpointLandingShop + "/" + landingShopConfigId + "/form",
+    data: data
+  });
+};
+
+var Form = function Form(props) {
+  var _data$data, _data$data2, _data$data3;
+  var _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$SectionTitle = props.SectionTitle,
+    SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle,
+    _props$router = props.router,
+    router = _props$router === void 0 ? function () {} : _props$router;
+  var _shopConfigStyle$colo = shopConfigStyle.color,
+    _shopConfigStyle$colo2 = _shopConfigStyle$colo === void 0 ? {} : _shopConfigStyle$colo,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo2.background,
+    background = _shopConfigStyle$colo3 === void 0 ? "#fff" : _shopConfigStyle$colo3;
+  var fields = (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.fields) || [];
+  var redirectUrl = (data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : _data$data2.redirect_url) || "";
+  var srcImage = data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : _data$data3.srcImage;
+  var _useState = useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var fieldRefs = useRef({});
+  var getFieldRef = function getFieldRef(key) {
+    if (!fieldRefs.current[key]) {
+      fieldRefs.current[key] = React__default.createRef();
+    }
+    return fieldRefs.current[key];
+  };
+  var formatFieldsWithValue = function formatFieldsWithValue() {
+    return fields.map(function (field, index) {
+      var _ref$current;
+      var key = (field === null || field === void 0 ? void 0 : field.title) || "field-" + index;
+      var ref = getFieldRef(key);
+      var getValue = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getValue;
+      var value = getValue ? getValue() : undefined;
+      return _extends({}, field, {
+        value: value
+      });
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      setIsLoading(true);
+      return Promise.resolve(_finallyRethrows(function () {
+        return _catch(function () {
+          var isValid = true;
+          var payload = {};
+          fields.forEach(function (field, index) {
+            var _ref$current2, _ref$current3;
+            var key = (field === null || field === void 0 ? void 0 : field.title) || "field-" + index;
+            var ref = getFieldRef(key);
+            var validate = ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.validateData;
+            var getValue = ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getValue;
+            var ok = validate ? validate() : true;
+            if (ok === false) {
+              isValid = false;
+            }
+            payload[key] = getValue ? getValue() : undefined;
+          });
+          if (!isValid) return;
+          var fieldsWithValue = formatFieldsWithValue();
+          var body = {
+            title: data === null || data === void 0 ? void 0 : data.sectionTitle,
+            data: JSON.stringify(fieldsWithValue)
+          };
+          var _temp = function () {
+            if (shopConfig !== null && shopConfig !== void 0 && shopConfig.landingShopConfigId) {
+              return Promise.resolve(submitFormApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.landingShopConfigId, body)).then(function (res) {
+                var _res$data, _res$data$status;
+                if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == '200') {
+                  router === null || router === void 0 ? void 0 : router.push(redirectUrl || "/");
+                }
+              });
+            }
+          }();
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }, function (error) {
+          console.log(error);
+        });
+      }, function (_wasThrown, _result) {
+        setIsLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var renderField = function renderField(field, index) {
+    var _field$title;
+    var key = (field === null || field === void 0 ? void 0 : field.title) || "field-" + index;
+    var commonProps = {
+      label: field === null || field === void 0 ? void 0 : field.title,
+      placeholder: "Nh\u1EADp " + ((field === null || field === void 0 ? void 0 : (_field$title = field.title) === null || _field$title === void 0 ? void 0 : _field$title.toLowerCase()) || ""),
+      className: "!bg-bgSecondary",
+      rules: field !== null && field !== void 0 && field.required ? [{
+        type: "required",
+        message: "Bắt buộc nhập"
+      }] : [],
+      labelClassName: "font-medium"
+    };
+    if ((field === null || field === void 0 ? void 0 : field.type) === "phone") {
+      return /*#__PURE__*/React__default.createElement(InputPhoneNumber, _extends({
+        key: key
+      }, commonProps, {
+        rules: [].concat(commonProps.rules, [{
+          type: "pattern",
+          pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
+          message: "Số điện thoại không hợp lệ!"
+        }]),
+        className: "bg-white",
+        wrapClassName: "w-full",
+        ref: getFieldRef(key)
+      }));
+    }
+    if ((field === null || field === void 0 ? void 0 : field.type) === "area") {
+      return /*#__PURE__*/React__default.createElement(TextArea, _extends({
+        key: key
+      }, commonProps, {
+        className: "w-full",
+        textareaClassName: "w-full p-3 bg-white",
+        ref: getFieldRef(key)
+      }));
+    }
+    var extraRules = [];
+    if ((field === null || field === void 0 ? void 0 : field.type) === "email") {
+      extraRules.push({
+        type: "pattern",
+        pattern: /\S+@\S+\.\S+/,
+        message: "Email không hợp lệ"
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(Input, _extends({
+      key: key
+    }, commonProps, {
+      type: (field === null || field === void 0 ? void 0 : field.type) === "email" ? "email" : "text",
+      ref: getFieldRef(key),
+      rules: [].concat(commonProps.rules, extraRules)
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative w-full px-4 xl:px-20 py-12",
+    style: {
+      backgroundColor: background
+    }
+  }, SectionTitle ? /*#__PURE__*/React__default.createElement(SectionTitle, {
+    data: data,
+    shopConfigStyle: shopConfigStyle
+  }) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-12 items-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, srcImage ? /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: srcImage,
+    alt: "form-banner",
+    className: "w-full h-auto rounded-xl object-cover"
+  })) : null), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid gap-4 rounded-2xl p-6 border bg-white"
+  }, fields !== null && fields !== void 0 && fields.length ? /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 gap-4"
+  }, fields === null || fields === void 0 ? void 0 : fields.map(renderField)) : /*#__PURE__*/React__default.createElement("div", null, "Ch\u01B0a c\xF3 c\u1EA5u h\xECnh tr\u01B0\u1EDDng"), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-center"
+  }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2 justify-center items-center"
+  }, /*#__PURE__*/React__default.createElement(Loading, {
+    size: 24
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "ml-2"
+  }, "\u0110ang g\u1EEDi th\xF4ng tin...")) : /*#__PURE__*/React__default.createElement(Button, {
+    label: "Gửi thông tin",
+    shopConfigStyle: shopConfigStyle,
+    onClick: handleSubmit,
+    disabled: isLoading
+  })))));
+};
+
+export { About1, About5, About6, Address1, Banner1, Banner2, Banner3, Banner4, Banner7, BannerFull1, BannerFull2, Booking1, BookingForm6, BookingTable1, Breadcrumb1, Button, Carts1, Contact1, CustomerRating1, CustomerRating10, CustomerRating5, CustomerRating6, CustomerRating8, CustomerRating9, DateTimePicker, Employees1, Features2, Features3, Footer1, Footer7, Form, Gallery1, Gallery2, Gallery3, Hero1, Hero10, Hero11, Hero12, Hero13, Hero14, Hero15, Hero16, Hero2, Hero5, Hero6, Input, InputPhoneNumber, Links1, ModalNotification, NavBar1, NavBar7, News1, NewsDetail1, NewsHighlight1, PageTitle1, PageTitle2, PageTitle3, Partner1, ProductCategory2, ProductDetail10, ProductDetail11, ProductHighlight1, ProductHot1, ProductHot3, ProductImage, ProductItem10, ProductItem11, ProductItem2, ProductItem3, ProductItem4, ProductItem5, ProductItem6, ProductItem7, ProductItem8, ProductItem9, ProductList5, ProductList7, ProductSale2, ProductSearch1, Products10, Products11, Products12, Products14, Products2, Products3, Products9, ProductsTop1, SearchBar2, SearchBar5, SearchBar6, SearchProduct1, SectionTitle1, SectionTitle2, SectionTitle3, SectionTitle4, SectionTitle5, Select$1 as Select, ServiceDetail1, ShopHighlights10, ShopHighlights2, ShopHighlights5, ShopHighlights6, ShopHighlights7, ShopHighlights8, ShopHighlights9, TextArea, TreatmentDetail1, TreatmentItem1, TreatmentsCategory7, TreatmentsList6, TreatmentsList7, VideoFull1 };
 //# sourceMappingURL=index.modern.js.map