s-platform-landing-section 0.1.10-alpha.2 → 0.1.10-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.css +479 -0
  2. package/dist/index.js +2638 -1232
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +2642 -1247
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +2 -1
  7. package/dist/no-photo~QhcVGlPG.svg +0 -7
package/dist/index.modern.js CHANGED
@@ -1,43 +1,20 @@
1
- import React__default, { useRef, useState, useEffect, createElement, forwardRef, useImperativeHandle } from 'react';
2
- import { IoCartOutline, IoLocationOutline } from 'react-icons/io5';
3
- import { FaUserCircle, FaPhone, FaChevronLeft, FaChevronRight, FaArrowLeft, FaArrowRight as FaArrowRight$1, FaFacebookSquare, FaFacebookMessenger } from 'react-icons/fa';
1
+ import React__default, { useState, useEffect, useRef, createElement, forwardRef, useImperativeHandle, memo } from 'react';
2
+ import { IoCartOutline, IoLocationOutline, IoChevronBackOutline, IoChevronForwardOutline, IoCallOutline } from 'react-icons/io5';
3
+ import { FaUserCircle, FaPhone, FaChevronLeft, FaChevronRight, FaAngleUp, FaAngleDown, FaCheckCircle, FaArrowLeft, FaArrowRight as FaArrowRight$1, FaFacebookSquare, FaFacebookMessenger, FaFacebookF } from 'react-icons/fa';
4
4
  import { FiMenu } from 'react-icons/fi';
5
5
  import { RxCross2 } from 'react-icons/rx';
6
6
  import { PiHandbagSimpleLight } from 'react-icons/pi';
7
7
  import { CiSearch } from 'react-icons/ci';
8
8
  import { BsFilterLeft, BsCurrencyDollar } from 'react-icons/bs';
9
+ import { FaMinus, FaPlus, FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
10
+ import { LuSearch } from 'react-icons/lu';
9
11
  import DatePicker from 'react-datepicker';
10
12
  import 'react-datepicker/dist/react-datepicker.css';
11
- import { FaArrowsRotate, FaStar, FaRegStarHalfStroke, FaRegStar } from 'react-icons/fa6';
12
- import 'react-icons/lu';
13
- import 'react-icons/io';
13
+ import { IoMdCheckmark, IoIosHeartEmpty } from 'react-icons/io';
14
14
  import { SiVisa, SiZalo } from 'react-icons/si';
15
15
  import { GoCreditCard } from 'react-icons/go';
16
16
 
17
- function _extends() {
18
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
19
- for (var e = 1; e < arguments.length; e++) {
20
- var t = arguments[e];
21
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
22
- }
23
- return n;
24
- }, _extends.apply(null, arguments);
25
- }
26
- function _objectDestructuringEmpty(t) {
27
- if (null == t) throw new TypeError("Cannot destructure " + t);
28
- }
29
- function _objectWithoutPropertiesLoose(r, e) {
30
- if (null == r) return {};
31
- var t = {};
32
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
33
- if (e.includes(n)) continue;
34
- t[n] = r[n];
35
- }
36
- return t;
37
- }
38
-
39
17
  var Button = function Button(props) {
40
- var _shopConfigStyle$colo;
41
18
  var _props$label = props.label,
42
19
  label = _props$label === void 0 ? "" : _props$label,
43
20
  _props$className = props.className,
@@ -47,21 +24,21 @@ var Button = function Button(props) {
47
24
  _props$shopConfigStyl = props.shopConfigStyle,
48
25
  shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
49
26
  _props$onClick = props.onClick,
50
- onClick = _props$onClick === void 0 ? function () {} : _props$onClick;
51
- 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;
52
- var _style = _extends({
53
- backgroundColor: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.primary
54
- }, style);
27
+ onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
28
+ _props$type = props.type,
29
+ type = _props$type === void 0 ? "primary" : _props$type;
30
+ var _className = type === "primary" ? "text-textButton bg-primary" : "text-primary bg-transparent border border-primary";
31
+ _className = "font-medium rounded-lg text-sm px-4 py-2.5 hover:text-textButton hover:bg-primary hover:opacity-80 " + _className + " " + ((shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.buttonClass) || "") + " " + className;
55
32
  return /*#__PURE__*/React__default.createElement("button", {
56
33
  type: "button",
57
34
  className: _className,
58
- style: _style,
35
+ style: style,
59
36
  onClick: onClick
60
37
  }, label);
61
38
  };
62
39
 
63
40
  var NavBar7 = function NavBar7(props) {
64
- var listRef = useRef(null);
41
+ var _routes$filter;
65
42
  var _useState = useState(false),
66
43
  isOpen = _useState[0],
67
44
  setIsOpen = _useState[1];
@@ -76,61 +53,38 @@ var NavBar7 = function NavBar7(props) {
76
53
  userInfo = _props$userInfo === void 0 ? null : _props$userInfo,
77
54
  _props$cartItems = props.cartItems,
78
55
  cartItems = _props$cartItems === void 0 ? [] : _props$cartItems,
79
- _props$navToLogin = props.navToLogin,
80
- navToLogin = _props$navToLogin === void 0 ? function () {} : _props$navToLogin,
81
- _props$navToRegister = props.navToRegister,
82
- navToRegister = _props$navToRegister === void 0 ? function () {} : _props$navToRegister;
83
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
84
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
85
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
86
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
87
- textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
88
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
89
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
90
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
91
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
92
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
93
- bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6,
94
- _shopConfigStyle$colo7 = _shopConfigStyle$colo.textButton,
95
- textButton = _shopConfigStyle$colo7 === void 0 ? "#fff" : _shopConfigStyle$colo7;
96
- console.log("NavBar7 routes", routes);
97
- console.log("NavBar7 userInfo", userInfo);
98
- console.log("NavBar7 cartItems", cartItems);
99
- var totalItem = cartItems.reduce(function (total, item) {
100
- return total + item.quantity;
101
- }, 0);
102
- if (totalItem > 9) {
103
- totalItem = "9+";
104
- }
56
+ _props$useSelector = props.useSelector,
57
+ useSelector = _props$useSelector === void 0 ? null : _props$useSelector;
58
+ var _useState2 = useState(""),
59
+ totalItem = _useState2[0],
60
+ setTotalItem = _useState2[1];
61
+ useEffect(function () {
62
+ console.log("NavBar7 cartItems", cartItems);
63
+ var totalItem = cartItems.reduce(function (total, item) {
64
+ return total + item.quantity;
65
+ }, 0);
66
+ if (totalItem > 9) {
67
+ totalItem = "9+";
68
+ }
69
+ setTotalItem(totalItem);
70
+ }, [cartItems]);
71
+ console.log("NavBar7 useSelector", useSelector);
105
72
  var cart = function cart() {
106
- return /*#__PURE__*/React__default.createElement("div", {
107
- className: "flex"
73
+ return /*#__PURE__*/React__default.createElement("a", {
74
+ href: "/carts"
108
75
  }, /*#__PURE__*/React__default.createElement("div", {
109
76
  className: "relative cursor-pointer"
110
77
  }, /*#__PURE__*/React__default.createElement(IoCartOutline, {
111
- style: {
112
- fontSize: "30px",
113
- color: primary
114
- }
78
+ className: "text-primary",
79
+ size: 30
115
80
  }), totalItem ? /*#__PURE__*/React__default.createElement("small", {
116
- className: "absolute aspect-square flex items-center bg-danger px-[2px] text-xs rounded-full",
117
- style: {
118
- color: textButton,
119
- top: 0,
120
- right: 0
121
- }
81
+ className: "absolute aspect-square flex items-center justify-center bg-danger w-5 text-xs rounded-full text-white -top-1 -right-1"
122
82
  }, totalItem) : null));
123
83
  };
124
84
  return /*#__PURE__*/React__default.createElement("div", {
125
- className: "w-full sticky top-0 shadow z-50",
126
- style: {
127
- background: background
128
- }
85
+ className: "w-full sticky top-0 shadow z-50 bg-background"
129
86
  }, /*#__PURE__*/React__default.createElement("div", {
130
- className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20",
131
- style: {
132
- color: textBody
133
- }
87
+ className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
134
88
  }, /*#__PURE__*/React__default.createElement("a", {
135
89
  href: "/",
136
90
  className: "flex items-center gap-2"
@@ -139,58 +93,46 @@ var NavBar7 = function NavBar7(props) {
139
93
  src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
140
94
  alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
141
95
  }), /*#__PURE__*/React__default.createElement("h3", {
142
- className: "text-xl md:text-2xl whitespace-nowrap font-semibold",
143
- style: {
144
- color: primary
145
- }
96
+ className: "text-xl md:text-2xl whitespace-nowrap font-semibold text-primary"
146
97
  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
147
98
  className: "hidden lg:flex flex-1 items-center gap-4"
148
- }, routes === null || routes === void 0 ? void 0 : routes.map(function (route, index) {
99
+ }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
100
+ return e === null || e === void 0 ? void 0 : e.isShow;
101
+ })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (route, index) {
149
102
  return /*#__PURE__*/React__default.createElement("a", {
150
103
  href: route === null || route === void 0 ? void 0 : route.route
151
104
  }, (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? /*#__PURE__*/React__default.createElement("div", {
152
- className: "py-1 border-b",
153
- style: {
154
- color: textHeading,
155
- borderColor: textHeading
156
- }
105
+ className: "py-1 border-b text-textHeading border-textHeading"
157
106
  }, route === null || route === void 0 ? void 0 : route.label) : /*#__PURE__*/React__default.createElement("div", {
158
107
  className: "py-1"
159
108
  }, route === null || route === void 0 ? void 0 : route.label));
160
- })), cart(), !userInfo ?
109
+ })), cart(), userInfo ?
161
110
  /*#__PURE__*/
162
111
  React__default.createElement("div", {
163
112
  className: "flex justify-center"
164
113
  }, /*#__PURE__*/React__default.createElement(FaUserCircle, {
165
- color: "#fff",
114
+ className: "text-bgSecondary",
166
115
  size: 48
167
116
  }), /*#__PURE__*/React__default.createElement("div", {
168
117
  className: "flex flex-col ml-2"
169
118
  }, /*#__PURE__*/React__default.createElement("label", null, "Xin ch\xE0o!"), /*#__PURE__*/React__default.createElement("label", {
170
119
  className: "font-semibold"
171
- }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, "Nguyen Thanh Tung"))) :
120
+ }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name))) :
172
121
  /*#__PURE__*/
173
122
  React__default.createElement("div", {
174
123
  className: "flex gap-2"
124
+ }, /*#__PURE__*/React__default.createElement("a", {
125
+ href: "/account"
175
126
  }, /*#__PURE__*/React__default.createElement(Button, {
176
127
  label: "Đăng nhập",
177
- shopConfigStyle: shopConfigStyle,
178
- onClick: function onClick() {
179
- return navToLogin();
180
- }
181
- }), /*#__PURE__*/React__default.createElement(Button, {
128
+ shopConfigStyle: shopConfigStyle
129
+ })), /*#__PURE__*/React__default.createElement("a", {
130
+ href: "/account"
131
+ }, /*#__PURE__*/React__default.createElement(Button, {
182
132
  label: "Đăng ký",
183
133
  shopConfigStyle: shopConfigStyle,
184
- style: {
185
- backgroundColor: "transparent",
186
- borderColor: primary,
187
- color: primary
188
- },
189
- className: "border",
190
- onClick: function onClick() {
191
- return navToRegister();
192
- }
193
- }))), /*#__PURE__*/React__default.createElement("div", {
134
+ type: 'outline'
135
+ })))), /*#__PURE__*/React__default.createElement("div", {
194
136
  className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
195
137
  }, /*#__PURE__*/React__default.createElement("a", {
196
138
  href: "/",
@@ -200,28 +142,22 @@ var NavBar7 = function NavBar7(props) {
200
142
  src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
201
143
  alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
202
144
  }), /*#__PURE__*/React__default.createElement("h3", {
203
- className: "text-xl md:text-2xl font-semibold",
204
- style: {
205
- color: primary
206
- }
207
- }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
145
+ className: "text-xl md:text-2xl font-semibold text-primary"
146
+ }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), cart(), /*#__PURE__*/React__default.createElement("button", {
208
147
  type: "button",
209
148
  onClick: function onClick() {
210
149
  setIsOpen(true);
211
150
  }
212
151
  }, /*#__PURE__*/React__default.createElement(FiMenu, {
213
152
  size: 32,
214
- color: primary
153
+ className: "text-primary"
215
154
  })), isOpen ? /*#__PURE__*/React__default.createElement("div", {
216
155
  className: "absolute bg-[rgba(0,0,0,0.5)] h-screen w-full top-0 left-0 z-50 flex justify-end",
217
156
  onClick: function onClick() {
218
157
  setIsOpen(false);
219
158
  }
220
159
  }, /*#__PURE__*/React__default.createElement("div", {
221
- className: "h-full w-[80vw] max-w-[320px] p-4",
222
- style: {
223
- background: bgSecondary
224
- },
160
+ className: "h-full w-[80vw] max-w-[320px] p-4 bg-bgSecondary",
225
161
  onClick: function onClick(event) {
226
162
  return event.stopPropagation();
227
163
  }
@@ -236,12 +172,9 @@ var NavBar7 = function NavBar7(props) {
236
172
  return /*#__PURE__*/React__default.createElement("a", {
237
173
  href: route === null || route === void 0 ? void 0 : route.route
238
174
  }, /*#__PURE__*/React__default.createElement("div", {
239
- className: "py-2",
240
- style: (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? {
241
- color: textHeading
242
- } : null
175
+ className: "py-2 " + ((section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
243
176
  }, route === null || route === void 0 ? void 0 : route.label));
244
- })))) : null, cart()));
177
+ })))) : null));
245
178
  };
246
179
 
247
180
  var SvgIcon = function SvgIcon(_ref) {
@@ -267,44 +200,20 @@ var SvgIcon = function SvgIcon(_ref) {
267
200
  }));
268
201
  };
269
202
  var SectionTitle1 = function SectionTitle1(props) {
270
- var _props$shopConfigStyl = props.shopConfigStyle,
271
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
272
- _props$data = props.data,
203
+ var _props$data = props.data,
273
204
  data = _props$data === void 0 ? {} : _props$data;
274
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
275
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
276
- textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
277
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
278
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
279
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textSecondary,
280
- textSecondary = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4;
281
205
  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
282
- className: "text-center text-2xl md:text-4xl font-merienda font-semibold leading-relaxed",
283
- style: {
284
- color: textHeading
285
- }
206
+ className: "text-center text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
286
207
  }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, /*#__PURE__*/React__default.createElement("div", {
287
208
  className: "flex items-center justify-center"
288
209
  }, /*#__PURE__*/React__default.createElement("div", {
289
- className: "w-32 h-0.5 rounded-full",
290
- style: {
291
- backgroundColor: secondary
292
- }
210
+ className: "w-32 h-0.5 rounded-full bg-secondary"
293
211
  }), /*#__PURE__*/React__default.createElement(SvgIcon, {
294
- className: "w-9 h-9",
295
- style: {
296
- color: secondary
297
- }
212
+ className: "w-9 h-9 text-secondary"
298
213
  }), /*#__PURE__*/React__default.createElement("div", {
299
- className: " w-32 h-0.5 rounded-full",
300
- style: {
301
- backgroundColor: secondary
302
- }
214
+ className: " w-32 h-0.5 rounded-full bg-secondary"
303
215
  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
304
- className: "text-xl font-medium text-center leading-relaxed",
305
- style: {
306
- color: textSecondary
307
- }
216
+ className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
308
217
  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
309
218
  };
310
219
 
@@ -323,12 +232,14 @@ var Hero10 = function Hero10(props) {
323
232
  }), /*#__PURE__*/React__default.createElement("div", {
324
233
  className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
325
234
  }, /*#__PURE__*/React__default.createElement("div", {
326
- className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont)
235
+ className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
327
236
  }, sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.title), sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : (_sectionData$2$button = _sectionData$2.buttons) === null || _sectionData$2$button === void 0 ? void 0 : _sectionData$2$button.map(function (button) {
328
- return /*#__PURE__*/React__default.createElement(Button, {
237
+ return /*#__PURE__*/React__default.createElement("a", {
238
+ href: (button === null || button === void 0 ? void 0 : button.route) || (button === null || button === void 0 ? void 0 : button.link) || "#"
239
+ }, /*#__PURE__*/React__default.createElement(Button, {
329
240
  label: button === null || button === void 0 ? void 0 : button.label,
330
241
  shopConfigStyle: shopConfigStyle
331
- });
242
+ }));
332
243
  })));
333
244
  };
334
245
 
@@ -346,6 +257,8 @@ var Dash = function Dash(props) {
346
257
  });
347
258
  };
348
259
 
