s-platform-landing-section 0.1.10-alpha.1 → 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 -1158
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +2862 -1285
  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,24 +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;
58
+ cartItems = _props$cartItems === void 0 ? [] : _props$cartItems;
59
+ console.log("cartItems", cartItems);
99
60
  var totalItem = cartItems.reduce(function (total, item) {
100
61
  return total + item.quantity;
101
62
  }, 0);
@@ -103,34 +64,21 @@ var NavBar7 = function NavBar7(props) {
103
64
  totalItem = "9+";
104
65
  }
105
66
  var cart = function cart() {
106
- return /*#__PURE__*/React__default.createElement("div", {
107
- className: "flex"
67
+ return /*#__PURE__*/React__default.createElement("a", {
68
+ href: "/carts"
108
69
  }, /*#__PURE__*/React__default.createElement("div", {
109
70
  className: "relative cursor-pointer"
110
71
  }, /*#__PURE__*/React__default.createElement(io5.IoCartOutline, {
111
- style: {
112
- fontSize: "30px",
113
- color: primary
114
- }
72
+ className: "text-primary",
73
+ size: 30
115
74
  }), totalItem ? /*#__PURE__*/React__default.createElement("small", {
116
- className: "absolute aspect-square flex items-center bg-danger px-[2px] text-xs rounded-full",
117
- style: {
118
- color: textButton,
119
- top: 0,
120
- right: 0
121
- }
75
+ className: "absolute aspect-square flex items-center justify-center bg-danger w-5 text-xs rounded-full text-white -top-1 -right-1"
122
76
  }, totalItem) : null));
123
77
  };
124
78
  return /*#__PURE__*/React__default.createElement("div", {
125
- className: "w-full sticky top-0 shadow z-50",
126
- style: {
127
- background: background
128
- }
79
+ className: "w-full sticky top-0 shadow z-50 bg-background"
129
80
  }, /*#__PURE__*/React__default.createElement("div", {
130
- className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20",
131
- style: {
132
- color: textBody
133
- }
81
+ className: "hidden lg:flex gap-6 justify-between items-center py-2 px-4 xl:px-20"
134
82
  }, /*#__PURE__*/React__default.createElement("a", {
135
83
  href: "/",
136
84
  className: "flex items-center gap-2"
@@ -139,58 +87,46 @@ var NavBar7 = function NavBar7(props) {
139
87
  src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
140
88
  alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
141
89
  }), /*#__PURE__*/React__default.createElement("h3", {
142
- className: "text-xl md:text-2xl whitespace-nowrap font-semibold",
143
- style: {
144
- color: primary
145
- }
90
+ className: "text-xl md:text-2xl whitespace-nowrap font-semibold text-primary"
146
91
  }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("div", {
147
92
  className: "hidden lg:flex flex-1 items-center gap-4"
148
- }, 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) {
149
96
  return /*#__PURE__*/React__default.createElement("a", {
150
97
  href: route === null || route === void 0 ? void 0 : route.route
151
98
  }, (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? /*#__PURE__*/React__default.createElement("div", {
152
- className: "py-1 border-b",
153
- style: {
154
- color: textHeading,
155
- borderColor: textHeading
156
- }
99
+ className: "py-1 border-b text-textHeading border-textHeading"
157
100
  }, route === null || route === void 0 ? void 0 : route.label) : /*#__PURE__*/React__default.createElement("div", {
158
101
  className: "py-1"
159
102
  }, route === null || route === void 0 ? void 0 : route.label));
160
- })), cart(), !userInfo ?
103
+ })), cart(), userInfo ?
161
104
  /*#__PURE__*/
162
105
  React__default.createElement("div", {
163
106
  className: "flex justify-center"
164
107
  }, /*#__PURE__*/React__default.createElement(fa.FaUserCircle, {
165
- color: "#fff",
108
+ className: "text-bgSecondary",
166
109
  size: 48
167
110
  }), /*#__PURE__*/React__default.createElement("div", {
168
111
  className: "flex flex-col ml-2"
169
112
  }, /*#__PURE__*/React__default.createElement("label", null, "Xin ch\xE0o!"), /*#__PURE__*/React__default.createElement("label", {
170
113
  className: "font-semibold"
171
- }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, "Nguyen Thanh Tung"))) :
114
+ }, userInfo === null || userInfo === void 0 ? void 0 : userInfo.name))) :
172
115
  /*#__PURE__*/
173
116
  React__default.createElement("div", {
174
117
  className: "flex gap-2"
118
+ }, /*#__PURE__*/React__default.createElement("a", {
119
+ href: "/account"
175
120
  }, /*#__PURE__*/React__default.createElement(Button, {
176
121
  label: "Đăng nhập",
177
- shopConfigStyle: shopConfigStyle,
178
- onClick: function onClick() {
179
- return navToLogin();
180
- }
181
- }), /*#__PURE__*/React__default.createElement(Button, {
122
+ shopConfigStyle: shopConfigStyle
123
+ })), /*#__PURE__*/React__default.createElement("a", {
124
+ href: "/account"
125
+ }, /*#__PURE__*/React__default.createElement(Button, {
182
126
  label: "Đăng ký",
183
127
  shopConfigStyle: shopConfigStyle,
184
- style: {
185
- backgroundColor: "transparent",
186
- borderColor: primary,
187
- color: primary
188
- },
189
- className: "border",
190
- onClick: function onClick() {
191
- return navToRegister();
192
- }
193
- }))), /*#__PURE__*/React__default.createElement("div", {
128
+ type: 'outline'
129
+ })))), /*#__PURE__*/React__default.createElement("div", {
194
130
  className: "relative lg:hidden flex gap-4 items-center px-4 py-2"
195
131
  }, /*#__PURE__*/React__default.createElement("a", {
196
132
  href: "/",
@@ -200,28 +136,22 @@ var NavBar7 = function NavBar7(props) {
200
136
  src: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.logoUrl,
201
137
  alt: shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName
202
138
  }), /*#__PURE__*/React__default.createElement("h3", {
203
- className: "text-xl md:text-2xl font-semibold",
204
- style: {
205
- color: primary
206
- }
207
- }, shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopName)), /*#__PURE__*/React__default.createElement("button", {
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", {
208
141
  type: "button",
209
142
  onClick: function onClick() {
210
143
  setIsOpen(true);
211
144
  }
212
145
  }, /*#__PURE__*/React__default.createElement(fi.FiMenu, {
213
146
  size: 32,
214
- color: primary
147
+ className: "text-primary"
215
148
  })), isOpen ? /*#__PURE__*/React__default.createElement("div", {
216
149
  className: "absolute bg-[rgba(0,0,0,0.5)] h-screen w-full top-0 left-0 z-50 flex justify-end",
217
150
  onClick: function onClick() {
218
151
  setIsOpen(false);
219
152
  }
220
153
  }, /*#__PURE__*/React__default.createElement("div", {
221
- className: "h-full w-[80vw] max-w-[320px] p-4",
222
- style: {
223
- background: bgSecondary
224
- },
154
+ className: "h-full w-[80vw] max-w-[320px] p-4 bg-bgSecondary",
225
155
  onClick: function onClick(event) {
226
156
  return event.stopPropagation();
227
157
  }
@@ -236,12 +166,9 @@ var NavBar7 = function NavBar7(props) {
236
166
  return /*#__PURE__*/React__default.createElement("a", {
237
167
  href: route === null || route === void 0 ? void 0 : route.route
238
168
  }, /*#__PURE__*/React__default.createElement("div", {
239
- className: "py-2",
240
- style: (section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? {
241
- color: textHeading
242
- } : null
169
+ className: "py-2 " + ((section === null || section === void 0 ? void 0 : section.pageRoute) === (route === null || route === void 0 ? void 0 : route.name) ? "text-textHeading" : "")
243
170
  }, route === null || route === void 0 ? void 0 : route.label));
244
- })))) : null, cart()));
171
+ })))) : null));
245
172
  };
246
173
 
247
174
  var SvgIcon = function SvgIcon(_ref) {
@@ -267,44 +194,20 @@ var SvgIcon = function SvgIcon(_ref) {
267
194
  }));
268
195
  };
269
196
  var SectionTitle1 = function SectionTitle1(props) {
270
- var _props$shopConfigStyl = props.shopConfigStyle,
271
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
272
- _props$data = props.data,
197
+ var _props$data = props.data,
273
198
  data = _props$data === void 0 ? {} : _props$data;
274
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
275
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
276
- textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
277
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
278
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
279
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textSecondary,
280
- textSecondary = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4;
281
199
  return /*#__PURE__*/React__default.createElement("div", null, data !== null && data !== void 0 && data.sectionTitle ? /*#__PURE__*/React__default.createElement("div", {
282
- className: "text-center text-2xl md:text-4xl font-merienda font-semibold leading-relaxed",
283
- style: {
284
- color: textHeading
285
- }
200
+ className: "text-center text-2xl md:text-4xl font-headingFont font-semibold leading-relaxed text-textHeading"
286
201
  }, data === null || data === void 0 ? void 0 : data.sectionTitle) : null, /*#__PURE__*/React__default.createElement("div", {
287
202
  className: "flex items-center justify-center"
288
203
  }, /*#__PURE__*/React__default.createElement("div", {
289
- className: "w-32 h-0.5 rounded-full",
290
- style: {
291
- backgroundColor: secondary
292
- }
204
+ className: "w-32 h-0.5 rounded-full bg-secondary"
293
205
  }), /*#__PURE__*/React__default.createElement(SvgIcon, {
294
- className: "w-9 h-9",
295
- style: {
296
- color: secondary
297
- }
206
+ className: "w-9 h-9 text-secondary"
298
207
  }), /*#__PURE__*/React__default.createElement("div", {
299
- className: " w-32 h-0.5 rounded-full",
300
- style: {
301
- backgroundColor: secondary
302
- }
208
+ className: " w-32 h-0.5 rounded-full bg-secondary"
303
209
  })), data !== null && data !== void 0 && data.sectionDescription ? /*#__PURE__*/React__default.createElement("div", {
304
- className: "text-xl font-medium text-center leading-relaxed",
305
- style: {
306
- color: textSecondary
307
- }
210
+ className: "text-xl font-medium text-center leading-relaxed text-textSecondary"
308
211
  }, data === null || data === void 0 ? void 0 : data.sectionDescription) : null);
309
212
  };
