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

package/dist/angle-small-left~biOSnepC.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M10.6,12.71a1,1,0,0,1,0-1.42l4.59-4.58a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0L9.19,9.88a3,3,0,0,0,0,4.24l4.59,4.59a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.42Z"/></svg>

package/dist/angle-small-right~rycMvNof.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M15.4,9.88,10.81,5.29a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L14,11.29a1,1,0,0,1,0,1.42L9.4,17.29a1,1,0,0,0,1.41,1.42l4.59-4.59A3,3,0,0,0,15.4,9.88Z"/></svg>

package/dist/index.js

@@ -8504,6 +8504,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,
@@ -8518,6 +8520,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();
     }
@@ -16469,6 +16474,193 @@ var NewsDetail1 = function NewsDetail1(props) {
   }))) : null);
 };
 
+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 = React.useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var fieldRefs = React.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
+  })))));
+};
+
 exports.About1 = About1;
 exports.About5 = About5;
 exports.About6 = About6;
@@ -16499,6 +16691,7 @@ exports.Features2 = Features2;
 exports.Features3 = Features3;
 exports.Footer1 = Footer1;
 exports.Footer7 = Footer7;
+exports.Form = Form;
 exports.Gallery1 = Gallery1;
 exports.Gallery2 = Gallery2;
 exports.Gallery3 = Gallery3;