260
+ var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
261
+
349
262
  var Hero11 = function Hero11(props) {
350
263
  var _data$data;
351
264
  var _props$shopConfigStyl = props.shopConfigStyle,
@@ -356,14 +269,9 @@ var Hero11 = function Hero11(props) {
356
269
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
357
270
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
358
271
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
359
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
360
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
361
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
272
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
362
273
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
363
- className: "relative w-full py-12 px-4 xl:px-20",
364
- style: {
365
- backgroundColor: background
366
- }
274
+ className: "" + SECTION_DEFAULT_CLASS
367
275
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
368
276
  data: data,
369
277
  shopConfigStyle: shopConfigStyle
@@ -383,14 +291,8 @@ var Hero11 = function Hero11(props) {
383
291
 
384
292
  var Hero11$1 = function Hero11(props) {
385
293
  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
386
- var _props$shopConfigStyl = props.shopConfigStyle,
387
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
388
- _props$data = props.data,
294
+ var _props$data = props.data,
389
295
  data = _props$data === void 0 ? {} : _props$data;
390
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
391
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
392
- textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
393
- console.log("Hero11 data", data);
394
296
  return /*#__PURE__*/React__default.createElement("div", {
395
297
  className: "relative w-full bg-cover bg-center bg-no-repeat grid grid-cols-1 md:grid-cols-2",
396
298
  style: {
@@ -403,10 +305,7 @@ var Hero11$1 = function Hero11(props) {
403
305
  }), /*#__PURE__*/React__default.createElement("div", {
404
306
  className: "relative p-12 z-1"
405
307
  }, /*#__PURE__*/React__default.createElement("div", {
406
- className: "text-2xl md:text-4xl leading-[1.6] " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont),
407
- style: {
408
- color: textHeading
409
- }
308
+ className: "text-2xl md:text-4xl leading-[1.6] font-headingFont text-textHeading"
410
309
  }, data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$ = _data$data2[0]) === null || _data$data2$ === void 0 ? void 0 : _data$data2$.title), /*#__PURE__*/React__default.createElement("div", {
411
310
  className: "pt-6"
412
311
  }, data === null || data === void 0 ? void 0 : (_data$data3 = data.data) === null || _data$data3 === void 0 ? void 0 : (_data$data3$ = _data$data3[0]) === null || _data$data3$ === void 0 ? void 0 : _data$data3$.description)));
@@ -431,6 +330,57 @@ function _catch(body, recover) {
431
330
  return result;
432
331
  }
433
332
 
333
+ function _arrayLikeToArray(r, a) {
334
+ (null == a || a > r.length) && (a = r.length);
335
+ for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
336
+ return n;
337
+ }
338
+ function _createForOfIteratorHelperLoose(r, e) {
339
+ var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
340
+ if (t) return (t = t.call(r)).next.bind(t);
341
+ if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
342
+ t && (r = t);
343
+ var o = 0;
344
+ return function () {
345
+ return o >= r.length ? {
346
+ done: !0
347
+ } : {
348
+ done: !1,
349
+ value: r[o++]
350
+ };
351
+ };
352
+ }
353
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
354
+ }
355
+ function _extends() {
356
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
357
+ for (var e = 1; e < arguments.length; e++) {
358
+ var t = arguments[e];
359
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
360
+ }
361
+ return n;
362
+ }, _extends.apply(null, arguments);
363
+ }
364
+ function _objectDestructuringEmpty(t) {
365
+ if (null == t) throw new TypeError("Cannot destructure " + t);
366
+ }
367
+ function _objectWithoutPropertiesLoose(r, e) {
368
+ if (null == r) return {};
369
+ var t = {};
370
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
371
+ if (e.includes(n)) continue;
372
+ t[n] = r[n];
373
+ }
374
+ return t;
375
+ }
376
+ function _unsupportedIterableToArray(r, a) {
377
+ if (r) {
378
+ if ("string" == typeof r) return _arrayLikeToArray(r, a);
379
+ var t = {}.toString.call(r).slice(8, -1);
380
+ return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
381
+ }
382
+ }
383
+
434
384
  function bind(fn, thisArg) {
435
385
  return function wrap() {
436
386
  return fn.apply(thisArg, arguments);
@@ -1751,12 +1701,12 @@ const hasStandardBrowserWebWorkerEnv = (() => {
1751
1701
  const origin = hasBrowserEnv && window.location.href || 'http://localhost';
1752
1702
 
1753
1703
  var utils$1 = {
1754
- __proto__: null,
1755
- hasBrowserEnv: hasBrowserEnv,
1756
- hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
1757
- hasStandardBrowserEnv: hasStandardBrowserEnv,
1758
- navigator: _navigator,
1759
- origin: origin
1704
+ __proto__: null,
1705
+ hasBrowserEnv: hasBrowserEnv,
1706
+ hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
1707
+ hasStandardBrowserEnv: hasStandardBrowserEnv,
1708
+ navigator: _navigator,
1709
+ origin: origin
1760
1710
  };
1761
1711
 
1762
1712
  var platform$1 = {
@@ -4895,8 +4845,8 @@ var callBound = function callBoundIntrinsic(name, allowMissing) {
4895
4845
  var _nodeResolve_empty = {};
4896
4846
 
4897
4847
  var _nodeResolve_empty$1 = {
4898
- __proto__: null,
4899
- 'default': _nodeResolve_empty
4848
+ __proto__: null,
4849
+ 'default': _nodeResolve_empty
4900
4850
  };
4901
4851
 
4902
4852
  var utilInspect = getCjsExportFromNamespace(_nodeResolve_empty$1);
@@ -6544,21 +6494,30 @@ var getProductListApi = function getProductListApi(shopId, params) {
6544
6494
  }
6545
6495
  });
6546
6496
  };
6497
+ var getDetailProductApi = function getDetailProductApi(shopId, productId) {
6498
+ return api({
6499
+ method: "get",
6500
+ url: "/products/" + productId + "/shops/" + shopId + "/info",
6501
+ headers: {
6502
+ shopId: shopId
6503
+ }
6504
+ });
6505
+ };
6547
6506
 
6548
6507
  var CategoryController = function CategoryController(props) {
6549
6508
  var shopConfig = props.shopConfig,
6550
- params = props.params;
6509
+ _props$types = props.types,
6510
+ types = _props$types === void 0 ? "" : _props$types;
6551
6511
  var _useState = useState([]),
6552
6512
  categories = _useState[0],
6553
6513
  setCategories = _useState[1];
6554
- var defaultParams = {};
6555
6514
  useEffect(function () {
6556
6515
  getCategoryList();
6557
6516
  }, []);
6558
6517
  var getCategoryList = function getCategoryList() {
6559
6518
  try {
6560
6519
  var _temp = _catch(function () {
6561
- return Promise.resolve(getShopCategoriesApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, _extends({}, defaultParams, params))).then(function (res) {
6520
+ return Promise.resolve(getShopCategoriesApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, types)).then(function (res) {
6562
6521
  var _res$data, _res$data$status;
6563
6522
  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) {
6564
6523
  var _res$data2;
@@ -6859,22 +6818,12 @@ var Features1 = function Features1(props) {
6859
6818
  _props$SectionTitle = props.SectionTitle,
6860
6819
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
6861
6820
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
6862
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
6863
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
6864
6821
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
6865
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
6866
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
6867
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
6868
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
6869
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
6822
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
6870
6823
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
6871
- className: "relative w-full py-12 px-4 xl:px-20",
6872
- style: {
6873
- backgroundColor: background
6874
- }
6824
+ className: SECTION_DEFAULT_CLASS + " relative"
6875
6825
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
6876
- data: data,
6877
- shopConfigStyle: shopConfigStyle
6826
+ data: data
6878
6827
  }), /*#__PURE__*/React__default.createElement("div", {
6879
6828
  className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
6880
6829
  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (it, index) {
@@ -6884,35 +6833,20 @@ var Features1 = function Features1(props) {
6884
6833
  }, /*#__PURE__*/React__default.createElement("div", {
6885
6834
  className: "relative w-40 h-24 flex items-center justify-center m-auto md:m-0"
6886
6835
  }, /*#__PURE__*/React__default.createElement("div", {
6887
- className: "absolute w-40 h-24 rounded-2xl z-10",
6888
- style: {
6889
- backgroundColor: primary
6890
- }
6836
+ className: "absolute w-40 h-24 rounded-2xl z-10 bg-primary"
6891
6837
  }), /*#__PURE__*/React__default.createElement("div", {
6892
- className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0",
6893
- style: {
6894
- backgroundColor: secondary
6895
- }
6838
+ className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
6896
6839
  }), /*#__PURE__*/React__default.createElement("div", {
6897
6840
  className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
6898
6841
  style: {
6899
6842
  backgroundImage: "url(" + it.srcImage + ")"
6900
6843
  }
6901
6844
  })), /*#__PURE__*/React__default.createElement("p", {
6902
- className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg",
6903
- style: {
6904
- color: textBody
6905
- }
6845
+ className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg"
6906
6846
  }, it.title), /*#__PURE__*/React__default.createElement("div", {
6907
- className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full",
6908
- style: {
6909
- backgroundColor: secondary
6910
- }
6847
+ className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full bg-secondary"
6911
6848
  }), /*#__PURE__*/React__default.createElement("p", {
6912
- className: "text-base mx-auto md:mx-0 text-center md:text-start",
6913
- style: {
6914
- color: textBody
6915
- }
6849
+ className: "text-base mx-auto md:mx-0 text-center md:text-start"
6916
6850
  }, it.description));
6917
6851
  }))), /*#__PURE__*/React__default.createElement(Dash, {
6918
6852
  color: secondary
@@ -6920,43 +6854,20 @@ var Features1 = function Features1(props) {
6920
6854
  };
6921
6855
 
6922
6856
  var Features2 = function Features2(props) {
6923
- var data = props.data,
6924
- shopConfigStyle = props.shopConfigStyle;
6925
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
6926
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
6927
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
6928
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
6929
- textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
6930
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.background,
6931
- background = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
6932
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
6933
- bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
6857
+ var data = props.data;
6934
6858
  var sectionData = data === null || data === void 0 ? void 0 : data.data;
6935
6859
  return /*#__PURE__*/React__default.createElement("div", {
6936
- className: "w-full pt-10 px-4 xl:px-20",
6937
- style: {
6938
- background: background,
6939
- color: textBody
6940
- }
6860
+ className: "" + SECTION_DEFAULT_CLASS
6941
6861
  }, /*#__PURE__*/React__default.createElement("div", {
6942
- className: "p-6 grid grid-cols-4 gap-8 rounded-xl",
6943
- style: {
6944
- background: bgSecondary
6945
- }
6862
+ className: "p-6 grid grid-cols-4 gap-8 rounded-xl bg-bgSecondary"
6946
6863
  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
6947
6864
  return /*#__PURE__*/React__default.createElement("div", {
6948
6865
  className: "flex flex-col gap-2 items-center text-sm lg:text-lg font-semibold text-center",
6949
- key: "dfgg-" + index,
6950
- style: {
6951
- color: textBody
6952
- }
6866
+ key: "dfgg-" + index
6953
6867
  }, /*#__PURE__*/React__default.createElement("img", {
6954
6868
  src: item === null || item === void 0 ? void 0 : item.svgImage,
6955
- className: "w-12 md:w-16 lg:w-20 xl:w-24",
6956
- alt: "logo",
6957
- style: {
6958
- color: primary
6959
- }
6869
+ className: "w-12 md:w-16 lg:w-20 xl:w-24 text-primary",
6870
+ alt: "logo"
6960
6871
  }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title));
6961
6872
  })));
6962
6873
  };
@@ -7008,6 +6919,12 @@ var ProductController = function ProductController(props) {
7008
6919
  var _useState = useState([]),
7009
6920
  products = _useState[0],
7010
6921
  setProducts = _useState[1];
6922
+ var _useState2 = useState(true),
6923
+ loading = _useState2[0],
6924
+ setLoading = _useState2[1];
6925
+ var _useState3 = useState(),
6926
+ page = _useState3[0],
6927
+ setPage = _useState3[1];
7011
6928
  var defaultParams = {
7012
6929
  page: 0,
7013
6930
  size: 8,
@@ -7021,12 +6938,18 @@ var ProductController = function ProductController(props) {
7021
6938
  var getProductList = function getProductList() {
7022
6939
  try {
7023
6940
  var _temp = _catch(function () {
7024
- return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, _extends({}, defaultParams, params))).then(function (res) {
6941
+ setLoading(true);
6942
+ var filterParams = _extends({}, defaultParams, params);
6943
+ console.log("filterParams params", params);
6944
+ console.log("filterParams", filterParams);
6945
+ return Promise.resolve(getProductListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, filterParams)).then(function (res) {
7025
6946
  var _res$data, _res$data$status;
7026
6947
  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) {
7027
- var _res$data2;
6948
+ var _res$data2, _res$data3;
7028
6949
  setProducts(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
6950
+ setPage(res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.page);
7029
6951
  }
6952
+ setLoading(false);
7030
6953
  });
7031
6954
  }, function (e) {
7032
6955
  console.log(e);
@@ -7037,7 +6960,9 @@ var ProductController = function ProductController(props) {
7037
6960
  }
7038
6961
  };
7039
6962
  return {
7040
- products: products
6963
+ products: products,
6964
+ loading: loading,
6965
+ page: page
7041
6966
  };
7042
6967
  };
7043
6968
 
@@ -7110,819 +7035,502 @@ var ProductImage = function ProductImage(props) {
7110
7035
  });
7111
7036
  };
7112
7037
 
7113
- var Treatments1 = function Treatments1(props) {
7114
- var _props$shopConfigStyl = props.shopConfigStyle,
7115
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7116
- _props$data = props.data,
7117
- data = _props$data === void 0 ? {} : _props$data,
7118
- _props$SectionTitle = props.SectionTitle,
7119
- SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7120
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7121
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7122
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7123
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7124
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7125
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7126
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
7127
- var _useState = useState({
7128
- size: 1
7129
- }),
7130
- params = _useState[0];
7131
- var _ProductController = ProductController(_extends({}, props, {
7132
- params: params
7133
- })),
7134
- _ProductController$pr = _ProductController.products,
7135
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7136
- console.log("Treatments1 products 1", products);
7137
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7138
- className: "relative w-full py-12 px-4 xl:px-20",
7139
- style: {
7140
- backgroundColor: background
7141
- }
7142
- }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7143
- data: data,
7144
- shopConfigStyle: shopConfigStyle
7145
- }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
7146
- var _product$productInfo, _product$productInfo2;
7147
- return /*#__PURE__*/React__default.createElement("div", {
7148
- className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
7149
- key: index
7150
- }, index % 2 ? null : /*#__PURE__*/React__default.createElement(ProductImage, {
7151
- product: product === null || product === void 0 ? void 0 : product.productInfo,
7152
- className: "aspect-video rounded-2xl"
7153
- }), /*#__PURE__*/React__default.createElement("div", {
7154
- className: "" + (index % 2 ? "text-right" : "text-left")
7155
- }, /*#__PURE__*/React__default.createElement("div", {
7156
- className: "font-medium text-2xl",
7157
- style: {
7158
- color: textBody
7159
- }
7160
- }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
7161
- className: "mt-4",
7162
- style: {
7163
- color: textBody
7164
- },
7165
- dangerouslySetInnerHTML: {
7166
- __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
7038
+ var ModalNotification = function ModalNotification(props) {
7039
+ var modalRef = useRef(null);
7040
+ var onClose = props.onClose,
7041
+ onCloseFormBooking = props.onCloseFormBooking;
7042
+ var handleClickOutside = function handleClickOutside(event) {
7043
+ if (modalRef.current && !modalRef.current.contains(event.target)) {
7044
+ onClose();
7045
+ if (onCloseFormBooking && typeof onCloseFormBooking === 'function') {
7046
+ console.log("đóng nhá");
7047
+ onCloseFormBooking();
7167
7048
  }
7168
- }), /*#__PURE__*/React__default.createElement(Button, {
7169
- label: "Đặt lịch ngay",
7170
- shopConfigStyle: shopConfigStyle,
7171
- className: "mt-4"
7172
- })), index % 2 ? /*#__PURE__*/React__default.createElement(ProductImage, {
7173
- product: product === null || product === void 0 ? void 0 : product.productInfo,
7174
- className: "aspect-video rounded-2xl"
7175
- }) : null);
7176
- })), /*#__PURE__*/React__default.createElement(Dash, {
7177
- color: secondary
7178
- }));
7179
- };
7180
-
7181
- var _path$1;
7182
- function _extends$2() {
7183
- return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
7184
- for (var e = 1; e < arguments.length; e++) {
7185
- var t = arguments[e];
7186
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
7187
7049
  }
7188
- return n;
7189
- }, _extends$2.apply(null, arguments);
7190
- }
7191
- function SvgAngleSmallLeft(props) {
7192
- return /*#__PURE__*/createElement("svg", _extends$2({
7193
- xmlns: "http://www.w3.org/2000/svg",
7194
- viewBox: "0 0 24 24",
7195
- width: 512,
7196
- height: 512
7197
- }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
7198
- d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
7199
- })));
7200
- }
7050
+ };
7051
+ useEffect(function () {
7052
+ document.addEventListener('click', handleClickOutside);
7053
+ return function () {
7054
+ document.removeEventListener('click', handleClickOutside);
7055
+ };
7056
+ }, []);
7057
+ return /*#__PURE__*/React__default.createElement("div", {
7058
+ className: "fixed inset-0 bg-black flex items-center justify-center bg-opacity-50 z-50 "
7059
+ }, /*#__PURE__*/React__default.createElement("div", {
7060
+ className: " flex items-center justify-center relative bg-red",
7061
+ ref: modalRef
7062
+ }, props === null || props === void 0 ? void 0 : props.children, /*#__PURE__*/React__default.createElement("button", {
7063
+ className: "absolute top-4 right-4",
7064
+ onClick: onClose
7065
+ }, /*#__PURE__*/React__default.createElement(RxCross2, null))));
7066
+ };
7201
7067
 
7202
- var _path$2;
7203
- function _extends$3() {
7204
- return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
7205
- for (var e = 1; e < arguments.length; e++) {
7206
- var t = arguments[e];
7207
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
7068
+ var getEmployeeListApi = function getEmployeeListApi(shopId) {
7069
+ return api({
7070
+ method: "get",
7071
+ url: "/chain-employment-profile/filter-employ-by-customer",
7072
+ params: {
7073
+ shopIds: shopId
7074
+ },
7075
+ headers: {
7076
+ shopId: shopId
7208
7077
  }
7209
- return n;
7210
- }, _extends$3.apply(null, arguments);
7211
- }
7212
- function SvgAngleSmallRight(props) {
7213
- return /*#__PURE__*/createElement("svg", _extends$3({
7214
- xmlns: "http://www.w3.org/2000/svg",
7215
- viewBox: "0 0 24 24",
7216
- width: 512,
7217
- height: 512
7218
- }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
7219
- d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
7220
- })));
7221
- }
7078
+ });
7079
+ };
7222
7080
 
7223
- var ScrollHorizontal = function ScrollHorizontal(props) {
7224
- var _props$datas = props.datas,
7225
- datas = _props$datas === void 0 ? [] : _props$datas,
7226
- _props$className = props.className,
7227
- className = _props$className === void 0 ? "" : _props$className,
7228
- _props$style = props.style,
7229
- style = _props$style === void 0 ? {} : _props$style,
7230
- _props$primaryColor = props.primaryColor,
7231
- primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7232
- _props$renderItem = props.renderItem,
7233
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7234
- var scrollContainerRef = useRef(null);
7235
- var _useState = useState(true),
7236
- isScrolledToLeft = _useState[0],
7237
- setIsScrolledToLeft = _useState[1];
7238
- var _useState2 = useState(false),
7239
- isScrolledToRight = _useState2[0],
7240
- setIsScrolledToRight = _useState2[1];
7241
- var checkScrollPosition = function checkScrollPosition() {
7242
- if (scrollContainerRef.current) {
7243
- var _scrollContainerRef$c = scrollContainerRef.current,
7244
- _scrollLeft = _scrollContainerRef$c.scrollLeft,
7245
- scrollWidth = _scrollContainerRef$c.scrollWidth,
7246
- clientWidth = _scrollContainerRef$c.clientWidth;
7247
- setIsScrolledToLeft(_scrollLeft === 0);
7248
- setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
7081
+ var EmployeeController = function EmployeeController(props) {
7082
+ var _props$isAutoGetList = props.isAutoGetList,
7083
+ isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
7084
+ shopConfig = props.shopConfig;
7085
+ var _useState = useState([]),
7086
+ listEmployment = _useState[0],
7087
+ setListEmployment = _useState[1];
7088
+ useEffect(function () {
7089
+ if (isAutoGetList) {
7090
+ getListEmployee();
7249
7091
  }
7250
- };
7251
- var scrollLeft = function scrollLeft() {
7252
- if (scrollContainerRef.current) {
7253
- scrollContainerRef.current.scrollBy({
7254
- left: -200,
7255
- behavior: "smooth"
7256
- });
7257
- setTimeout(checkScrollPosition, 300);
7092
+ }, [isAutoGetList]);
7093
+ var getListEmployee = function getListEmployee() {
7094
+ try {
7095
+ return Promise.resolve(_catch(function () {
7096
+ return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).then(function (res) {
7097
+ var _res$data, _res$data$status;
7098
+ 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) {
7099
+ var _res$data2;
7100
+ setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
7101
+ }
7102
+ return res;
7103
+ });
7104
+ }, function (e) {
7105
+ console.log(e);
7106
+ }));
7107
+ } catch (e) {
7108
+ return Promise.reject(e);
7258
7109
  }
7259
7110
  };
7260
- var scrollRight = function scrollRight() {
7261
- if (scrollContainerRef.current) {
7262
- scrollContainerRef.current.scrollBy({
7263
- left: 200,
7264
- behavior: "smooth"
7265
- });
7266
- setTimeout(checkScrollPosition, 300);
7267
- }
7111
+ return {
7112
+ listEmployment: listEmployment,
7113
+ getListEmployee: getListEmployee
7268
7114
  };
7269
- useEffect(function () {
7270
- checkScrollPosition();
7271
- }, [datas]);
7272
- return /*#__PURE__*/React__default.createElement("div", {
7273
- className: "flex " + className,
7274
- style: style
7275
- }, /*#__PURE__*/React__default.createElement("div", {
7276
- className: "flex w-full overflow-x-hidden",
7277
- ref: scrollContainerRef,
7278
- onScroll: checkScrollPosition
7279
- }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
7280
- return renderItem(item, index);
7281
- })), /*#__PURE__*/React__default.createElement("div", {
7282
- className: "flex gap-2 items-center px-4"
7283
- }, /*#__PURE__*/React__default.createElement("div", {
7284
- onClick: scrollLeft,
7285
- className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
7286
- style: {
7287
- backgroundColor: isScrolledToLeft ? "#BDBDBD" : primaryColor
7288
- }
7289
- }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
7290
- width: 24,
7291
- height: 24,
7292
- fill: "#fff"
7293
- })), /*#__PURE__*/React__default.createElement("div", {
7294
- onClick: scrollRight,
7295
- className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
7296
- style: {
7297
- backgroundColor: isScrolledToRight ? "#BDBDBD" : primaryColor
7298
- }
7299
- }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
7300
- width: 24,
7301
- height: 24,
7302
- fill: "#fff"
7303
- }))));
7304
7115
  };
7305
7116
 
7306
- var getDurationValue = function getDurationValue(attributes) {
7307
- var _parsedAttributes$fin;
7308
- var parsedAttributes = JSON.parse(attributes || "[]");
7309
- return ((_parsedAttributes$fin = parsedAttributes.find(function (attr) {
7310
- return attr.name === "Thời lượng (phút) / buổi";
7311
- })) === null || _parsedAttributes$fin === void 0 ? void 0 : _parsedAttributes$fin.value[0]) || "0";
7117
+ var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
7118
+ return api({
7119
+ method: "post",
7120
+ url: "/spa-schedule/customer/create",
7121
+ data: data,
7122
+ headers: {
7123
+ shopId: shopId
7124
+ }
7125
+ });
7312
7126
  };
7313
7127
 
7314
- var formatCurrency = function formatCurrency(amount) {
7315
- if (isNaN(amount)) {
7316
- return '0 ₫';
7317
- }
7318
- var roundedAmount = Math.round(amount);
7319
- var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
7320
- return formattedAmount + " \u20AB";
7128
+ var _excluded = ["productName"];
7129
+ var BookingController = function BookingController(props) {
7130
+ _objectDestructuringEmpty(props);
7131
+ var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
7132
+ try {
7133
+ return Promise.resolve(_catch(function () {
7134
+ var data = {
7135
+ appId: "SSPA",
7136
+ customerName: customerName,
7137
+ customerPhone: customerPhone.replace("+", ""),
7138
+ isSellService: true,
7139
+ scheduleDate: new Date(scheduleDate).getTime(),
7140
+ services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
7141
+ var productName = _ref.productName,
7142
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
7143
+ return rest;
7144
+ }),
7145
+ shopId: shopId
7146
+ };
7147
+ return Promise.resolve(createSpaScheduleApi(shopId, data));
7148
+ }, function (e) {
7149
+ console.log(e);
7150
+ }));
7151
+ } catch (e) {
7152
+ return Promise.reject(e);
7153
+ }
7154
+ };
7155
+ return {
7156
+ createSchedule: createSchedule
7157
+ };
7321
7158
  };
7322
7159
 
7323
- var ProductPrice = function ProductPrice(props) {
7324
- var product = props.product,
7160
+ var Input = forwardRef(function (props, ref) {
7161
+ var _props$label = props.label,
7162
+ label = _props$label === void 0 ? "" : _props$label,
7163
+ _props$placeholder = props.placeholder,
7164
+ placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
7325
7165
  _props$className = props.className,
7326
7166
  className = _props$className === void 0 ? "" : _props$className,
7327
- _props$style = props.style,
7328
- style = _props$style === void 0 ? {} : _props$style;
7329
- return /*#__PURE__*/React__default.createElement("div", {
7330
- className: className
7331
- }, product !== null && product !== void 0 && product.priceBeforeDiscount ? /*#__PURE__*/React__default.createElement("span", {
7332
- className: "text-gray3 line-through"
7333
- }, formatCurrency(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null, /*#__PURE__*/React__default.createElement("span", {
7334
- className: "text-primary font-semibold",
7335
- style: style
7336
- }, formatCurrency(product === null || product === void 0 ? void 0 : product.price)));
7337
- };
7338
-
7339
- var ProductItem1 = function ProductItem1(props) {
7340
- var product = props.product;
7341
- return /*#__PURE__*/React__default.createElement("div", {
7342
- className: "flex"
7343
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
7344
- product: product,
7345
- className: "!w-20 rounded-lg"
7346
- }), /*#__PURE__*/React__default.createElement("div", {
7347
- className: "ml-4 border-b border-stroke flex-1"
7348
- }, /*#__PURE__*/React__default.createElement("div", {
7349
- className: "text-lg"
7350
- }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
7351
- className: "flex mt-2"
7352
- }, /*#__PURE__*/React__default.createElement("div", {
7353
- className: "flex-1 text-gray3"
7354
- }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes), " ph\xFAt"), /*#__PURE__*/React__default.createElement(ProductPrice, {
7355
- product: product
7356
- }))));
7357
- };
7358
-
7359
- var Treatments1$1 = function Treatments1(props) {
7360
- var _props$shopConfigStyl = props.shopConfigStyle,
7361
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7362
- _props$data = props.data,
7363
- data = _props$data === void 0 ? {} : _props$data,
7364
- _props$SectionTitle = props.SectionTitle,
7365
- SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7366
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7367
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7368
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7369
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7370
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7371
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7372
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7373
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.textButton,
7374
- textButton = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7375
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
7376
- background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7377
- var _useState = useState({}),
7378
- params = _useState[0];
7379
- var _CategoryController = CategoryController(_extends({}, props)),
7380
- categories = _CategoryController.categories;
7381
- var _ProductController = ProductController(_extends({}, props, {
7382
- params: params
7383
- })),
7384
- _ProductController$pr = _ProductController.products,
7385
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7386
- var _useState2 = useState(0),
7387
- selectedCategory = _useState2[0],
7388
- setSelectedCategory = _useState2[1];
7389
- console.log("Treatments2 products");
7390
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7391
- className: "relative w-full py-12 px-4 xl:px-20",
7392
- style: {
7393
- backgroundColor: background
7167
+ _props$inputClassName = props.inputClassName,
7168
+ inputClassName = _props$inputClassName === void 0 ? "" : _props$inputClassName,
7169
+ _props$wrapClassName = props.wrapClassName,
7170
+ wrapClassName = _props$wrapClassName === void 0 ? "" : _props$wrapClassName,
7171
+ _props$labelClassName = props.labelClassName,
7172
+ labelClassName = _props$labelClassName === void 0 ? "" : _props$labelClassName,
7173
+ _props$name = props.name,
7174
+ name = _props$name === void 0 ? "" : _props$name,
7175
+ _props$onChange = props.onChange,
7176
+ onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
7177
+ _props$defaultValue = props.defaultValue,
7178
+ defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
7179
+ _props$type = props.type,
7180
+ type = _props$type === void 0 ? "text" : _props$type,
7181
+ _props$rules = props.rules,
7182
+ rules = _props$rules === void 0 ? [] : _props$rules,
7183
+ _props$isQuantity = props.isQuantity,
7184
+ isQuantity = _props$isQuantity === void 0 ? false : _props$isQuantity,
7185
+ _props$min = props.min,
7186
+ min = _props$min === void 0 ? 0 : _props$min,
7187
+ _props$max = props.max,
7188
+ max = _props$max === void 0 ? null : _props$max;
7189
+ var _useState = useState(defaultValue),
7190
+ value = _useState[0],
7191
+ _setValue = _useState[1];
7192
+ var _useState2 = useState(""),
7193
+ error = _useState2[0],
7194
+ _setError = _useState2[1];
7195
+ var refInput = useRef();
7196
+ useImperativeHandle(ref, function () {
7197
+ return {
7198
+ validateData: function validateData() {
7199
+ return _validateData();
7200
+ },
7201
+ setValue: function setValue(text) {
7202
+ return _setValue(text);
7203
+ },
7204
+ getValue: function getValue() {
7205
+ return value;
7206
+ },
7207
+ setError: function setError(err) {
7208
+ return _setError(err);
7209
+ }
7210
+ };
7211
+ });
7212
+ var _validateData = function _validateData() {
7213
+ var count = 0;
7214
+ for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
7215
+ var _e$pattern;
7216
+ var e = _step.value;
7217
+ if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
7218
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7219
+ count++;
7220
+ break;
7221
+ } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
7222
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7223
+ count++;
7224
+ break;
7225
+ }
7394
7226
  }
7395
- }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7396
- data: data,
7397
- shopConfigStyle: shopConfigStyle
7398
- }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
7399
- datas: [{
7400
- categoryId: 0,
7401
- cateName: "Tất cả"
7402
- }].concat(categories),
7403
- style: {
7404
- backgroundColor: secondary
7405
- },
7406
- className: "mt-6 rounded-lg overflow-hidden",
7407
- primaryColor: primary,
7408
- renderItem: function renderItem(item, index) {
7409
- return /*#__PURE__*/React__default.createElement("div", {
7410
- key: index,
7411
- className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base",
7412
- onClick: function onClick() {
7413
- return setSelectedCategory(item.categoryId);
7414
- },
7415
- style: {
7416
- backgroundColor: selectedCategory === item.categoryId ? primary : "inherit",
7417
- color: selectedCategory === item.categoryId ? textButton : textBody
7418
- }
7419
- }, item === null || item === void 0 ? void 0 : item.cateName);
7227
+ if (count) {
7228
+ return false;
7229
+ } else {
7230
+ _setError('');
7231
+ return true;
7420
7232
  }
7421
- }), /*#__PURE__*/React__default.createElement("div", {
7422
- className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
7423
- }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
7424
- return /*#__PURE__*/React__default.createElement(ProductItem1, {
7425
- key: index,
7426
- product: product === null || product === void 0 ? void 0 : product.productInfo
7427
- });
7428
- }))), /*#__PURE__*/React__default.createElement(Dash, {
7429
- color: secondary
7430
- }));
7431
- };
7432
-
7433
- var ProductItem2 = function ProductItem2(props) {
7434
- var product = props.product;
7435
- return /*#__PURE__*/React__default.createElement("div", {
7436
- className: "text-center"
7437
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
7438
- product: product,
7439
- className: "max-w-[240px] rounded-full mx-auto"
7440
- }), /*#__PURE__*/React__default.createElement(ProductPrice, {
7441
- product: product,
7442
- className: "text-lg mt-4"
7443
- }), /*#__PURE__*/React__default.createElement("div", {
7444
- className: "text-lg mt-2"
7445
- }, product === null || product === void 0 ? void 0 : product.productName));
7446
- };
7447
-
7448
- var Products1 = function Products1(props) {
7449
- var _props$shopConfigStyl = props.shopConfigStyle,
7450
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7451
- _props$data = props.data,
7452
- data = _props$data === void 0 ? {} : _props$data,
7453
- _props$SectionTitle = props.SectionTitle,
7454
- SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7455
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7456
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7457
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7458
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
7459
- background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7460
- var _useState = useState({
7461
- size: 4
7462
- }),
7463
- params = _useState[0];
7464
- var _ProductController = ProductController(_extends({}, props, {
7465
- params: params
7466
- })),
7467
- _ProductController$pr = _ProductController.products,
7468
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7469
- console.log("Products1 products");
7470
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7471
- className: "w-full py-12 px-4 xl:px-20 text-center",
7472
- style: {
7473
- backgroundColor: background
7233
+ };
7234
+ var handleOnChange = function handleOnChange(event) {
7235
+ var value = event.target.value;
7236
+ if (isQuantity) {
7237
+ value = parseInt(value) || 1;
7474
7238
  }
7475
- }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7476
- data: data,
7477
- shopConfigStyle: shopConfigStyle
7478
- }), /*#__PURE__*/React__default.createElement("div", {
7479
- className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
7480
- }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
7481
- return /*#__PURE__*/React__default.createElement(ProductItem2, {
7482
- key: index,
7483
- product: product === null || product === void 0 ? void 0 : product.productInfo
7484
- });
7485
- })), /*#__PURE__*/React__default.createElement(Button, {
7486
- label: "Xem tất cả",
7487
- shopConfigStyle: shopConfigStyle,
7488
- className: "mt-12"
7489
- })), /*#__PURE__*/React__default.createElement(Dash, {
7490
- color: secondary
7239
+ _setValue(value);
7240
+ onChange === null || onChange === void 0 ? void 0 : onChange(value);
7241
+ };
7242
+ var changeQuantity = function changeQuantity(quantity) {
7243
+ var newValue = parseInt(value) + quantity;
7244
+ if (newValue > min && (max === null || newValue <= max)) {
7245
+ _setValue(newValue);
7246
+ onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
7247
+ }
7248
+ };
7249
+ var _className = "h-10 py-1 px-2 border border-stroke rounded focus:outline-none focus:ring-0 " + className;
7250
+ var _inputClassName = (isQuantity ? "text-center w-12" : "") + " " + inputClassName;
7251
+ var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
7252
+ return (e === null || e === void 0 ? void 0 : e.type) === "required";
7491
7253
  }));
