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

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