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

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