7492
- };
7493
-
7494
- var ItemProduct = function ItemProduct(props) {
7495
- var _shopConfigStyle$colo, _shopConfigStyle$colo2, _shopConfigStyle$colo3;
7496
- var product = props.product,
7497
- shopConfigStyle = props.shopConfigStyle;
7254
+ var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
7255
+ className: "text-danger"
7256
+ }, " *") : null;
7498
7257
  return /*#__PURE__*/React__default.createElement("div", {
7499
- className: "pb-4 rounded-2xl w-full",
7500
- style: {
7501
- background: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.bgSecondary
7502
- }
7503
- }, /*#__PURE__*/React__default.createElement("div", {
7504
- className: "relative pt-2 flex justify-center h-32 sm:h-40 lg:h-52"
7505
- }, /*#__PURE__*/React__default.createElement("a", {
7506
- href: "#"
7507
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
7508
- product: product,
7509
- className: "aspect-w-1 aspect-h-1 max-h-32 sm:max-h-40 lg:max-h-52 object-cover"
7510
- })), product && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && +(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price) && /*#__PURE__*/React__default.createElement("label", {
7511
- className: "absolute bg-red-600 rounded-r-lg sm:px-2",
7512
- style: {
7513
- top: "10%",
7514
- color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo2 = shopConfigStyle.color) === null || _shopConfigStyle$colo2 === void 0 ? void 0 : _shopConfigStyle$colo2.textButton
7258
+ className: wrapClassName
7259
+ }, label ? /*#__PURE__*/React__default.createElement("div", {
7260
+ className: "mb-1 " + labelClassName
7261
+ }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
7262
+ className: "flex gap-2 " + _className
7263
+ }, isQuantity ? /*#__PURE__*/React__default.createElement("button", {
7264
+ onClick: function onClick() {
7265
+ return changeQuantity(-1);
7515
7266
  }
7516
- }, ((product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) - (product === null || product === void 0 ? void 0 : product.price)) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) * 100, "%")), /*#__PURE__*/React__default.createElement("div", {
7517
- className: "px-4 h-[100px] mt-6"
7518
- }, /*#__PURE__*/React__default.createElement("label", {
7519
- className: "line-clamp-2 lg:h-12 lg:block"
7520
- }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
7521
- className: "mt-3 md:flex md:justify-between flex-col"
7522
- }, /*#__PURE__*/React__default.createElement(ProductPrice, {
7523
- product: product,
7524
- style: {
7525
- color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo3 = shopConfigStyle.color) === null || _shopConfigStyle$colo3 === void 0 ? void 0 : _shopConfigStyle$colo3.primary
7267
+ }, /*#__PURE__*/React__default.createElement(FaMinus, null)) : null, /*#__PURE__*/React__default.createElement("input", {
7268
+ type: type,
7269
+ name: name,
7270
+ value: value,
7271
+ placeholder: placeholder,
7272
+ onChange: handleOnChange,
7273
+ required: required,
7274
+ className: _inputClassName,
7275
+ ref: refInput
7276
+ }), isQuantity ? /*#__PURE__*/React__default.createElement("button", {
7277
+ onClick: function onClick() {
7278
+ return changeQuantity(1);
7526
7279
  }
7527
- }))));
7528
- };
7280
+ }, /*#__PURE__*/React__default.createElement(FaPlus, null)) : null), error ? /*#__PURE__*/React__default.createElement("div", {
7281
+ className: "text-danger"
7282
+ }, error) : null);
7283
+ });
7529
7284
 
7530
- var Carousel = function Carousel(props) {
7531
- var carouselRef = useRef(null);
7285
+ var Select = forwardRef(function (props, ref) {
7286
+ var _Object$keys;
7532
7287
  var _useState = useState(false),
7533
- isScrolledToLeft = _useState[0],
7534
- setIsScrolledToLeft = _useState[1];
7535
- var _useState2 = useState(true),
7536
- isScrolledToRight = _useState2[0],
7537
- setIsScrolledToRight = _useState2[1];
7538
- var _props$datas = props.datas,
7539
- datas = _props$datas === void 0 ? [] : _props$datas,
7288
+ isOpen = _useState[0],
7289
+ setIsOpen = _useState[1];
7290
+ var _useState2 = useState([]),
7291
+ listOptions = _useState2[0],
7292
+ setListOptions = _useState2[1];
7293
+ var selectRef = useRef(null);
7294
+ var _useState3 = useState(""),
7295
+ error = _useState3[0],
7296
+ _setError = _useState3[1];
7297
+ var _props$label = props.label,
7298
+ label = _props$label === void 0 ? "" : _props$label,
7299
+ _props$placeholder = props.placeholder,
7300
+ placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
7540
7301
  _props$className = props.className,
7541
7302
  className = _props$className === void 0 ? "" : _props$className,
7542
- _props$style = props.style,
7543
- style = _props$style === void 0 ? {} : _props$style,
7544
- _props$primaryColor = props.primaryColor,
7545
- primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7303
+ _props$rules = props.rules,
7304
+ rules = _props$rules === void 0 ? [] : _props$rules,
7305
+ _props$options = props.options,
7306
+ options = _props$options === void 0 ? [] : _props$options,
7307
+ _props$value = props.value,
7308
+ value = _props$value === void 0 ? [] : _props$value,
7546
7309
  _props$renderItem = props.renderItem,
7547
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7548
- var handleClickPrevImg = function handleClickPrevImg() {
7549
- if (carouselRef.current) {
7550
- setIsScrolledToLeft(true);
7551
- setIsScrolledToRight(false);
7552
- carouselRef.current.scrollBy({
7553
- left: -300,
7554
- behavior: "smooth"
7555
- });
7310
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem,
7311
+ displayItem = props.displayItem,
7312
+ searchOption = props.searchOption,
7313
+ handleSearchOption = props.handleSearchOption;
7314
+ var dropdownRef = useRef(null);
7315
+ var _useState4 = useState('bottom'),
7316
+ dropdownPosition = _useState4[0],
7317
+ setDropdownPosition = _useState4[1];
7318
+ useEffect(function () {
7319
+ var updateDropdownPosition = function updateDropdownPosition() {
7320
+ if (selectRef.current && dropdownRef.current) {
7321
+ var selectRect = selectRef.current.getBoundingClientRect();
7322
+ var spaceBelow = window.innerHeight - selectRect.bottom;
7323
+ var spaceAbove = selectRect.top;
7324
+ if (spaceBelow < spaceAbove) {
7325
+ setDropdownPosition('top');
7326
+ } else {
7327
+ setDropdownPosition('bottom');
7328
+ }
7329
+ }
7330
+ };
7331
+ if (isOpen) {
7332
+ updateDropdownPosition();
7333
+ window.addEventListener('resize', updateDropdownPosition);
7556
7334
  }
7557
- };
7558
- var handleClickNextImg = function handleClickNextImg() {
7559
- setIsScrolledToRight(true);
7560
- setIsScrolledToLeft(false);
7561
- if (carouselRef.current) {
7562
- carouselRef.current.scrollBy({
7563
- left: 300,
7564
- behavior: "smooth"
7565
- });
7335
+ return function () {
7336
+ window.removeEventListener('resize', updateDropdownPosition);
7337
+ };
7338
+ }, [isOpen]);
7339
+ var handleClickOutside = function handleClickOutside(event) {
7340
+ if (selectRef.current && !selectRef.current.contains(event.target)) {
7341
+ setIsOpen(false);
7566
7342
  }
7567
7343
  };
7344
+ useEffect(function () {
7345
+ setListOptions(options);
7346
+ document.addEventListener('click', handleClickOutside);
7347
+ return function () {
7348
+ document.removeEventListener('click', handleClickOutside);
7349
+ };
7350
+ }, [options]);
7351
+ useImperativeHandle(ref, function () {
7352
+ return {
7353
+ validateData: function validateData() {
7354
+ return _validateData();
7355
+ },
7356
+ setError: function setError(err) {
7357
+ return _setError(err);
7358
+ }
7359
+ };
7360
+ });
7361
+ var _validateData = function _validateData() {
7362
+ var count = 0;
7363
+ for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
7364
+ var _e$pattern;
7365
+ var e = _step.value;
7366
+ if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && (value === null || value === void 0 ? void 0 : value.length) <= 0) {
7367
+ console.log("chưa chọn gì");
7368
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7369
+ count++;
7370
+ break;
7371
+ } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
7372
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7373
+ count++;
7374
+ break;
7375
+ }
7376
+ }
7377
+ if (count) {
7378
+ return false;
7379
+ } else {
7380
+ _setError('');
7381
+ return true;
7382
+ }
7383
+ };
7384
+ var handleSearch = function handleSearch(e) {
7385
+ var listOptions = handleSearchOption(e);
7386
+ setListOptions(listOptions);
7387
+ };
7388
+ var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
7389
+ return (e === null || e === void 0 ? void 0 : e.type) === "required";
7390
+ }));
7391
+ var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
7392
+ className: "text-danger"
7393
+ }, " *") : null;
7568
7394
  return /*#__PURE__*/React__default.createElement("div", {
7569
- className: "relative " + className + " ",
7570
- style: style
7571
- }, /*#__PURE__*/React__default.createElement("div", {
7572
- className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
7573
- ref: carouselRef
7574
- }, datas && datas.length > 0 && datas.map(function (item, index) {
7575
- return renderItem(item, index);
7576
- })), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
7577
- className: " hidden md:block bg-gray3 p-3 rounded-full absolute top-[45%] left-[-8px] lg:left-[-1%]",
7578
- style: {
7579
- backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
7580
- },
7581
- onClick: handleClickPrevImg
7582
- }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
7583
- className: "text-sm lg:text-lg text-white"
7584
- })), /*#__PURE__*/React__default.createElement("button", {
7585
- className: " hidden md:block p-3 rounded-full absolute top-[45%] right-[-2%] lg:right-0",
7586
- style: {
7587
- backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
7588
- },
7589
- onClick: handleClickNextImg
7590
- }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
7591
- className: "text-sm lg:text-lg text-white"
7592
- }))));
7593
- };
7594
-
7595
- var Products2 = function Products2(props) {
7596
- var shopConfigStyle = props.shopConfigStyle,
7597
- data = props.data;
7598
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7599
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7600
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7601
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7602
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7603
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7604
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7605
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7606
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7607
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
7608
- textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7609
- var _ProductController = ProductController(props),
7610
- _ProductController$pr = _ProductController.products,
7611
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7612
- console.log("Products2 products");
7613
- return /*#__PURE__*/React__default.createElement("div", {
7614
- className: "pt-10 px-4 xl:px-20",
7615
- style: {
7616
- background: background,
7617
- color: textBody
7395
+ ref: selectRef,
7396
+ className: className + " relative "
7397
+ }, label ? /*#__PURE__*/React__default.createElement("div", {
7398
+ className: "mb-1"
7399
+ }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
7400
+ className: className + " bg-white rounded-lg"
7401
+ }, /*#__PURE__*/React__default.createElement("button", {
7402
+ className: "w-full h-10 bg-transparent flex justify-between items-center px-3 py-2",
7403
+ onClick: function onClick() {
7404
+ setIsOpen(!isOpen);
7618
7405
  }
7406
+ }, displayItem && (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(value)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0 && typeof displayItem === "function" ? displayItem(value) : /*#__PURE__*/React__default.createElement("div", {
7407
+ className: "flex justify-between items-center w-full"
7619
7408
  }, /*#__PURE__*/React__default.createElement("div", {
7620
- className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
7621
- style: {
7622
- background: secondary
7623
- }
7624
- }, /*#__PURE__*/React__default.createElement("h2", {
7625
- className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5 pb-4",
7409
+ className: "text-gray3 line-clamp-1"
7410
+ }, placeholder), /*#__PURE__*/React__default.createElement("div", {
7411
+ className: "ms-1"
7412
+ }, /*#__PURE__*/React__default.createElement(FaAngleUp, {
7413
+ className: "text-xs"
7414
+ }), /*#__PURE__*/React__default.createElement(FaAngleDown, {
7415
+ className: "text-xs"
7416
+ })))), isOpen ? /*#__PURE__*/React__default.createElement("div", {
7417
+ ref: dropdownRef,
7626
7418
  style: {
7627
- color: textButton
7628
- }
7629
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
7630
- datas: products,
7631
- primaryColor: primary,
7632
- renderItem: function renderItem(item, index) {
7633
- return /*#__PURE__*/React__default.createElement("div", {
7634
- key: "carousel-" + index,
7635
- className: " min-w-[40vw] object-cover sm:min-w-[25vw] lg:min-w-[22vw] xl:min-w-[20vw] pe-4 xl:pe-6"
7636
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7637
- product: item.productInfo,
7638
- shopConfigStyle: shopConfigStyle
7639
- }));
7419
+ background: "#FFFFFF"
7420
+ },
7421
+ className: className + " absolute p-1 my-2 rounded-2xl w-full z-50 border " + (dropdownPosition === 'top' ? 'bottom-full mb-2' : 'top-full mt-2')
7422
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
7423
+ className: "px-3 flex items-center border-b-[1px]"
7424
+ }, /*#__PURE__*/React__default.createElement(LuSearch, {
7425
+ className: "inline text-gray3 me-2"
7426
+ }), /*#__PURE__*/React__default.createElement("input", {
7427
+ type: "text",
7428
+ className: "py-2 w-full border-0 focus:outline-none focus:ring-0",
7429
+ placeholder: "T\xECm ki\u1EBFm",
7430
+ value: searchOption,
7431
+ onChange: function onChange(e) {
7432
+ handleSearch(e);
7640
7433
  }
7641
- })));
7642
- };
7434
+ })), /*#__PURE__*/React__default.createElement("div", null, listOptions && listOptions.length > 0 ? listOptions.map(function (item, index) {
7435
+ return renderItem(item, index);
7436
+ }) : /*#__PURE__*/React__default.createElement("div", {
7437
+ className: "py-6 text-center"
7438
+ }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3")))) : null), error ? /*#__PURE__*/React__default.createElement("div", {
7439
+ className: "text-danger"
7440
+ }, error) : null);
7441
+ });
7442
+ var Select$1 = memo(Select);
7643
7443
 
7644
- var CarouselItem = function CarouselItem(props) {
7645
- var listRef = useRef(null);
7646
- var _useState = useState(false),
7647
- isScrolledToLeft = _useState[0],
7648
- setIsScrolledToLeft = _useState[1];
7649
- var _useState2 = useState(true),
7650
- isScrolledToRight = _useState2[0],
7651
- setIsScrolledToRight = _useState2[1];
7652
- var _props$datas = props.datas,
7653
- datas = _props$datas === void 0 ? [] : _props$datas,
7444
+ var DateTimePicker = forwardRef(function (props, ref) {
7445
+ var _props$label = props.label,
7446
+ label = _props$label === void 0 ? "" : _props$label,
7654
7447
  _props$className = props.className,
7655
7448
  className = _props$className === void 0 ? "" : _props$className,
7656
- _props$style = props.style,
7657
- style = _props$style === void 0 ? {} : _props$style,
7658
- _props$primaryColor = props.primaryColor,
7659
- primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7660
- _props$textButtonColo = props.textButtonColor,
7661
- textButtonColor = _props$textButtonColo === void 0 ? "" : _props$textButtonColo,
7662
- _props$renderItem = props.renderItem,
7663
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7664
- var handleClickPrevImg = function handleClickPrevImg() {
7665
- if (listRef.current) {
7666
- setIsScrolledToLeft(true);
7667
- setIsScrolledToRight(false);
7668
- listRef.current.scrollBy({
7669
- left: -80,
7670
- behavior: "smooth"
7671
- });
7672
- }
7673
- };
7674
- var handleClickNextImg = function handleClickNextImg() {
7675
- setIsScrolledToRight(true);
7676
- setIsScrolledToLeft(false);
7677
- if (listRef.current) {
7678
- listRef.current.scrollBy({
7679
- left: 80,
7680
- behavior: "smooth"
7681
- });
7449
+ _props$defaultValue = props.defaultValue,
7450
+ defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
7451
+ rules = props.rules;
7452
+ var _useState = useState(defaultValue),
7453
+ value = _useState[0],
7454
+ _setValue = _useState[1];
7455
+ var _useState2 = useState(""),
7456
+ error = _useState2[0],
7457
+ _setError = _useState2[1];
7458
+ var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
7459
+ var CustomInput = forwardRef(function (_ref, ref) {
7460
+ var value = _ref.value,
7461
+ onClick = _ref.onClick,
7462
+ className = _ref.className;
7463
+ return /*#__PURE__*/React__default.createElement("div", {
7464
+ className: className,
7465
+ onClick: onClick,
7466
+ ref: ref
7467
+ }, value);
7468
+ });
7469
+ useImperativeHandle(ref, function () {
7470
+ return {
7471
+ validateData: function validateData() {
7472
+ return _validateData();
7473
+ },
7474
+ setValue: function setValue(text) {
7475
+ return _setValue(text);
7476
+ },
7477
+ getValue: function getValue() {
7478
+ return value;
7479
+ },
7480
+ setError: function setError(err) {
7481
+ return _setError(err);
7482
+ }
7483
+ };
7484
+ });
7485
+ var _validateData = function _validateData() {
7486
+ var count = 0;
7487
+ rules.forEach(function (e) {
7488
+ var _e$pattern;
7489
+ if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
7490
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7491
+ count++;
7492
+ return false;
7493
+ } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
7494
+ _setError(e === null || e === void 0 ? void 0 : e.message);
7495
+ count++;
7496
+ return false;
7497
+ }
7498
+ });
7499
+ if (count) {
7500
+ return false;
7501
+ } else {
7502
+ _setError('');
7503
+ return true;
7682
7504
  }
7683
7505
  };
7684
- console.log("check propsss::::::::", datas);
7506
+ var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
7507
+ return (e === null || e === void 0 ? void 0 : e.type) === "required";
7508
+ }));
7509
+ var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
7510
+ className: "text-danger"
7511
+ }, " *") : null;
7685
7512
  return /*#__PURE__*/React__default.createElement("div", {
7686
- className: "grid grid-cols-12 h-12 " + className,
7687
- style: style
7688
- }, /*#__PURE__*/React__default.createElement("div", {
7689
- className: "col-span-12 lg:col-span-10 md:col-span-9 overflow-hidden "
7690
- }, /*#__PURE__*/React__default.createElement("div", {
7691
- className: "flex overflow-x-auto gap-2 hide-scrollbar items-center",
7692
- ref: listRef
7693
- }, datas && datas.length > 0 && datas.map(function (item, index) {
7694
- return renderItem(item, index);
7695
- }))), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", {
7696
- className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
7697
- }, /*#__PURE__*/React__default.createElement("button", {
7698
- className: " px-4 py-3 rounded-full",
7699
- onClick: handleClickPrevImg,
7700
- style: {
7701
- backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
7702
- }
7703
- }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
7704
- className: "inline-block mb-1 text-lg",
7705
- style: {
7706
- color: textButtonColor
7707
- }
7708
- })), /*#__PURE__*/React__default.createElement("button", {
7709
- className: "bg-gray2 px-4 py-3 rounded-full",
7710
- style: {
7711
- backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
7513
+ className: "w-full"
7514
+ }, label ? /*#__PURE__*/React__default.createElement("div", {
7515
+ className: "mb-1"
7516
+ }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
7517
+ selected: value,
7518
+ onChange: function onChange(date) {
7519
+ _setValue(date);
7520
+ console.log("check date: ", date);
7712
7521
  },
7713
- onClick: handleClickNextImg
7714
- }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
7715
- className: "inline-block mb-1 text-lg",
7716
- style: {
7717
- color: textButtonColor
7718
- }
7719
- }))));
7720
- };
7522
+ customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
7523
+ className: _className
7524
+ }),
7525
+ wrapperClassName: "w-full"
7526
+ }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
7527
+ });
7721
7528
 
