s-platform-landing-section 0.1.8 → 0.1.10-alpha.1

package/dist/index.js

@@ -2,14 +2,13 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var reactRedux = require('react-redux');
-var fa = require('react-icons/fa');
 var io5 = require('react-icons/io5');
+var fa = require('react-icons/fa');
+var fi = require('react-icons/fi');
+var rx = require('react-icons/rx');
 var pi = require('react-icons/pi');
 var ci = require('react-icons/ci');
 var bs = require('react-icons/bs');
-var fi = require('react-icons/fi');
-var rx = require('react-icons/rx');
 var DatePicker = _interopDefault(require('react-datepicker'));
 require('react-datepicker/dist/react-datepicker.css');
 var fa6 = require('react-icons/fa6');
@@ -18,6 +17,233 @@ require('react-icons/io');
 var si = require('react-icons/si');
 var go = require('react-icons/go');
 
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var Button = function Button(props) {
+  var _shopConfigStyle$colo;
+  var _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$shopConfigStyl = props.shopConfigStyle,
+    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? function () {} : _props$onClick;
+  var _className = "text-white font-medium rounded-lg text-sm px-4 py-2.5 " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
+  var _style = _extends({
+    backgroundColor: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.primary
+  }, style);
+  return /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: _className,
+    style: _style,
+    onClick: onClick
+  }, label);
+};
+
+var NavBar7 = function NavBar7(props) {
+  var listRef = React.useRef(null);
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _props$shopConfig = props.shopConfig,
+    shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
+    shopConfigStyle = props.shopConfigStyle,
+    _props$routes = props.routes,
+    routes = _props$routes === void 0 ? [] : _props$routes,
+    _props$section = props.section,
+    section = _props$section === void 0 ? {} : _props$section,
+    _props$userInfo = props.userInfo,
+    userInfo = _props$userInfo === void 0 ? null : _props$userInfo,
+    _props$cartItems = props.cartItems,
+    cartItems = _props$cartItems === void 0 ? [] : _props$cartItems,
+    _props$navToLogin = props.navToLogin,
+    navToLogin = _props$navToLogin === void 0 ? function () {} : _props$navToLogin,
+    _props$navToRegister = props.navToRegister,
+    navToRegister = _props$navToRegister === void 0 ? function () {} : _props$navToRegister;
+  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
+    _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
+    primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
+    _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
+    textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
+    _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
+    textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
+    _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
+    background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
+    _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
+    bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6,
+    _shopConfigStyle$colo7 = _shopConfigStyle$colo.textButton,
+    textButton = _shopConfigStyle$colo7 === void 0 ? "#fff" : _shopConfigStyle$colo7;
+  var totalItem = cartItems.reduce(function (total, item) {
+    return total + item.quantity;
+  }, 0);
+  if (totalItem > 9) {
+    totalItem = "9+";
+  }
+  var cart = function cart() {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "relative cursor-pointer"
+    }, /*#__PURE__*/React__default.createElement(io5.IoCartOutline, {
+      style: {
+        fontSize: "30px",
+        color: primary
+      }
+    }), totalItem ? /*#__PURE__*/React__default.createElement("small", {
+      className: "absolute aspect-square flex items-center bg-danger px-[2px] text-xs rounded-full",
+      style: {
+        color: textButton,
+        top: 0,
+        right: 0
+      }
+    }, totalItem) : null));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full sticky top-0 shadow z-50",
+    style: {
+      background: background
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20",
+    style: {
+      color: textBody
+    }
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: "/",
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "object-cover w-12 h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
+    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+  }), /*#__PURE__*/React__default.createElement("h3", {
+    className: "text-xl md:text-2xl whitespace-nowrap font-semibold",
+    style: {
+      color: primary
+    }
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
+    className: "hidden lg:flex flex-1 items-center gap-4"
+  }, routes === null || routes === void 0 ? void 0 : routes.map(function (route, index) {
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: route === null || route === void 0 ? void 0 : route.route
+    }, (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? /*#__PURE__*/React__default.createElement("div", {
+      className: "py-1 border-b",
+      style: {
+        color: textHeading,
+        borderColor: textHeading
+      }
+    }, route === null || route === void 0 ? void 0 : route.label) : /*#__PURE__*/React__default.createElement("div", {
+      className: "py-1"
+    }, route === null || route === void 0 ? void 0 : route.label));
+  })), cart(), !userInfo ?
+  /*#__PURE__*/
+  React__default.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React__default.createElement(fa.FaUserCircle, {
+    color: "#fff",
+    size: 48
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col ml-2"
+  }, /*#__PURE__*/React__default.createElement("label", null, "Xin ch\xE0o!"), /*#__PURE__*/React__default.createElement("label", {
+    className: "font-semibold"
+  }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, "Nguyen Thanh Tung"))) :
+  /*#__PURE__*/
+  React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đăng nhập",
+    shopConfigStyle: shopConfigStyle,
+    onClick: function onClick() {
+      return navToLogin();
+    }
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: "Đăng ký",
+    shopConfigStyle: shopConfigStyle,
+    style: {
+      backgroundColor: "transparent",
+      borderColor: primary,
+      color: primary
+    },
+    className: "border",
+    onClick: function onClick() {
+      return navToRegister();
+    }
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: "/",
+    className: "flex flex-1 gap-2 items-center"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "object-cover w-12 h-12",
+    src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
+    alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
+  }), /*#__PURE__*/React__default.createElement("h3", {
+    className: "text-xl md:text-2xl font-semibold",
+    style: {
+      color: primary
+    }
+  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(fi.FiMenu, {
+    size: 32,
+    color: primary
+  })), isOpen ? /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute bg-[rgba(0,0,0,0.5)] h-screen w-full top-0 left-0 z-50 flex justify-end",
+    onClick: function onClick() {
+      setIsOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-full w-[80vw] max-w-[320px] p-4",
+    style: {
+      background: bgSecondary
+    },
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "flex w-full justify-end text-gray4",
+    onClick: function onClick() {
+      setIsOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(rx.RxCross2, {
+    size: 24
+  })), /*#__PURE__*/React__default.createElement("div", null, routes === null || routes === void 0 ? void 0 : routes.map(function (route, index) {
+    return /*#__PURE__*/React__default.createElement("a", {
+      href: route === null || route === void 0 ? void 0 : route.route
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "py-2",
+      style: (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? {
+        color: textHeading
+      } : null
+    }, route === null || route === void 0 ? void 0 : route.label));
+  })))) : null, cart()));
+};
+
 var SvgIcon = function SvgIcon(_ref) {
   var className = _ref.className,
     style = _ref.style;
@@ -82,60 +308,11 @@ var SectionTitle1 = function SectionTitle1(props) {
   }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-var Button = function Button(props) {
-  var _shopConfigStyle$colo;
-  var _props$label = props.label,
-    label = _props$label === void 0 ? "" : _props$label,
-    _props$className = props.className,
-    className = _props$className === void 0 ? "" : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$shopConfigStyl = props.shopConfigStyle,
-    shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
-    _props$onClick = props.onClick,
-    onClick = _props$onClick === void 0 ? function () {} : _props$onClick;
-  var _className = "text-white font-medium rounded-lg text-sm px-4 py-2.5 " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
-  var _style = _extends({
-    backgroundColor: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.primary
-  }, style);
-  return /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    className: _className,
-    style: _style,
-    onClick: onClick
-  }, label);
-};
-
 var Hero10 = function Hero10(props) {
   var _data$data, _data$data$, _data$data$$srcImages, _sectionData$, _sectionData$2, _sectionData$2$button;
   var shopConfigStyle = props.shopConfigStyle,
     data = props.data;
   var sectionData = data === null || data === void 0 ? void 0 : data.data;
-  var count = reactRedux.useSelector(function (state) {
-    return state.counter.value;
-  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-full bg-cover bg-center bg-no-repeat ",
     style: {
@@ -1574,12 +1751,12 @@ const hasStandardBrowserWebWorkerEnv = (() => {
 const origin = hasBrowserEnv && window.location.href || 'http://localhost';
 
 var utils$1 = {
-    __proto__: null,
-    hasBrowserEnv: hasBrowserEnv,
-    hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
-    hasStandardBrowserEnv: hasStandardBrowserEnv,
-    navigator: _navigator,
-    origin: origin
+  __proto__: null,
+  hasBrowserEnv: hasBrowserEnv,
+  hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
+  hasStandardBrowserEnv: hasStandardBrowserEnv,
+  navigator: _navigator,
+  origin: origin
 };
 
 var platform$1 = {
@@ -4718,8 +4895,8 @@ var callBound = function callBoundIntrinsic(name, allowMissing) {
 var _nodeResolve_empty = {};
 
 var _nodeResolve_empty$1 = {
-    __proto__: null,
-    'default': _nodeResolve_empty
+  __proto__: null,
+  'default': _nodeResolve_empty
 };
 
 var utilInspect = getCjsExportFromNamespace(_nodeResolve_empty$1);
@@ -6922,7 +7099,7 @@ var ProductImage = function ProductImage(props) {
   };
   return src ? /*#__PURE__*/React__default.createElement("img", {
     src: src,
-    className: className,
+    className: "w-full aspect-square " + className,
     style: size ? {
       width: size,
       height: size
@@ -8448,6 +8625,7 @@ exports.Hero11 = Hero11;
 exports.Hero12 = Hero11$1;
 exports.Hero13 = Hero13;
 exports.Links1 = Links1;
+exports.NavBar7 = NavBar7;
 exports.Partner1 = Partner1;
 exports.Products1 = Products1;
 exports.Products10 = Products10;