310
213
 
@@ -323,12 +226,14 @@ var Hero10 = function Hero10(props) {
323
226
  }), /*#__PURE__*/React__default.createElement("div", {
324
227
  className: "relative w-full min-h-[540px] p-12 z-10 flex flex-col gap-6 items-center justify-center"
325
228
  }, /*#__PURE__*/React__default.createElement("div", {
326
- className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont)
229
+ className: "text-3xl md:text-5xl text-white leading-[1.6] md:leading-[1.6] text-center font-headingFont"
327
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) {
328
- 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, {
329
234
  label: button === null || button === void 0 ? void 0 : button.label,
330
235
  shopConfigStyle: shopConfigStyle
331
- });
236
+ }));
332
237
  })));
333
238
  };
334
239
 
@@ -346,6 +251,8 @@ var Dash = function Dash(props) {
346
251
  });
347
252
  };
348
253
 
254
+ var SECTION_DEFAULT_CLASS = "my-12 mx-4 xl:mx-20 bg-background";
255
+
349
256
  var Hero11 = function Hero11(props) {
350
257
  var _data$data;
351
258
  var _props$shopConfigStyl = props.shopConfigStyle,
@@ -356,14 +263,9 @@ var Hero11 = function Hero11(props) {
356
263
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
357
264
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
358
265
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
359
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
360
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
361
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
266
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
362
267
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
363
- className: "relative w-full py-12 px-4 xl:px-20",
364
- style: {
365
- backgroundColor: background
366
- }
268
+ className: "" + SECTION_DEFAULT_CLASS
367
269
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
368
270
  data: data,
369
271
  shopConfigStyle: shopConfigStyle
@@ -383,14 +285,8 @@ var Hero11 = function Hero11(props) {
383
285
 
384
286
  var Hero11$1 = function Hero11(props) {
385
287
  var _data$data, _data$data$, _data$data$$srcImages, _data$data2, _data$data2$, _data$data3, _data$data3$;
386
- var _props$shopConfigStyl = props.shopConfigStyle,
387
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
388
- _props$data = props.data,
288
+ var _props$data = props.data,
389
289
  data = _props$data === void 0 ? {} : _props$data;
390
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
391
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.textHeading,
392
- textHeading = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2;
393
- console.log("Hero11 data", data);
394
290
  return /*#__PURE__*/React__default.createElement("div", {
395
291
  className: "relative w-full bg-cover bg-center bg-no-repeat grid grid-cols-1 md:grid-cols-2",
396
292
  style: {
@@ -403,10 +299,7 @@ var Hero11$1 = function Hero11(props) {
403
299
  }), /*#__PURE__*/React__default.createElement("div", {
404
300
  className: "relative p-12 z-1"
405
301
  }, /*#__PURE__*/React__default.createElement("div", {
406
- className: "text-2xl md:text-4xl leading-[1.6] " + (shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.headingFont),
407
- style: {
408
- color: textHeading
409
- }
302
+ className: "text-2xl md:text-4xl leading-[1.6] font-headingFont text-textHeading"
410
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", {
411
304
  className: "pt-6"
412
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)));
@@ -431,6 +324,57 @@ function _catch(body, recover) {
431
324
  return result;
432
325
  }
433
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
+
434
378
  function bind(fn, thisArg) {
435
379
  return function wrap() {
436
380
  return fn.apply(thisArg, arguments);
@@ -1751,12 +1695,12 @@ const hasStandardBrowserWebWorkerEnv = (() => {
1751
1695
  const origin = hasBrowserEnv && window.location.href || 'http://localhost';
1752
1696
 
1753
1697
  var utils$1 = {
1754
- __proto__: null,
1755
- hasBrowserEnv: hasBrowserEnv,
1756
- hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
1757
- hasStandardBrowserEnv: hasStandardBrowserEnv,
1758
- navigator: _navigator,
1759
- origin: origin
1698
+ __proto__: null,
1699
+ hasBrowserEnv: hasBrowserEnv,
1700
+ hasStandardBrowserWebWorkerEnv: hasStandardBrowserWebWorkerEnv,
1701
+ hasStandardBrowserEnv: hasStandardBrowserEnv,
1702
+ navigator: _navigator,
1703
+ origin: origin
1760
1704
  };
1761
1705
 
1762
1706
  var platform$1 = {
@@ -4895,8 +4839,8 @@ var callBound = function callBoundIntrinsic(name, allowMissing) {
4895
4839
  var _nodeResolve_empty = {};
4896
4840
 
4897
4841
  var _nodeResolve_empty$1 = {
4898
- __proto__: null,
4899
- 'default': _nodeResolve_empty
4842
+ __proto__: null,
4843
+ 'default': _nodeResolve_empty
4900
4844
  };
4901
4845
 
4902
4846
  var utilInspect = getCjsExportFromNamespace(_nodeResolve_empty$1);
@@ -6544,21 +6488,30 @@ var getProductListApi = function getProductListApi(shopId, params) {
6544
6488
  }
6545
6489
  });
6546
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
+ };
6547
6500
 
6548
6501
  var CategoryController = function CategoryController(props) {
6549
6502
  var shopConfig = props.shopConfig,
6550
- params = props.params;
6503
+ _props$types = props.types,
6504
+ types = _props$types === void 0 ? "" : _props$types;
6551
6505
  var _useState = React.useState([]),
6552
6506
  categories = _useState[0],
6553
6507
  setCategories = _useState[1];
6554
- var defaultParams = {};
6555
6508
  React.useEffect(function () {
6556
6509
  getCategoryList();
6557
6510
  }, []);
6558
6511
  var getCategoryList = function getCategoryList() {
6559
6512
  try {
6560
6513
  var _temp = _catch(function () {
6561
- 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) {
6562
6515
  var _res$data, _res$data$status;
6563
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) {
6564
6517
  var _res$data2;
@@ -6859,22 +6812,12 @@ var Features1 = function Features1(props) {
6859
6812
  _props$SectionTitle = props.SectionTitle,
6860
6813
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
6861
6814
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
6862
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
6863
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
6864
6815
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
6865
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
6866
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
6867
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
6868
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
6869
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
6816
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
6870
6817
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
6871
- className: "relative w-full py-12 px-4 xl:px-20",
6872
- style: {
6873
- backgroundColor: background
6874
- }
6818
+ className: SECTION_DEFAULT_CLASS + " relative"
6875
6819
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
6876
- data: data,
6877
- shopConfigStyle: shopConfigStyle
6820
+ data: data
6878
6821
  }), /*#__PURE__*/React__default.createElement("div", {
6879
6822
  className: "mt-6 grid grid-cols-3 gap-4 md:gap-8"
6880
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) {
@@ -6884,35 +6827,20 @@ var Features1 = function Features1(props) {
6884
6827
  }, /*#__PURE__*/React__default.createElement("div", {
6885
6828
  className: "relative w-40 h-24 flex items-center justify-center m-auto md:m-0"
6886
6829
  }, /*#__PURE__*/React__default.createElement("div", {
6887
- className: "absolute w-40 h-24 rounded-2xl z-10",
6888
- style: {
6889
- backgroundColor: primary
6890
- }
6830
+ className: "absolute w-40 h-24 rounded-2xl z-10 bg-primary"
6891
6831
  }), /*#__PURE__*/React__default.createElement("div", {
6892
- className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0",
6893
- style: {
6894
- backgroundColor: secondary
6895
- }
6832
+ className: "absolute w-24 h-16 rounded-2xl -right-2 -top-2 z-0 bg-secondary"
6896
6833
  }), /*#__PURE__*/React__default.createElement("div", {
6897
6834
  className: "h-16 m-auto bg-center w-16 bg-cover bg-no-repeat z-20",
6898
6835
  style: {
6899
6836
  backgroundImage: "url(" + it.srcImage + ")"
6900
6837
  }
6901
6838
  })), /*#__PURE__*/React__default.createElement("p", {
6902
- className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg",
6903
- style: {
6904
- color: textBody
6905
- }
6839
+ className: "mx-auto md:mt-3 md:mx-0 text-xl py-2 font-medium w-fit rounded-lg"
6906
6840
  }, it.title), /*#__PURE__*/React__default.createElement("div", {
6907
- className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full",
6908
- style: {
6909
- backgroundColor: secondary
6910
- }
6841
+ className: "mx-auto md:mx-0 mb-2 w-28 h-2px rounded-full bg-secondary"
6911
6842
  }), /*#__PURE__*/React__default.createElement("p", {
6912
- className: "text-base mx-auto md:mx-0 text-center md:text-start",
6913
- style: {
6914
- color: textBody
6915
- }
6843
+ className: "text-base mx-auto md:mx-0 text-center md:text-start"
6916
6844
  }, it.description));
6917
6845
  }))), /*#__PURE__*/React__default.createElement(Dash, {
6918
6846
  color: secondary
@@ -6920,43 +6848,20 @@ var Features1 = function Features1(props) {
6920
6848
  };
6921
6849
 
6922
6850
  var Features2 = function Features2(props) {
6923
- var data = props.data,
6924
- shopConfigStyle = props.shopConfigStyle;
6925
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
6926
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
6927
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
6928
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
6929
- textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
6930
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.background,
6931
- background = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
6932
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.bgSecondary,
6933
- bgSecondary = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
6851
+ var data = props.data;
6934
6852
  var sectionData = data === null || data === void 0 ? void 0 : data.data;
6935
6853
  return /*#__PURE__*/React__default.createElement("div", {
6936
- className: "w-full pt-10 px-4 xl:px-20",
6937
- style: {
6938
- background: background,
6939
- color: textBody
6940
- }
6854
+ className: "" + SECTION_DEFAULT_CLASS
6941
6855
  }, /*#__PURE__*/React__default.createElement("div", {
6942
- className: "p-6 grid grid-cols-4 gap-8 rounded-xl",
6943
- style: {
6944
- background: bgSecondary
6945
- }
6856
+ className: "p-6 grid grid-cols-4 gap-8 rounded-xl bg-bgSecondary"
6946
6857
  }, sectionData && sectionData.length > 0 && sectionData.map(function (item, index) {
6947
6858
  return /*#__PURE__*/React__default.createElement("div", {
6948
6859
  className: "flex flex-col gap-2 items-center text-sm lg:text-lg font-semibold text-center",
6949
- key: "dfgg-" + index,
6950
- style: {
6951
- color: textBody
6952
- }
6860
+ key: "dfgg-" + index
6953
6861
  }, /*#__PURE__*/React__default.createElement("img", {
6954
6862
  src: item === null || item === void 0 ? void 0 : item.svgImage,
6955
- className: "w-12 md:w-16 lg:w-20 xl:w-24",
6956
- alt: "logo",
6957
- style: {
6958
- color: primary
6959
- }
6863
+ className: "w-12 md:w-16 lg:w-20 xl:w-24 text-primary",
6864
+ alt: "logo"
6960
6865
  }), /*#__PURE__*/React__default.createElement("div", null, item === null || item === void 0 ? void 0 : item.title));
6961
6866
  })));
6962
6867
  };
@@ -7008,6 +6913,12 @@ var ProductController = function ProductController(props) {
7008
6913
  var _useState = React.useState([]),
7009
6914
  products = _useState[0],
7010
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];
7011
6922
  var defaultParams = {
7012
6923
  page: 0,
7013
6924
  size: 8,
@@ -7021,12 +6932,18 @@ var ProductController = function ProductController(props) {
7021
6932
  var getProductList = function getProductList() {
7022
6933
  try {
7023
6934
  var _temp = _catch(function () {
7024
- 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) {
7025
6940
  var _res$data, _res$data$status;
7026
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) {
7027
- var _res$data2;
6942
+ var _res$data2, _res$data3;
7028
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);
7029
6945
  }
6946
+ setLoading(false);
7030
6947
  });
7031
6948
  }, function (e) {
7032
6949
  console.log(e);
@@ -7037,7 +6954,9 @@ var ProductController = function ProductController(props) {
7037
6954
  }
7038
6955
  };
7039
6956
  return {
7040
- products: products
6957
+ products: products,
6958
+ loading: loading,
6959
+ page: page
7041
6960
  };
7042
6961
  };
7043
6962
 
@@ -7110,288 +7029,1370 @@ var ProductImage = function ProductImage(props) {
7110
7029
  });
7111
7030
  };
7112
7031
 
7113
- var Treatments1 = function Treatments1(props) {
7114
- var _props$shopConfigStyl = props.shopConfigStyle,
7115
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7116
- _props$data = props.data,
7117
- data = _props$data === void 0 ? {} : _props$data,
7118
- _props$SectionTitle = props.SectionTitle,
7119
- SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7120
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7121
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7122
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7123
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7124
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7125
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7126
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
7127
- var _useState = React.useState({
7128
- size: 1
7129
- }),
7130
- params = _useState[0];
7131
- var _ProductController = ProductController(_extends({}, props, {
7132
- params: params
7133
- })),
7134
- _ProductController$pr = _ProductController.products,
7135
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7136
- console.log("Treatments1 products 1", products);
7137
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7138
- className: "relative w-full py-12 px-4 xl:px-20",
7139
- style: {
7140
- backgroundColor: background
7141
- }
7142
- }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7143
- data: data,
7144
- shopConfigStyle: shopConfigStyle
7145
- }), products === null || products === void 0 ? void 0 : products.map(function (product, index) {
7146
- var _product$productInfo, _product$productInfo2;
7147
- return /*#__PURE__*/React__default.createElement("div", {
7148
- className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-12",
7149
- key: index
7150
- }, index % 2 ? null : /*#__PURE__*/React__default.createElement(ProductImage, {
7151
- product: product === null || product === void 0 ? void 0 : product.productInfo,
7152
- className: "aspect-video rounded-2xl"
7153
- }), /*#__PURE__*/React__default.createElement("div", {
7154
- className: "" + (index % 2 ? "text-right" : "text-left")
7155
- }, /*#__PURE__*/React__default.createElement("div", {
7156
- className: "font-medium text-2xl",
7157
- style: {
7158
- color: textBody
7159
- }
7160
- }, product === null || product === void 0 ? void 0 : (_product$productInfo = product.productInfo) === null || _product$productInfo === void 0 ? void 0 : _product$productInfo.productName), /*#__PURE__*/React__default.createElement("div", {
7161
- className: "mt-4",
7162
- style: {
7163
- color: textBody
7164
- },
7165
- dangerouslySetInnerHTML: {
7166
- __html: product === null || product === void 0 ? void 0 : (_product$productInfo2 = product.productInfo) === null || _product$productInfo2 === void 0 ? void 0 : _product$productInfo2.description
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();
7167
7042
  }
7168
- }), /*#__PURE__*/React__default.createElement(Button, {
7169
- label: "Đặt lịch ngay",
7170
- shopConfigStyle: shopConfigStyle,
7171
- className: "mt-4"
7172
- })), index % 2 ? /*#__PURE__*/React__default.createElement(ProductImage, {
7173
- product: product === null || product === void 0 ? void 0 : product.productInfo,
7174
- className: "aspect-video rounded-2xl"
7175
- }) : null);
7176
- })), /*#__PURE__*/React__default.createElement(Dash, {
7177
- color: secondary
7178
- }));
7179
- };
7180
-
7181
- var _path$1;
7182
- function _extends$2() {
7183
- return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
7184
- for (var e = 1; e < arguments.length; e++) {
7185
- var t = arguments[e];
7186
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
7187
7043
  }
7188
- return n;
7189
- }, _extends$2.apply(null, arguments);
7190
- }
7191
- function SvgAngleSmallLeft(props) {
7192
- return /*#__PURE__*/React.createElement("svg", _extends$2({
7193
- xmlns: "http://www.w3.org/2000/svg",
7194
- viewBox: "0 0 24 24",
7195
- width: 512,
7196
- height: 512
7197
- }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
7198
- d: "M10.6 12.71a1 1 0 010-1.42l4.59-4.58a1 1 0 000-1.42 1 1 0 00-1.41 0L9.19 9.88a3 3 0 000 4.24l4.59 4.59a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 000-1.42z"
7199
- })));
7200
- }
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
+ };
7201
7061
 
7202
- var _path$2;
7203
- function _extends$3() {
7204
- return _extends$3 = Object.assign ? Object.assign.bind() : function (n) {
7205
- for (var e = 1; e < arguments.length; e++) {
7206
- var t = arguments[e];
7207
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
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
7208
7071
  }
7209
- return n;
7210
- }, _extends$3.apply(null, arguments);
7211
- }
7212
- function SvgAngleSmallRight(props) {
7213
- return /*#__PURE__*/React.createElement("svg", _extends$3({
7214
- xmlns: "http://www.w3.org/2000/svg",
7215
- viewBox: "0 0 24 24",
7216
- width: 512,
7217
- height: 512
7218
- }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
7219
- d: "M15.4 9.88l-4.59-4.59a1 1 0 00-1.41 0 1 1 0 000 1.42l4.6 4.58a1 1 0 010 1.42l-4.6 4.58a1 1 0 001.41 1.42l4.59-4.59a3 3 0 000-4.24z"
7220
- })));
7221
- }
7072
+ });
7073
+ };
7222
7074
 