7722
- var ListProduct = function ListProduct(props) {
7723
- var _props$datas = props.datas,
7724
- datas = _props$datas === void 0 ? [] : _props$datas,
7725
- _props$style = props.style,
7726
- style = _props$style === void 0 ? {} : _props$style,
7727
- _props$className = props.className,
7728
- className = _props$className === void 0 ? {} : _props$className,
7729
- _props$renderItem = props.renderItem,
7730
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7731
- return /*#__PURE__*/React__default.createElement("div", {
7732
- className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 mt-6 " + className,
7733
- style: style
7734
- }, datas && datas.length > 0 && datas.map(function (item, index) {
7735
- return renderItem(item, index);
7736
- }));
7737
- };
7738
-
7739
- var Products10 = function Products10(props) {
7740
- var _useState = useState(""),
7741
- selectCategory = _useState[0],
7742
- setSelectCategory = _useState[1];
7743
- var shopConfigStyle = props.shopConfigStyle,
7744
- data = props.data;
7745
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7746
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7747
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7748
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
7749
- textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7750
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
7751
- textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
7752
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7753
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7754
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
7755
- bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7756
- var _CategoryController = CategoryController(props),
7757
- _CategoryController$c = _CategoryController.categories,
7758
- categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
7759
- var _ProductController = ProductController(props),
7760
- _ProductController$pr = _ProductController.products,
7761
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7762
- console.log("Products10 products");
7763
- return /*#__PURE__*/React__default.createElement("div", {
7764
- className: "w-full pt-10 px-4 xl:px-20",
7765
- style: {
7766
- background: background,
7767
- color: textBody
7768
- }
7769
- }, /*#__PURE__*/React__default.createElement("h2", {
7770
- className: "text-2xl lg:text-3xl xl:text-4xl font-semibold mb-6"
7771
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(CarouselItem, {
7772
- datas: categories,
7773
- primaryColor: primary,
7774
- textButtonColor: textButton,
7775
- renderItem: function renderItem(item, index) {
7776
- return /*#__PURE__*/React__default.createElement("div", {
7777
- key: item.categoryId + "-" + index,
7778
- className: "border-2 items whitespace-nowrap p-2 rounded-lg cursor-pointer ",
7779
- style: {
7780
- borderColor: primary,
7781
- color: selectCategory === item.categoryId ? textButton : primary,
7782
- background: selectCategory === item.categoryId ? primary : bgSecondary
7783
- },
7784
- onClick: function onClick() {
7785
- setSelectCategory(item.categoryId);
7786
- }
7787
- }, item.cateName);
7788
- }
7789
- }), /*#__PURE__*/React__default.createElement(ListProduct, {
7790
- datas: products,
7791
- renderItem: function renderItem(item, index) {
7792
- return /*#__PURE__*/React__default.createElement("div", {
7793
- key: "productfsd-" + index
7794
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7795
- product: item.productInfo,
7796
- shopConfigStyle: shopConfigStyle
7797
- }));
7798
- }
7799
- }));
7800
- };
7801
-
7802
- var ProductsTop1 = function ProductsTop1(props) {
7803
- var data = props.data,
7804
- shopConfigStyle = props.shopConfigStyle;
7805
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7806
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.background,
7807
- background = _shopConfigStyle$colo2 === void 0 ? "#fff" : _shopConfigStyle$colo2;
7808
- var _ProductController = ProductController(props),
7809
- _ProductController$pr = _ProductController.products,
7810
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7811
- console.log("ProductsTop1 products");
7812
- return /*#__PURE__*/React__default.createElement("div", {
7813
- className: "w-full pt-10 px-4 xl:px-20",
7814
- style: {
7815
- background: background
7816
- }
7817
- }, /*#__PURE__*/React__default.createElement("h2", {
7818
- className: "text-2xl md:text-3xl lg:text-4xl font-semibold mb-6"
7819
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(ListProduct, {
7820
- datas: products,
7821
- renderItem: function renderItem(item, index) {
7822
- return /*#__PURE__*/React__default.createElement("div", {
7823
- key: "productfsd-" + index
7824
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7825
- product: item.productInfo,
7826
- shopConfigStyle: shopConfigStyle
7827
- }));
7828
- }
7829
- }));
7830
- };
7831
-
7832
- var getEmployeeListApi = function getEmployeeListApi(shopId) {
7833
- return api({
7834
- method: "post",
7835
- url: "/chain-employment-profile/filter-employ-by-customer",
7836
- headers: {
7837
- shopId: shopId
7838
- }
7839
- });
7840
- };
7841
-
7842
- var EmployeeController = function EmployeeController(props) {
7843
- var _props$isAutoGetList = props.isAutoGetList,
7844
- isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
7845
- shopConfig = props.shopConfig;
7846
- var _useState = useState([]),
7847
- listEmployment = _useState[0],
7848
- setListEmployment = _useState[1];
7849
- useEffect(function () {
7850
- if (isAutoGetList) {
7851
- getListEmployee();
7852
- }
7853
- }, [isAutoGetList]);
7854
- var getListEmployee = function getListEmployee() {
7855
- try {
7856
- return Promise.resolve(_catch(function () {
7857
- return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).then(function (res) {
7858
- var _res$data, _res$data$status;
7859
- 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) {
7860
- var _res$data2;
7861
- setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
7862
- }
7863
- return res;
7864
- });
7865
- }, function (e) {
7866
- console.log(e);
7867
- }));
7868
- } catch (e) {
7869
- return Promise.reject(e);
7870
- }
7871
- };
7872
- return {
7873
- listEmployment: listEmployment,
7874
- getListEmployee: getListEmployee
7875
- };
7876
- };
7877
-
7878
- var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
7879
- return api({
7880
- method: "post",
7881
- url: "/spa-schedule/customer/create",
7882
- data: data,
7883
- headers: {
7884
- shopId: shopId
7885
- }
7886
- });
7887
- };
7888
-
7889
- var _excluded = ["productName"];
7890
- var BookingController = function BookingController(props) {
7891
- _objectDestructuringEmpty(props);
7892
- var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
7893
- try {
7894
- return Promise.resolve(_catch(function () {
7895
- var data = {
7896
- appId: "SSPA",
7897
- customerName: customerName,
7898
- customerPhone: customerPhone.replace("+", ""),
7899
- isSellService: true,
7900
- scheduleDate: new Date(scheduleDate).getTime(),
7901
- services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
7902
- var productName = _ref.productName,
7903
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
7904
- return rest;
7905
- }),
7906
- shopId: shopId
7907
- };
7908
- return Promise.resolve(createSpaScheduleApi(shopId, data));
7909
- }, function (e) {
7910
- console.log(e);
7911
- }));
7912
- } catch (e) {
7913
- return Promise.reject(e);
7914
- }
7915
- };
7916
- return {
7917
- createSchedule: createSchedule
7918
- };
7919
- };
7920
-
7921
- var Input = forwardRef(function (props, ref) {
7922
- var _props$label = props.label,
7923
- label = _props$label === void 0 ? "" : _props$label,
7924
- _props$placeholder = props.placeholder,
7925
- placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
7529
+ var InputPhoneNumber = forwardRef(function (props, ref) {
7530
+ var _props$label = props.label,
7531
+ label = _props$label === void 0 ? "" : _props$label,
7532
+ _props$placeholder = props.placeholder,
7533
+ placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
7926
7534
  _props$className = props.className,
7927
7535
  className = _props$className === void 0 ? "" : _props$className,
7928
7536
  _props$name = props.name,
@@ -7941,6 +7549,11 @@ var Input = forwardRef(function (props, ref) {
7941
7549
  var _useState2 = useState(""),
7942
7550
  error = _useState2[0],
7943
7551
  _setError = _useState2[1];
7552
+ var handleOnChange = function handleOnChange(event) {
7553
+ var value = event.target.value;
7554
+ _setValue(value);
7555
+ onChange === null || onChange === void 0 ? void 0 : onChange(value);
7556
+ };
7944
7557
  useImperativeHandle(ref, function () {
7945
7558
  return {
7946
7559
  validateData: function validateData() {
@@ -7950,7 +7563,7 @@ var Input = forwardRef(function (props, ref) {
7950
7563
  return _setValue(text);
7951
7564
  },
7952
7565
  getValue: function getValue() {
7953
- return value();
7566
+ return value;
7954
7567
  },
7955
7568
  setError: function setError(err) {
7956
7569
  return _setError(err);
@@ -7959,18 +7572,19 @@ var Input = forwardRef(function (props, ref) {
7959
7572
  });
7960
7573
  var _validateData = function _validateData() {
7961
7574
  var count = 0;
7962
- rules.forEach(function (e) {
7575
+ for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
7963
7576
  var _e$pattern;
7577
+ var e = _step.value;
7964
7578
  if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
7965
7579
  _setError(e === null || e === void 0 ? void 0 : e.message);
7966
7580
  count++;
7967
- return false;
7581
+ break;
7968
7582
  } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
7969
7583
  _setError(e === null || e === void 0 ? void 0 : e.message);
7970
7584
  count++;
7971
- return false;
7585
+ break;
7972
7586
  }
7973
- });
7587
+ }
7974
7588
  if (count) {
7975
7589
  return false;
7976
7590
  } else {
@@ -7978,21 +7592,34 @@ var Input = forwardRef(function (props, ref) {
7978
7592
  return true;
7979
7593
  }
7980
7594
  };
7981
- var handleOnChange = function handleOnChange(event) {
7982
- var value = event.target.value;
7983
- _setValue(value);
7984
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
7985
- };
7986
- var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
7987
7595
  var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
7988
7596
  return (e === null || e === void 0 ? void 0 : e.type) === "required";
7989
7597
  }));
7990
7598
  var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
7991
7599
  className: "text-danger"
7992
7600
  }, " *") : null;
7993
- return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
7994
- className: "mb-1"
7995
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("input", {
7601
+ var _className = "h-10 px-2 focus:outline-none focus:ring-0 " + className;
7602
+ var data = [{
7603
+ country: "Việt Nam",
7604
+ code: "+84"
7605
+ }];
7606
+ return /*#__PURE__*/React__default.createElement("div", {
7607
+ className: "flex flex-col px-2 py-1"
7608
+ }, label ? /*#__PURE__*/React__default.createElement("label", null, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("div", {
7609
+ className: "flex items-center h-10 bg-white rounded-lg"
7610
+ }, /*#__PURE__*/React__default.createElement("button", {
7611
+ className: "flex items-center border-r-2"
7612
+ }, /*#__PURE__*/React__default.createElement(Select$1, {
7613
+ className: 'w-max',
7614
+ options: data,
7615
+ placeholder: "+84",
7616
+ renderItem: function renderItem(item, index) {
7617
+ return /*#__PURE__*/React__default.createElement("div", {
7618
+ key: "dd\u01B0vhu-" + index,
7619
+ className: "px-2 flex items-center hover:bg-gray-200 rounded-lg whitespace-nowrap v-max"
7620
+ }, item === null || item === void 0 ? void 0 : item.code, "-", item === null || item === void 0 ? void 0 : item.country);
7621
+ }
7622
+ })), /*#__PURE__*/React__default.createElement("input", {
7996
7623
  type: type,
7997
7624
  name: name,
7998
7625
  value: value,
@@ -8000,215 +7627,1652 @@ var Input = forwardRef(function (props, ref) {
8000
7627
  onChange: handleOnChange,
8001
7628
  required: required,
8002
7629
  className: _className
8003
- }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
7630
+ })), error ? /*#__PURE__*/React__default.createElement("div", {
7631
+ className: "text-danger"
7632
+ }, error) : null);
8004
7633
  });
8005
7634
 
8006
- var Select = forwardRef(function (props, ref) {
8007
- var _props$label = props.label,
8008
- label = _props$label === void 0 ? "" : _props$label,
8009
- _props$placeholder = props.placeholder,
8010
- placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
8011
- _props$className = props.className,
8012
- className = _props$className === void 0 ? "" : _props$className,
8013
- _props$name = props.name,
8014
- name = _props$name === void 0 ? "" : _props$name,
8015
- _props$onChange = props.onChange,
8016
- onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
7635
+ var formatCurrency = function formatCurrency(amount) {
7636
+ if (isNaN(amount)) {
7637
+ return '0 ₫';
7638
+ }
7639
+ var roundedAmount = Math.round(amount);
7640
+ var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
7641
+ return formattedAmount + " \u20AB";
7642
+ };
7643
+ var pattern = {
7644
+ phoneNumberPattern: /^0[0-9]{9}$/
7645
+ };
7646
+ var numberPattern = /^\d+$/;
7647
+
7648
+ var dayjs_min = createCommonjsModule(function (module, exports) {
7649
+ !function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
7650
+ });
7651
+
7652
+ var BookingForm = function BookingForm(props) {
7653
+ var _props$shopConfig = props.shopConfig,
7654
+ shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
7655
+ _props$shopConfigStyl = props.shopConfigStyle,
7656
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7657
+ _props$onCloseFormBoo = props.onCloseFormBooking,
7658
+ onCloseFormBooking = _props$onCloseFormBoo === void 0 ? function () {} : _props$onCloseFormBoo,
8017
7659
  _props$defaultValue = props.defaultValue,
8018
- defaultValue = _props$defaultValue === void 0 ? null : _props$defaultValue,
8019
- _props$rules = props.rules,
8020
- rules = _props$rules === void 0 ? [] : _props$rules,
8021
- _props$options = props.options,
8022
- options = _props$options === void 0 ? [] : _props$options,
8023
- _props$required = props.required,
8024
- required = _props$required === void 0 ? false : _props$required;
8025
- var _useState = useState(defaultValue),
8026
- value = _useState[0],
8027
- _setValue = _useState[1];
8028
- var _useState2 = useState(""),
8029
- error = _useState2[0],
8030
- _setError = _useState2[1];
8031
- useImperativeHandle(ref, function () {
8032
- return {
8033
- validateData: function validateData() {
8034
- return _validateData();
8035
- },
8036
- setValue: function setValue(text) {
8037
- return _setValue(text);
8038
- },
8039
- getValue: function getValue() {
8040
- return value();
8041
- },
8042
- setError: function setError(err) {
8043
- return _setError(err);
8044
- }
8045
- };
8046
- });
8047
- var _validateData = function _validateData() {
8048
- var count = 0;
8049
- rules.forEach(function (e) {
8050
- var _e$pattern;
8051
- if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
8052
- _setError(e === null || e === void 0 ? void 0 : e.message);
8053
- count++;
8054
- return false;
8055
- } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
8056
- _setError(e === null || e === void 0 ? void 0 : e.message);
8057
- count++;
8058
- return false;
8059
- }
7660
+ defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
7661
+ _props$className = props.className,
7662
+ className = _props$className === void 0 ? "" : _props$className;
7663
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7664
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7665
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
7666
+ var _useState = useState(false);
7667
+ var _useState2 = useState({
7668
+ types: "1,10"
7669
+ }),
7670
+ productsParams = _useState2[0];
7671
+ var _useState3 = useState(false);
7672
+ var _useState4 = useState(new Date());
7673
+ var _useState5 = useState(defaultValue),
7674
+ listProductSelected = _useState5[0],
7675
+ setListProductSelected = _useState5[1];
7676
+ var _useState6 = useState(""),
7677
+ searchOption = _useState6[0],
7678
+ setSearchOption = _useState6[1];
7679
+ var inputNameRef = useRef(null);
7680
+ var inputDateRef = useRef(null);
7681
+ var inputPhoneNumberRef = useRef(null);
7682
+ var inputSelectedRef = useRef(null);
7683
+ var _useState7 = useState(false),
7684
+ isOpenPopup = _useState7[0],
7685
+ setIsOpenPopup = _useState7[1];
7686
+ var _useState8 = useState({}),
7687
+ dataBooking = _useState8[0],
7688
+ setDataBooking = _useState8[1];
7689
+ var _EmployeeController = EmployeeController(_extends({}, props)),
7690
+ _EmployeeController$l = _EmployeeController.listEmployment,
7691
+ listEmployment = _EmployeeController$l === void 0 ? [] : _EmployeeController$l;
7692
+ var _ProductController = ProductController(_extends({}, props, {
7693
+ params: productsParams
7694
+ })),
7695
+ products = _ProductController.products;
7696
+ console.log("BookingForm products", products);
7697
+ var _BookingController = BookingController(props),
7698
+ _BookingController$cr = _BookingController.createSchedule,
7699
+ createSchedule = _BookingController$cr === void 0 ? function () {} : _BookingController$cr;
7700
+ var handleSelectedProduct = function handleSelectedProduct(event, productSelected) {
7701
+ event.stopPropagation();
7702
+ console.log("check:", listProductSelected);
7703
+ var isExist = listProductSelected.some(function (item) {
7704
+ var _item$product;
7705
+ return (item === null || item === void 0 ? void 0 : (_item$product = item.product) === null || _item$product === void 0 ? void 0 : _item$product.productId) === (productSelected === null || productSelected === void 0 ? void 0 : productSelected.productId);
8060
7706
  });
8061
- if (count) {
8062
- return false;
7707
+ if (isExist) {
7708
+ setListProductSelected(function (prev) {
7709
+ return prev.filter(function (item) {
7710
+ var _item$product2;
7711
+ return (item === null || item === void 0 ? void 0 : (_item$product2 = item.product) === null || _item$product2 === void 0 ? void 0 : _item$product2.productId) !== (productSelected === null || productSelected === void 0 ? void 0 : productSelected.productId);
7712
+ });
7713
+ });
8063
7714
  } else {
8064
- _setError('');
8065
- return true;
7715
+ setListProductSelected(function (prev) {
7716
+ return [].concat(prev, [{
7717
+ product: productSelected,
7718
+ quantity: 1,
7719
+ technical: {},
7720
+ oldService: false
7721
+ }]);
7722
+ });
8066
7723
  }
8067
7724
  };
8068
- var handleOnChange = function handleOnChange(event) {
8069
- var value = event.target.value;
8070
- _setValue(value);
8071
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
7725
+ var checkProductSelected = function checkProductSelected(productId) {
7726
+ if (listProductSelected && listProductSelected.length > 0) return listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.some(function (item) {
7727
+ var _item$product3;
7728
+ return (item === null || item === void 0 ? void 0 : (_item$product3 = item.product) === null || _item$product3 === void 0 ? void 0 : _item$product3.productId) === productId;
7729
+ });
7730
+ };
7731
+ var handleChooseTechnical = function handleChooseTechnical(technicalSelected, index) {
7732
+ setListProductSelected(function (prev) {
7733
+ var updateListSelected = [].concat(prev);
7734
+ updateListSelected[index] = _extends({}, updateListSelected[index], {
7735
+ technical: technicalSelected
7736
+ });
7737
+ return updateListSelected;
7738
+ });
7739
+ };
7740
+ var handleOnChangeQuantity = function handleOnChangeQuantity(index, value) {
7741
+ if (!isNaN(value) && value >= 0) {
7742
+ setListProductSelected(function (prev) {
7743
+ var updateListSelected = [].concat(prev);
7744
+ updateListSelected[index] = _extends({}, updateListSelected[index], {
7745
+ quantity: value
7746
+ });
7747
+ return updateListSelected;
7748
+ });
7749
+ }
7750
+ };
7751
+ var checkTechnicalSelected = function checkTechnicalSelected(technicalStaffIds, index) {
7752
+ var _listProductSelected$, _listProductSelected$2;
7753
+ if (listProductSelected && (listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.length) > 0) return (listProductSelected === null || listProductSelected === void 0 ? void 0 : (_listProductSelected$ = listProductSelected[index]) === null || _listProductSelected$ === void 0 ? void 0 : (_listProductSelected$2 = _listProductSelected$.technical) === null || _listProductSelected$2 === void 0 ? void 0 : _listProductSelected$2.sysUserId) === technicalStaffIds;
7754
+ };
7755
+ var removeTechnicalSelected = function removeTechnicalSelected(event, index) {
7756
+ event.stopPropagation();
7757
+ setListProductSelected(function (prev) {
7758
+ var updateListSelected = [].concat(prev);
7759
+ updateListSelected[index] = _extends({}, updateListSelected[index], {
7760
+ technical: {}
7761
+ });
7762
+ return updateListSelected;
7763
+ });
7764
+ };
7765
+ var handleSearchService = function handleSearchService(e) {
7766
+ var searchValue = e.target.value;
7767
+ setSearchOption(searchValue);
7768
+ var listCopy = products.filter(function (item) {
7769
+ var _item$productInfo, _item$productInfo$pro;
7770
+ return item === null || item === void 0 ? void 0 : (_item$productInfo = item.productInfo) === null || _item$productInfo === void 0 ? void 0 : (_item$productInfo$pro = _item$productInfo.productName) === null || _item$productInfo$pro === void 0 ? void 0 : _item$productInfo$pro.toLowerCase().includes(searchValue.toLowerCase());
7771
+ });
7772
+ return listCopy;
7773
+ };
7774
+ var handleSearchTechnical = function handleSearchTechnical(e) {
7775
+ var searchValue = e.target.value;
7776
+ setSearchOption(searchValue);
7777
+ var listCopy = listEmployment.filter(function (item) {
7778
+ var _item$name;
7779
+ return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(searchValue.toLowerCase());
7780
+ });
7781
+ return listCopy;
7782
+ };
7783
+ var handleSubmit = function handleSubmit() {
7784
+ try {
7785
+ var _inputNameRef$current, _inputPhoneNumberRef$, _inputDateRef$current, _inputSelectedRef$cur;
7786
+ var validateName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current = inputNameRef.current) === null || _inputNameRef$current === void 0 ? void 0 : _inputNameRef$current.validateData();
7787
+ var validatePhoneNumber = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$ = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$ === void 0 ? void 0 : _inputPhoneNumberRef$.validateData();
7788
+ var validateDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current = inputDateRef.current) === null || _inputDateRef$current === void 0 ? void 0 : _inputDateRef$current.validateData();
7789
+ var validateService = inputSelectedRef === null || inputSelectedRef === void 0 ? void 0 : (_inputSelectedRef$cur = inputSelectedRef.current) === null || _inputSelectedRef$cur === void 0 ? void 0 : _inputSelectedRef$cur.validateData();
7790
+ var _temp = function () {
7791
+ if (validateName && validatePhoneNumber && validateDate && validateService) {
7792
+ var _inputPhoneNumberRef$2, _inputNameRef$current2, _inputDateRef$current2;
7793
+ var customerPhone = inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$2 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$2 === void 0 ? void 0 : _inputPhoneNumberRef$2.getValue();
7794
+ var customerName = inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current2 = inputNameRef.current) === null || _inputNameRef$current2 === void 0 ? void 0 : _inputNameRef$current2.getValue();
7795
+ var scheduleDate = inputDateRef === null || inputDateRef === void 0 ? void 0 : (_inputDateRef$current2 = inputDateRef.current) === null || _inputDateRef$current2 === void 0 ? void 0 : _inputDateRef$current2.getValue();
7796
+ var services = listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item) {
7797
+ var _item$product4, _item$technical;
7798
+ return {
7799
+ productId: item === null || item === void 0 ? void 0 : (_item$product4 = item.product) === null || _item$product4 === void 0 ? void 0 : _item$product4.productId,
7800
+ technicalStaffIds: [item === null || item === void 0 ? void 0 : (_item$technical = item.technical) === null || _item$technical === void 0 ? void 0 : _item$technical.sysUserId],
7801
+ quantity: item === null || item === void 0 ? void 0 : item.quantity,
7802
+ oldService: item === null || item === void 0 ? void 0 : item.oldService
7803
+ };
7804
+ });
7805
+ var shopId = shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId;
7806
+ console.log("check payload:::", services);
7807
+ return Promise.resolve(createSchedule(customerName, customerPhone, scheduleDate, services, shopId)).then(function (response) {
7808
+ var _response$data, _response$data$status;
7809
+ if ((response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$status = _response$data.status) === null || _response$data$status === void 0 ? void 0 : _response$data$status.code) === '200') {
7810
+ var _response$data2, _inputPhoneNumberRef$3, _inputNameRef$current3;
7811
+ setDataBooking(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.data);
7812
+ setIsOpenPopup(true);
7813
+ inputPhoneNumberRef === null || inputPhoneNumberRef === void 0 ? void 0 : (_inputPhoneNumberRef$3 = inputPhoneNumberRef.current) === null || _inputPhoneNumberRef$3 === void 0 ? void 0 : _inputPhoneNumberRef$3.setValue("");
7814
+ inputNameRef === null || inputNameRef === void 0 ? void 0 : (_inputNameRef$current3 = inputNameRef.current) === null || _inputNameRef$current3 === void 0 ? void 0 : _inputNameRef$current3.setValue("");
7815
+ setListProductSelected([]);
7816
+ }
7817
+ });
7818
+ }
7819
+ }();
7820
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
7821
+ } catch (e) {
7822
+ return Promise.reject(e);
7823
+ }
7824
+ };
7825
+ var handleClosePopup = function handleClosePopup() {
7826
+ setIsOpenPopup(false);
7827
+ setDataBooking({});
8072
7828
  };
8073
- var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
8074
- var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
8075
- className: "text-danger"
8076
- }, " *") : null;
8077
- return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
8078
- className: "mb-1"
8079
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("select", {
8080
- name: name,
8081
- value: value,
8082
- onChange: handleOnChange,
8083
- required: required,
8084
- className: _className
8085
- }, /*#__PURE__*/React__default.createElement("option", {
8086
- value: "",
8087
- disabled: true,
8088
- selected: true,
8089
- hidden: true
8090
- }, placeholder), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
8091
- return /*#__PURE__*/React__default.createElement("option", {
8092
- value: option.value,
8093
- key: index
8094
- }, option === null || option === void 0 ? void 0 : option.label);
8095
- })), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
8096
- });
8097
-
8098
- var DateTimePicker = function DateTimePicker(props) {
8099
- var _props$label = props.label,
8100
- label = _props$label === void 0 ? "" : _props$label,
8101
- _props$className = props.className,
8102
- className = _props$className === void 0 ? "" : _props$className,
8103
- _props$defaultValue = props.defaultValue,
8104
- defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
8105
- _props$required = props.required,
8106
- required = _props$required === void 0 ? false : _props$required;
8107
- var _useState = useState(defaultValue),
8108
- value = _useState[0],
8109
- setValue = _useState[1];
8110
- var _useState2 = useState(""),
8111
- error = _useState2[0];
8112
- var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
8113
- var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
8114
- className: "text-danger"
8115
- }, " *") : null;
8116
- var CustomInput = forwardRef(function (_ref, ref) {
8117
- var value = _ref.value,
8118
- onClick = _ref.onClick,
8119
- className = _ref.className;
8120
- return /*#__PURE__*/React__default.createElement("div", {
8121
- className: className,
8122
- onClick: onClick,
8123
- ref: ref
8124
- }, value);
8125
- });
8126
7829
  return /*#__PURE__*/React__default.createElement("div", {
8127
- className: "w-full"
8128
- }, label ? /*#__PURE__*/React__default.createElement("div", {
8129
- className: "mb-1"
8130
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
8131
- selected: value,
8132
- onChange: function onChange(date) {
8133
- return setValue(date);
8134
- },
8135
- customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
8136
- className: _className
7830
+ className: "grid gap-4 rounded-lg p-6 " + className,
7831
+ style: {
7832
+ backgroundColor: secondary
7833
+ }
7834
+ }, /*#__PURE__*/React__default.createElement("div", {
7835
+ className: "grid grid-cols-1 md:grid-cols-2 gap-4"
7836
+ }, /*#__PURE__*/React__default.createElement(Input, {
7837
+ ref: inputNameRef,
7838
+ label: "Họ tên",
7839
+ placeholder: "Nhập họ tên",
7840
+ rules: [{
7841
+ type: "required",
7842
+ message: "Bắt buộc nhập họ tên"
7843
+ }],
7844
+ className: "w-full rounded-lg bg-white",
7845
+ inputClassName: "w-full focus:outline-none focus:ring-0"
7846
+ }), /*#__PURE__*/React__default.createElement(InputPhoneNumber, {
7847
+ ref: inputPhoneNumberRef,
7848
+ label: "Số điện thoại",
7849
+ placeholder: "Nhập số điện thoại",
7850
+ rules: [{
7851
+ type: "required",
7852
+ message: "Bắt buộc nhập số điện thoại"
7853
+ }, {
7854
+ type: "pattern",
7855
+ pattern: pattern === null || pattern === void 0 ? void 0 : pattern.phoneNumberPattern,
7856
+ message: "Số điện thoại không hợp lệ!"
7857
+ }],
7858
+ className: "w-full rounded-lg"
7859
+ })), /*#__PURE__*/React__default.createElement("div", {
7860
+ className: "grid grid-cols-1 gap-4"
7861
+ }, /*#__PURE__*/React__default.createElement("div", {
7862
+ className: "relative"
7863
+ }, /*#__PURE__*/React__default.createElement(Select$1, {
7864
+ ref: inputSelectedRef,
7865
+ searchOption: searchOption,
7866
+ handleSearchOption: handleSearchService,
7867
+ value: listProductSelected,
7868
+ rules: [{
7869
+ type: "required",
7870
+ message: "Bắt buộc chọn dịch vụ"
7871
+ }],
7872
+ label: "Dịch vụ",
7873
+ placeholder: "Chọn dịch vụ",
7874
+ options: products,
7875
+ renderItem: function renderItem(item, index) {
7876
+ var _item$productInfo2, _item$productInfo3;
7877
+ return /*#__PURE__*/React__default.createElement("div", {
7878
+ key: "dfjsvsjvhu-" + index,
7879
+ className: "px-2 py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
7880
+ onClick: function onClick(event) {
7881
+ handleSelectedProduct(event, item === null || item === void 0 ? void 0 : item.productInfo);
7882
+ }
7883
+ }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
7884
+ className: (checkProductSelected(item === null || item === void 0 ? void 0 : (_item$productInfo2 = item.productInfo) === null || _item$productInfo2 === void 0 ? void 0 : _item$productInfo2.productId) ? "" : "invisible") + " inline me-2 w-4"
7885
+ }), /*#__PURE__*/React__default.createElement("div", {
7886
+ className: " whitespace-nowrap line-clamp-1"
7887
+ }, item === null || item === void 0 ? void 0 : (_item$productInfo3 = item.productInfo) === null || _item$productInfo3 === void 0 ? void 0 : _item$productInfo3.productName));
7888
+ }
7889
+ })), /*#__PURE__*/React__default.createElement(DateTimePicker, {
7890
+ ref: inputDateRef,
7891
+ label: "Thời gian",
7892
+ className: "w-full rounded-lg",
7893
+ placeholder: "Chọn thời gian",
7894
+ rules: [{
7895
+ type: "required",
7896
+ message: "Bắt buộc chọn ngày đặt"
7897
+ }]
7898
+ })), (listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
7899
+ className: "grid grid-cols-1"
7900
+ }, /*#__PURE__*/React__default.createElement("div", null, "D\u1ECBch v\u1EE5 \u0111\xE3 ch\u1ECDn"), listProductSelected === null || listProductSelected === void 0 ? void 0 : listProductSelected.map(function (item, optionIndex) {
7901
+ var _item$product5;
7902
+ return /*#__PURE__*/React__default.createElement("div", {
7903
+ className: "w-full bg-transparent border-b-2 py-3 grid grid-col-12 gap-2",
7904
+ key: "ohoihtr-" + optionIndex
7905
+ }, /*#__PURE__*/React__default.createElement("div", {
7906
+ className: "col-span-12 grid grid-cols-12"
7907
+ }, /*#__PURE__*/React__default.createElement("div", {
7908
+ className: "col-span-1 "
7909
+ }, /*#__PURE__*/React__default.createElement("div", null, optionIndex + 1, ".")), /*#__PURE__*/React__default.createElement("div", {
7910
+ className: "col-span-10"
7911
+ }, /*#__PURE__*/React__default.createElement("div", {
7912
+ className: "col-span-10 font-semibold "
7913
+ }, item === null || item === void 0 ? void 0 : (_item$product5 = item.product) === null || _item$product5 === void 0 ? void 0 : _item$product5.productName)), /*#__PURE__*/React__default.createElement("div", {
7914
+ className: "col-span-1 flex justify-center px-2"
7915
+ }, /*#__PURE__*/React__default.createElement("div", {
7916
+ className: "flex items-center justify-center cursor-pointer",
7917
+ onClick: function onClick(event) {
7918
+ handleSelectedProduct(event, item === null || item === void 0 ? void 0 : item.product);
7919
+ }
7920
+ }, /*#__PURE__*/React__default.createElement(RxCross2, {
7921
+ className: "text-base ",
7922
+ style: {
7923
+ color: "rgb(220, 38, 38)"
7924
+ }
7925
+ })))), /*#__PURE__*/React__default.createElement("div", {
7926
+ className: "col-span-12 grid grid-cols-12 gap-6"
7927
+ }, /*#__PURE__*/React__default.createElement("div", {
7928
+ className: "col-span-4 lg:col-start-2 lg:col-end-5 flex flex-col gap-2"
7929
+ }, /*#__PURE__*/React__default.createElement(Input, {
7930
+ isQuantity: true,
7931
+ labelClassName: "text-sm font-semibold ",
7932
+ wrapClassName: "w-full flex flex-col gap-2",
7933
+ label: "Số lượng",
7934
+ placeholder: "Nhập số lượng",
7935
+ rules: [{
7936
+ type: "required",
7937
+ message: "Bắt buộc nhập số lượng"
7938
+ }],
7939
+ defaultValue: item === null || item === void 0 ? void 0 : item.quantity,
7940
+ className: "w-full rounded-lg bg-bgSecondary ",
7941
+ inputClassName: "w-full focus:outline-none focus:ring-0",
7942
+ onChange: function onChange(value) {
7943
+ handleOnChangeQuantity(optionIndex, value);
7944
+ }
7945
+ })), /*#__PURE__*/React__default.createElement("div", {
7946
+ className: "col-end-13 col-span-8 flex flex-col gap-2 "
7947
+ }, /*#__PURE__*/React__default.createElement("div", {
7948
+ className: "font-semibold text-sm mb-1"
7949
+ }, "K\u1EF9 thu\u1EADt vi\xEAn"), /*#__PURE__*/React__default.createElement(Select$1, {
7950
+ placeholder: "Ch\u1ECDn k\u1EF9 thu\u1EADt vi\xEAn",
7951
+ searchOption: searchOption,
7952
+ handleSearchOption: handleSearchTechnical,
7953
+ value: item === null || item === void 0 ? void 0 : item.technical,
7954
+ className: "w-full border rounded-lg",
7955
+ displayItem: function displayItem(technicalSelected) {
7956
+ return /*#__PURE__*/React__default.createElement("div", {
7957
+ className: "flex justify-between items-center w-full"
7958
+ }, /*#__PURE__*/React__default.createElement("div", {
7959
+ className: "line-clamp-1 text-start "
7960
+ }, technicalSelected === null || technicalSelected === void 0 ? void 0 : technicalSelected.name, "(", technicalSelected === null || technicalSelected === void 0 ? void 0 : technicalSelected.roleName, ")"), /*#__PURE__*/React__default.createElement("div", {
7961
+ onClick: function onClick(event) {
7962
+ removeTechnicalSelected(event, optionIndex);
7963
+ }
7964
+ }, /*#__PURE__*/React__default.createElement(RxCross2, {
7965
+ className: "text-xs"
7966
+ })));
7967
+ },
7968
+ options: listEmployment,
7969
+ renderItem: function renderItem(employee, index) {
7970
+ return /*#__PURE__*/React__default.createElement("div", {
7971
+ key: "dds32vsjvhu-" + index,
7972
+ className: (checkTechnicalSelected(employee === null || employee === void 0 ? void 0 : employee.sysUserId, optionIndex) ? "bg-gray-100" : "") + " px-2 py-1.5 flex items-center hover:bg-gray-100 rounded-lg",
7973
+ onClick: function onClick() {
7974
+ handleChooseTechnical(employee, optionIndex);
7975
+ }
7976
+ }, /*#__PURE__*/React__default.createElement(IoMdCheckmark, {
7977
+ className: (checkTechnicalSelected(employee === null || employee === void 0 ? void 0 : employee.sysUserId, optionIndex) ? "" : "invisible") + " inline me-2 min-w-2 md:min-w-4 h-auto"
7978
+ }), /*#__PURE__*/React__default.createElement("div", {
7979
+ className: "hover:bg-gray-100 rounded-lg text-wrap md:text-base text-xs"
7980
+ }, employee === null || employee === void 0 ? void 0 : employee.name, "(", employee === null || employee === void 0 ? void 0 : employee.roleName, ")"));
7981
+ }
7982
+ }))));
7983
+ })) : null, /*#__PURE__*/React__default.createElement("div", {
7984
+ className: "text-center"
7985
+ }, /*#__PURE__*/React__default.createElement(Button, {
7986
+ label: "Đặt lịch ngay",
7987
+ shopConfigStyle: shopConfigStyle,
7988
+ onClick: handleSubmit
7989
+ })), isOpenPopup && /*#__PURE__*/React__default.createElement(ModalNotification, {
7990
+ onCloseFormBooking: onCloseFormBooking,
7991
+ onClose: handleClosePopup
7992
+ }, /*#__PURE__*/React__default.createElement("div", {
7993
+ className: "bg-white rounded-lg shadow-lg p-6 max-w-sm text-center md:min-w-[650px] min-h-[420px] md:min-h-[380px] lg:h-auto "
7994
+ }, /*#__PURE__*/React__default.createElement("div", {
7995
+ className: "h-20 mb-4 flex items-center justify-center"
7996
+ }, /*#__PURE__*/React__default.createElement(FaCheckCircle, {
7997
+ className: "h-full text-green-500",
7998
+ style: {
7999
+ fontSize: "150px"
8000
+ }
8001
+ })), /*#__PURE__*/React__default.createElement("div", {
8002
+ className: "mb-2"
8003
+ }, "Kh\xE1ch h\xE0ng: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerName), /*#__PURE__*/React__default.createElement("div", {
8004
+ className: "mb-2"
8005
+ }, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.customerPhone), /*#__PURE__*/React__default.createElement("div", {
8006
+ className: "mb-4"
8007
+ }, "Th\u1EDDi gian: ", dayjs_min(dataBooking === null || dataBooking === void 0 ? void 0 : dataBooking.scheduleDate).format("DD/MM/YYYY")), /*#__PURE__*/React__default.createElement("p", {
8008
+ className: "mb-4"
8009
+ }, "B\u1EA1n \u0111\xE3 c\xF3 t\xE0i kho\u1EA3n, vui l\xF2ng \u0111\u0103ng nh\u1EADp \u0111\u1EC3 xem chi ti\u1EBFt c\xE1c s\u1EA3n ph\u1EA9m, d\u1ECBch v\u1EE5 li\u1EC7u tr\xECnh m\xE0 b\u1EA1n \u0111ang s\u1EDF h\u1EEFu"), /*#__PURE__*/React__default.createElement(Button, {
8010
+ label: "Đăng nhập",
8011
+ shopConfigStyle: shopConfigStyle
8012
+ }))));
8013
+ };
8014
+
8015
+ var Treatments1 = function Treatments1(props) {
8016
+ var _props$shopConfigStyl = props.shopConfigStyle,
8017
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
8018
+ _props$shopConfig = props.shopConfig,
8019
+ shopConfig = _props$shopConfig === void 0 ? {} : _props$shopConfig,
8020
+ _props$data = props.data,
8021
+ data = _props$data === void 0 ? {} : _props$data,
8022
+ _props$SectionTitle = props.SectionTitle,
8023
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8024
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8025
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8026
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8027
+ var _useState = useState({
8028
+ size: 10,
8029
+ types: "1,10",
8030
+ isHighlight: true
8137
8031
  }),
8138
- wrapperClassName: "w-full"
8139
- }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
8032
+ params = _useState[0];
8033
+ var _useState2 = useState(false),
8034
+ isOpenModal = _useState2[0],
8035
+ setIsOpenModal = _useState2[1];
8036
+ var _useState3 = useState([]),
8037
+ dataBooking = _useState3[0],
8038
+ setDataBooking = _useState3[1];
8039
+ var _ProductController = ProductController(_extends({}, props, {
8040
+ params: params
8041
+ })),
8042
+ _ProductController$pr = _ProductController.products,
8043
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
8044
+ console.log("treatment1:", products);
8045
+ var handleOpenModalBooking = function handleOpenModalBooking(event, data) {
8046
+ try {
8047
+ event.stopPropagation();
8048
+ setDataBooking([{
8049
+ product: data,
8050
+ quantity: 1,
8051
+ technical: {},
8052
+ oldService: false
8053
+ }]);
8054
+ setIsOpenModal(true);
8055
+ } catch (error) {
8056
+ console.log("::::::::::errrorrrrr::::::", error);
8057
+ }
8058
+ };
8059
+ var handleCloseModal = function handleCloseModal() {
8060
+ setIsOpenModal(false);
8061
+ console.log("đóng::::");
8062
+ setDataBooking([]);
8063
+ };
8064
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8065
+ className: "" + SECTION_DEFAULT_CLASS
8066
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8067
+ data: data,
8068
+ shopConfigStyle: shopConfigStyle
8069
+ }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
8070
+ var _product$productInfo, _product$productInfo2;
8071
+ return /*#__PURE__*/React__default.createElement("div", {
8072
+ className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
8073
+ key: "rthirr-" + index
8074
+ }, /*#__PURE__*/React__default.createElement("div", {
8075
+ className: "block " + (index % 2 ? "md:hidden" : "")
8076
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8077
+ product: product === null || product === void 0 ? void 0 : product.productInfo,
8078
+ className: "aspect-video rounded-2xl"
8079
+ })), /*#__PURE__*/React__default.createElement("div", {
8080
+ className: "text-left " + (index % 2 ? "md:text-right" : "")
8081
+ }, /*#__PURE__*/React__default.createElement("div", {
8082
+ className: "font-medium text-2xl"
8083
+ }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
8084
+ className: "mt-4 text-textBody",
8085
+ dangerouslySetInnerHTML: {
8086
+ __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
8087
+ }
8088
+ }), /*#__PURE__*/React__default.createElement(Button, {
8089
+ label: "Đặt lịch ngay",
8090
+ shopConfigStyle: shopConfigStyle,
8091
+ className: "mt-4",
8092
+ onClick: function onClick(event) {
8093
+ handleOpenModalBooking(event, product === null || product === void 0 ? void 0 : product.productInfo);
8094
+ }
8095
+ })), /*#__PURE__*/React__default.createElement("div", {
8096
+ className: "hidden " + (index % 2 ? "md:block" : "")
8097
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8098
+ product: product === null || product === void 0 ? void 0 : product.productInfo,
8099
+ className: "aspect-video rounded-2xl"
8100
+ })));
8101
+ })), /*#__PURE__*/React__default.createElement(Dash, {
8102
+ color: secondary
8103
+ }), isOpenModal ? /*#__PURE__*/React__default.createElement(ModalNotification, {
8104
+ onClose: handleCloseModal
8105
+ }, /*#__PURE__*/React__default.createElement(BookingForm, {
8106
+ className: "overflow-y-scroll hide-scrollbar max-h-[80vh]",
8107
+ onCloseFormBooking: handleCloseModal,
8108
+ defaultValue: dataBooking,
8109
+ shopConfig: shopConfig,
8110
+ shopConfigStyle: shopConfigStyle
8111
+ })) : null);
8112
+ };
8113
+
8114
+ var _path$1;
8115
+ function _extends$2() {
8116
+ return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
8117
+ for (var e = 1; e < arguments.length; e++) {
8118
+ var t = arguments[e];
8119
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
8120
+ }
8121
+ return n;
8122
+ }, _extends$2.apply(null, arguments);
8123
+ }
8124
+ function SvgAngleSmallLeft(props) {
8125
+ return /*#__PURE__*/createElement("svg", _extends$2({
8126
+ xmlns: "http://www.w3.org/2000/svg",
8127
+ viewBox: "0 0 24 24",
8128
+ width: 512,
8129
+ height: 512
8130
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
8131
+ d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
8132
+ })));
8133
+ }
8134
+
8135
+ var _path$2;
8136
+ function _extends$3() {
8137
+ return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
8138
+ for (var e = 1; e < arguments.length; e++) {
8139
+ var t = arguments[e];
8140
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
8141
+ }
8142
+ return n;
8143
+ }, _extends$3.apply(null, arguments);
8144
+ }
8145
+ function SvgAngleSmallRight(props) {
8146
+ return /*#__PURE__*/createElement("svg", _extends$3({
8147
+ xmlns: "http://www.w3.org/2000/svg",
8148
+ viewBox: "0 0 24 24",
8149
+ width: 512,
8150
+ height: 512
8151
+ }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
8152
+ d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
8153
+ })));
8154
+ }
8155
+
8156
+ var ScrollHorizontal = function ScrollHorizontal(props) {
8157
+ var _props$datas = props.datas,
8158
+ datas = _props$datas === void 0 ? [] : _props$datas,
8159
+ _props$className = props.className,
8160
+ className = _props$className === void 0 ? "" : _props$className,
8161
+ _props$style = props.style,
8162
+ style = _props$style === void 0 ? {} : _props$style,
8163
+ _props$renderItem = props.renderItem,
8164
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
8165
+ var scrollContainerRef = useRef(null);
8166
+ var _useState = useState(true),
8167
+ isScrolledToLeft = _useState[0],
8168
+ setIsScrolledToLeft = _useState[1];
8169
+ var _useState2 = useState(false),
8170
+ isScrolledToRight = _useState2[0],
8171
+ setIsScrolledToRight = _useState2[1];
8172
+ var checkScrollPosition = function checkScrollPosition() {
8173
+ if (scrollContainerRef.current) {
8174
+ var _scrollContainerRef$c = scrollContainerRef.current,
8175
+ _scrollLeft = _scrollContainerRef$c.scrollLeft,
8176
+ scrollWidth = _scrollContainerRef$c.scrollWidth,
8177
+ clientWidth = _scrollContainerRef$c.clientWidth;
8178
+ setIsScrolledToLeft(_scrollLeft === 0);
8179
+ setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
8180
+ }
8181
+ };
8182
+ var scrollLeft = function scrollLeft() {
8183
+ if (scrollContainerRef.current) {
8184
+ scrollContainerRef.current.scrollBy({
8185
+ left: -200,
8186
+ behavior: "smooth"
8187
+ });
8188
+ setTimeout(checkScrollPosition, 300);
8189
+ }
8190
+ };
8191
+ var scrollRight = function scrollRight() {
8192
+ if (scrollContainerRef.current) {
8193
+ scrollContainerRef.current.scrollBy({
8194
+ left: 200,
8195
+ behavior: "smooth"
8196
+ });
8197
+ setTimeout(checkScrollPosition, 300);
8198
+ }
8199
+ };
8200
+ useEffect(function () {
8201
+ checkScrollPosition();
8202
+ }, [datas]);
8203
+ return /*#__PURE__*/React__default.createElement("div", {
8204
+ className: "flex " + className,
8205
+ style: style
8206
+ }, /*#__PURE__*/React__default.createElement("div", {
8207
+ className: "flex w-full overflow-x-hidden",
8208
+ ref: scrollContainerRef,
8209
+ onScroll: checkScrollPosition
8210
+ }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
8211
+ return renderItem(item, index);
8212
+ })), /*#__PURE__*/React__default.createElement("div", {
8213
+ className: "flex gap-2 items-center px-4"
8214
+ }, /*#__PURE__*/React__default.createElement("div", {
8215
+ onClick: scrollLeft,
8216
+ className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToLeft ? "bg-gray4" : "bg-primary")
8217
+ }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
8218
+ width: 24,
8219
+ height: 24,
8220
+ fill: "#fff"
8221
+ })), /*#__PURE__*/React__default.createElement("div", {
8222
+ onClick: scrollRight,
8223
+ className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center " + (isScrolledToRight ? "bg-gray4" : "bg-primary")
8224
+ }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
8225
+ width: 24,
8226
+ height: 24,
8227
+ fill: "#fff"
8228
+ }))));
8229
+ };
8230
+
8231
+ var getDurationValue = function getDurationValue(attributes) {
8232
+ var _durationAtt$value, _durationAtt$unit;
8233
+ if (!attributes) {
8234
+ return "";
8235
+ }
8236
+ if (typeof attributes === "string") {
8237
+ attributes = JSON.parse(attributes || "[]");
8238
+ }
8239
+ var durationAtt = attributes.find(function (attr) {
8240
+ return attr.name === "Thời lượng (phút) / buổi";
8241
+ });
8242
+ return durationAtt ? ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$value = durationAtt.value) === null || _durationAtt$value === void 0 ? void 0 : _durationAtt$value[0]) || "0") + " " + ((durationAtt === null || durationAtt === void 0 ? void 0 : (_durationAtt$unit = durationAtt.unit) === null || _durationAtt$unit === void 0 ? void 0 : _durationAtt$unit[0]) || "") : "";
8243
+ };
8244
+ var genProductSlug = function genProductSlug(productName, id) {
8245
+ var slug = productName.toLowerCase();
8246
+ slug = slug.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, "a");
8247
+ slug = slug.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, "e");
8248
+ slug = slug.replace(/(ì|í|ị|ỉ|ĩ)/g, "i");
8249
+ slug = slug.replace(/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/g, "o");
8250
+ slug = slug.replace(/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/g, "u");
8251
+ slug = slug.replace(/(ỳ|ý|ỵ|ỷ|ỹ)/g, "y");
8252
+ slug = slug.replace(/(đ)/g, "d");
8253
+ slug = slug.replace(/([^0-9a-z-\s])/g, "");
8254
+ slug = slug.replace(/(\s+)/g, "-");
8255
+ slug = slug.replace(/^-+/g, "");
8256
+ slug = slug.replace(/-+$/g, "");
8257
+ return slug + "-" + id;
8258
+ };
8259
+ var getLinkProductDetail = function getLinkProductDetail(product) {
8260
+ var slug = genProductSlug(product === null || product === void 0 ? void 0 : product.productName, product === null || product === void 0 ? void 0 : product.productId);
8261
+ return "/product/" + slug + "/" + (product === null || product === void 0 ? void 0 : product.shopId);
8262
+ };
8263
+
8264
+ function getMinMax(array, field) {
8265
+ if (!(array !== null && array !== void 0 && array.length) || !array[0].hasOwnProperty(field)) {
8266
+ return null;
8267
+ }
8268
+ var _array$reduce = array.reduce(function (acc, obj) {
8269
+ var value = obj[field];
8270
+ return {
8271
+ min: value < acc.min ? value : acc.min,
8272
+ max: value > acc.max ? value : acc.max
8273
+ };
8274
+ }, {
8275
+ min: array[0][field],
8276
+ max: array[0][field]
8277
+ }),
8278
+ min = _array$reduce.min,
8279
+ max = _array$reduce.max;
8280
+ return {
8281
+ min: min,
8282
+ max: max
8283
+ };
8284
+ }
8285
+ var ProductPrice = function ProductPrice(props) {
8286
+ var product = props.product,
8287
+ variant = props.variant,
8288
+ _props$className = props.className,
8289
+ className = _props$className === void 0 ? "" : _props$className,
8290
+ _props$style = props.style,
8291
+ style = _props$style === void 0 ? {} : _props$style;
8292
+ var _useState = useState(),
8293
+ displayPrice = _useState[0],
8294
+ setDisplayPrice = _useState[1];
8295
+ var _useState2 = useState(),
8296
+ displayPriceBeforeDiscount = _useState2[0],
8297
+ setDisplayPriceBeforeDiscount = _useState2[1];
8298
+ useEffect(function () {
8299
+ if (variant) {
8300
+ genProductPrice([variant]);
8301
+ } else if (product) {
8302
+ genProductPrice(product.variants);
8303
+ }
8304
+ }, [product, variant]);
8305
+ var genProductPrice = function genProductPrice(variants) {
8306
+ var mPrice = getMinMax(variants, 'price');
8307
+ var mPriceBeforeDiscount = getMinMax(variants, 'priceBeforeDiscount');
8308
+ if (mPrice && mPriceBeforeDiscount) {
8309
+ var _displayPriceBeforeDiscount = formatCurrency(mPriceBeforeDiscount.min);
8310
+ var _displayPrice = formatCurrency(mPrice.min);
8311
+ if (mPrice.min !== mPrice.max) {
8312
+ _displayPrice += " - " + formatCurrency(mPrice.max);
8313
+ }
8314
+ if (mPriceBeforeDiscount.min !== mPriceBeforeDiscount.max) {
8315
+ _displayPriceBeforeDiscount += " - " + formatCurrency(mPriceBeforeDiscount.max);
8316
+ }
8317
+ setDisplayPrice(_displayPrice);
8318
+ setDisplayPriceBeforeDiscount(_displayPriceBeforeDiscount);
8319
+ }
8320
+ };
8321
+ return /*#__PURE__*/React__default.createElement("div", {
8322
+ className: className
8323
+ }, displayPriceBeforeDiscount !== displayPrice ? /*#__PURE__*/React__default.createElement("span", {
8324
+ className: "text-gray3 line-through mr-2"
8325
+ }, displayPriceBeforeDiscount) : null, /*#__PURE__*/React__default.createElement("span", {
8326
+ className: "text-primary font-semibold",
8327
+ style: style
8328
+ }, displayPrice));
8329
+ };
8330
+
8331
+ var ProductItem1 = function ProductItem1(props) {
8332
+ var product = props.product;
8333
+ return /*#__PURE__*/React__default.createElement("div", {
8334
+ className: "flex"
8335
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8336
+ product: product,
8337
+ className: "!w-20 rounded-lg"
8338
+ }), /*#__PURE__*/React__default.createElement("div", {
8339
+ className: "ml-4 border-b border-stroke flex-1"
8340
+ }, /*#__PURE__*/React__default.createElement("div", {
8341
+ className: "text-lg"
8342
+ }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
8343
+ className: "flex mt-2"
8344
+ }, /*#__PURE__*/React__default.createElement("div", {
8345
+ className: "flex-1 text-gray3"
8346
+ }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes)), /*#__PURE__*/React__default.createElement(ProductPrice, {
8347
+ product: product
8348
+ }))));
8349
+ };
8350
+
8351
+ var Loading = function Loading(props) {
8352
+ var _props$size = props.size,
8353
+ size = _props$size === void 0 ? 24 : _props$size;
8354
+ return /*#__PURE__*/React__default.createElement("div", {
8355
+ className: "border-4 boder-[rgba(255, 255, 255, 0.2)] rounded-full border-t-4 border-t-primary animate-spin",
8356
+ style: {
8357
+ width: size,
8358
+ height: size
8359
+ }
8360
+ });
8361
+ };
8362
+
8363
+ var Treatments1$1 = function Treatments1(props) {
8364
+ var _props$shopConfigStyl = props.shopConfigStyle,
8365
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
8366
+ _props$data = props.data,
8367
+ data = _props$data === void 0 ? {} : _props$data,
8368
+ _props$SectionTitle = props.SectionTitle,
8369
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8370
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8371
+ _shopConfigStyle$colo2 = _shopConfigStyle$colo.secondary,
8372
+ secondary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
8373
+ var _useState = useState({
8374
+ types: "1"
8375
+ }),
8376
+ params = _useState[0],
8377
+ setParams = _useState[1];
8378
+ var _CategoryController = CategoryController(_extends({}, props, {
8379
+ types: "1"
8380
+ })),
8381
+ categories = _CategoryController.categories;
8382
+ var _ProductController = ProductController(_extends({}, props, {
8383
+ params: params
8384
+ })),
8385
+ _ProductController$pr = _ProductController.products,
8386
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
8387
+ loading = _ProductController.loading;
8388
+ var _useState2 = useState(0),
8389
+ selectedCategory = _useState2[0],
8390
+ setSelectedCategory = _useState2[1];
8391
+ useEffect(function () {
8392
+ var newParams = _extends({}, params, {
8393
+ categoryId: selectedCategory
8394
+ });
8395
+ if (!selectedCategory) {
8396
+ delete newParams.categoryId;
8397
+ }
8398
+ setParams(newParams);
8399
+ }, [selectedCategory]);
8400
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8401
+ className: SECTION_DEFAULT_CLASS + " relative"
8402
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8403
+ data: data,
8404
+ shopConfigStyle: shopConfigStyle
8405
+ }), /*#__PURE__*/React__default.createElement(ScrollHorizontal, {
8406
+ datas: [{
8407
+ categoryId: 0,
8408
+ cateName: "Tất cả"
8409
+ }].concat(categories),
8410
+ className: "mt-6 rounded-lg overflow-hidden bg-bgSecondary",
8411
+ renderItem: function renderItem(item, index) {
8412
+ return /*#__PURE__*/React__default.createElement("div", {
8413
+ key: index,
8414
+ className: "p-3 flex gap-3 shrink-0 cursor-pointer text-base " + (selectedCategory === item.categoryId ? "bg-primary text-textButton" : ""),
8415
+ onClick: function onClick() {
8416
+ return setSelectedCategory(item.categoryId);
8417
+ }
8418
+ }, item === null || item === void 0 ? void 0 : item.cateName);
8419
+ }
8420
+ }), loading ? /*#__PURE__*/React__default.createElement("div", {
8421
+ className: "flex w-full justify-center p-12"
8422
+ }, /*#__PURE__*/React__default.createElement(Loading, null)) : products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement("div", {
8423
+ className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
8424
+ }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
8425
+ return /*#__PURE__*/React__default.createElement(ProductItem1, {
8426
+ key: index,
8427
+ product: product === null || product === void 0 ? void 0 : product.productInfo
8428
+ });
8429
+ })) : /*#__PURE__*/React__default.createElement("div", {
8430
+ className: "text-gray3 text-center p-12"
8431
+ }, "Kh\xF4ng c\xF3 d\u1ECBch v\u1EE5")), /*#__PURE__*/React__default.createElement(Dash, {
8432
+ color: secondary
8433
+ }));
8434
+ };
8435
+
8436
+ var ProductDetailController = function ProductDetailController(props) {
8437
+ var shopConfig = props.shopConfig,
8438
+ _props$productId = props.productId,
8439
+ productId = _props$productId === void 0 ? 0 : _props$productId;
8440
+ var _useState = useState(),
8441
+ product = _useState[0],
8442
+ setProduct = _useState[1];
8443
+ useEffect(function () {
8444
+ if (productId) {
8445
+ getProductDetail();
8446
+ }
8447
+ }, [productId]);
8448
+ var getProductDetail = function getProductDetail() {
8449
+ try {
8450
+ var _temp = _catch(function () {
8451
+ return Promise.resolve(getDetailProductApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId, productId)).then(function (res) {
8452
+ var _res$data, _res$data$status;
8453
+ 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) {
8454
+ var _res$data2;
8455
+ setProduct(res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data);
8456
+ }
8457
+ });
8458
+ }, function (e) {
8459
+ console.log(e);
8460
+ });
8461
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
8462
+ } catch (e) {
8463
+ return Promise.reject(e);
8464
+ }
8465
+ };
8466
+ return {
8467
+ product: product
8468
+ };
8469
+ };
8470
+
8471
+ var ServiceDetail1 = function ServiceDetail1(props) {
8472
+ var shopConfigStyle = props.shopConfigStyle;
8473
+ var _ProductDetailControl = ProductDetailController(props),
8474
+ product = _ProductDetailControl.product;
8475
+ console.log('product', product);
8476
+ return /*#__PURE__*/React__default.createElement("div", {
8477
+ className: SECTION_DEFAULT_CLASS + " !py-0"
8478
+ }, /*#__PURE__*/React__default.createElement("div", {
8479
+ className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-3 gap-6 bg-bgSecondary"
8480
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8481
+ product: product,
8482
+ className: "w-full aspect-square rounded-2xl"
8483
+ }), /*#__PURE__*/React__default.createElement("div", {
8484
+ className: "col-span-2"
8485
+ }, /*#__PURE__*/React__default.createElement("p", {
8486
+ className: "font-semibold text-2xl"
8487
+ }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
8488
+ product: product,
8489
+ className: "mt-6"
8490
+ }), /*#__PURE__*/React__default.createElement("div", {
8491
+ className: "flex gap-4 mt-6"
8492
+ }, /*#__PURE__*/React__default.createElement("div", null, "Th\u1EDDi l\u01B0\u1EE3ng: "), /*#__PURE__*/React__default.createElement("div", null, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes))), /*#__PURE__*/React__default.createElement("div", {
8493
+ className: "flex gap-4 mt-6"
8494
+ }, /*#__PURE__*/React__default.createElement(Button, {
8495
+ label: "ĐẶT LỊCH",
8496
+ shopConfigStyle: shopConfigStyle
8497
+ })), /*#__PURE__*/React__default.createElement("p", {
8498
+ className: "text-lg mt-12 pt-6 border-t border-stroke"
8499
+ }, "M\xF4 t\u1EA3"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
8500
+ className: "mt-6",
8501
+ dangerouslySetInnerHTML: {
8502
+ __html: product === null || product === void 0 ? void 0 : product.description
8503
+ }
8504
+ }) : /*#__PURE__*/React__default.createElement("div", {
8505
+ className: "text-gray3 mt-2"
8506
+ }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
8507
+ };
8508
+
8509
+ var ProductItem2 = function ProductItem2(props) {
8510
+ var product = props.product;
8511
+ return /*#__PURE__*/React__default.createElement("a", {
8512
+ href: getLinkProductDetail(product)
8513
+ }, /*#__PURE__*/React__default.createElement("div", {
8514
+ className: "text-center relative group"
8515
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8516
+ product: product,
8517
+ className: "max-w-[240px] rounded-full mx-auto"
8518
+ }), /*#__PURE__*/React__default.createElement(ProductPrice, {
8519
+ product: product,
8520
+ className: "text-lg mt-4"
8521
+ }), /*#__PURE__*/React__default.createElement("div", {
8522
+ className: "text-lg mt-2"
8523
+ }, product === null || product === void 0 ? void 0 : product.productName)));
8524
+ };
8525
+
8526
+ var Products1 = function Products1(props) {
8527
+ var _props$shopConfigStyl = props.shopConfigStyle,
8528
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
8529
+ _props$data = props.data,
8530
+ data = _props$data === void 0 ? {} : _props$data,
8531
+ _props$SectionTitle = props.SectionTitle,
8532
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8533
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8534
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8535
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8536
+ var _useState = useState({
8537
+ size: 4
8538
+ }),
8539
+ params = _useState[0];
8540
+ var _ProductController = ProductController(_extends({}, props, {
8541
+ params: params
8542
+ })),
8543
+ _ProductController$pr = _ProductController.products,
8544
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
8545
+ console.log("Products1 products");
8546
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8547
+ className: SECTION_DEFAULT_CLASS + " text-center"
8548
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8549
+ data: data,
8550
+ shopConfigStyle: shopConfigStyle
8551
+ }), /*#__PURE__*/React__default.createElement("div", {
8552
+ className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
8553
+ }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
8554
+ return /*#__PURE__*/React__default.createElement(ProductItem2, {
8555
+ key: index,
8556
+ product: product === null || product === void 0 ? void 0 : product.productInfo
8557
+ });
8558
+ })), /*#__PURE__*/React__default.createElement(Button, {
8559
+ label: "Xem tất cả",
8560
+ shopConfigStyle: shopConfigStyle,
8561
+ className: "mt-12"
8562
+ })), /*#__PURE__*/React__default.createElement(Dash, {
8563
+ color: secondary
8564
+ }));
8565
+ };
8566
+
8567
+ var ItemProduct = function ItemProduct(props) {
8568
+ var product = props.product;
8569
+ return /*#__PURE__*/React__default.createElement("div", {
8570
+ className: "pb-4 rounded-2xl w-full bg-bgSecondary"
8571
+ }, /*#__PURE__*/React__default.createElement("div", {
8572
+ className: "relative pt-2 flex justify-center h-32 sm:h-40 lg:h-52"
8573
+ }, /*#__PURE__*/React__default.createElement("a", {
8574
+ href: "#"
8575
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
8576
+ product: product,
8577
+ className: "aspect-w-1 aspect-h-1 max-h-32 sm:max-h-40 lg:max-h-52 object-cover"
8578
+ })), product && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && +(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price) && /*#__PURE__*/React__default.createElement("label", {
8579
+ className: "absolute bg-red-600 rounded-r-lg sm:px-2 text-textButton",
8580
+ style: {
8581
+ top: "10%"
8582
+ }
8583
+ }, ((product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) - (product === null || product === void 0 ? void 0 : product.price)) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) * 100, "%")), /*#__PURE__*/React__default.createElement("div", {
8584
+ className: "px-4 h-[100px] mt-6"
8585
+ }, /*#__PURE__*/React__default.createElement("label", {
8586
+ className: "line-clamp-2 lg:h-12 lg:block"
8587
+ }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
8588
+ className: "mt-3 md:flex md:justify-between flex-col"
8589
+ }, /*#__PURE__*/React__default.createElement(ProductPrice, {
8590
+ product: product
8591
+ }))));
8592
+ };
8593
+
8594
+ var Carousel = function Carousel(props) {
8595
+ var carouselRef = useRef(null);
8596
+ var _useState = useState(false),
8597
+ isScrolledToLeft = _useState[0],
8598
+ setIsScrolledToLeft = _useState[1];
8599
+ var _useState2 = useState(true),
8600
+ isScrolledToRight = _useState2[0],
8601
+ setIsScrolledToRight = _useState2[1];
8602
+ var _props$datas = props.datas,
8603
+ datas = _props$datas === void 0 ? [] : _props$datas,
8604
+ _props$className = props.className,
8605
+ className = _props$className === void 0 ? "" : _props$className,
8606
+ _props$style = props.style,
8607
+ style = _props$style === void 0 ? {} : _props$style,
8608
+ _props$primaryColor = props.primaryColor,
8609
+ primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
8610
+ _props$renderItem = props.renderItem,
8611
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
8612
+ var handleClickPrevImg = function handleClickPrevImg() {
8613
+ if (carouselRef.current) {
8614
+ setIsScrolledToLeft(true);
8615
+ setIsScrolledToRight(false);
8616
+ carouselRef.current.scrollBy({
8617
+ left: -300,
8618
+ behavior: "smooth"
8619
+ });
8620
+ }
8621
+ };
8622
+ var handleClickNextImg = function handleClickNextImg() {
8623
+ setIsScrolledToRight(true);
8624
+ setIsScrolledToLeft(false);
8625
+ if (carouselRef.current) {
8626
+ carouselRef.current.scrollBy({
8627
+ left: 300,
8628
+ behavior: "smooth"
8629
+ });
8630
+ }
8631
+ };
8632
+ return /*#__PURE__*/React__default.createElement("div", {
8633
+ className: "relative " + className + " ",
8634
+ style: style
8635
+ }, /*#__PURE__*/React__default.createElement("div", {
8636
+ className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
8637
+ ref: carouselRef
8638
+ }, datas && datas.length > 0 && datas.map(function (item, index) {
8639
+ return renderItem(item, index);
8640
+ })), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
8641
+ className: " hidden md:block bg-gray3 p-3 rounded-full absolute top-[45%] left-[-8px] lg:left-[-1%]",
8642
+ style: {
8643
+ backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
8644
+ },
8645
+ onClick: handleClickPrevImg
8646
+ }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
8647
+ className: "text-sm lg:text-lg text-white"
8648
+ })), /*#__PURE__*/React__default.createElement("button", {
8649
+ className: " hidden md:block p-3 rounded-full absolute top-[45%] right-[-2%] lg:right-0",
8650
+ style: {
8651
+ backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
8652
+ },
8653
+ onClick: handleClickNextImg
8654
+ }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
8655
+ className: "text-sm lg:text-lg text-white"
8656
+ }))));
8657
+ };
8658
+
8659
+ var Products2 = function Products2(props) {
8660
+ var shopConfigStyle = props.shopConfigStyle,
8661
+ data = props.data;
8662
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8663
+ _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
8664
+ primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
8665
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8666
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8667
+ _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
8668
+ textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
8669
+ _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8670
+ background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
8671
+ _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
8672
+ textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
8673
+ var _ProductController = ProductController(props),
8674
+ _ProductController$pr = _ProductController.products,
8675
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
8676
+ console.log("Products2 products");
8677
+ return /*#__PURE__*/React__default.createElement("div", {
8678
+ className: "pt-10 px-4 xl:px-20",
8679
+ style: {
8680
+ background: background,
8681
+ color: textBody
8682
+ }
8683
+ }, /*#__PURE__*/React__default.createElement("div", {
8684
+ className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
8685
+ style: {
8686
+ background: secondary
8687
+ }
8688
+ }, /*#__PURE__*/React__default.createElement("h2", {
8689
+ className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5 pb-4",
8690
+ style: {
8691
+ color: textButton
8692
+ }
8693
+ }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
8694
+ datas: products,
8695
+ primaryColor: primary,
8696
+ renderItem: function renderItem(item, index) {
8697
+ return /*#__PURE__*/React__default.createElement("div", {
8698
+ key: "carousel-" + index,
8699
+ className: " min-w-[40vw] object-cover sm:min-w-[25vw] lg:min-w-[22vw] xl:min-w-[20vw] pe-4 xl:pe-6"
8700
+ }, /*#__PURE__*/React__default.createElement(ItemProduct, {
8701
+ product: item.productInfo,
8702
+ shopConfigStyle: shopConfigStyle
8703
+ }));
8704
+ }
8705
+ })));
8706
+ };
8707
+
8708
+ var Pagination = function Pagination(props) {
8709
+ var _props$size = props.size,
8710
+ size = _props$size === void 0 ? 24 : _props$size,
8711
+ _props$className = props.className,
8712
+ className = _props$className === void 0 ? "" : _props$className,
8713
+ _props$total_pages = props.total_pages,
8714
+ total_pages = _props$total_pages === void 0 ? 0 : _props$total_pages,
8715
+ _props$has_next = props.has_next,
8716
+ has_next = _props$has_next === void 0 ? true : _props$has_next,
8717
+ _props$has_previous = props.has_previous,
8718
+ has_previous = _props$has_previous === void 0 ? false : _props$has_previous,
8719
+ _props$current_page = props.current_page,
8720
+ current_page = _props$current_page === void 0 ? 0 : _props$current_page,
8721
+ _props$onPageChange = props.onPageChange,
8722
+ onPageChange = _props$onPageChange === void 0 ? function () {} : _props$onPageChange;
8723
+ var handlePageChange = function handlePageChange(page) {
8724
+ onPageChange(page);
8725
+ };
8726
+ return /*#__PURE__*/React__default.createElement("div", {
8727
+ className: "flex gap-4 items-center justify-self-center " + className
8728
+ }, /*#__PURE__*/React__default.createElement(IoChevronBackOutline, {
8729
+ className: has_previous ? "text-primary" : "text-gray3",
8730
+ size: size
8731
+ }), /*#__PURE__*/React__default.createElement("div", {
8732
+ className: "flex items-center space-x-1"
8733
+ }, Array(total_pages).fill().map(function (_, index) {
8734
+ return /*#__PURE__*/React__default.createElement("button", {
8735
+ key: index,
8736
+ onClick: function onClick() {
8737
+ return handlePageChange(index);
8738
+ },
8739
+ className: "px-4 py-1 rounded-md " + (index === current_page ? 'bg-primary text-textButton' : 'bg-transparent text-primary') + " hover:opacity-80"
8740
+ }, index + 1);
8741
+ })), /*#__PURE__*/React__default.createElement(IoChevronForwardOutline, {
8742
+ className: has_next ? "text-primary" : "text-gray3",
8743
+ size: size
8744
+ }));
8745
+ };
8746
+
8747
+ var Products3 = function Products3(props) {
8748
+ var _props$shopConfigStyl = props.shopConfigStyle,
8749
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
8750
+ _props$data = props.data,
8751
+ data = _props$data === void 0 ? {} : _props$data,
8752
+ _props$SectionTitle = props.SectionTitle,
8753
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8754
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8755
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8756
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8757
+ var _useState = useState({
8758
+ size: 6
8759
+ }),
8760
+ productParams = _useState[0],
8761
+ setProductParams = _useState[1];
8762
+ var _useState2 = useState(false),
8763
+ isAutoGetList = _useState2[0],
8764
+ setIsAutoGetList = _useState2[1];
8765
+ var _useState3 = useState(),
8766
+ categorySelected = _useState3[0],
8767
+ setCategorySelected = _useState3[1];
8768
+ var _ProductController = ProductController(_extends({}, props, {
8769
+ params: productParams,
8770
+ isAutoGetList: isAutoGetList
8771
+ })),
8772
+ _ProductController$pr = _ProductController.products,
8773
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr,
8774
+ loading = _ProductController.loading,
8775
+ page = _ProductController.page;
8776
+ var _CategoryController = CategoryController(_extends({}, props, {
8777
+ params: {
8778
+ type: "0"
8779
+ }
8780
+ })),
8781
+ categories = _CategoryController.categories;
8782
+ useEffect(function () {
8783
+ setCategorySelected(categories === null || categories === void 0 ? void 0 : categories[0]);
8784
+ }, [categories]);
8785
+ useEffect(function () {
8786
+ if (categorySelected) {
8787
+ setProductParams(_extends({}, productParams, {
8788
+ page: 0,
8789
+ categoryId: categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId
8790
+ }));
8791
+ setIsAutoGetList(true);
8792
+ }
8793
+ }, [categorySelected]);
8794
+ var onSelectCategory = function onSelectCategory(category) {
8795
+ setCategorySelected(category);
8796
+ };
8797
+ var onPageChange = function onPageChange(pageNum) {
8798
+ setProductParams(_extends({}, productParams, {
8799
+ page: pageNum
8800
+ }));
8801
+ };
8802
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8803
+ className: "" + SECTION_DEFAULT_CLASS
8804
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8805
+ data: data,
8806
+ shopConfigStyle: shopConfigStyle
8807
+ }), /*#__PURE__*/React__default.createElement("div", {
8808
+ className: "grid grid-cols-1 md:grid-cols-4 gap-12"
8809
+ }, /*#__PURE__*/React__default.createElement("div", {
8810
+ className: "hidden md:block"
8811
+ }, /*#__PURE__*/React__default.createElement("div", {
8812
+ className: "text-xl"
8813
+ }, "Danh m\u1EE5c s\u1EA3n ph\u1EA9m"), categories === null || categories === void 0 ? void 0 : categories.map(function (category, index) {
8814
+ return /*#__PURE__*/React__default.createElement("div", {
8815
+ className: "flex gap-2 py-4 border-b border-stroke cursor-pointer hover:text-primary " + ((categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.categoryId) === (category === null || category === void 0 ? void 0 : category.categoryId) ? "text-primary" : "text-textSecondary"),
8816
+ key: index,
8817
+ onClick: function onClick() {
8818
+ return onSelectCategory(category);
8819
+ }
8820
+ }, /*#__PURE__*/React__default.createElement(IoIosHeartEmpty, {
8821
+ size: 24
8822
+ }), /*#__PURE__*/React__default.createElement("div", null, category === null || category === void 0 ? void 0 : category.cateName));
8823
+ })), /*#__PURE__*/React__default.createElement("div", {
8824
+ className: "md:hidden"
8825
+ }), /*#__PURE__*/React__default.createElement("div", {
8826
+ className: "col-span-3 text-center"
8827
+ }, loading ? /*#__PURE__*/React__default.createElement("div", {
8828
+ className: "flex w-full justify-center p-12"
8829
+ }, /*#__PURE__*/React__default.createElement(Loading, {
8830
+ size: 32
8831
+ })) : /*#__PURE__*/React__default.createElement("div", {
8832
+ className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 mt-12"
8833
+ }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
8834
+ return /*#__PURE__*/React__default.createElement(ProductItem2, {
8835
+ key: index,
8836
+ product: product === null || product === void 0 ? void 0 : product.productInfo
8837
+ });
8838
+ })), /*#__PURE__*/React__default.createElement(Pagination, _extends({
8839
+ className: "mt-12"
8840
+ }, page, {
8841
+ onPageChange: onPageChange
8842
+ }))))), /*#__PURE__*/React__default.createElement(Dash, {
8843
+ color: secondary
8844
+ }));
8845
+ };
8846
+
8847
+ var CarouselItem = function CarouselItem(props) {
8848
+ var listRef = useRef(null);
8849
+ var _useState = useState(false),
8850
+ isScrolledToLeft = _useState[0],
8851
+ setIsScrolledToLeft = _useState[1];
8852
+ var _useState2 = useState(true),
8853
+ isScrolledToRight = _useState2[0],
8854
+ setIsScrolledToRight = _useState2[1];
8855
+ var _props$datas = props.datas,
8856
+ datas = _props$datas === void 0 ? [] : _props$datas,
8857
+ _props$className = props.className,
8858
+ className = _props$className === void 0 ? "" : _props$className,
8859
+ _props$style = props.style,
8860
+ style = _props$style === void 0 ? {} : _props$style,
8861
+ _props$primaryColor = props.primaryColor,
8862
+ primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
8863
+ _props$textButtonColo = props.textButtonColor,
8864
+ textButtonColor = _props$textButtonColo === void 0 ? "" : _props$textButtonColo,
8865
+ _props$renderItem = props.renderItem,
8866
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
8867
+ var handleClickPrevImg = function handleClickPrevImg() {
8868
+ if (listRef.current) {
8869
+ setIsScrolledToLeft(true);
8870
+ setIsScrolledToRight(false);
8871
+ listRef.current.scrollBy({
8872
+ left: -80,
8873
+ behavior: "smooth"
8874
+ });
8875
+ }
8876
+ };
8877
+ var handleClickNextImg = function handleClickNextImg() {
8878
+ setIsScrolledToRight(true);
8879
+ setIsScrolledToLeft(false);
8880
+ if (listRef.current) {
8881
+ listRef.current.scrollBy({
8882
+ left: 80,
8883
+ behavior: "smooth"
8884
+ });
8885
+ }
8886
+ };
8887
+ console.log("check propsss::::::::", datas);
8888
+ return /*#__PURE__*/React__default.createElement("div", {
8889
+ className: "grid grid-cols-12 h-12 " + className,
8890
+ style: style
8891
+ }, /*#__PURE__*/React__default.createElement("div", {
8892
+ className: "col-span-12 lg:col-span-10 md:col-span-9 overflow-hidden "
8893
+ }, /*#__PURE__*/React__default.createElement("div", {
8894
+ className: "flex overflow-x-auto gap-2 hide-scrollbar items-center",
8895
+ ref: listRef
8896
+ }, datas && datas.length > 0 && datas.map(function (item, index) {
8897
+ return renderItem(item, index);
8898
+ }))), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", {
8899
+ className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
8900
+ }, /*#__PURE__*/React__default.createElement("button", {
8901
+ className: " px-4 py-3 rounded-full",
8902
+ onClick: handleClickPrevImg,
8903
+ style: {
8904
+ backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
8905
+ }
8906
+ }, /*#__PURE__*/React__default.createElement(FaArrowLeft, {
8907
+ className: "inline-block mb-1 text-lg",
8908
+ style: {
8909
+ color: textButtonColor
8910
+ }
8911
+ })), /*#__PURE__*/React__default.createElement("button", {
8912
+ className: "bg-gray2 px-4 py-3 rounded-full",
8913
+ style: {
8914
+ backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
8915
+ },
8916
+ onClick: handleClickNextImg
8917
+ }, /*#__PURE__*/React__default.createElement(FaArrowRight$1, {
8918
+ className: "inline-block mb-1 text-lg",
8919
+ style: {
8920
+ color: textButtonColor
8921
+ }
8922
+ }))));
8923
+ };
8924
+
8925
+ var ListProduct = function ListProduct(props) {
8926
+ var _props$datas = props.datas,
8927
+ datas = _props$datas === void 0 ? [] : _props$datas,
8928
+ _props$style = props.style,
8929
+ style = _props$style === void 0 ? {} : _props$style,
8930
+ _props$className = props.className,
8931
+ className = _props$className === void 0 ? {} : _props$className,
8932
+ _props$renderItem = props.renderItem,
8933
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
8934
+ return /*#__PURE__*/React__default.createElement("div", {
8935
+ className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 mt-6 " + className,
8936
+ style: style
8937
+ }, datas && datas.length > 0 && datas.map(function (item, index) {
8938
+ return renderItem(item, index);
8939
+ }));
8940
+ };
8941
+
8942
+ var Products10 = function Products10(props) {
8943
+ var _useState = useState(""),
8944
+ selectCategory = _useState[0],
8945
+ setSelectCategory = _useState[1];
8946
+ var shopConfigStyle = props.shopConfigStyle,
8947
+ data = props.data;
8948
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8949
+ _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
8950
+ primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
8951
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
8952
+ textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8953
+ _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
8954
+ textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
8955
+ _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8956
+ background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
8957
+ _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
8958
+ bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
8959
+ var _CategoryController = CategoryController(props),
8960
+ _CategoryController$c = _CategoryController.categories,
8961
+ categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
8962
+ var _ProductController = ProductController(props),
8963
+ _ProductController$pr = _ProductController.products,
8964
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
8965
+ console.log("Products10 products");
8966
+ return /*#__PURE__*/React__default.createElement("div", {
8967
+ className: "w-full pt-10 px-4 xl:px-20",
8968
+ style: {
8969
+ background: background,
8970
+ color: textBody
8971
+ }
8972
+ }, /*#__PURE__*/React__default.createElement("h2", {
8973
+ className: "text-2xl lg:text-3xl xl:text-4xl font-semibold mb-6"
8974
+ }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(CarouselItem, {
8975
+ datas: categories,
8976
+ primaryColor: primary,
8977
+ textButtonColor: textButton,
8978
+ renderItem: function renderItem(item, index) {
8979
+ return /*#__PURE__*/React__default.createElement("div", {
8980
+ key: item.categoryId + "-" + index,
8981
+ className: "border-2 items whitespace-nowrap p-2 rounded-lg cursor-pointer ",
8982
+ style: {
8983
+ borderColor: primary,
8984
+ color: selectCategory === item.categoryId ? textButton : primary,
8985
+ background: selectCategory === item.categoryId ? primary : bgSecondary
8986
+ },
8987
+ onClick: function onClick() {
8988
+ setSelectCategory(item.categoryId);
8989
+ }
8990
+ }, item.cateName);
8991
+ }
8992
+ }), /*#__PURE__*/React__default.createElement(ListProduct, {
8993
+ datas: products,
8994
+ renderItem: function renderItem(item, index) {
8995
+ return /*#__PURE__*/React__default.createElement("div", {
8996
+ key: "productfsd-" + index
8997
+ }, /*#__PURE__*/React__default.createElement(ItemProduct, {
8998
+ product: item.productInfo,
8999
+ shopConfigStyle: shopConfigStyle
9000
+ }));
9001
+ }
9002
+ }));
9003
+ };
9004
+
9005
+ var ProductSale2 = function ProductSale2(props) {
9006
+ var _props$shopConfigStyl = props.shopConfigStyle,
9007
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
9008
+ _props$data = props.data,
9009
+ data = _props$data === void 0 ? {} : _props$data,
9010
+ _props$SectionTitle = props.SectionTitle,
9011
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
9012
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
9013
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
9014
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
9015
+ var _useState = useState({
9016
+ size: 4
9017
+ });
9018
+ var products = [];
9019
+ console.log("Products1 products");
9020
+ return products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
9021
+ className: SECTION_DEFAULT_CLASS + " text-center"
9022
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
9023
+ data: data,
9024
+ shopConfigStyle: shopConfigStyle
9025
+ }), /*#__PURE__*/React__default.createElement("div", {
9026
+ className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
9027
+ }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
9028
+ return /*#__PURE__*/React__default.createElement(ProductItem2, {
9029
+ key: index,
9030
+ product: product === null || product === void 0 ? void 0 : product.productInfo
9031
+ });
9032
+ })), /*#__PURE__*/React__default.createElement(Button, {
9033
+ label: "Xem tất cả",
9034
+ shopConfigStyle: shopConfigStyle,
9035
+ className: "mt-12"
9036
+ })), /*#__PURE__*/React__default.createElement(Dash, {
9037
+ color: secondary
9038
+ })) : null;
9039
+ };
9040
+
9041
+ var ProductHot3 = function ProductHot3(props) {
9042
+ var _props$shopConfigStyl = props.shopConfigStyle,
9043
+ shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
9044
+ _props$data = props.data,
9045
+ data = _props$data === void 0 ? {} : _props$data,
9046
+ _props$SectionTitle = props.SectionTitle,
9047
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
9048
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
9049
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
9050
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
9051
+ var _useState = useState({
9052
+ size: 4,
9053
+ isHighlight: true
9054
+ }),
9055
+ params = _useState[0];
9056
+ var _ProductController = ProductController(_extends({}, props, {
9057
+ params: params
9058
+ })),
9059
+ _ProductController$pr = _ProductController.products,
9060
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
9061
+ console.log("Products1 products");
9062
+ return products !== null && products !== void 0 && products.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
9063
+ className: SECTION_DEFAULT_CLASS + " text-center"
9064
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
9065
+ data: data,
9066
+ shopConfigStyle: shopConfigStyle
9067
+ }), /*#__PURE__*/React__default.createElement("div", {
9068
+ className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 mt-12"
9069
+ }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
9070
+ return /*#__PURE__*/React__default.createElement(ProductItem2, {
9071
+ key: index,
9072
+ product: product === null || product === void 0 ? void 0 : product.productInfo
9073
+ });
9074
+ }))), /*#__PURE__*/React__default.createElement(Dash, {
9075
+ color: secondary
9076
+ })) : null;
9077
+ };
9078
+
9079
+ var ProductsTop1 = function ProductsTop1(props) {
9080
+ var data = props.data,
9081
+ shopConfigStyle = props.shopConfigStyle;
9082
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
9083
+ _shopConfigStyle$colo2 = _shopConfigStyle$colo.background,
9084
+ background = _shopConfigStyle$colo2 === void 0 ? "#fff" : _shopConfigStyle$colo2;
9085
+ var _ProductController = ProductController(props),
9086
+ _ProductController$pr = _ProductController.products,
9087
+ products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
9088
+ console.log("ProductsTop1 products");
9089
+ return /*#__PURE__*/React__default.createElement("div", {
9090
+ className: "w-full pt-10 px-4 xl:px-20",
9091
+ style: {
9092
+ background: background
9093
+ }
9094
+ }, /*#__PURE__*/React__default.createElement("h2", {
9095
+ className: "text-2xl md:text-3xl lg:text-4xl font-semibold mb-6"
9096
+ }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(ListProduct, {
9097
+ datas: products,
9098
+ renderItem: function renderItem(item, index) {
9099
+ return /*#__PURE__*/React__default.createElement("div", {
9100
+ key: "productfsd-" + index
9101
+ }, /*#__PURE__*/React__default.createElement(ItemProduct, {
9102
+ product: item.productInfo,
9103
+ shopConfigStyle: shopConfigStyle
9104
+ }));
9105
+ }
9106
+ }));
9107
+ };
9108
+
9109
+ var CartController = function CartController(props) {
9110
+ var addToCart = props.addToCart,
9111
+ dispatch = props.dispatch;
9112
+ useEffect(function () {}, []);
9113
+ var addProductToCart = function addProductToCart(product, variant, quantity) {
9114
+ try {
9115
+ try {
9116
+ dispatch(addToCart({
9117
+ product: product,
9118
+ variant: variant,
9119
+ quantity: quantity
9120
+ }));
9121
+ } catch (e) {
9122
+ console.log(e);
9123
+ }
9124
+ return Promise.resolve();
9125
+ } catch (e) {
9126
+ return Promise.reject(e);
9127
+ }
9128
+ };
9129
+ return {
9130
+ addProductToCart: addProductToCart
9131
+ };
8140
9132
  };
8141
9133
 
8142
- var BookingForm = function BookingForm(props) {
8143
- var _props$shopConfigStyl = props.shopConfigStyle,
8144
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl;
8145
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8146
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8147
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8148
- var _useState = useState(false),
8149
- isAutoGetListProduct = _useState[0];
8150
- var _useState2 = useState({
8151
- types: "1,10"
8152
- }),
8153
- productsParams = _useState2[0];
8154
- var _useState3 = useState(false),
8155
- isAutoGetListEmployee = _useState3[0];
8156
- var _useState4 = useState(new Date());
8157
- var _EmployeeController = EmployeeController(_extends({}, props, {
8158
- isAutoGetList: isAutoGetListEmployee
8159
- }));
8160
- var _ProductController = ProductController(_extends({}, props, {
8161
- isAutoGetList: isAutoGetListProduct,
8162
- params: productsParams
8163
- }));
8164
- console.log("BookingForm products");
8165
- var _BookingController = BookingController(props);
8166
- return /*#__PURE__*/React__default.createElement("div", {
8167
- className: "grid gap-4 rounded-lg p-6",
8168
- style: {
8169
- backgroundColor: secondary
9134
+ var ProductDetail10 = function ProductDetail10(props) {
9135
+ var shopConfigStyle = props.shopConfigStyle;
9136
+ var _ProductDetailControl = ProductDetailController(props),
9137
+ product = _ProductDetailControl.product;
9138
+ var _useState = useState(),
9139
+ variant = _useState[0],
9140
+ setVariant = _useState[1];
9141
+ var _useState2 = useState([]),
9142
+ options = _useState2[0],
9143
+ setOptions = _useState2[1];
9144
+ var _CartController = CartController(props),
9145
+ addProductToCart = _CartController.addProductToCart;
9146
+ var refInputQuantity = useRef();
9147
+ useEffect(function () {
9148
+ if (product) {
9149
+ initVariant();
9150
+ }
9151
+ }, [product]);
9152
+ var initVariant = function initVariant() {
9153
+ var _product$variants;
9154
+ var variant = product === null || product === void 0 ? void 0 : (_product$variants = product.variants) === null || _product$variants === void 0 ? void 0 : _product$variants[0];
9155
+ var indexOptions = variant.index.split(",");
9156
+ setVariant(variant);
9157
+ var options = (product === null || product === void 0 ? void 0 : product.optionValues) || [];
9158
+ indexOptions.map(function (value, index) {
9159
+ return options[index].valueIndex = value;
9160
+ });
9161
+ setOptions(options);
9162
+ };
9163
+ var selectOption = function selectOption(optionIndex, valueIndex) {
9164
+ console.log("selectOption optionIndex valueIndex", optionIndex, valueIndex);
9165
+ var newOptions = [].concat(options);
9166
+ newOptions[optionIndex].valueIndex = valueIndex;
9167
+ setOptions(newOptions);
9168
+ console.log("newOptions", newOptions);
9169
+ var variant = getVariantFromOption(newOptions);
9170
+ console.log("getVariantFromOption variant", variant);
9171
+ setVariant(variant);
9172
+ };
9173
+ var getVariantFromOption = function getVariantFromOption(_options) {
9174
+ console.log("getVariantFromOption options", _options);
9175
+ var listOptionIndexSelected = _options.map(function (e) {
9176
+ return e.valueIndex;
9177
+ }).filter(function (e) {
9178
+ return e !== undefined;
9179
+ });
9180
+ var variantIndex = listOptionIndexSelected.join(",");
9181
+ return ((product === null || product === void 0 ? void 0 : product.variants) || []).find(function (e) {
9182
+ return e.index === variantIndex;
9183
+ });
9184
+ };
9185
+ var validateData = function validateData() {
9186
+ var _refInputQuantity$cur;
9187
+ return (refInputQuantity === null || refInputQuantity === void 0 ? void 0 : (_refInputQuantity$cur = refInputQuantity.current) === null || _refInputQuantity$cur === void 0 ? void 0 : _refInputQuantity$cur.validateData()) && variant;
9188
+ };
9189
+ var addToCart = function addToCart() {
9190
+ try {
9191
+ var _temp = function () {
9192
+ if (validateData()) {
9193
+ var _refInputQuantity$cur2;
9194
+ var quantity = refInputQuantity === null || refInputQuantity === void 0 ? void 0 : (_refInputQuantity$cur2 = refInputQuantity.current) === null || _refInputQuantity$cur2 === void 0 ? void 0 : _refInputQuantity$cur2.getValue();
9195
+ return Promise.resolve(addProductToCart(product, variant, quantity)).then(function () {});
9196
+ }
9197
+ }();
9198
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
9199
+ } catch (e) {
9200
+ return Promise.reject(e);
8170
9201
  }
9202
+ };
9203
+ var buyNow = function buyNow() {};
9204
+ return /*#__PURE__*/React__default.createElement("div", {
9205
+ className: SECTION_DEFAULT_CLASS + " mb-0"
8171
9206
  }, /*#__PURE__*/React__default.createElement("div", {
8172
- className: "grid grid-cols-1 md:grid-cols-2 gap-4"
8173
- }, /*#__PURE__*/React__default.createElement(Input, {
8174
- label: "Họ tên",
8175
- placeholder: "Nhập họ tên",
8176
- rules: [{
8177
- type: "required",
8178
- message: "Bắt buộc nhập họ tên"
8179
- }],
8180
- className: "w-full rounded-lg"
9207
+ className: "p-6 rounded-2xl grid grid-cols-1 md:grid-cols-3 gap-6 bg-bgSecondary"
9208
+ }, /*#__PURE__*/React__default.createElement(ProductImage, {
9209
+ product: product,
9210
+ className: "w-full aspect-square rounded-2xl"
9211
+ }), /*#__PURE__*/React__default.createElement("div", {
9212
+ className: "col-span-2"
9213
+ }, /*#__PURE__*/React__default.createElement("p", {
9214
+ className: "font-semibold text-2xl"
9215
+ }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement(ProductPrice, {
9216
+ product: product,
9217
+ variant: variant,
9218
+ className: "mt-6"
9219
+ }), options.map(function (option, index) {
9220
+ return /*#__PURE__*/React__default.createElement("div", {
9221
+ className: "flex gap-2 mt-6",
9222
+ key: index
9223
+ }, /*#__PURE__*/React__default.createElement("div", {
9224
+ className: "min-w-24"
9225
+ }, option === null || option === void 0 ? void 0 : option.name, ":"), /*#__PURE__*/React__default.createElement("div", {
9226
+ className: "flex gap-2"
9227
+ }, ((option === null || option === void 0 ? void 0 : option.value) || []).map(function (v, i) {
9228
+ return /*#__PURE__*/React__default.createElement("button", {
9229
+ key: i,
9230
+ onClick: function onClick() {
9231
+ return selectOption(index, i);
9232
+ },
9233
+ className: "rounded py-1 px-2 " + (i == option.valueIndex ? "bg-primary text-textButton" : "border bg-gray6")
9234
+ }, v);
9235
+ })));
8181
9236
  }), /*#__PURE__*/React__default.createElement(Input, {
8182
- label: "Họ tên",
8183
- placeholder: "Nhập họ tên",
9237
+ label: "Số lượng",
9238
+ wrapClassName: "flex items-center gap-6 mt-6",
8184
9239
  rules: [{
8185
9240
  type: "required",
8186
- message: "Bắt buộc nhập họ tên"
8187
- }],
8188
- className: "w-full rounded-lg"
8189
- })), /*#__PURE__*/React__default.createElement("div", {
8190
- className: "grid grid-cols-1 md:grid-cols-2 gap-4"
8191
- }, /*#__PURE__*/React__default.createElement(Select, {
8192
- label: "Dịch vụ",
8193
- options: [{
8194
- label: "123",
8195
- value: "456"
9241
+ message: "Bắt buộc nhập số lượng"
8196
9242
  }, {
8197
- label: "1235",
8198
- value: "4567"
9243
+ type: "pattern",
9244
+ pattern: numberPattern,
9245
+ message: "Số lượng không đúng"
8199
9246
  }],
8200
- className: "w-full rounded-lg",
8201
- placeholder: "Chọn dịch vụ"
8202
- }), /*#__PURE__*/React__default.createElement(DateTimePicker, {
8203
- label: "Thời gian",
8204
- className: "w-full rounded-lg",
8205
- placeholder: "Chọn thời gian"
8206
- })), /*#__PURE__*/React__default.createElement("div", {
8207
- className: "text-center"
9247
+ defaultValue: 1,
9248
+ isQuantity: true,
9249
+ min: 1,
9250
+ ref: refInputQuantity
9251
+ }), /*#__PURE__*/React__default.createElement("div", {
9252
+ className: "flex gap-4 mt-6"
8208
9253
  }, /*#__PURE__*/React__default.createElement(Button, {
8209
- label: "Đặt lịch ngay",
8210
- shopConfigStyle: shopConfigStyle
8211
- })));
9254
+ label: "THÊM VÀO GIỎ",
9255
+ shopConfigStyle: shopConfigStyle,
9256
+ type: "outline",
9257
+ onClick: function onClick() {
9258
+ return addToCart();
9259
+ }
9260
+ }), /*#__PURE__*/React__default.createElement(Button, {
9261
+ label: "MUA NGAY",
9262
+ shopConfigStyle: shopConfigStyle,
9263
+ onClick: function onClick() {
9264
+ return buyNow();
9265
+ }
9266
+ })), /*#__PURE__*/React__default.createElement("p", {
9267
+ className: "text-lg mt-12 pt-6 border-t border-stroke"
9268
+ }, "M\xF4 t\u1EA3 s\u1EA3n ph\u1EA9m"), product !== null && product !== void 0 && product.description ? /*#__PURE__*/React__default.createElement("div", {
9269
+ className: "mt-6",
9270
+ dangerouslySetInnerHTML: {
9271
+ __html: product === null || product === void 0 ? void 0 : product.description
9272
+ }
9273
+ }) : /*#__PURE__*/React__default.createElement("div", {
9274
+ className: "text-gray3 mt-2"
9275
+ }, "Kh\xF4ng c\xF3 th\xF4ng tin"))));
8212
9276
  };
8213
9277
 
8214
9278
  var Booking1 = function Booking1(props) {
@@ -8458,6 +9522,142 @@ var Footer1 = function Footer1(props) {
8458
9522
  }, "Xem \u0111i\u1EC1u kho\u1EA3n v\xE0 ch\xEDnh s\xE1ch"))));