7223
- var ScrollHorizontal = function ScrollHorizontal(props) {
7224
- var _props$datas = props.datas,
7225
- datas = _props$datas === void 0 ? [] : _props$datas,
7226
- _props$className = props.className,
7227
- className = _props$className === void 0 ? "" : _props$className,
7228
- _props$style = props.style,
7229
- style = _props$style === void 0 ? {} : _props$style,
7230
- _props$primaryColor = props.primaryColor,
7231
- primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7232
- _props$renderItem = props.renderItem,
7233
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7234
- var scrollContainerRef = React.useRef(null);
7235
- var _useState = React.useState(true),
7236
- isScrolledToLeft = _useState[0],
7237
- setIsScrolledToLeft = _useState[1];
7238
- var _useState2 = React.useState(false),
7239
- isScrolledToRight = _useState2[0],
7240
- setIsScrolledToRight = _useState2[1];
7241
- var checkScrollPosition = function checkScrollPosition() {
7242
- if (scrollContainerRef.current) {
7243
- var _scrollContainerRef$c = scrollContainerRef.current,
7244
- _scrollLeft = _scrollContainerRef$c.scrollLeft,
7245
- scrollWidth = _scrollContainerRef$c.scrollWidth,
7246
- clientWidth = _scrollContainerRef$c.clientWidth;
7247
- setIsScrolledToLeft(_scrollLeft === 0);
7248
- setIsScrolledToRight(_scrollLeft + clientWidth >= scrollWidth);
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();
7249
7085
  }
7250
- };
7251
- var scrollLeft = function scrollLeft() {
7252
- if (scrollContainerRef.current) {
7253
- scrollContainerRef.current.scrollBy({
7254
- left: -200,
7255
- behavior: "smooth"
7256
- });
7257
- setTimeout(checkScrollPosition, 300);
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);
7258
7103
  }
7259
7104
  };
7260
- var scrollRight = function scrollRight() {
7261
- if (scrollContainerRef.current) {
7262
- scrollContainerRef.current.scrollBy({
7263
- left: 200,
7264
- behavior: "smooth"
7265
- });
7266
- setTimeout(checkScrollPosition, 300);
7267
- }
7105
+ return {
7106
+ listEmployment: listEmployment,
7107
+ getListEmployee: getListEmployee
7268
7108
  };
7269
- React.useEffect(function () {
7270
- checkScrollPosition();
7271
- }, [datas]);
7272
- return /*#__PURE__*/React__default.createElement("div", {
7273
- className: "flex " + className,
7274
- style: style
7275
- }, /*#__PURE__*/React__default.createElement("div", {
7276
- className: "flex w-full overflow-x-hidden",
7277
- ref: scrollContainerRef,
7278
- onScroll: checkScrollPosition
7279
- }, datas === null || datas === void 0 ? void 0 : datas.map(function (item, index) {
7280
- return renderItem(item, index);
7281
- })), /*#__PURE__*/React__default.createElement("div", {
7282
- className: "flex gap-2 items-center px-4"
7283
- }, /*#__PURE__*/React__default.createElement("div", {
7284
- onClick: scrollLeft,
7285
- className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
7286
- style: {
7287
- backgroundColor: isScrolledToLeft ? "#BDBDBD" : primaryColor
7288
- }
7289
- }, /*#__PURE__*/React__default.createElement(SvgAngleSmallLeft, {
7290
- width: 24,
7291
- height: 24,
7292
- fill: "#fff"
7293
- })), /*#__PURE__*/React__default.createElement("div", {
7294
- onClick: scrollRight,
7295
- className: "cursor-pointer w-8 h-8 rounded-full flex justify-center items-center",
7296
- style: {
7297
- backgroundColor: isScrolledToRight ? "#BDBDBD" : primaryColor
7298
- }
7299
- }, /*#__PURE__*/React__default.createElement(SvgAngleSmallRight, {
7300
- width: 24,
7301
- height: 24,
7302
- fill: "#fff"
7303
- }))));
7304
7109
  };
7305
7110
 
7306
- var getDurationValue = function getDurationValue(attributes) {
7307
- var _parsedAttributes$fin;
7308
- var parsedAttributes = JSON.parse(attributes || "[]");
7309
- return ((_parsedAttributes$fin = parsedAttributes.find(function (attr) {
7310
- return attr.name === "Thời lượng (phút) / buổi";
7311
- })) === null || _parsedAttributes$fin === void 0 ? void 0 : _parsedAttributes$fin.value[0]) || "0";
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
+ });
7312
7120
  };
7313
7121
 
7314
- var formatCurrency = function formatCurrency(amount) {
7315
- if (isNaN(amount)) {
7316
- return '0 ₫';
7317
- }
7318
- var roundedAmount = Math.round(amount);
7319
- var formattedAmount = roundedAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
7320
- return formattedAmount + " \u20AB";
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
+ };
7321
7152
  };
7322
7153
 
7323
- var ProductPrice = function ProductPrice(props) {
7324
- 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,
7325
7159
  _props$className = props.className,
7326
7160
  className = _props$className === void 0 ? "" : _props$className,
7327
- _props$style = props.style,
7328
- style = _props$style === void 0 ? {} : _props$style;
7329
- return /*#__PURE__*/React__default.createElement("div", {
7330
- className: className
7331
- }, product !== null && product !== void 0 && product.priceBeforeDiscount ? /*#__PURE__*/React__default.createElement("span", {
7332
- className: "text-gray3 line-through"
7333
- }, formatCurrency(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount)) : null, /*#__PURE__*/React__default.createElement("span", {
7334
- className: "text-primary font-semibold",
7335
- style: style
7336
- }, formatCurrency(product === null || product === void 0 ? void 0 : product.price)));
7337
- };
7338
-
7339
- var ProductItem1 = function ProductItem1(props) {
7340
- var product = props.product;
7341
- return /*#__PURE__*/React__default.createElement("div", {
7342
- className: "flex"
7343
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
7344
- product: product,
7345
- className: "!w-20 rounded-lg"
7346
- }), /*#__PURE__*/React__default.createElement("div", {
7347
- className: "ml-4 border-b border-stroke flex-1"
7348
- }, /*#__PURE__*/React__default.createElement("div", {
7349
- className: "text-lg"
7350
- }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
7351
- className: "flex mt-2"
7352
- }, /*#__PURE__*/React__default.createElement("div", {
7353
- className: "flex-1 text-gray3"
7354
- }, getDurationValue(product === null || product === void 0 ? void 0 : product.attributes), " ph\xFAt"), /*#__PURE__*/React__default.createElement(ProductPrice, {
7355
- product: product
7356
- }))));
7357
- };
7358
-
7359
- var Treatments1$1 = function Treatments1(props) {
7360
- var _props$shopConfigStyl = props.shopConfigStyle,
7361
- shopConfigStyle = _props$shopConfigStyl === void 0 ? {} : _props$shopConfigStyl,
7362
- _props$data = props.data,
7363
- data = _props$data === void 0 ? {} : _props$data,
7364
- _props$SectionTitle = props.SectionTitle,
7365
- SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7366
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7367
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7368
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7369
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7370
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7371
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7372
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7373
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.textButton,
7374
- textButton = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7375
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
7376
- background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7377
- var _useState = React.useState({}),
7378
- params = _useState[0];
7379
- var _CategoryController = CategoryController(_extends({}, props)),
7380
- categories = _CategoryController.categories;
7381
- var _ProductController = ProductController(_extends({}, props, {
7382
- params: params
7383
- })),
7384
- _ProductController$pr = _ProductController.products,
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,
7385
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;
7386
8382
  var _useState2 = React.useState(0),
7387
8383
  selectedCategory = _useState2[0],
7388
8384
  setSelectedCategory = _useState2[1];
7389
- console.log("Treatments2 products");
7390
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7391
- className: "relative w-full py-12 px-4 xl:px-20",
7392
- style: {
7393
- backgroundColor: background
8385
+ React.useEffect(function () {
8386
+ var newParams = _extends({}, params, {
8387
+ categoryId: selectedCategory
8388
+ });
8389
+ if (!selectedCategory) {
8390
+ delete newParams.categoryId;
7394
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"
7395
8396
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7396
8397
  data: data,
7397
8398
  shopConfigStyle: shopConfigStyle
@@ -7400,40 +8401,111 @@ var Treatments1$1 = function Treatments1(props) {
7400
8401
  categoryId: 0,
7401
8402
  cateName: "Tất cả"
7402
8403
  }].concat(categories),
7403
- style: {
7404
- backgroundColor: secondary
7405
- },
7406
- className: "mt-6 rounded-lg overflow-hidden",
7407
- primaryColor: primary,
8404
+ className: "mt-6 rounded-lg overflow-hidden bg-bgSecondary",
7408
8405
  renderItem: function renderItem(item, index) {
7409
8406
  return /*#__PURE__*/React__default.createElement("div", {
7410
8407
  key: index,
7411
- 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" : ""),
7412
8409
  onClick: function onClick() {
7413
8410
  return setSelectedCategory(item.categoryId);
7414
- },
7415
- style: {
7416
- backgroundColor: selectedCategory === item.categoryId ? primary : "inherit",
7417
- color: selectedCategory === item.categoryId ? textButton : textBody
7418
8411
  }
7419
8412
  }, item === null || item === void 0 ? void 0 : item.cateName);
7420
8413
  }
7421
- }), /*#__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", {
7422
8417
  className: "grid grid-cols-1 md:grid-cols-2 gap-10 mt-6"
7423
8418
  }, products === null || products === void 0 ? void 0 : products.map(function (product, index) {
7424
8419
  return /*#__PURE__*/React__default.createElement(ProductItem1, {
7425
8420
  key: index,
7426
8421
  product: product === null || product === void 0 ? void 0 : product.productInfo
7427
8422
  });
7428
- }))), /*#__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, {
7429
8426
  color: secondary
7430
8427
  }));
7431
8428
  };
7432
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
+
7433
8503
  var ProductItem2 = function ProductItem2(props) {
7434
8504
  var product = props.product;
7435
- return /*#__PURE__*/React__default.createElement("div", {
7436
- 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"
7437
8509
  }, /*#__PURE__*/React__default.createElement(ProductImage, {
7438
8510
  product: product,
7439
8511
  className: "max-w-[240px] rounded-full mx-auto"
@@ -7442,7 +8514,7 @@ var ProductItem2 = function ProductItem2(props) {
7442
8514
  className: "text-lg mt-4"
7443
8515
  }), /*#__PURE__*/React__default.createElement("div", {
7444
8516
  className: "text-lg mt-2"
7445
- }, product === null || product === void 0 ? void 0 : product.productName));
8517
+ }, product === null || product === void 0 ? void 0 : product.productName)));
7446
8518
  };
7447
8519
 