8459
9523
  };
8460
9524
 
9525
+ var Footer7 = function Footer7(props) {
9526
+ var _routes$filter;
9527
+ var shopConfig = props.shopConfig,
9528
+ shopConfigStyle = props.shopConfigStyle,
9529
+ _props$routes = props.routes,
9530
+ routes = _props$routes === void 0 ? [] : _props$routes;
9531
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
9532
+ _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
9533
+ primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
9534
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
9535
+ textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
9536
+ _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
9537
+ textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
9538
+ _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
9539
+ bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9540
+ console.log("Footer7 shopConfig", shopConfig);
9541
+ var _useState = useState([]),
9542
+ shopAddressList = _useState[0],
9543
+ setShopAddressList = _useState[1];
9544
+ useEffect(function () {
9545
+ genShopAddress();
9546
+ }, [shopConfig]);
9547
+ var genShopAddress = function genShopAddress() {
9548
+ try {
9549
+ var addressJson = JSON.parse(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress);
9550
+ if (addressJson) {
9551
+ setShopAddressList(addressJson);
9552
+ } else {
9553
+ setShopAddressList([{
9554
+ address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
9555
+ phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
9556
+ }]);
9557
+ }
9558
+ } catch (e) {
9559
+ setShopAddressList([{
9560
+ address: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAddress,
9561
+ phone: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone
9562
+ }]);
9563
+ }
9564
+ };
9565
+ return /*#__PURE__*/React__default.createElement("div", {
9566
+ className: "footer px-4 pt-10 xl:px-20",
9567
+ style: {
9568
+ background: bgSecondary,
9569
+ color: textBody
9570
+ }
9571
+ }, /*#__PURE__*/React__default.createElement("div", {
9572
+ className: "flex items-center gap-2"
9573
+ }, /*#__PURE__*/React__default.createElement("img", {
9574
+ className: "object-cover w-14",
9575
+ src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
9576
+ alt: ""
9577
+ }), /*#__PURE__*/React__default.createElement("h3", {
9578
+ className: " text-2xl md:text-3xl font-semibold ms-2",
9579
+ style: {
9580
+ color: primary
9581
+ }
9582
+ }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
9583
+ className: "mt-6 grid grid-cols-1 sm:grid-cols-4 gap-6"
9584
+ }, /*#__PURE__*/React__default.createElement("div", {
9585
+ className: " col-span-2 flex flex-col leading-8 mb-10 sm:mb-0 "
9586
+ }, /*#__PURE__*/React__default.createElement("div", {
9587
+ className: "mb-4 font-semibold text-md md:text-lg"
9588
+ }, "Th\xF4ng tin li\xEAn h\u1EC7"), shopAddressList === null || shopAddressList === void 0 ? void 0 : shopAddressList.map(function (item, index) {
9589
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "C\u01A1 s\u1EDF ", index + 1), /*#__PURE__*/React__default.createElement("div", {
9590
+ className: "flex gap-1"
9591
+ }, /*#__PURE__*/React__default.createElement(IoLocationOutline, {
9592
+ size: 24,
9593
+ className: "inline-block mt-1",
9594
+ style: {
9595
+ color: primary
9596
+ }
9597
+ }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.address)), /*#__PURE__*/React__default.createElement("div", {
9598
+ className: "flex gap-1"
9599
+ }, /*#__PURE__*/React__default.createElement(IoCallOutline, {
9600
+ size: 24,
9601
+ className: "inline-block mt-1",
9602
+ style: {
9603
+ color: primary
9604
+ }
9605
+ }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.phone)));
9606
+ })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
9607
+ className: "mb-4 font-semibold text-md md:text-lg"
9608
+ }, "Li\xEAn k\u1EBFt"), /*#__PURE__*/React__default.createElement("div", {
9609
+ className: "leading-10 flex flex-col "
9610
+ }, routes === null || routes === void 0 ? void 0 : (_routes$filter = routes.filter(function (e) {
9611
+ return e === null || e === void 0 ? void 0 : e.isShow;
9612
+ })) === null || _routes$filter === void 0 ? void 0 : _routes$filter.map(function (route, index) {
9613
+ return /*#__PURE__*/React__default.createElement("a", {
9614
+ href: route === null || route === void 0 ? void 0 : route.route
9615
+ }, /*#__PURE__*/React__default.createElement("div", null, route === null || route === void 0 ? void 0 : route.label));
9616
+ }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
9617
+ className: "font-semibold mb-4 text-md md:text-lg"
9618
+ }, "H\u1ED7 tr\u1EE3"), /*#__PURE__*/React__default.createElement("div", {
9619
+ className: "flex justify-start items-center gap-4"
9620
+ }, /*#__PURE__*/React__default.createElement("a", {
9621
+ href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage) || "#"
9622
+ }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
9623
+ size: 40,
9624
+ color: textButton,
9625
+ className: "p-2 rounded-lg",
9626
+ style: {
9627
+ background: primary
9628
+ }
9629
+ })), /*#__PURE__*/React__default.createElement("a", {
9630
+ href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger) || "#"
9631
+ }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
9632
+ size: 40,
9633
+ color: textButton,
9634
+ className: "p-2 rounded-lg",
9635
+ style: {
9636
+ background: primary
9637
+ }
9638
+ })), /*#__PURE__*/React__default.createElement("a", {
9639
+ href: (shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo) || "#"
9640
+ }, /*#__PURE__*/React__default.createElement(SiZalo, {
9641
+ size: 40,
9642
+ color: textButton,
9643
+ className: "p-2 rounded-lg",
9644
+ style: {
9645
+ background: primary
9646
+ }
9647
+ }))))), /*#__PURE__*/React__default.createElement("hr", null), /*#__PURE__*/React__default.createElement("div", {
9648
+ className: "py-4"
9649
+ }, /*#__PURE__*/React__default.createElement("small", {
9650
+ className: "me-5"
9651
+ }, "B\u1EA3n quy\u1EC1n thu\u1ED9c c\xF4ng ty c\u1ED5 ph\u1EA7n c\xF4ng ngh\u1EC7 th\xF4ng minh SFIN."), /*#__PURE__*/React__default.createElement("a", {
9652
+ href: "#"
9653
+ }, /*#__PURE__*/React__default.createElement("small", {
9654
+ className: "underline decoration-solid",
9655
+ style: {
9656
+ color: primary
9657
+ }
9658
+ }, "Xem \u0111i\u1EC1u kho\u1EA3n v\xE0 ch\xEDnh s\xE1ch"))));
9659
+ };
9660
+
8461
9661
  var RatingStar = function RatingStar(props) {
8462
9662
  var _props$star = props.star,
8463
9663
  star = _props$star === void 0 ? 5 : _props$star,
@@ -8498,14 +9698,9 @@ var CustomerRating10 = function CustomerRating10(props) {
8498
9698
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8499
9699
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8500
9700
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8501
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8502
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8503
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9701
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8504
9702
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8505
- className: "relative w-full py-12 px-4 xl:px-20",
8506
- style: {
8507
- backgroundColor: background
8508
- }
9703
+ className: SECTION_DEFAULT_CLASS
8509
9704
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8510
9705
  data: data,
8511
9706
  shopConfigStyle: shopConfigStyle
@@ -8542,18 +9737,12 @@ var Employees1 = function Employees1(props) {
8542
9737
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8543
9738
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8544
9739
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8545
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8546
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8547
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9740
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8548
9741
  console.log("Employee data", data);
8549
9742
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8550
- className: "relative w-full py-12 px-4 xl:px-20",
8551
- style: {
8552
- backgroundColor: background
8553
- }
9743
+ className: SECTION_DEFAULT_CLASS + " relative"
8554
9744
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8555
- data: data,
8556
- shopConfigStyle: shopConfigStyle
9745
+ data: data
8557
9746
  }), /*#__PURE__*/React__default.createElement("div", {
8558
9747
  className: "mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 lg:gap-12"
8559
9748
  }, data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map(function (item, index) {
@@ -8585,15 +9774,10 @@ var Gallery1 = function Gallery1(props) {
8585
9774
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8586
9775
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8587
9776
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8588
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8589
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8590
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9777
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8591
9778
  console.log("Gallery1 data", data);
8592
9779
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8593
- className: "relative w-full py-12 px-4 xl:px-20",
8594
- style: {
8595
- backgroundColor: background
8596
- }
9780
+ className: "" + SECTION_DEFAULT_CLASS
8597
9781
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8598
9782
  data: data,
8599
9783
  shopConfigStyle: shopConfigStyle
@@ -8610,5 +9794,216 @@ var Gallery1 = function Gallery1(props) {
8610
9794
  }));
8611
9795
  };
8612
9796
 
8613
- export { Address1, Banner1, Booking1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Links1, NavBar7, Partner1, Products1, Products10, Products2, ProductsTop1, SectionTitle1, Treatments1, Treatments1$1 as Treatments2 };
9797
+ var PageTitle1 = function PageTitle1(props) {
9798
+ var _sectionData$;
9799
+ var data = props.data,
9800
+ route = props.route;
9801
+ var sectionData = data === null || data === void 0 ? void 0 : data.data;
9802
+ return /*#__PURE__*/React__default.createElement("div", {
9803
+ className: "relative w-full bg-cover bg-center bg-no-repeat ",
9804
+ style: {
9805
+ backgroundImage: "url(" + (sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage) + ")"
9806
+ }
9807
+ }, /*#__PURE__*/React__default.createElement("div", {
9808
+ className: "absolute top-0 w-full h-full bg-black opacity-40 z-0"
9809
+ }), /*#__PURE__*/React__default.createElement("div", {
9810
+ className: "relative w-full p-20 z-10 flex flex-col gap-6 items-center justify-center"
9811
+ }, /*#__PURE__*/React__default.createElement("div", {
9812
+ className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
9813
+ }, route === null || route === void 0 ? void 0 : route.label)));
9814
+ };
9815
+
9816
+ var About5 = function About5(props) {
9817
+ var _sectionData$, _sectionData$2;
9818
+ var shopConfig = props.shopConfig,
9819
+ data = props.data;
9820
+ var sectionData = data === null || data === void 0 ? void 0 : data.data;
9821
+ console.log("About5 sectionData", sectionData);
9822
+ return /*#__PURE__*/React__default.createElement("div", {
9823
+ className: SECTION_DEFAULT_CLASS + " grid grid-cols-1 lg:grid-cols-2 gap-12"
9824
+ }, /*#__PURE__*/React__default.createElement("img", {
9825
+ src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
9826
+ className: "w-full hidden lg:block rounded-xl"
9827
+ }), /*#__PURE__*/React__default.createElement("div", {
9828
+ className: "ck-content",
9829
+ dangerouslySetInnerHTML: {
9830
+ __html: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopAbout
9831
+ }
9832
+ }), /*#__PURE__*/React__default.createElement("img", {
9833
+ src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$2 = sectionData[0]) === null || _sectionData$2 === void 0 ? void 0 : _sectionData$2.srcImage,
9834
+ className: "w-full block lg:hidden rounded-xl"
9835
+ }));
9836
+ };
9837
+
9838
+ var Contact1 = function Contact1(props) {
9839
+ var _sectionData$;
9840
+ var shopConfigStyle = props.shopConfigStyle,
9841
+ shopConfig = props.shopConfig,
9842
+ data = props.data,
9843
+ _props$SectionTitle = props.SectionTitle,
9844
+ SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
9845
+ var sectionData = data === null || data === void 0 ? void 0 : data.data;
9846
+ return /*#__PURE__*/React__default.createElement("div", {
9847
+ className: "" + SECTION_DEFAULT_CLASS
9848
+ }, /*#__PURE__*/React__default.createElement(SectionTitle, {
9849
+ data: data,
9850
+ shopConfigStyle: shopConfigStyle
9851
+ }), /*#__PURE__*/React__default.createElement("div", {
9852
+ className: "grid grid-cols-1 lg:grid-cols-2 gap-12 mt-6"
9853
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "Trong qu\xE1 tr\xECnh gh\xE9 th\u0103m website, n\u1EBFu qu\xFD kh\xE1ch c\xF3 b\u1EA5t k\u1EF3 th\u1EAFc m\u1EAFc hay c\u1EA7n s\u1EF1 h\u1ED7 tr\u1EE3 n\xE0o, h\xE3y li\xEAn h\u1EC7 v\u1EDBi ch\xFAng t\xF4i theo c\xE1c k\xEAnh sau: "), shopConfig !== null && shopConfig !== void 0 && shopConfig.shopPhone ? /*#__PURE__*/React__default.createElement("div", {
9854
+ className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
9855
+ }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
9856
+ size: 40,
9857
+ className: "p-2 text-textButton bg-primary"
9858
+ }), /*#__PURE__*/React__default.createElement("div", null, "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopPhone)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopZalo ? /*#__PURE__*/React__default.createElement("div", {
9859
+ className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
9860
+ }, /*#__PURE__*/React__default.createElement(SiZalo, {
9861
+ size: 40,
9862
+ className: "p-2 text-textButton bg-primary"
9863
+ }), /*#__PURE__*/React__default.createElement("div", null, "Zalo: ", shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopZalo)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopFacebookPage ? /*#__PURE__*/React__default.createElement("div", {
9864
+ className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
9865
+ }, /*#__PURE__*/React__default.createElement(FaFacebookF, {
9866
+ size: 40,
9867
+ className: "p-2 text-textButton bg-primary"
9868
+ }), /*#__PURE__*/React__default.createElement("div", null, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopFacebookPage)) : null, shopConfig !== null && shopConfig !== void 0 && shopConfig.shopMessenger ? /*#__PURE__*/React__default.createElement("div", {
9869
+ className: "flex items-center gap-2 rounded-lg overflow-hidden bg-white mt-6"
9870
+ }, /*#__PURE__*/React__default.createElement(FaFacebookMessenger, {
9871
+ size: 40,
9872
+ className: "p-2 text-textButton bg-primary"
9873
+ }), /*#__PURE__*/React__default.createElement("div", null, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopMessenger)) : null), /*#__PURE__*/React__default.createElement("img", {
9874
+ src: sectionData === null || sectionData === void 0 ? void 0 : (_sectionData$ = sectionData[0]) === null || _sectionData$ === void 0 ? void 0 : _sectionData$.srcImage,
9875
+ className: "w-full rounded-xl border-white border-8 shadow-lg"
9876
+ })));
9877
+ };
9878
+
9879
+ var Breadcrumb1 = function Breadcrumb1(props) {
9880
+ var shopConfigStyle = props.shopConfigStyle,
9881
+ route = props.route,
9882
+ _props$routes = props.routes,
9883
+ routes = _props$routes === void 0 ? [] : _props$routes;
9884
+ var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
9885
+ _shopConfigStyle$colo3 = _shopConfigStyle$colo.textHeading,
9886
+ textHeading = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
9887
+ var _useState = useState([]),
9888
+ items = _useState[0],
9889
+ setItems = _useState[1];
9890
+ useEffect(function () {
9891
+ getItems();
9892
+ }, [route]);
9893
+ var getItems = function getItems() {
9894
+ var _route$route, _route$route$split, _route$route$split$fi;
9895
+ var items = route === null || route === void 0 ? void 0 : (_route$route = route.route) === null || _route$route === void 0 ? void 0 : (_route$route$split = _route$route.split("/")) === null || _route$route$split === void 0 ? void 0 : (_route$route$split$fi = _route$route$split.filter(function (e) {
9896
+ return e === null || e === void 0 ? void 0 : e.length;
9897
+ })) === null || _route$route$split$fi === void 0 ? void 0 : _route$route$split$fi.slice(0, 2);
9898
+ items = items.map(function (e) {
9899
+ return (routes === null || routes === void 0 ? void 0 : routes.find(function (r) {
9900
+ return (r === null || r === void 0 ? void 0 : r.name) === e;
9901
+ })) || {
9902
+ label: e
9903
+ };
9904
+ });
9905
+ items.unshift({
9906
+ name: "home",
9907
+ label: "Trang chủ",
9908
+ route: "/"
9909
+ });
9910
+ setItems(items);
9911
+ };
9912
+ return /*#__PURE__*/React__default.createElement("div", {
9913
+ className: SECTION_DEFAULT_CLASS + " !my-6 flex gap-2"
9914
+ }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
9915
+ return /*#__PURE__*/React__default.createElement("div", {
9916
+ key: index,
9917
+ className: "flex gap-2"
9918
+ }, index ? /*#__PURE__*/React__default.createElement("div", {
9919
+ className: "text-gray4"
9920
+ }, "/") : null, item !== null && item !== void 0 && item.route ? /*#__PURE__*/React__default.createElement("a", {
9921
+ href: item === null || item === void 0 ? void 0 : item.route,
9922
+ style: {
9923
+ color: textHeading
9924
+ }
9925
+ }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.label));
9926
+ }));
9927
+ };
9928
+
9929
+ var Carts1 = function Carts1(props) {
9930
+ var _props$cartItems = props.cartItems,
9931
+ cartItems = _props$cartItems === void 0 ? [] : _props$cartItems;
9932
+ var _useState = useState(false),
9933
+ checkAll = _useState[0],
9934
+ setCheckAll = _useState[1];
9935
+ var handleCheckAll = function handleCheckAll(event) {
9936
+ var _event$target = event.target,
9937
+ checked = _event$target.checked;
9938
+ setCheckAll(checked);
9939
+ };
9940
+ return /*#__PURE__*/React__default.createElement("div", {
9941
+ className: SECTION_DEFAULT_CLASS + " mt-0 rounded-2xl bg-bgSecondary p-4"
9942
+ }, /*#__PURE__*/React__default.createElement("div", {
9943
+ className: "flex gap-4 pb-4"
9944
+ }, /*#__PURE__*/React__default.createElement("input", {
9945
+ type: "checkbox",
9946
+ checked: checkAll,
9947
+ onChange: handleCheckAll
9948
+ }), /*#__PURE__*/React__default.createElement("div", {
9949
+ className: "flex-1"
9950
+ }, "S\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
9951
+ className: "w-32 text-right"
9952
+ }, "\u0110\u01A1n gi\xE1"), /*#__PURE__*/React__default.createElement("div", {
9953
+ className: "w-32 text-center"
9954
+ }, "S\u1ED1 l\u01B0\u1EE3ng"), /*#__PURE__*/React__default.createElement("div", {
9955
+ className: "w-32 text-right"
9956
+ }, "Th\xE0nh ti\u1EC1n"), /*#__PURE__*/React__default.createElement("div", {
9957
+ className: "w-32 text-center"
9958
+ }, "H\xE0nh \u0111\u1ED9ng")), cartItems.map(function (item, index) {
9959
+ return /*#__PURE__*/React__default.createElement(CartItem, {
9960
+ item: item,
9961
+ key: index
9962
+ });
9963
+ }));
9964
+ };
9965
+ var CartItem = function CartItem(props) {
9966
+ var item = props.item;
9967
+ var _useState2 = useState(item.quantity),
9968
+ quantity = _useState2[0],
9969
+ setQuantity = _useState2[1];
9970
+ var refInputQuantity = useRef();
9971
+ var handleCheckItem = function handleCheckItem(event) {};
9972
+ return /*#__PURE__*/React__default.createElement("div", {
9973
+ className: "flex items-center gap-4 border-t py-4"
9974
+ }, /*#__PURE__*/React__default.createElement("input", {
9975
+ type: "checkbox",
9976
+ checked: false,
9977
+ onChange: handleCheckItem
9978
+ }), /*#__PURE__*/React__default.createElement("div", {
9979
+ className: "flex-1"
9980
+ }, "S\u1EA3n ph\u1EA9m"), /*#__PURE__*/React__default.createElement("div", {
9981
+ className: "w-32 text-right"
9982
+ }, formatCurrency(item.price)), /*#__PURE__*/React__default.createElement("div", {
9983
+ className: "w-32 text-right"
9984
+ }, /*#__PURE__*/React__default.createElement(Input, {
9985
+ rules: [{
9986
+ type: "required",
9987
+ message: "Bắt buộc nhập số lượng"
9988
+ }, {
9989
+ type: "pattern",
9990
+ pattern: numberPattern,
9991
+ message: "Số lượng không đúng"
9992
+ }],
9993
+ defaultValue: quantity,
9994
+ isQuantity: true,
9995
+ min: 1,
9996
+ onChange: function onChange(text) {
9997
+ return setQuantity(parseInt(text));
9998
+ },
9999
+ ref: refInputQuantity,
10000
+ wrapClassName: "w-fit mx-auto"
10001
+ })), /*#__PURE__*/React__default.createElement("div", {
10002
+ className: "w-32 text-right"
10003
+ }, formatCurrency(item.price * quantity)), /*#__PURE__*/React__default.createElement("div", {
10004
+ className: "w-32 text-center"
10005
+ }, "H\xE0nh \u0111\u1ED9ng"));
10006
+ };
10007
+
10008
+ export { About5, Address1, Banner1, Booking1, Breadcrumb1, Carts1, Contact1, CustomerRating10, Employees1, Features1, Features2, Features3, Footer1, Footer7, Gallery1, Hero10, Hero11, Hero11$1 as Hero12, Hero13, Links1, NavBar7, PageTitle1, Partner1, ProductDetail10, ProductHot3, ProductSale2, Products1, Products10, Products2, Products3, ProductsTop1, SectionTitle1, ServiceDetail1, Treatments1, Treatments1$1 as Treatments2 };
8614
10009
  //# sourceMappingURL=index.modern.js.map