7448
8520
  var Products1 = function Products1(props) {
@@ -7454,9 +8526,7 @@ var Products1 = function Products1(props) {
7454
8526
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
7455
8527
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7456
8528
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7457
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7458
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.background,
7459
- background = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
8529
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
7460
8530
  var _useState = React.useState({
7461
8531
  size: 4
7462
8532
  }),
@@ -7468,10 +8538,7 @@ var Products1 = function Products1(props) {
7468
8538
  products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7469
8539
  console.log("Products1 products");
7470
8540
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
7471
- className: "w-full py-12 px-4 xl:px-20 text-center",
7472
- style: {
7473
- backgroundColor: background
7474
- }
8541
+ className: SECTION_DEFAULT_CLASS + " text-center"
7475
8542
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
7476
8543
  data: data,
7477
8544
  shopConfigStyle: shopConfigStyle
@@ -7487,162 +8554,39 @@ var Products1 = function Products1(props) {
7487
8554
  shopConfigStyle: shopConfigStyle,
7488
8555
  className: "mt-12"
7489
8556
  })), /*#__PURE__*/React__default.createElement(Dash, {
7490
- color: secondary
7491
- }));
7492
- };
7493
-
7494
- var ItemProduct = function ItemProduct(props) {
7495
- var _shopConfigStyle$colo, _shopConfigStyle$colo2, _shopConfigStyle$colo3;
7496
- var product = props.product,
7497
- shopConfigStyle = props.shopConfigStyle;
7498
- return /*#__PURE__*/React__default.createElement("div", {
7499
- className: "pb-4 rounded-2xl w-full",
7500
- style: {
7501
- background: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo = shopConfigStyle.color) === null || _shopConfigStyle$colo === void 0 ? void 0 : _shopConfigStyle$colo.bgSecondary
7502
- }
7503
- }, /*#__PURE__*/React__default.createElement("div", {
7504
- className: "relative pt-2 flex justify-center h-32 sm:h-40 lg:h-52"
7505
- }, /*#__PURE__*/React__default.createElement("a", {
7506
- href: "#"
7507
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
7508
- product: product,
7509
- className: "aspect-w-1 aspect-h-1 max-h-32 sm:max-h-40 lg:max-h-52 object-cover"
7510
- })), product && (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) && +(product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) !== (product === null || product === void 0 ? void 0 : product.price) && /*#__PURE__*/React__default.createElement("label", {
7511
- className: "absolute bg-red-600 rounded-r-lg sm:px-2",
7512
- style: {
7513
- top: "10%",
7514
- color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo2 = shopConfigStyle.color) === null || _shopConfigStyle$colo2 === void 0 ? void 0 : _shopConfigStyle$colo2.textButton
7515
- }
7516
- }, ((product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) - (product === null || product === void 0 ? void 0 : product.price)) / (product === null || product === void 0 ? void 0 : product.priceBeforeDiscount) * 100, "%")), /*#__PURE__*/React__default.createElement("div", {
7517
- className: "px-4 h-[100px] mt-6"
7518
- }, /*#__PURE__*/React__default.createElement("label", {
7519
- className: "line-clamp-2 lg:h-12 lg:block"
7520
- }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", {
7521
- className: "mt-3 md:flex md:justify-between flex-col"
7522
- }, /*#__PURE__*/React__default.createElement(ProductPrice, {
7523
- product: product,
7524
- style: {
7525
- color: shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : (_shopConfigStyle$colo3 = shopConfigStyle.color) === null || _shopConfigStyle$colo3 === void 0 ? void 0 : _shopConfigStyle$colo3.primary
7526
- }
7527
- }))));
7528
- };
7529
-
7530
- var Carousel = function Carousel(props) {
7531
- var carouselRef = React.useRef(null);
7532
- var _useState = React.useState(false),
7533
- isScrolledToLeft = _useState[0],
7534
- setIsScrolledToLeft = _useState[1];
7535
- var _useState2 = React.useState(true),
7536
- isScrolledToRight = _useState2[0],
7537
- setIsScrolledToRight = _useState2[1];
7538
- var _props$datas = props.datas,
7539
- datas = _props$datas === void 0 ? [] : _props$datas,
7540
- _props$className = props.className,
7541
- className = _props$className === void 0 ? "" : _props$className,
7542
- _props$style = props.style,
7543
- style = _props$style === void 0 ? {} : _props$style,
7544
- _props$primaryColor = props.primaryColor,
7545
- primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7546
- _props$renderItem = props.renderItem,
7547
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7548
- var handleClickPrevImg = function handleClickPrevImg() {
7549
- if (carouselRef.current) {
7550
- setIsScrolledToLeft(true);
7551
- setIsScrolledToRight(false);
7552
- carouselRef.current.scrollBy({
7553
- left: -300,
7554
- behavior: "smooth"
7555
- });
7556
- }
7557
- };
7558
- var handleClickNextImg = function handleClickNextImg() {
7559
- setIsScrolledToRight(true);
7560
- setIsScrolledToLeft(false);
7561
- if (carouselRef.current) {
7562
- carouselRef.current.scrollBy({
7563
- left: 300,
7564
- behavior: "smooth"
7565
- });
7566
- }
7567
- };
7568
- return /*#__PURE__*/React__default.createElement("div", {
7569
- className: "relative " + className + " ",
7570
- style: style
7571
- }, /*#__PURE__*/React__default.createElement("div", {
7572
- className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
7573
- ref: carouselRef
7574
- }, datas && datas.length > 0 && datas.map(function (item, index) {
7575
- return renderItem(item, index);
7576
- })), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
7577
- className: " hidden md:block bg-gray3 p-3 rounded-full absolute top-[45%] left-[-8px] lg:left-[-1%]",
7578
- style: {
7579
- backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
7580
- },
7581
- onClick: handleClickPrevImg
7582
- }, /*#__PURE__*/React__default.createElement(fa.FaArrowLeft, {
7583
- className: "text-sm lg:text-lg text-white"
7584
- })), /*#__PURE__*/React__default.createElement("button", {
7585
- className: " hidden md:block p-3 rounded-full absolute top-[45%] right-[-2%] lg:right-0",
7586
- style: {
7587
- backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
7588
- },
7589
- onClick: handleClickNextImg
7590
- }, /*#__PURE__*/React__default.createElement(fa.FaArrowRight, {
7591
- className: "text-sm lg:text-lg text-white"
7592
- }))));
7593
- };
7594
-
7595
- var Products2 = function Products2(props) {
7596
- var shopConfigStyle = props.shopConfigStyle,
7597
- data = props.data;
7598
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7599
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7600
- primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7601
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
7602
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7603
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textBody,
7604
- textBody = _shopConfigStyle$colo4 === void 0 ? "#000" : _shopConfigStyle$colo4,
7605
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7606
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7607
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
7608
- textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7609
- var _ProductController = ProductController(props),
7610
- _ProductController$pr = _ProductController.products,
7611
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7612
- console.log("Products2 products");
8557
+ color: secondary
8558
+ }));
8559
+ };
8560
+
8561
+ var ItemProduct = function ItemProduct(props) {
8562
+ var product = props.product;
7613
8563
  return /*#__PURE__*/React__default.createElement("div", {
7614
- className: "pt-10 px-4 xl:px-20",
7615
- style: {
7616
- background: background,
7617
- color: textBody
7618
- }
8564
+ className: "pb-4 rounded-2xl w-full bg-bgSecondary"
7619
8565
  }, /*#__PURE__*/React__default.createElement("div", {
7620
- className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
7621
- style: {
7622
- background: secondary
7623
- }
7624
- }, /*#__PURE__*/React__default.createElement("h2", {
7625
- className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5 pb-4",
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",
7626
8574
  style: {
7627
- color: textButton
7628
- }
7629
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(Carousel, {
7630
- datas: products,
7631
- primaryColor: primary,
7632
- renderItem: function renderItem(item, index) {
7633
- return /*#__PURE__*/React__default.createElement("div", {
7634
- key: "carousel-" + index,
7635
- className: " min-w-[40vw] object-cover sm:min-w-[25vw] lg:min-w-[22vw] xl:min-w-[20vw] pe-4 xl:pe-6"
7636
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7637
- product: item.productInfo,
7638
- shopConfigStyle: shopConfigStyle
7639
- }));
8575
+ top: "10%"
7640
8576
  }
7641
- })));
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
+ }))));
7642
8586
  };
7643
8587
 
7644
- var CarouselItem = function CarouselItem(props) {
7645
- var listRef = React.useRef(null);
8588
+ var Carousel = function Carousel(props) {
8589
+ var carouselRef = React.useRef(null);
7646
8590
  var _useState = React.useState(false),
7647
8591
  isScrolledToLeft = _useState[0],
7648
8592
  setIsScrolledToLeft = _useState[1];
@@ -7657,16 +8601,14 @@ var CarouselItem = function CarouselItem(props) {
7657
8601
  style = _props$style === void 0 ? {} : _props$style,
7658
8602
  _props$primaryColor = props.primaryColor,
7659
8603
  primaryColor = _props$primaryColor === void 0 ? "" : _props$primaryColor,
7660
- _props$textButtonColo = props.textButtonColor,
7661
- textButtonColor = _props$textButtonColo === void 0 ? "" : _props$textButtonColo,
7662
8604
  _props$renderItem = props.renderItem,
7663
8605
  renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7664
8606
  var handleClickPrevImg = function handleClickPrevImg() {
7665
- if (listRef.current) {
8607
+ if (carouselRef.current) {
7666
8608
  setIsScrolledToLeft(true);
7667
8609
  setIsScrolledToRight(false);
7668
- listRef.current.scrollBy({
7669
- left: -80,
8610
+ carouselRef.current.scrollBy({
8611
+ left: -300,
7670
8612
  behavior: "smooth"
7671
8613
  });
7672
8614
  }
@@ -7674,541 +8616,657 @@ var CarouselItem = function CarouselItem(props) {
7674
8616
  var handleClickNextImg = function handleClickNextImg() {
7675
8617
  setIsScrolledToRight(true);
7676
8618
  setIsScrolledToLeft(false);
7677
- if (listRef.current) {
7678
- listRef.current.scrollBy({
7679
- left: 80,
8619
+ if (carouselRef.current) {
8620
+ carouselRef.current.scrollBy({
8621
+ left: 300,
7680
8622
  behavior: "smooth"
7681
8623
  });
7682
8624
  }
7683
8625
  };
7684
- console.log("check propsss::::::::", datas);
7685
8626
  return /*#__PURE__*/React__default.createElement("div", {
7686
- className: "grid grid-cols-12 h-12 " + className,
8627
+ className: "relative " + className + " ",
7687
8628
  style: style
7688
8629
  }, /*#__PURE__*/React__default.createElement("div", {
7689
- className: "col-span-12 lg:col-span-10 md:col-span-9 overflow-hidden "
7690
- }, /*#__PURE__*/React__default.createElement("div", {
7691
- className: "flex overflow-x-auto gap-2 hide-scrollbar items-center",
7692
- ref: listRef
8630
+ className: " w-full pe-2 h-full flex overflow-x-auto hide-scrollbar",
8631
+ ref: carouselRef
7693
8632
  }, datas && datas.length > 0 && datas.map(function (item, index) {
7694
8633
  return renderItem(item, index);
7695
- }))), datas && datas.length > 0 && /*#__PURE__*/React__default.createElement("div", {
7696
- className: "hidden my-auto col-span-5 md:col-span-3 lg:col-span-2 gap-4 md:flex justify-end "
7697
- }, /*#__PURE__*/React__default.createElement("button", {
7698
- className: " px-4 py-3 rounded-full",
7699
- onClick: handleClickPrevImg,
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%]",
7700
8636
  style: {
7701
8637
  backgroundColor: isScrolledToLeft ? primaryColor : "#BDBDBD"
7702
- }
8638
+ },
8639
+ onClick: handleClickPrevImg
7703
8640
  }, /*#__PURE__*/React__default.createElement(fa.FaArrowLeft, {
7704
- className: "inline-block mb-1 text-lg",
7705
- style: {
7706
- color: textButtonColor
7707
- }
8641
+ className: "text-sm lg:text-lg text-white"
7708
8642
  })), /*#__PURE__*/React__default.createElement("button", {
7709
- 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",
7710
8644
  style: {
7711
8645
  backgroundColor: isScrolledToRight ? primaryColor : "#BDBDBD"
7712
8646
  },
7713
8647
  onClick: handleClickNextImg
7714
8648
  }, /*#__PURE__*/React__default.createElement(fa.FaArrowRight, {
7715
- className: "inline-block mb-1 text-lg",
7716
- style: {
7717
- color: textButtonColor
7718
- }
8649
+ className: "text-sm lg:text-lg text-white"
7719
8650
  }))));
7720
8651
  };
7721
8652
 
7722
- var ListProduct = function ListProduct(props) {
7723
- var _props$datas = props.datas,
7724
- datas = _props$datas === void 0 ? [] : _props$datas,
7725
- _props$style = props.style,
7726
- style = _props$style === void 0 ? {} : _props$style,
7727
- _props$className = props.className,
7728
- className = _props$className === void 0 ? {} : _props$className,
7729
- _props$renderItem = props.renderItem,
7730
- renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
7731
- return /*#__PURE__*/React__default.createElement("div", {
7732
- className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 mt-6 " + className,
7733
- style: style
7734
- }, datas && datas.length > 0 && datas.map(function (item, index) {
7735
- return renderItem(item, index);
7736
- }));
7737
- };
7738
-
7739
- var Products10 = function Products10(props) {
7740
- var _useState = React.useState(""),
7741
- selectCategory = _useState[0],
7742
- setSelectCategory = _useState[1];
8653
+ var Products2 = function Products2(props) {
7743
8654
  var shopConfigStyle = props.shopConfigStyle,
7744
8655
  data = props.data;
7745
8656
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7746
8657
  _shopConfigStyle$colo2 = _shopConfigStyle$colo.primary,
7747
8658
  primary = _shopConfigStyle$colo2 === void 0 ? "#000" : _shopConfigStyle$colo2,
7748
- _shopConfigStyle$colo3 = _shopConfigStyle$colo.textBody,
7749
- textBody = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
7750
- _shopConfigStyle$colo4 = _shopConfigStyle$colo.textButton,
7751
- textButton = _shopConfigStyle$colo4 === void 0 ? "#fff" : _shopConfigStyle$colo4,
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,
7752
8663
  _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
7753
8664
  background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5,
7754
- _shopConfigStyle$colo6 = _shopConfigStyle$colo.bgSecondary,
7755
- bgSecondary = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7756
- var _CategoryController = CategoryController(props),
7757
- _CategoryController$c = _CategoryController.categories,
7758
- categories = _CategoryController$c === void 0 ? [] : _CategoryController$c;
8665
+ _shopConfigStyle$colo6 = _shopConfigStyle$colo.textButton,
8666
+ textButton = _shopConfigStyle$colo6 === void 0 ? "#fff" : _shopConfigStyle$colo6;
7759
8667
  var _ProductController = ProductController(props),
7760
8668
  _ProductController$pr = _ProductController.products,
7761
8669
  products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7762
- console.log("Products10 products");
8670
+ console.log("Products2 products");
7763
8671
  return /*#__PURE__*/React__default.createElement("div", {
7764
- className: "w-full pt-10 px-4 xl:px-20",
8672
+ className: "pt-10 px-4 xl:px-20",
7765
8673
  style: {
7766
8674
  background: background,
7767
8675
  color: textBody
7768
8676
  }
7769
- }, /*#__PURE__*/React__default.createElement("h2", {
7770
- className: "text-2xl lg:text-3xl xl:text-4xl font-semibold mb-6"
7771
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(CarouselItem, {
7772
- datas: categories,
7773
- primaryColor: primary,
7774
- textButtonColor: textButton,
7775
- renderItem: function renderItem(item, index) {
7776
- return /*#__PURE__*/React__default.createElement("div", {
7777
- key: item.categoryId + "-" + index,
7778
- className: "border-2 items whitespace-nowrap p-2 rounded-lg cursor-pointer ",
7779
- style: {
7780
- borderColor: primary,
7781
- color: selectCategory === item.categoryId ? textButton : primary,
7782
- background: selectCategory === item.categoryId ? primary : bgSecondary
7783
- },
7784
- onClick: function onClick() {
7785
- setSelectCategory(item.categoryId);
7786
- }
7787
- }, item.cateName);
7788
- }
7789
- }), /*#__PURE__*/React__default.createElement(ListProduct, {
7790
- datas: products,
7791
- renderItem: function renderItem(item, index) {
7792
- return /*#__PURE__*/React__default.createElement("div", {
7793
- key: "productfsd-" + index
7794
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7795
- product: item.productInfo,
7796
- shopConfigStyle: shopConfigStyle
7797
- }));
7798
- }
7799
- }));
7800
- };
7801
-
7802
- var ProductsTop1 = function ProductsTop1(props) {
7803
- var data = props.data,
7804
- shopConfigStyle = props.shopConfigStyle;
7805
- var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
7806
- _shopConfigStyle$colo2 = _shopConfigStyle$colo.background,
7807
- background = _shopConfigStyle$colo2 === void 0 ? "#fff" : _shopConfigStyle$colo2;
7808
- var _ProductController = ProductController(props),
7809
- _ProductController$pr = _ProductController.products,
7810
- products = _ProductController$pr === void 0 ? [] : _ProductController$pr;
7811
- console.log("ProductsTop1 products");
7812
- return /*#__PURE__*/React__default.createElement("div", {
7813
- className: "w-full pt-10 px-4 xl:px-20",
8677
+ }, /*#__PURE__*/React__default.createElement("div", {
8678
+ className: "rounded-3xl w-full py-10 md:px-10 sm:px-6 px-4",
7814
8679
  style: {
7815
- background: background
8680
+ background: secondary
7816
8681
  }
7817
8682
  }, /*#__PURE__*/React__default.createElement("h2", {
7818
- className: "text-2xl md:text-3xl lg:text-4xl font-semibold mb-6"
7819
- }, data === null || data === void 0 ? void 0 : data.sectionTitle), /*#__PURE__*/React__default.createElement(ListProduct, {
7820
- datas: products,
7821
- renderItem: function renderItem(item, index) {
7822
- return /*#__PURE__*/React__default.createElement("div", {
7823
- key: "productfsd-" + index
7824
- }, /*#__PURE__*/React__default.createElement(ItemProduct, {
7825
- product: item.productInfo,
7826
- shopConfigStyle: shopConfigStyle
7827
- }));
7828
- }
7829
- }));
7830
- };
7831
-
7832
- var getEmployeeListApi = function getEmployeeListApi(shopId) {
7833
- return api({
7834
- method: "post",
7835
- url: "/chain-employment-profile/filter-employ-by-customer",
7836
- headers: {
7837
- shopId: shopId
7838
- }
7839
- });
7840
- };
7841
-
7842
- var EmployeeController = function EmployeeController(props) {
7843
- var _props$isAutoGetList = props.isAutoGetList,
7844
- isAutoGetList = _props$isAutoGetList === void 0 ? true : _props$isAutoGetList,
7845
- shopConfig = props.shopConfig;
7846
- var _useState = React.useState([]),
7847
- listEmployment = _useState[0],
7848
- setListEmployment = _useState[1];
7849
- React.useEffect(function () {
7850
- if (isAutoGetList) {
7851
- getListEmployee();
7852
- }
7853
- }, [isAutoGetList]);
7854
- var getListEmployee = function getListEmployee() {
7855
- try {
7856
- return Promise.resolve(_catch(function () {
7857
- return Promise.resolve(getEmployeeListApi(shopConfig === null || shopConfig === void 0 ? void 0 : shopConfig.shopId)).then(function (res) {
7858
- var _res$data, _res$data$status;
7859
- if ((res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$status = _res$data.status) === null || _res$data$status === void 0 ? void 0 : _res$data$status.code) == 200) {
7860
- var _res$data2;
7861
- setListEmployment((res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data) || []);
7862
- }
7863
- return res;
7864
- });
7865
- }, function (e) {
7866
- console.log(e);
7867
- }));
7868
- } catch (e) {
7869
- return Promise.reject(e);
7870
- }
7871
- };
7872
- return {
7873
- listEmployment: listEmployment,
7874
- getListEmployee: getListEmployee
7875
- };
7876
- };
7877
-
7878
- var createSpaScheduleApi = function createSpaScheduleApi(shopId, data) {
7879
- return api({
7880
- method: "post",
7881
- url: "/spa-schedule/customer/create",
7882
- data: data,
7883
- headers: {
7884
- shopId: shopId
8683
+ className: "font-semibold text-2xl md:text-3xl lg:text-4xl ps-5 pb-4",
8684
+ style: {
8685
+ color: textButton
7885
8686
  }
7886
- });
7887
- };
7888
-
7889
- var _excluded = ["productName"];
7890
- var BookingController = function BookingController(props) {
7891
- _objectDestructuringEmpty(props);
7892
- var createSchedule = function createSchedule(customerName, customerPhone, scheduleDate, services, shopId) {
7893
- try {
7894
- return Promise.resolve(_catch(function () {
7895
- var data = {
7896
- appId: "SSPA",
7897
- customerName: customerName,
7898
- customerPhone: customerPhone.replace("+", ""),
7899
- isSellService: true,
7900
- scheduleDate: new Date(scheduleDate).getTime(),
7901
- services: services === null || services === void 0 ? void 0 : services.map(function (_ref) {
7902
- var productName = _ref.productName,
7903
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
7904
- return rest;
7905
- }),
7906
- shopId: shopId
7907
- };
7908
- return Promise.resolve(createSpaScheduleApi(shopId, data));
7909
- }, function (e) {
7910
- console.log(e);
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
7911
8697
  }));
7912
- } catch (e) {
7913
- return Promise.reject(e);
7914
8698
  }
7915
- };
7916
- return {
7917
- createSchedule: createSchedule
7918
- };
8699
+ })));
7919
8700
  };
7920
8701
 
7921
- var Input = React.forwardRef(function (props, ref) {
7922
- var _props$label = props.label,
7923
- label = _props$label === void 0 ? "" : _props$label,
7924
- _props$placeholder = props.placeholder,
7925
- placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
8702
+ var Pagination = function Pagination(props) {
8703
+ var _props$size = props.size,
8704
+ size = _props$size === void 0 ? 24 : _props$size,
7926
8705
  _props$className = props.className,
7927
8706
  className = _props$className === void 0 ? "" : _props$className,
7928
- _props$name = props.name,
7929
- name = _props$name === void 0 ? "" : _props$name,
7930
- _props$onChange = props.onChange,
7931
- onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
7932
- _props$defaultValue = props.defaultValue,
7933
- defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
7934
- _props$type = props.type,
7935
- type = _props$type === void 0 ? "text" : _props$type,
7936
- _props$rules = props.rules,
7937
- rules = _props$rules === void 0 ? [] : _props$rules;
7938
- var _useState = React.useState(defaultValue),
7939
- value = _useState[0],
7940
- _setValue = _useState[1];
7941
- var _useState2 = React.useState(""),
7942
- error = _useState2[0],
7943
- _setError = _useState2[1];
7944
- React.useImperativeHandle(ref, function () {
7945
- return {
7946
- validateData: function validateData() {
7947
- return _validateData();
7948
- },
7949
- setValue: function setValue(text) {
7950
- return _setValue(text);
7951
- },
7952
- getValue: function getValue() {
7953
- 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);
7954
8732
  },
7955
- setError: function setError(err) {
7956
- return _setError(err);
7957
- }
7958
- };
7959
- });
7960
- var _validateData = function _validateData() {
7961
- var count = 0;
7962
- rules.forEach(function (e) {
7963
- var _e$pattern;
7964
- if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
7965
- _setError(e === null || e === void 0 ? void 0 : e.message);
7966
- count++;
7967
- return false;
7968
- } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
7969
- _setError(e === null || e === void 0 ? void 0 : e.message);
7970
- count++;
7971
- 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"
7972
8773
  }
7973
- });
7974
- if (count) {
7975
- return false;
7976
- } else {
7977
- _setError('');
7978
- 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);
7979
8786
  }
8787
+ }, [categorySelected]);
8788
+ var onSelectCategory = function onSelectCategory(category) {
8789
+ setCategorySelected(category);
7980
8790
  };
7981
- var handleOnChange = function handleOnChange(event) {
7982
- var value = event.target.value;
7983
- _setValue(value);
7984
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
8791
+ var onPageChange = function onPageChange(pageNum) {
8792
+ setProductParams(_extends({}, productParams, {
8793
+ page: pageNum
8794
+ }));
7985
8795
  };
7986
- var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
7987
- var required = !!(rules !== null && rules !== void 0 && rules.find(function (e) {
7988
- 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
7989
8838
  }));
7990
- var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
7991
- className: "text-danger"
7992
- }, " *") : null;
7993
- return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
7994
- className: "mb-1"
7995
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("input", {
7996
- type: type,
7997
- name: name,
7998
- value: value,
7999
- placeholder: placeholder,
8000
- onChange: handleOnChange,
8001
- required: required,
8002
- className: _className
8003
- }), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
8004
- });
8839
+ };
8005
8840
 
8006
- var Select = React.forwardRef(function (props, ref) {
8007
- var _props$label = props.label,
8008
- label = _props$label === void 0 ? "" : _props$label,
8009
- _props$placeholder = props.placeholder,
8010
- placeholder = _props$placeholder === void 0 ? "" : _props$placeholder,
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,
8011
8851
  _props$className = props.className,
8012
8852
  className = _props$className === void 0 ? "" : _props$className,
8013
- _props$name = props.name,
8014
- name = _props$name === void 0 ? "" : _props$name,
8015
- _props$onChange = props.onChange,
8016
- onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
8017
- _props$defaultValue = props.defaultValue,
8018
- defaultValue = _props$defaultValue === void 0 ? null : _props$defaultValue,
8019
- _props$rules = props.rules,
8020
- rules = _props$rules === void 0 ? [] : _props$rules,
8021
- _props$options = props.options,
8022
- options = _props$options === void 0 ? [] : _props$options,
8023
- _props$required = props.required,
8024
- required = _props$required === void 0 ? false : _props$required;
8025
- var _useState = React.useState(defaultValue),
8026
- value = _useState[0],
8027
- _setValue = _useState[1];
8028
- var _useState2 = React.useState(""),
8029
- error = _useState2[0],
8030
- _setError = _useState2[1];
8031
- React.useImperativeHandle(ref, function () {
8032
- return {
8033
- validateData: function validateData() {
8034
- return _validateData();
8035
- },
8036
- setValue: function setValue(text) {
8037
- return _setValue(text);
8038
- },
8039
- getValue: function getValue() {
8040
- return value();
8041
- },
8042
- setError: function setError(err) {
8043
- return _setError(err);
8044
- }
8045
- };
8046
- });
8047
- var _validateData = function _validateData() {
8048
- var count = 0;
8049
- rules.forEach(function (e) {
8050
- var _e$pattern;
8051
- if ((e === null || e === void 0 ? void 0 : e.type) === 'required' && value === '') {
8052
- _setError(e === null || e === void 0 ? void 0 : e.message);
8053
- count++;
8054
- return false;
8055
- } else if ((e === null || e === void 0 ? void 0 : e.type) === 'pattern' && !(e !== null && e !== void 0 && (_e$pattern = e.pattern) !== null && _e$pattern !== void 0 && _e$pattern.test(value))) {
8056
- _setError(e === null || e === void 0 ? void 0 : e.message);
8057
- count++;
8058
- return false;
8059
- }
8060
- });
8061
- if (count) {
8062
- return false;
8063
- } else {
8064
- _setError('');
8065
- 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
+ });
8066
8879
  }
8067
8880
  };
8068
- var handleOnChange = function handleOnChange(event) {
8069
- var value = event.target.value;
8070
- _setValue(value);
8071
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
8072
- };
8073
- var _className = "h-10 py-1 px-2 border border-stroke rounded " + className;
8074
- var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
8075
- className: "text-danger"
8076
- }, " *") : null;
8077
- return /*#__PURE__*/React__default.createElement("div", null, label ? /*#__PURE__*/React__default.createElement("div", {
8078
- className: "mb-1"
8079
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement("select", {
8080
- name: name,
8081
- value: value,
8082
- onChange: handleOnChange,
8083
- required: required,
8084
- className: _className
8085
- }, /*#__PURE__*/React__default.createElement("option", {
8086
- value: "",
8087
- disabled: true,
8088
- selected: true,
8089
- hidden: true
8090
- }, placeholder), options === null || options === void 0 ? void 0 : options.map(function (option, index) {
8091
- return /*#__PURE__*/React__default.createElement("option", {
8092
- value: option.value,
8093
- key: index
8094
- }, option === null || option === void 0 ? void 0 : option.label);
8095
- })), error ? /*#__PURE__*/React__default.createElement("div", null, error) : null);
8096
- });
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
+ };
8097
8918
 
8098
- var DateTimePicker = function DateTimePicker(props) {
8099
- var _props$label = props.label,
8100
- 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,
8101
8924
  _props$className = props.className,
8102
- className = _props$className === void 0 ? "" : _props$className,
8103
- _props$defaultValue = props.defaultValue,
8104
- defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
8105
- _props$required = props.required,
8106
- required = _props$required === void 0 ? false : _props$required;
8107
- var _useState = React.useState(defaultValue),
8108
- value = _useState[0],
8109
- setValue = _useState[1];
8110
- var _useState2 = React.useState(""),
8111
- error = _useState2[0];
8112
- var _className = "h-10 flex items-center py-1 px-2 border border-stroke rounded bg-white cursor-pointer " + className;
8113
- var labelRequired = required ? /*#__PURE__*/React__default.createElement("span", {
8114
- className: "text-danger"
8115
- }, " *") : null;
8116
- var CustomInput = React.forwardRef(function (_ref, ref) {
8117
- var value = _ref.value,
8118
- onClick = _ref.onClick,
8119
- className = _ref.className;
8120
- return /*#__PURE__*/React__default.createElement("div", {
8121
- className: className,
8122
- onClick: onClick,
8123
- ref: ref
8124
- }, value);
8125
- });
8925
+ className = _props$className === void 0 ? {} : _props$className,
8926
+ _props$renderItem = props.renderItem,
8927
+ renderItem = _props$renderItem === void 0 ? function () {} : _props$renderItem;
8126
8928
  return /*#__PURE__*/React__default.createElement("div", {
8127
- className: "w-full"
8128
- }, label ? /*#__PURE__*/React__default.createElement("div", {
8129
- className: "mb-1"
8130
- }, label, labelRequired) : null, /*#__PURE__*/React__default.createElement(DatePicker, {
8131
- selected: value,
8132
- onChange: function onChange(date) {
8133
- return setValue(date);
8134
- },
8135
- customInput: /*#__PURE__*/React__default.createElement(CustomInput, {
8136
- className: _className
8137
- }),
8138
- wrapperClassName: "w-full"
8139
- }), 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
+ }));
8140
8934
  };
8141
8935
 
8142
- 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) {
8143
9000
  var _props$shopConfigStyl = props.shopConfigStyle,
8144
- 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;
8145
9006
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8146
9007
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8147
9008
  secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8148
- var _useState = React.useState(false),
8149
- isAutoGetListProduct = _useState[0];
8150
- var _useState2 = React.useState({
8151
- 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
8152
9048
  }),
8153
- productsParams = _useState2[0];
8154
- var _useState3 = React.useState(false),
8155
- isAutoGetListEmployee = _useState3[0];
8156
- var _useState4 = React.useState(new Date());
8157
- var _EmployeeController = EmployeeController(_extends({}, props, {
8158
- isAutoGetList: isAutoGetListEmployee
8159
- }));
9049
+ params = _useState[0];
8160
9050
  var _ProductController = ProductController(_extends({}, props, {
8161
- isAutoGetList: isAutoGetListProduct,
8162
- params: productsParams
8163
- }));
8164
- console.log("BookingForm products");
8165
- 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");
8166
9083
  return /*#__PURE__*/React__default.createElement("div", {
8167
- className: "grid gap-4 rounded-lg p-6",
9084
+ className: "w-full pt-10 px-4 xl:px-20",
8168
9085
  style: {
8169
- 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
+ }));
8170
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"
8171
9200
  }, /*#__PURE__*/React__default.createElement("div", {
8172
- className: "grid grid-cols-1 md:grid-cols-2 gap-4"
8173
- }, /*#__PURE__*/React__default.createElement(Input, {
8174
- label: "Họ tên",
8175
- placeholder: "Nhập họ tên",
8176
- rules: [{
8177
- type: "required",
8178
- message: "Bắt buộc nhập họ tên"
8179
- }],
8180
- className: "w-full rounded-lg"
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
+ })));
8181
9230
  }), /*#__PURE__*/React__default.createElement(Input, {
8182
- label: "Họ tên",
8183
- placeholder: "Nhập họ tên",
9231
+ label: "Số lượng",
9232
+ wrapClassName: "flex items-center gap-6 mt-6",
8184
9233
  rules: [{
8185
9234
  type: "required",
8186
- message: "Bắt buộc nhập họ tên"
8187
- }],
8188
- className: "w-full rounded-lg"
8189
- })), /*#__PURE__*/React__default.createElement("div", {
8190
- className: "grid grid-cols-1 md:grid-cols-2 gap-4"
8191
- }, /*#__PURE__*/React__default.createElement(Select, {
8192
- label: "Dịch vụ",
8193
- options: [{
8194
- label: "123",
8195
- value: "456"
9235
+ message: "Bắt buộc nhập số lượng"
8196
9236
  }, {
8197
- label: "1235",
8198
- value: "4567"
9237
+ type: "pattern",
9238
+ pattern: numberPattern,
9239
+ message: "Số lượng không đúng"
8199
9240
  }],
8200
- className: "w-full rounded-lg",
8201
- placeholder: "Chọn dịch vụ"
8202
- }), /*#__PURE__*/React__default.createElement(DateTimePicker, {
8203
- label: "Thời gian",
8204
- className: "w-full rounded-lg",
8205
- placeholder: "Chọn thời gian"
8206
- })), /*#__PURE__*/React__default.createElement("div", {
8207
- className: "text-center"
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"
8208
9247
  }, /*#__PURE__*/React__default.createElement(Button, {
8209
- label: "Đặt lịch ngay",
8210
- shopConfigStyle: shopConfigStyle
8211
- })));
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"))));
8212
9270
  };
8213
9271
 
8214
9272
  var Booking1 = function Booking1(props) {
@@ -8458,6 +9516,142 @@ var Footer1 = function Footer1(props) {
8458
9516
  }, "Xem \u0111i\u1EC1u kho\u1EA3n v\xE0 ch\xEDnh s\xE1ch"))));
8459
9517
  };
8460
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
+
8461
9655
  var RatingStar = function RatingStar(props) {
8462
9656
  var _props$star = props.star,
8463
9657
  star = _props$star === void 0 ? 5 : _props$star,
@@ -8498,14 +9692,9 @@ var CustomerRating10 = function CustomerRating10(props) {
8498
9692
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8499
9693
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8500
9694
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8501
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8502
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8503
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9695
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8504
9696
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8505
- className: "relative w-full py-12 px-4 xl:px-20",
8506
- style: {
8507
- backgroundColor: background
8508
- }
9697
+ className: SECTION_DEFAULT_CLASS
8509
9698
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8510
9699
  data: data,
8511
9700
  shopConfigStyle: shopConfigStyle
@@ -8542,18 +9731,12 @@ var Employees1 = function Employees1(props) {
8542
9731
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8543
9732
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8544
9733
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8545
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8546
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8547
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9734
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8548
9735
  console.log("Employee data", data);
8549
9736
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8550
- className: "relative w-full py-12 px-4 xl:px-20",
8551
- style: {
8552
- backgroundColor: background
8553
- }
9737
+ className: SECTION_DEFAULT_CLASS + " relative"
8554
9738
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8555
- data: data,
8556
- shopConfigStyle: shopConfigStyle
9739
+ data: data
8557
9740
  }), /*#__PURE__*/React__default.createElement("div", {
8558
9741
  className: "mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 lg:gap-12"
8559
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) {
@@ -8585,15 +9768,10 @@ var Gallery1 = function Gallery1(props) {
8585
9768
  SectionTitle = _props$SectionTitle === void 0 ? null : _props$SectionTitle;
8586
9769
  var _shopConfigStyle$colo = shopConfigStyle === null || shopConfigStyle === void 0 ? void 0 : shopConfigStyle.color,
8587
9770
  _shopConfigStyle$colo3 = _shopConfigStyle$colo.secondary,
8588
- secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3,
8589
- _shopConfigStyle$colo5 = _shopConfigStyle$colo.background,
8590
- background = _shopConfigStyle$colo5 === void 0 ? "#fff" : _shopConfigStyle$colo5;
9771
+ secondary = _shopConfigStyle$colo3 === void 0 ? "#000" : _shopConfigStyle$colo3;
8591
9772
  console.log("Gallery1 data", data);
8592
9773
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
8593
- className: "relative w-full py-12 px-4 xl:px-20",
8594
- style: {
8595
- backgroundColor: background
8596
- }
9774
+ className: "" + SECTION_DEFAULT_CLASS
8597
9775
  }, /*#__PURE__*/React__default.createElement(SectionTitle, {
8598
9776
  data: data,
8599
9777
  shopConfigStyle: shopConfigStyle
@@ -8610,15 +9788,231 @@ var Gallery1 = function Gallery1(props) {
8610
9788
  }));
8611
9789
  };
8612
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;
8613
10003
  exports.Address1 = Address1;
8614
10004
  exports.Banner1 = Banner1;
8615
10005
  exports.Booking1 = Booking1;
10006
+ exports.Breadcrumb1 = Breadcrumb1;
10007
+ exports.Carts1 = Carts1;
10008
+ exports.Contact1 = Contact1;
8616
10009
  exports.CustomerRating10 = CustomerRating10;
8617
10010
  exports.Employees1 = Employees1;
8618
10011
  exports.Features1 = Features1;
8619
10012
  exports.Features2 = Features2;
8620
10013
  exports.Features3 = Features3;
8621
10014
  exports.Footer1 = Footer1;
10015
+ exports.Footer7 = Footer7;
8622
10016
  exports.Gallery1 = Gallery1;
8623
10017
  exports.Hero10 = Hero10;
8624
10018
  exports.Hero11 = Hero11;
@@ -8626,12 +10020,18 @@ exports.Hero12 = Hero11$1;
8626
10020
  exports.Hero13 = Hero13;
8627
10021
  exports.Links1 = Links1;
8628
10022
  exports.NavBar7 = NavBar7;
10023
+ exports.PageTitle1 = PageTitle1;
8629
10024
  exports.Partner1 = Partner1;
10025
+ exports.ProductDetail10 = ProductDetail10;
10026
+ exports.ProductHot3 = ProductHot3;
10027
+ exports.ProductSale2 = ProductSale2;
8630
10028
  exports.Products1 = Products1;
8631
10029
  exports.Products10 = Products10;
8632
10030
  exports.Products2 = Products2;
10031
+ exports.Products3 = Products3;
8633
10032
  exports.ProductsTop1 = ProductsTop1;
8634
10033
  exports.SectionTitle1 = SectionTitle1;
10034
+ exports.ServiceDetail1 = ServiceDetail1;
8635
10035
  exports.Treatments1 = Treatments1;
8636
10036
  exports.Treatments2 = Treatments1$1;
8637
10037
  //# sourceMappingURL=index.js.map