@happychef/reservation-sidebar 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +144 -73
- package/dist/index.mjs +115 -44
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('@happychef/algorithm');
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var algorithm = require('@happychef/algorithm');
|
|
5
5
|
var Lottie = require('lottie-react');
|
|
6
6
|
var fa = require('react-icons/fa');
|
|
7
7
|
var axios = require('axios');
|
|
@@ -9,7 +9,7 @@ var moment2 = require('moment-timezone');
|
|
|
9
9
|
|
|
10
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
13
13
|
var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
|
|
14
14
|
var axios__default = /*#__PURE__*/_interopDefault(axios);
|
|
15
15
|
var moment2__default = /*#__PURE__*/_interopDefault(moment2);
|
|
@@ -4173,15 +4173,86 @@ var ReservationStepOne = ({
|
|
|
4173
4173
|
timeblocks,
|
|
4174
4174
|
loadingTimeblocks,
|
|
4175
4175
|
timeblocksError,
|
|
4176
|
-
restaurantData
|
|
4176
|
+
restaurantData,
|
|
4177
|
+
reservations = []
|
|
4177
4178
|
}) => {
|
|
4179
|
+
const [availableTables, setAvailableTables] = React.useState([]);
|
|
4180
|
+
const [isFetchingTables, setIsFetchingTables] = React.useState(false);
|
|
4181
|
+
React.useEffect(() => {
|
|
4182
|
+
const tableSettings2 = restaurantData?.["table-settings"] || {};
|
|
4183
|
+
const isAutomaticAssignment = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
|
|
4184
|
+
if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0 && restaurantData && reservations) {
|
|
4185
|
+
setIsFetchingTables(true);
|
|
4186
|
+
const available = algorithm.getAvailableTablesForTime(
|
|
4187
|
+
restaurantData,
|
|
4188
|
+
formData.date,
|
|
4189
|
+
formData.time,
|
|
4190
|
+
formData.guests,
|
|
4191
|
+
reservations
|
|
4192
|
+
);
|
|
4193
|
+
setAvailableTables(available);
|
|
4194
|
+
const currentlySelectedNumbers = formData.selectedTableNumbers || [];
|
|
4195
|
+
const currentlySelectedIds = formData.selectedTableIds || [];
|
|
4196
|
+
const stillAvailableSelectedNumbers = [];
|
|
4197
|
+
const stillAvailableSelectedIds = [];
|
|
4198
|
+
currentlySelectedNumbers.forEach((num) => {
|
|
4199
|
+
const correspondingTable = available.find(
|
|
4200
|
+
(at) => at.tableNumber === num
|
|
4201
|
+
);
|
|
4202
|
+
if (correspondingTable && currentlySelectedIds.includes(correspondingTable.tableId)) {
|
|
4203
|
+
stillAvailableSelectedNumbers.push(num);
|
|
4204
|
+
stillAvailableSelectedIds.push(correspondingTable.tableId);
|
|
4205
|
+
}
|
|
4206
|
+
});
|
|
4207
|
+
if (stillAvailableSelectedNumbers.length !== currentlySelectedNumbers.length) {
|
|
4208
|
+
setTimeout(() => {
|
|
4209
|
+
handleChange({
|
|
4210
|
+
target: {
|
|
4211
|
+
multiple: true,
|
|
4212
|
+
updates: {
|
|
4213
|
+
selectedTableNumbers: stillAvailableSelectedNumbers,
|
|
4214
|
+
selectedTableIds: stillAvailableSelectedIds
|
|
4215
|
+
}
|
|
4216
|
+
}
|
|
4217
|
+
});
|
|
4218
|
+
}, 0);
|
|
4219
|
+
}
|
|
4220
|
+
setIsFetchingTables(false);
|
|
4221
|
+
} else {
|
|
4222
|
+
setAvailableTables([]);
|
|
4223
|
+
if (formData.selectedTableNumbers?.length > 0 || formData.selectedTableIds?.length > 0) {
|
|
4224
|
+
setTimeout(() => {
|
|
4225
|
+
handleChange({
|
|
4226
|
+
target: {
|
|
4227
|
+
multiple: true,
|
|
4228
|
+
updates: {
|
|
4229
|
+
selectedTableNumbers: [],
|
|
4230
|
+
selectedTableIds: []
|
|
4231
|
+
}
|
|
4232
|
+
}
|
|
4233
|
+
});
|
|
4234
|
+
}, 0);
|
|
4235
|
+
}
|
|
4236
|
+
}
|
|
4237
|
+
}, [
|
|
4238
|
+
formData.date,
|
|
4239
|
+
formData.time,
|
|
4240
|
+
formData.guests,
|
|
4241
|
+
restaurantData,
|
|
4242
|
+
reservations,
|
|
4243
|
+
formData.selectedTableNumbers,
|
|
4244
|
+
formData.selectedTableIds,
|
|
4245
|
+
handleChange
|
|
4246
|
+
]);
|
|
4178
4247
|
if (timeblocksError) {
|
|
4179
|
-
return /* @__PURE__ */
|
|
4248
|
+
return /* @__PURE__ */ React__default.default.createElement("div", null, "Error loading opening hours. Please configure your restaurant opening hours.");
|
|
4180
4249
|
}
|
|
4181
4250
|
if (loadingTimeblocks) {
|
|
4182
|
-
return /* @__PURE__ */
|
|
4251
|
+
return /* @__PURE__ */ React__default.default.createElement("div", null, "Loading availability...");
|
|
4183
4252
|
}
|
|
4184
|
-
|
|
4253
|
+
const tableSettings = restaurantData?.["table-settings"] || {};
|
|
4254
|
+
const showTableSelector = formData.date && formData.time && formData.guests > 0 && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && availableTables.length > 0;
|
|
4255
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: "reservation-step-one-placeholder" }, /* @__PURE__ */ React__default.default.createElement("p", null, /* @__PURE__ */ React__default.default.createElement("strong", null, "Note:"), " This is a simplified ReservationStepOne component."), /* @__PURE__ */ React__default.default.createElement("p", null, "Uses @happychef/algorithm to calculate available tables based on restaurant data, date, time, guests, and existing reservations."), /* @__PURE__ */ React__default.default.createElement("p", null, "Current form data:"), /* @__PURE__ */ React__default.default.createElement("ul", null, /* @__PURE__ */ React__default.default.createElement("li", null, "Guests: ", formData.guests), /* @__PURE__ */ React__default.default.createElement("li", null, "Date: ", formData.date || "Not selected"), /* @__PURE__ */ React__default.default.createElement("li", null, "Time: ", formData.time || "Not selected"), /* @__PURE__ */ React__default.default.createElement("li", null, "Available tables: ", availableTables.length), isFetchingTables && /* @__PURE__ */ React__default.default.createElement("li", null, "Calculating availability...")), /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("label", null, "Guests:", /* @__PURE__ */ React__default.default.createElement(
|
|
4185
4256
|
"input",
|
|
4186
4257
|
{
|
|
4187
4258
|
type: "number",
|
|
@@ -4190,7 +4261,7 @@ var ReservationStepOne = ({
|
|
|
4190
4261
|
onChange: handleChange,
|
|
4191
4262
|
min: "1"
|
|
4192
4263
|
}
|
|
4193
|
-
)), errors.guests && /* @__PURE__ */
|
|
4264
|
+
)), errors.guests && /* @__PURE__ */ React__default.default.createElement("span", { className: "error" }, errors.guests)), /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("label", null, "Date:", /* @__PURE__ */ React__default.default.createElement(
|
|
4194
4265
|
"input",
|
|
4195
4266
|
{
|
|
4196
4267
|
type: "date",
|
|
@@ -4198,7 +4269,7 @@ var ReservationStepOne = ({
|
|
|
4198
4269
|
value: formData.date,
|
|
4199
4270
|
onChange: handleChange
|
|
4200
4271
|
}
|
|
4201
|
-
)), errors.date && /* @__PURE__ */
|
|
4272
|
+
)), errors.date && /* @__PURE__ */ React__default.default.createElement("span", { className: "error" }, errors.date)), /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("label", null, "Time:", /* @__PURE__ */ React__default.default.createElement(
|
|
4202
4273
|
"input",
|
|
4203
4274
|
{
|
|
4204
4275
|
type: "time",
|
|
@@ -4206,7 +4277,7 @@ var ReservationStepOne = ({
|
|
|
4206
4277
|
value: formData.time,
|
|
4207
4278
|
onChange: handleChange
|
|
4208
4279
|
}
|
|
4209
|
-
)), errors.time && /* @__PURE__ */
|
|
4280
|
+
)), errors.time && /* @__PURE__ */ React__default.default.createElement("span", { className: "error" }, errors.time)), showTableSelector && /* @__PURE__ */ React__default.default.createElement("div", { className: "available-tables" }, /* @__PURE__ */ React__default.default.createElement("h4", null, "Available Tables (", availableTables.length, ")"), /* @__PURE__ */ React__default.default.createElement("ul", null, availableTables.map((table) => /* @__PURE__ */ React__default.default.createElement("li", { key: table.tableId }, "Table ", table.tableNumber, " - Capacity: ", table.capacity)))));
|
|
4210
4281
|
};
|
|
4211
4282
|
var ReservationStepOne_default = ReservationStepOne;
|
|
4212
4283
|
|
|
@@ -4277,11 +4348,11 @@ var FormField = ({
|
|
|
4277
4348
|
}) => {
|
|
4278
4349
|
const t = getSection(translations_default, "formField");
|
|
4279
4350
|
const selectPlaceholderText = selectPlaceholder || t.selectPlaceholder;
|
|
4280
|
-
const [showTooltip, setShowTooltip] =
|
|
4281
|
-
const tooltipRef =
|
|
4282
|
-
const timerRef =
|
|
4351
|
+
const [showTooltip, setShowTooltip] = React.useState(false);
|
|
4352
|
+
const tooltipRef = React.useRef < HTMLDivElement > null;
|
|
4353
|
+
const timerRef = React.useRef < NodeJS.Timeout | null > null;
|
|
4283
4354
|
const RightIconComponent = rightIcon2;
|
|
4284
|
-
|
|
4355
|
+
React.useEffect(() => {
|
|
4285
4356
|
const handleClickOutside = (e) => {
|
|
4286
4357
|
if (tooltipRef.current && !tooltipRef.current.contains(e.target)) {
|
|
4287
4358
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
@@ -4301,19 +4372,19 @@ var FormField = ({
|
|
|
4301
4372
|
};
|
|
4302
4373
|
const renderControl = () => {
|
|
4303
4374
|
if (type === "select") {
|
|
4304
|
-
return /* @__PURE__ */
|
|
4375
|
+
return /* @__PURE__ */ React__default.default.createElement("select", { ...baseControlProps }, /* @__PURE__ */ React__default.default.createElement("option", { value: "" }, selectPlaceholderText), options.map((opt) => /* @__PURE__ */ React__default.default.createElement("option", { key: opt.value, value: opt.value }, opt.label)));
|
|
4305
4376
|
}
|
|
4306
4377
|
if (type === "textarea")
|
|
4307
|
-
return /* @__PURE__ */
|
|
4308
|
-
return /* @__PURE__ */
|
|
4378
|
+
return /* @__PURE__ */ React__default.default.createElement("textarea", { ...baseControlProps, placeholder });
|
|
4379
|
+
return /* @__PURE__ */ React__default.default.createElement("input", { type, ...baseControlProps, placeholder });
|
|
4309
4380
|
};
|
|
4310
|
-
return /* @__PURE__ */
|
|
4381
|
+
return /* @__PURE__ */ React__default.default.createElement(
|
|
4311
4382
|
"div",
|
|
4312
4383
|
{
|
|
4313
4384
|
className: `form-group ${halfWidth ? "half-width" : ""}`,
|
|
4314
4385
|
style: { position: "relative" }
|
|
4315
4386
|
},
|
|
4316
|
-
/* @__PURE__ */
|
|
4387
|
+
/* @__PURE__ */ React__default.default.createElement("div", { className: "input-container" }, Icon && /* @__PURE__ */ React__default.default.createElement(Icon, { className: "input-icon" }), renderControl(), RightIconComponent && /* @__PURE__ */ React__default.default.createElement(
|
|
4317
4388
|
"div",
|
|
4318
4389
|
{
|
|
4319
4390
|
className: "magic-wand-container",
|
|
@@ -4333,14 +4404,14 @@ var FormField = ({
|
|
|
4333
4404
|
cursor: "pointer"
|
|
4334
4405
|
}
|
|
4335
4406
|
},
|
|
4336
|
-
/* @__PURE__ */
|
|
4407
|
+
/* @__PURE__ */ React__default.default.createElement(
|
|
4337
4408
|
RightIconComponent,
|
|
4338
4409
|
{
|
|
4339
4410
|
className: "magic-wand-icon",
|
|
4340
4411
|
style: { color: "#B567C2" }
|
|
4341
4412
|
}
|
|
4342
4413
|
),
|
|
4343
|
-
showTooltip && tooltipContent && /* @__PURE__ */
|
|
4414
|
+
showTooltip && tooltipContent && /* @__PURE__ */ React__default.default.createElement(
|
|
4344
4415
|
"div",
|
|
4345
4416
|
{
|
|
4346
4417
|
ref: tooltipRef,
|
|
@@ -4360,7 +4431,7 @@ var FormField = ({
|
|
|
4360
4431
|
overflow: "hidden"
|
|
4361
4432
|
}
|
|
4362
4433
|
},
|
|
4363
|
-
/* @__PURE__ */
|
|
4434
|
+
/* @__PURE__ */ React__default.default.createElement(
|
|
4364
4435
|
"div",
|
|
4365
4436
|
{
|
|
4366
4437
|
className: "lottie-container",
|
|
@@ -4375,7 +4446,7 @@ var FormField = ({
|
|
|
4375
4446
|
zIndex
|
|
4376
4447
|
}
|
|
4377
4448
|
},
|
|
4378
|
-
/* @__PURE__ */
|
|
4449
|
+
/* @__PURE__ */ React__default.default.createElement(
|
|
4379
4450
|
Lottie__default.default,
|
|
4380
4451
|
{
|
|
4381
4452
|
animationData: magicAnimation_default,
|
|
@@ -4384,7 +4455,7 @@ var FormField = ({
|
|
|
4384
4455
|
}
|
|
4385
4456
|
)
|
|
4386
4457
|
),
|
|
4387
|
-
/* @__PURE__ */
|
|
4458
|
+
/* @__PURE__ */ React__default.default.createElement("div", { style: { position: "relative", zIndex, padding: "12px 20px" } }, /* @__PURE__ */ React__default.default.createElement(
|
|
4388
4459
|
"div",
|
|
4389
4460
|
{
|
|
4390
4461
|
style: {
|
|
@@ -4394,7 +4465,7 @@ var FormField = ({
|
|
|
4394
4465
|
}
|
|
4395
4466
|
},
|
|
4396
4467
|
tooltipContent
|
|
4397
|
-
), /* @__PURE__ */
|
|
4468
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
4398
4469
|
"div",
|
|
4399
4470
|
{
|
|
4400
4471
|
style: {
|
|
@@ -4405,7 +4476,7 @@ var FormField = ({
|
|
|
4405
4476
|
}
|
|
4406
4477
|
},
|
|
4407
4478
|
t.tooltip?.confirm
|
|
4408
|
-
), /* @__PURE__ */
|
|
4479
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
4409
4480
|
"div",
|
|
4410
4481
|
{
|
|
4411
4482
|
style: {
|
|
@@ -4419,7 +4490,7 @@ var FormField = ({
|
|
|
4419
4490
|
))
|
|
4420
4491
|
)
|
|
4421
4492
|
)),
|
|
4422
|
-
error && /* @__PURE__ */
|
|
4493
|
+
error && /* @__PURE__ */ React__default.default.createElement("p", { className: "form-error" }, error)
|
|
4423
4494
|
);
|
|
4424
4495
|
};
|
|
4425
4496
|
var FormField_default = FormField;
|
|
@@ -4428,10 +4499,10 @@ var FormField_default = FormField;
|
|
|
4428
4499
|
var import_moment = __toESM(require_moment());
|
|
4429
4500
|
__toESM(require_nl());
|
|
4430
4501
|
var useApi = () => {
|
|
4431
|
-
const getJwtToken =
|
|
4502
|
+
const getJwtToken = React.useCallback(() => {
|
|
4432
4503
|
return localStorage.getItem("accessToken");
|
|
4433
4504
|
}, []);
|
|
4434
|
-
const get =
|
|
4505
|
+
const get = React.useCallback(
|
|
4435
4506
|
(endpoint, config = {}) => {
|
|
4436
4507
|
const { params, ...axiosConfig } = config;
|
|
4437
4508
|
const token = getJwtToken();
|
|
@@ -4449,7 +4520,7 @@ var useApi = () => {
|
|
|
4449
4520
|
},
|
|
4450
4521
|
[getJwtToken]
|
|
4451
4522
|
);
|
|
4452
|
-
const mutate =
|
|
4523
|
+
const mutate = React.useCallback(
|
|
4453
4524
|
(method, endpoint, data = null, config = {}) => {
|
|
4454
4525
|
const token = getJwtToken();
|
|
4455
4526
|
return axios__default.default({
|
|
@@ -4468,7 +4539,7 @@ var useApi = () => {
|
|
|
4468
4539
|
},
|
|
4469
4540
|
[getJwtToken]
|
|
4470
4541
|
);
|
|
4471
|
-
const apiMethods =
|
|
4542
|
+
const apiMethods = React.useMemo(
|
|
4472
4543
|
() => ({
|
|
4473
4544
|
get,
|
|
4474
4545
|
post: (endpoint, data, config) => mutate("POST", endpoint, data, config),
|
|
@@ -4619,11 +4690,11 @@ var ReservationStepTwo = ({
|
|
|
4619
4690
|
}) => {
|
|
4620
4691
|
const lang = getPreferredLanguage();
|
|
4621
4692
|
const t = getSection(translations_default2, "reservationStepTwoFiltering");
|
|
4622
|
-
const [availableMenus, setAvailableMenus] =
|
|
4623
|
-
const [hasAutofilled, setHasAutofilled] =
|
|
4624
|
-
const [pendingAutofill, setPendingAutofill] =
|
|
4693
|
+
const [availableMenus, setAvailableMenus] = React.useState([]);
|
|
4694
|
+
const [hasAutofilled, setHasAutofilled] = React.useState(false);
|
|
4695
|
+
const [pendingAutofill, setPendingAutofill] = React.useState(null);
|
|
4625
4696
|
const api = useApi_default();
|
|
4626
|
-
|
|
4697
|
+
React.useEffect(() => {
|
|
4627
4698
|
import_moment.default.locale(lang);
|
|
4628
4699
|
if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
|
|
4629
4700
|
const sel = (0, import_moment.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
|
|
@@ -4669,10 +4740,10 @@ var ReservationStepTwo = ({
|
|
|
4669
4740
|
console.error("Autofill error");
|
|
4670
4741
|
}
|
|
4671
4742
|
};
|
|
4672
|
-
|
|
4743
|
+
React.useEffect(() => {
|
|
4673
4744
|
tryAutofill();
|
|
4674
4745
|
}, [formData.email, formData.phone]);
|
|
4675
|
-
const magicProps =
|
|
4746
|
+
const magicProps = React.useMemo(() => {
|
|
4676
4747
|
if (!pendingAutofill)
|
|
4677
4748
|
return { email: {}, phone: {} };
|
|
4678
4749
|
const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
|
|
@@ -4684,15 +4755,15 @@ var ReservationStepTwo = ({
|
|
|
4684
4755
|
return {
|
|
4685
4756
|
email: emailActive ? {
|
|
4686
4757
|
...common,
|
|
4687
|
-
tooltipContent: /* @__PURE__ */
|
|
4758
|
+
tooltipContent: /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React__default.default.createElement("div", null, pendingAutofill.phone))
|
|
4688
4759
|
} : {},
|
|
4689
4760
|
phone: phoneActive ? {
|
|
4690
4761
|
...common,
|
|
4691
|
-
tooltipContent: /* @__PURE__ */
|
|
4762
|
+
tooltipContent: /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React__default.default.createElement("div", null, pendingAutofill.email))
|
|
4692
4763
|
} : {}
|
|
4693
4764
|
};
|
|
4694
4765
|
}, [pendingAutofill, formData.email, formData.phone, t.magic?.title]);
|
|
4695
|
-
return /* @__PURE__ */
|
|
4766
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: "reservation-step-two" }, /* @__PURE__ */ React__default.default.createElement("div", { className: "account-manage-form" }, availableMenus.length > 0 && /* @__PURE__ */ React__default.default.createElement(
|
|
4696
4767
|
FormField_default,
|
|
4697
4768
|
{
|
|
4698
4769
|
label: t.labels?.menu || "Menu",
|
|
@@ -4703,7 +4774,7 @@ var ReservationStepTwo = ({
|
|
|
4703
4774
|
onChange: handleChange,
|
|
4704
4775
|
error: errors.menu
|
|
4705
4776
|
}
|
|
4706
|
-
), /* @__PURE__ */
|
|
4777
|
+
), /* @__PURE__ */ React__default.default.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React__default.default.createElement(
|
|
4707
4778
|
FormField_default,
|
|
4708
4779
|
{
|
|
4709
4780
|
label: t.labels?.firstName || "Voornaam",
|
|
@@ -4714,7 +4785,7 @@ var ReservationStepTwo = ({
|
|
|
4714
4785
|
error: errors.firstName,
|
|
4715
4786
|
icon: fa.FaUser
|
|
4716
4787
|
}
|
|
4717
|
-
), /* @__PURE__ */
|
|
4788
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
4718
4789
|
FormField_default,
|
|
4719
4790
|
{
|
|
4720
4791
|
label: t.labels?.lastName || "Achternaam",
|
|
@@ -4725,7 +4796,7 @@ var ReservationStepTwo = ({
|
|
|
4725
4796
|
error: errors.lastName,
|
|
4726
4797
|
icon: fa.FaUser
|
|
4727
4798
|
}
|
|
4728
|
-
)), /* @__PURE__ */
|
|
4799
|
+
)), /* @__PURE__ */ React__default.default.createElement(
|
|
4729
4800
|
FormField_default,
|
|
4730
4801
|
{
|
|
4731
4802
|
label: t.labels?.email || "Email",
|
|
@@ -4739,7 +4810,7 @@ var ReservationStepTwo = ({
|
|
|
4739
4810
|
icon: fa.FaEnvelope,
|
|
4740
4811
|
...magicProps.email
|
|
4741
4812
|
}
|
|
4742
|
-
), /* @__PURE__ */
|
|
4813
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
4743
4814
|
FormField_default,
|
|
4744
4815
|
{
|
|
4745
4816
|
label: t.labels?.phone || "Telefoon",
|
|
@@ -4753,7 +4824,7 @@ var ReservationStepTwo = ({
|
|
|
4753
4824
|
icon: fa.FaPhone,
|
|
4754
4825
|
...magicProps.phone
|
|
4755
4826
|
}
|
|
4756
|
-
), /* @__PURE__ */
|
|
4827
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
4757
4828
|
FormField_default,
|
|
4758
4829
|
{
|
|
4759
4830
|
label: t.labels?.extraInfo || "Extra info",
|
|
@@ -4902,7 +4973,7 @@ var ReservationSummary = ({
|
|
|
4902
4973
|
onNewReservation
|
|
4903
4974
|
}) => {
|
|
4904
4975
|
const t = getSection(translations_default3, "reservationSummary");
|
|
4905
|
-
return /* @__PURE__ */
|
|
4976
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: "reservation-summary" }, /* @__PURE__ */ React__default.default.createElement("ul", { className: "reservation-details" }, /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.title)), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.guests, ":"), " ", formData.guests), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.date, ":"), " ", formData.date), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.time, ":"), " ", formData.time), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.firstName, ":"), " ", formData.firstName), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.lastName, ":"), " ", formData.lastName), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.email, ":"), " ", formData.email), /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.phone, ":"), " ", formData.phone), formData.menu && /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.menu, ":"), " ", formData.menu), formData.personeel && /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.staff, ":"), " ", formData.personeel), formData.giftcard && /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.giftcard, ":"), " ", formData.giftcard), formData.extraInfo && /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.extraInfo, ":"), " ", formData.extraInfo), formData.zitplaats && /* @__PURE__ */ React__default.default.createElement("li", null, /* @__PURE__ */ React__default.default.createElement("strong", null, t.seatPlace, ":"), " ", formData.zitplaats)), /* @__PURE__ */ React__default.default.createElement("button", { className: "button-style-3", onClick: onNewReservation }, t.newReservationButton));
|
|
4906
4977
|
};
|
|
4907
4978
|
var ReservationSummary_default = ReservationSummary;
|
|
4908
4979
|
|
|
@@ -4951,8 +5022,8 @@ var GiftcardSelection = ({
|
|
|
4951
5022
|
resetFormDataFields
|
|
4952
5023
|
}) => {
|
|
4953
5024
|
const t = getSection(translations_default4, "giftcardSelection");
|
|
4954
|
-
const [availableGiftcards, setAvailableGiftcards] =
|
|
4955
|
-
|
|
5025
|
+
const [availableGiftcards, setAvailableGiftcards] = React.useState([]);
|
|
5026
|
+
React.useEffect(() => {
|
|
4956
5027
|
if (!restaurantData) return;
|
|
4957
5028
|
const periods = ["breakfast", "lunch", "dinner"];
|
|
4958
5029
|
const cards = /* @__PURE__ */ new Set();
|
|
@@ -4972,7 +5043,7 @@ var GiftcardSelection = ({
|
|
|
4972
5043
|
handleChange({ target: { name: "giftcard", value: e.target.value } });
|
|
4973
5044
|
resetFormDataFields(["date", "time"]);
|
|
4974
5045
|
};
|
|
4975
|
-
return /* @__PURE__ */
|
|
5046
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React__default.default.createElement(
|
|
4976
5047
|
FormField_default,
|
|
4977
5048
|
{
|
|
4978
5049
|
label: t.labels?.giftcard || "Giftcard",
|
|
@@ -5031,9 +5102,9 @@ var ZitplaatsSelection = ({
|
|
|
5031
5102
|
handleChange,
|
|
5032
5103
|
resetFormDataFields
|
|
5033
5104
|
}) => {
|
|
5034
|
-
const [availableZitplaatsen, setAvailableZitplaatsen] =
|
|
5105
|
+
const [availableZitplaatsen, setAvailableZitplaatsen] = React.useState([]);
|
|
5035
5106
|
const t = getSection(translations_default5, "zitplaatsSelection");
|
|
5036
|
-
|
|
5107
|
+
React.useEffect(() => {
|
|
5037
5108
|
if (!restaurantData?.floors || !Array.isArray(restaurantData.floors)) return;
|
|
5038
5109
|
const set = /* @__PURE__ */ new Set();
|
|
5039
5110
|
restaurantData.floors.forEach(
|
|
@@ -5049,7 +5120,7 @@ var ZitplaatsSelection = ({
|
|
|
5049
5120
|
const tableSettings = restaurantData?.["table-settings"] || {};
|
|
5050
5121
|
const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
|
|
5051
5122
|
if (!isTableAssignmentEnabled || availableZitplaatsen.length === 0) return null;
|
|
5052
|
-
return /* @__PURE__ */
|
|
5123
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: "zitplaats-selection" }, /* @__PURE__ */ React__default.default.createElement("label", { htmlFor: "zitplaats", className: "form-label" }, t.labels?.seating || "Zitplaats"), /* @__PURE__ */ React__default.default.createElement("div", { className: "input-container select-field" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5053
5124
|
"select",
|
|
5054
5125
|
{
|
|
5055
5126
|
id: "zitplaats",
|
|
@@ -5057,8 +5128,8 @@ var ZitplaatsSelection = ({
|
|
|
5057
5128
|
value: formData.zitplaats || "",
|
|
5058
5129
|
onChange: handleZitplaatsChange
|
|
5059
5130
|
},
|
|
5060
|
-
/* @__PURE__ */
|
|
5061
|
-
availableZitplaatsen.map((zitplaats) => /* @__PURE__ */
|
|
5131
|
+
/* @__PURE__ */ React__default.default.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
|
|
5132
|
+
availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React__default.default.createElement(
|
|
5062
5133
|
"option",
|
|
5063
5134
|
{
|
|
5064
5135
|
key: zitplaats,
|
|
@@ -5111,20 +5182,20 @@ var ReservationSidebar = ({
|
|
|
5111
5182
|
onNewReservation,
|
|
5112
5183
|
apiBaseDomain
|
|
5113
5184
|
}) => {
|
|
5114
|
-
|
|
5185
|
+
React.useEffect(() => {
|
|
5115
5186
|
if (apiBaseDomain && !window.baseDomain) {
|
|
5116
5187
|
window.baseDomain = apiBaseDomain;
|
|
5117
5188
|
}
|
|
5118
5189
|
}, [apiBaseDomain]);
|
|
5119
5190
|
const api = useApi_default();
|
|
5120
|
-
const [timeblocks, setTimeblocks] =
|
|
5121
|
-
const [loadingTimeblocks, setLoadingTimeblocks] =
|
|
5122
|
-
const [timeblocksError, setTimeblocksError] =
|
|
5123
|
-
const [menuData, setMenuData] =
|
|
5124
|
-
const [restaurantData, setRestaurantData] =
|
|
5125
|
-
const [availablePersoneel, setAvailablePersoneel] =
|
|
5191
|
+
const [timeblocks, setTimeblocks] = React.useState([]);
|
|
5192
|
+
const [loadingTimeblocks, setLoadingTimeblocks] = React.useState(false);
|
|
5193
|
+
const [timeblocksError, setTimeblocksError] = React.useState(null);
|
|
5194
|
+
const [menuData, setMenuData] = React.useState([]);
|
|
5195
|
+
const [restaurantData, setRestaurantData] = React.useState({});
|
|
5196
|
+
const [availablePersoneel, setAvailablePersoneel] = React.useState([]);
|
|
5126
5197
|
const t = getSection(translationsReservationSidebar_default, "reservationSidebar");
|
|
5127
|
-
const resetFormDataFields =
|
|
5198
|
+
const resetFormDataFields = React.useCallback(
|
|
5128
5199
|
(fieldsToReset) => {
|
|
5129
5200
|
setFormData((prev) => {
|
|
5130
5201
|
const next = { ...prev };
|
|
@@ -5136,7 +5207,7 @@ var ReservationSidebar = ({
|
|
|
5136
5207
|
},
|
|
5137
5208
|
[setFormData]
|
|
5138
5209
|
);
|
|
5139
|
-
|
|
5210
|
+
React.useEffect(() => {
|
|
5140
5211
|
if (!isOpen) return;
|
|
5141
5212
|
setLoadingTimeblocks(true);
|
|
5142
5213
|
const fetchData = async () => {
|
|
@@ -5169,7 +5240,7 @@ var ReservationSidebar = ({
|
|
|
5169
5240
|
};
|
|
5170
5241
|
fetchData();
|
|
5171
5242
|
}, [isOpen, api]);
|
|
5172
|
-
const handleNewReservationClick =
|
|
5243
|
+
const handleNewReservationClick = React.useCallback(() => {
|
|
5173
5244
|
setFormData({
|
|
5174
5245
|
guests,
|
|
5175
5246
|
date: "",
|
|
@@ -5190,21 +5261,21 @@ var ReservationSidebar = ({
|
|
|
5190
5261
|
onNewReservation();
|
|
5191
5262
|
}, [onNewReservation, setFormData]);
|
|
5192
5263
|
const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
|
|
5193
|
-
return /* @__PURE__ */
|
|
5264
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { className: `reservation-sidebar-component ${isOpen ? "open" : ""}` }, /* @__PURE__ */ React__default.default.createElement("div", { className: "reservation-sidebar-content" }, /* @__PURE__ */ React__default.default.createElement("h2", { className: "admin-title" }, "Admin Reservatie"), /* @__PURE__ */ React__default.default.createElement(
|
|
5194
5265
|
"button",
|
|
5195
5266
|
{
|
|
5196
5267
|
className: "close-sidebar-button",
|
|
5197
5268
|
onClick: onClose,
|
|
5198
5269
|
"aria-label": "Sluiten"
|
|
5199
5270
|
},
|
|
5200
|
-
/* @__PURE__ */
|
|
5201
|
-
), reservationSubmitted ? /* @__PURE__ */
|
|
5271
|
+
/* @__PURE__ */ React__default.default.createElement(fa.FaTimes, { size: 20, color: "#000" })
|
|
5272
|
+
), reservationSubmitted ? /* @__PURE__ */ React__default.default.createElement(
|
|
5202
5273
|
ReservationSummary_default,
|
|
5203
5274
|
{
|
|
5204
5275
|
formData,
|
|
5205
5276
|
onNewReservation: handleNewReservationClick
|
|
5206
5277
|
}
|
|
5207
|
-
) : /* @__PURE__ */
|
|
5278
|
+
) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, restaurantData && Object.keys(restaurantData).length > 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: "sidebar-section-giftcard" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5208
5279
|
GiftcardSelection_default,
|
|
5209
5280
|
{
|
|
5210
5281
|
restaurantData,
|
|
@@ -5212,7 +5283,7 @@ var ReservationSidebar = ({
|
|
|
5212
5283
|
handleChange,
|
|
5213
5284
|
resetFormDataFields
|
|
5214
5285
|
}
|
|
5215
|
-
)), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */
|
|
5286
|
+
)), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React__default.default.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5216
5287
|
ZitplaatsSelection_default,
|
|
5217
5288
|
{
|
|
5218
5289
|
restaurantData,
|
|
@@ -5220,7 +5291,7 @@ var ReservationSidebar = ({
|
|
|
5220
5291
|
handleChange,
|
|
5221
5292
|
resetFormDataFields
|
|
5222
5293
|
}
|
|
5223
|
-
)), availablePersoneel.length > 0 && /* @__PURE__ */
|
|
5294
|
+
)), availablePersoneel.length > 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5224
5295
|
FormField_default,
|
|
5225
5296
|
{
|
|
5226
5297
|
label: "",
|
|
@@ -5235,7 +5306,7 @@ var ReservationSidebar = ({
|
|
|
5235
5306
|
error: errors.personeel,
|
|
5236
5307
|
selectPlaceholder: "Toewijzen aan persoon"
|
|
5237
5308
|
}
|
|
5238
|
-
)), /* @__PURE__ */
|
|
5309
|
+
)), /* @__PURE__ */ React__default.default.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5239
5310
|
ReservationStepOne_default,
|
|
5240
5311
|
{
|
|
5241
5312
|
formData,
|
|
@@ -5247,7 +5318,7 @@ var ReservationSidebar = ({
|
|
|
5247
5318
|
timeblocksError,
|
|
5248
5319
|
restaurantData
|
|
5249
5320
|
}
|
|
5250
|
-
)), /* @__PURE__ */
|
|
5321
|
+
)), /* @__PURE__ */ React__default.default.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5251
5322
|
ReservationStepTwo_default,
|
|
5252
5323
|
{
|
|
5253
5324
|
formData,
|
|
@@ -5257,7 +5328,7 @@ var ReservationSidebar = ({
|
|
|
5257
5328
|
isSubmitting,
|
|
5258
5329
|
menuData
|
|
5259
5330
|
}
|
|
5260
|
-
)), /* @__PURE__ */
|
|
5331
|
+
)), /* @__PURE__ */ React__default.default.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React__default.default.createElement(
|
|
5261
5332
|
"button",
|
|
5262
5333
|
{
|
|
5263
5334
|
type: "button",
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import '@happychef/algorithm';
|
|
1
|
+
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
2
|
+
import { getAvailableTablesForTime } from '@happychef/algorithm';
|
|
3
3
|
import Lottie from 'lottie-react';
|
|
4
4
|
import { FaUser, FaEnvelope, FaPhone, FaInfoCircle, FaTimes } from 'react-icons/fa';
|
|
5
5
|
import axios from 'axios';
|
|
@@ -4164,15 +4164,86 @@ var ReservationStepOne = ({
|
|
|
4164
4164
|
timeblocks,
|
|
4165
4165
|
loadingTimeblocks,
|
|
4166
4166
|
timeblocksError,
|
|
4167
|
-
restaurantData
|
|
4167
|
+
restaurantData,
|
|
4168
|
+
reservations = []
|
|
4168
4169
|
}) => {
|
|
4170
|
+
const [availableTables, setAvailableTables] = useState([]);
|
|
4171
|
+
const [isFetchingTables, setIsFetchingTables] = useState(false);
|
|
4172
|
+
useEffect(() => {
|
|
4173
|
+
const tableSettings2 = restaurantData?.["table-settings"] || {};
|
|
4174
|
+
const isAutomaticAssignment = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
|
|
4175
|
+
if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0 && restaurantData && reservations) {
|
|
4176
|
+
setIsFetchingTables(true);
|
|
4177
|
+
const available = getAvailableTablesForTime(
|
|
4178
|
+
restaurantData,
|
|
4179
|
+
formData.date,
|
|
4180
|
+
formData.time,
|
|
4181
|
+
formData.guests,
|
|
4182
|
+
reservations
|
|
4183
|
+
);
|
|
4184
|
+
setAvailableTables(available);
|
|
4185
|
+
const currentlySelectedNumbers = formData.selectedTableNumbers || [];
|
|
4186
|
+
const currentlySelectedIds = formData.selectedTableIds || [];
|
|
4187
|
+
const stillAvailableSelectedNumbers = [];
|
|
4188
|
+
const stillAvailableSelectedIds = [];
|
|
4189
|
+
currentlySelectedNumbers.forEach((num) => {
|
|
4190
|
+
const correspondingTable = available.find(
|
|
4191
|
+
(at) => at.tableNumber === num
|
|
4192
|
+
);
|
|
4193
|
+
if (correspondingTable && currentlySelectedIds.includes(correspondingTable.tableId)) {
|
|
4194
|
+
stillAvailableSelectedNumbers.push(num);
|
|
4195
|
+
stillAvailableSelectedIds.push(correspondingTable.tableId);
|
|
4196
|
+
}
|
|
4197
|
+
});
|
|
4198
|
+
if (stillAvailableSelectedNumbers.length !== currentlySelectedNumbers.length) {
|
|
4199
|
+
setTimeout(() => {
|
|
4200
|
+
handleChange({
|
|
4201
|
+
target: {
|
|
4202
|
+
multiple: true,
|
|
4203
|
+
updates: {
|
|
4204
|
+
selectedTableNumbers: stillAvailableSelectedNumbers,
|
|
4205
|
+
selectedTableIds: stillAvailableSelectedIds
|
|
4206
|
+
}
|
|
4207
|
+
}
|
|
4208
|
+
});
|
|
4209
|
+
}, 0);
|
|
4210
|
+
}
|
|
4211
|
+
setIsFetchingTables(false);
|
|
4212
|
+
} else {
|
|
4213
|
+
setAvailableTables([]);
|
|
4214
|
+
if (formData.selectedTableNumbers?.length > 0 || formData.selectedTableIds?.length > 0) {
|
|
4215
|
+
setTimeout(() => {
|
|
4216
|
+
handleChange({
|
|
4217
|
+
target: {
|
|
4218
|
+
multiple: true,
|
|
4219
|
+
updates: {
|
|
4220
|
+
selectedTableNumbers: [],
|
|
4221
|
+
selectedTableIds: []
|
|
4222
|
+
}
|
|
4223
|
+
}
|
|
4224
|
+
});
|
|
4225
|
+
}, 0);
|
|
4226
|
+
}
|
|
4227
|
+
}
|
|
4228
|
+
}, [
|
|
4229
|
+
formData.date,
|
|
4230
|
+
formData.time,
|
|
4231
|
+
formData.guests,
|
|
4232
|
+
restaurantData,
|
|
4233
|
+
reservations,
|
|
4234
|
+
formData.selectedTableNumbers,
|
|
4235
|
+
formData.selectedTableIds,
|
|
4236
|
+
handleChange
|
|
4237
|
+
]);
|
|
4169
4238
|
if (timeblocksError) {
|
|
4170
|
-
return /* @__PURE__ */
|
|
4239
|
+
return /* @__PURE__ */ React.createElement("div", null, "Error loading opening hours. Please configure your restaurant opening hours.");
|
|
4171
4240
|
}
|
|
4172
4241
|
if (loadingTimeblocks) {
|
|
4173
|
-
return /* @__PURE__ */
|
|
4242
|
+
return /* @__PURE__ */ React.createElement("div", null, "Loading availability...");
|
|
4174
4243
|
}
|
|
4175
|
-
|
|
4244
|
+
const tableSettings = restaurantData?.["table-settings"] || {};
|
|
4245
|
+
const showTableSelector = formData.date && formData.time && formData.guests > 0 && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && availableTables.length > 0;
|
|
4246
|
+
return /* @__PURE__ */ React.createElement("div", { className: "reservation-step-one-placeholder" }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Note:"), " This is a simplified ReservationStepOne component."), /* @__PURE__ */ React.createElement("p", null, "Uses @happychef/algorithm to calculate available tables based on restaurant data, date, time, guests, and existing reservations."), /* @__PURE__ */ React.createElement("p", null, "Current form data:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "Guests: ", formData.guests), /* @__PURE__ */ React.createElement("li", null, "Date: ", formData.date || "Not selected"), /* @__PURE__ */ React.createElement("li", null, "Time: ", formData.time || "Not selected"), /* @__PURE__ */ React.createElement("li", null, "Available tables: ", availableTables.length), isFetchingTables && /* @__PURE__ */ React.createElement("li", null, "Calculating availability...")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "Guests:", /* @__PURE__ */ React.createElement(
|
|
4176
4247
|
"input",
|
|
4177
4248
|
{
|
|
4178
4249
|
type: "number",
|
|
@@ -4181,7 +4252,7 @@ var ReservationStepOne = ({
|
|
|
4181
4252
|
onChange: handleChange,
|
|
4182
4253
|
min: "1"
|
|
4183
4254
|
}
|
|
4184
|
-
)), errors.guests && /* @__PURE__ */
|
|
4255
|
+
)), errors.guests && /* @__PURE__ */ React.createElement("span", { className: "error" }, errors.guests)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "Date:", /* @__PURE__ */ React.createElement(
|
|
4185
4256
|
"input",
|
|
4186
4257
|
{
|
|
4187
4258
|
type: "date",
|
|
@@ -4189,7 +4260,7 @@ var ReservationStepOne = ({
|
|
|
4189
4260
|
value: formData.date,
|
|
4190
4261
|
onChange: handleChange
|
|
4191
4262
|
}
|
|
4192
|
-
)), errors.date && /* @__PURE__ */
|
|
4263
|
+
)), errors.date && /* @__PURE__ */ React.createElement("span", { className: "error" }, errors.date)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, "Time:", /* @__PURE__ */ React.createElement(
|
|
4193
4264
|
"input",
|
|
4194
4265
|
{
|
|
4195
4266
|
type: "time",
|
|
@@ -4197,7 +4268,7 @@ var ReservationStepOne = ({
|
|
|
4197
4268
|
value: formData.time,
|
|
4198
4269
|
onChange: handleChange
|
|
4199
4270
|
}
|
|
4200
|
-
)), errors.time && /* @__PURE__ */
|
|
4271
|
+
)), errors.time && /* @__PURE__ */ React.createElement("span", { className: "error" }, errors.time)), showTableSelector && /* @__PURE__ */ React.createElement("div", { className: "available-tables" }, /* @__PURE__ */ React.createElement("h4", null, "Available Tables (", availableTables.length, ")"), /* @__PURE__ */ React.createElement("ul", null, availableTables.map((table) => /* @__PURE__ */ React.createElement("li", { key: table.tableId }, "Table ", table.tableNumber, " - Capacity: ", table.capacity)))));
|
|
4201
4272
|
};
|
|
4202
4273
|
var ReservationStepOne_default = ReservationStepOne;
|
|
4203
4274
|
|
|
@@ -4292,19 +4363,19 @@ var FormField = ({
|
|
|
4292
4363
|
};
|
|
4293
4364
|
const renderControl = () => {
|
|
4294
4365
|
if (type === "select") {
|
|
4295
|
-
return /* @__PURE__ */
|
|
4366
|
+
return /* @__PURE__ */ React.createElement("select", { ...baseControlProps }, /* @__PURE__ */ React.createElement("option", { value: "" }, selectPlaceholderText), options.map((opt) => /* @__PURE__ */ React.createElement("option", { key: opt.value, value: opt.value }, opt.label)));
|
|
4296
4367
|
}
|
|
4297
4368
|
if (type === "textarea")
|
|
4298
|
-
return /* @__PURE__ */
|
|
4299
|
-
return /* @__PURE__ */
|
|
4369
|
+
return /* @__PURE__ */ React.createElement("textarea", { ...baseControlProps, placeholder });
|
|
4370
|
+
return /* @__PURE__ */ React.createElement("input", { type, ...baseControlProps, placeholder });
|
|
4300
4371
|
};
|
|
4301
|
-
return /* @__PURE__ */
|
|
4372
|
+
return /* @__PURE__ */ React.createElement(
|
|
4302
4373
|
"div",
|
|
4303
4374
|
{
|
|
4304
4375
|
className: `form-group ${halfWidth ? "half-width" : ""}`,
|
|
4305
4376
|
style: { position: "relative" }
|
|
4306
4377
|
},
|
|
4307
|
-
/* @__PURE__ */
|
|
4378
|
+
/* @__PURE__ */ React.createElement("div", { className: "input-container" }, Icon && /* @__PURE__ */ React.createElement(Icon, { className: "input-icon" }), renderControl(), RightIconComponent && /* @__PURE__ */ React.createElement(
|
|
4308
4379
|
"div",
|
|
4309
4380
|
{
|
|
4310
4381
|
className: "magic-wand-container",
|
|
@@ -4324,14 +4395,14 @@ var FormField = ({
|
|
|
4324
4395
|
cursor: "pointer"
|
|
4325
4396
|
}
|
|
4326
4397
|
},
|
|
4327
|
-
/* @__PURE__ */
|
|
4398
|
+
/* @__PURE__ */ React.createElement(
|
|
4328
4399
|
RightIconComponent,
|
|
4329
4400
|
{
|
|
4330
4401
|
className: "magic-wand-icon",
|
|
4331
4402
|
style: { color: "#B567C2" }
|
|
4332
4403
|
}
|
|
4333
4404
|
),
|
|
4334
|
-
showTooltip && tooltipContent && /* @__PURE__ */
|
|
4405
|
+
showTooltip && tooltipContent && /* @__PURE__ */ React.createElement(
|
|
4335
4406
|
"div",
|
|
4336
4407
|
{
|
|
4337
4408
|
ref: tooltipRef,
|
|
@@ -4351,7 +4422,7 @@ var FormField = ({
|
|
|
4351
4422
|
overflow: "hidden"
|
|
4352
4423
|
}
|
|
4353
4424
|
},
|
|
4354
|
-
/* @__PURE__ */
|
|
4425
|
+
/* @__PURE__ */ React.createElement(
|
|
4355
4426
|
"div",
|
|
4356
4427
|
{
|
|
4357
4428
|
className: "lottie-container",
|
|
@@ -4366,7 +4437,7 @@ var FormField = ({
|
|
|
4366
4437
|
zIndex
|
|
4367
4438
|
}
|
|
4368
4439
|
},
|
|
4369
|
-
/* @__PURE__ */
|
|
4440
|
+
/* @__PURE__ */ React.createElement(
|
|
4370
4441
|
Lottie,
|
|
4371
4442
|
{
|
|
4372
4443
|
animationData: magicAnimation_default,
|
|
@@ -4375,7 +4446,7 @@ var FormField = ({
|
|
|
4375
4446
|
}
|
|
4376
4447
|
)
|
|
4377
4448
|
),
|
|
4378
|
-
/* @__PURE__ */
|
|
4449
|
+
/* @__PURE__ */ React.createElement("div", { style: { position: "relative", zIndex, padding: "12px 20px" } }, /* @__PURE__ */ React.createElement(
|
|
4379
4450
|
"div",
|
|
4380
4451
|
{
|
|
4381
4452
|
style: {
|
|
@@ -4385,7 +4456,7 @@ var FormField = ({
|
|
|
4385
4456
|
}
|
|
4386
4457
|
},
|
|
4387
4458
|
tooltipContent
|
|
4388
|
-
), /* @__PURE__ */
|
|
4459
|
+
), /* @__PURE__ */ React.createElement(
|
|
4389
4460
|
"div",
|
|
4390
4461
|
{
|
|
4391
4462
|
style: {
|
|
@@ -4396,7 +4467,7 @@ var FormField = ({
|
|
|
4396
4467
|
}
|
|
4397
4468
|
},
|
|
4398
4469
|
t.tooltip?.confirm
|
|
4399
|
-
), /* @__PURE__ */
|
|
4470
|
+
), /* @__PURE__ */ React.createElement(
|
|
4400
4471
|
"div",
|
|
4401
4472
|
{
|
|
4402
4473
|
style: {
|
|
@@ -4410,7 +4481,7 @@ var FormField = ({
|
|
|
4410
4481
|
))
|
|
4411
4482
|
)
|
|
4412
4483
|
)),
|
|
4413
|
-
error && /* @__PURE__ */
|
|
4484
|
+
error && /* @__PURE__ */ React.createElement("p", { className: "form-error" }, error)
|
|
4414
4485
|
);
|
|
4415
4486
|
};
|
|
4416
4487
|
var FormField_default = FormField;
|
|
@@ -4675,15 +4746,15 @@ var ReservationStepTwo = ({
|
|
|
4675
4746
|
return {
|
|
4676
4747
|
email: emailActive ? {
|
|
4677
4748
|
...common,
|
|
4678
|
-
tooltipContent: /* @__PURE__ */
|
|
4749
|
+
tooltipContent: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React.createElement("div", null, pendingAutofill.phone))
|
|
4679
4750
|
} : {},
|
|
4680
4751
|
phone: phoneActive ? {
|
|
4681
4752
|
...common,
|
|
4682
|
-
tooltipContent: /* @__PURE__ */
|
|
4753
|
+
tooltipContent: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React.createElement("div", null, pendingAutofill.email))
|
|
4683
4754
|
} : {}
|
|
4684
4755
|
};
|
|
4685
4756
|
}, [pendingAutofill, formData.email, formData.phone, t.magic?.title]);
|
|
4686
|
-
return /* @__PURE__ */
|
|
4757
|
+
return /* @__PURE__ */ React.createElement("div", { className: "reservation-step-two" }, /* @__PURE__ */ React.createElement("div", { className: "account-manage-form" }, availableMenus.length > 0 && /* @__PURE__ */ React.createElement(
|
|
4687
4758
|
FormField_default,
|
|
4688
4759
|
{
|
|
4689
4760
|
label: t.labels?.menu || "Menu",
|
|
@@ -4694,7 +4765,7 @@ var ReservationStepTwo = ({
|
|
|
4694
4765
|
onChange: handleChange,
|
|
4695
4766
|
error: errors.menu
|
|
4696
4767
|
}
|
|
4697
|
-
), /* @__PURE__ */
|
|
4768
|
+
), /* @__PURE__ */ React.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React.createElement(
|
|
4698
4769
|
FormField_default,
|
|
4699
4770
|
{
|
|
4700
4771
|
label: t.labels?.firstName || "Voornaam",
|
|
@@ -4705,7 +4776,7 @@ var ReservationStepTwo = ({
|
|
|
4705
4776
|
error: errors.firstName,
|
|
4706
4777
|
icon: FaUser
|
|
4707
4778
|
}
|
|
4708
|
-
), /* @__PURE__ */
|
|
4779
|
+
), /* @__PURE__ */ React.createElement(
|
|
4709
4780
|
FormField_default,
|
|
4710
4781
|
{
|
|
4711
4782
|
label: t.labels?.lastName || "Achternaam",
|
|
@@ -4716,7 +4787,7 @@ var ReservationStepTwo = ({
|
|
|
4716
4787
|
error: errors.lastName,
|
|
4717
4788
|
icon: FaUser
|
|
4718
4789
|
}
|
|
4719
|
-
)), /* @__PURE__ */
|
|
4790
|
+
)), /* @__PURE__ */ React.createElement(
|
|
4720
4791
|
FormField_default,
|
|
4721
4792
|
{
|
|
4722
4793
|
label: t.labels?.email || "Email",
|
|
@@ -4730,7 +4801,7 @@ var ReservationStepTwo = ({
|
|
|
4730
4801
|
icon: FaEnvelope,
|
|
4731
4802
|
...magicProps.email
|
|
4732
4803
|
}
|
|
4733
|
-
), /* @__PURE__ */
|
|
4804
|
+
), /* @__PURE__ */ React.createElement(
|
|
4734
4805
|
FormField_default,
|
|
4735
4806
|
{
|
|
4736
4807
|
label: t.labels?.phone || "Telefoon",
|
|
@@ -4744,7 +4815,7 @@ var ReservationStepTwo = ({
|
|
|
4744
4815
|
icon: FaPhone,
|
|
4745
4816
|
...magicProps.phone
|
|
4746
4817
|
}
|
|
4747
|
-
), /* @__PURE__ */
|
|
4818
|
+
), /* @__PURE__ */ React.createElement(
|
|
4748
4819
|
FormField_default,
|
|
4749
4820
|
{
|
|
4750
4821
|
label: t.labels?.extraInfo || "Extra info",
|
|
@@ -4893,7 +4964,7 @@ var ReservationSummary = ({
|
|
|
4893
4964
|
onNewReservation
|
|
4894
4965
|
}) => {
|
|
4895
4966
|
const t = getSection(translations_default3, "reservationSummary");
|
|
4896
|
-
return /* @__PURE__ */
|
|
4967
|
+
return /* @__PURE__ */ React.createElement("div", { className: "reservation-summary" }, /* @__PURE__ */ React.createElement("ul", { className: "reservation-details" }, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.title)), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.guests, ":"), " ", formData.guests), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.date, ":"), " ", formData.date), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.time, ":"), " ", formData.time), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.firstName, ":"), " ", formData.firstName), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.lastName, ":"), " ", formData.lastName), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.email, ":"), " ", formData.email), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.phone, ":"), " ", formData.phone), formData.menu && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.menu, ":"), " ", formData.menu), formData.personeel && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.staff, ":"), " ", formData.personeel), formData.giftcard && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.giftcard, ":"), " ", formData.giftcard), formData.extraInfo && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.extraInfo, ":"), " ", formData.extraInfo), formData.zitplaats && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("strong", null, t.seatPlace, ":"), " ", formData.zitplaats)), /* @__PURE__ */ React.createElement("button", { className: "button-style-3", onClick: onNewReservation }, t.newReservationButton));
|
|
4897
4968
|
};
|
|
4898
4969
|
var ReservationSummary_default = ReservationSummary;
|
|
4899
4970
|
|
|
@@ -4963,7 +5034,7 @@ var GiftcardSelection = ({
|
|
|
4963
5034
|
handleChange({ target: { name: "giftcard", value: e.target.value } });
|
|
4964
5035
|
resetFormDataFields(["date", "time"]);
|
|
4965
5036
|
};
|
|
4966
|
-
return /* @__PURE__ */
|
|
5037
|
+
return /* @__PURE__ */ React.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React.createElement(
|
|
4967
5038
|
FormField_default,
|
|
4968
5039
|
{
|
|
4969
5040
|
label: t.labels?.giftcard || "Giftcard",
|
|
@@ -5040,7 +5111,7 @@ var ZitplaatsSelection = ({
|
|
|
5040
5111
|
const tableSettings = restaurantData?.["table-settings"] || {};
|
|
5041
5112
|
const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
|
|
5042
5113
|
if (!isTableAssignmentEnabled || availableZitplaatsen.length === 0) return null;
|
|
5043
|
-
return /* @__PURE__ */
|
|
5114
|
+
return /* @__PURE__ */ React.createElement("div", { className: "zitplaats-selection" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "zitplaats", className: "form-label" }, t.labels?.seating || "Zitplaats"), /* @__PURE__ */ React.createElement("div", { className: "input-container select-field" }, /* @__PURE__ */ React.createElement(
|
|
5044
5115
|
"select",
|
|
5045
5116
|
{
|
|
5046
5117
|
id: "zitplaats",
|
|
@@ -5048,8 +5119,8 @@ var ZitplaatsSelection = ({
|
|
|
5048
5119
|
value: formData.zitplaats || "",
|
|
5049
5120
|
onChange: handleZitplaatsChange
|
|
5050
5121
|
},
|
|
5051
|
-
/* @__PURE__ */
|
|
5052
|
-
availableZitplaatsen.map((zitplaats) => /* @__PURE__ */
|
|
5122
|
+
/* @__PURE__ */ React.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
|
|
5123
|
+
availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React.createElement(
|
|
5053
5124
|
"option",
|
|
5054
5125
|
{
|
|
5055
5126
|
key: zitplaats,
|
|
@@ -5181,21 +5252,21 @@ var ReservationSidebar = ({
|
|
|
5181
5252
|
onNewReservation();
|
|
5182
5253
|
}, [onNewReservation, setFormData]);
|
|
5183
5254
|
const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
|
|
5184
|
-
return /* @__PURE__ */
|
|
5255
|
+
return /* @__PURE__ */ React.createElement("div", { className: `reservation-sidebar-component ${isOpen ? "open" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "reservation-sidebar-content" }, /* @__PURE__ */ React.createElement("h2", { className: "admin-title" }, "Admin Reservatie"), /* @__PURE__ */ React.createElement(
|
|
5185
5256
|
"button",
|
|
5186
5257
|
{
|
|
5187
5258
|
className: "close-sidebar-button",
|
|
5188
5259
|
onClick: onClose,
|
|
5189
5260
|
"aria-label": "Sluiten"
|
|
5190
5261
|
},
|
|
5191
|
-
/* @__PURE__ */
|
|
5192
|
-
), reservationSubmitted ? /* @__PURE__ */
|
|
5262
|
+
/* @__PURE__ */ React.createElement(FaTimes, { size: 20, color: "#000" })
|
|
5263
|
+
), reservationSubmitted ? /* @__PURE__ */ React.createElement(
|
|
5193
5264
|
ReservationSummary_default,
|
|
5194
5265
|
{
|
|
5195
5266
|
formData,
|
|
5196
5267
|
onNewReservation: handleNewReservationClick
|
|
5197
5268
|
}
|
|
5198
|
-
) : /* @__PURE__ */
|
|
5269
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null, restaurantData && Object.keys(restaurantData).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "sidebar-section-giftcard" }, /* @__PURE__ */ React.createElement(
|
|
5199
5270
|
GiftcardSelection_default,
|
|
5200
5271
|
{
|
|
5201
5272
|
restaurantData,
|
|
@@ -5203,7 +5274,7 @@ var ReservationSidebar = ({
|
|
|
5203
5274
|
handleChange,
|
|
5204
5275
|
resetFormDataFields
|
|
5205
5276
|
}
|
|
5206
|
-
)), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */
|
|
5277
|
+
)), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React.createElement(
|
|
5207
5278
|
ZitplaatsSelection_default,
|
|
5208
5279
|
{
|
|
5209
5280
|
restaurantData,
|
|
@@ -5211,7 +5282,7 @@ var ReservationSidebar = ({
|
|
|
5211
5282
|
handleChange,
|
|
5212
5283
|
resetFormDataFields
|
|
5213
5284
|
}
|
|
5214
|
-
)), availablePersoneel.length > 0 && /* @__PURE__ */
|
|
5285
|
+
)), availablePersoneel.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React.createElement(
|
|
5215
5286
|
FormField_default,
|
|
5216
5287
|
{
|
|
5217
5288
|
label: "",
|
|
@@ -5226,7 +5297,7 @@ var ReservationSidebar = ({
|
|
|
5226
5297
|
error: errors.personeel,
|
|
5227
5298
|
selectPlaceholder: "Toewijzen aan persoon"
|
|
5228
5299
|
}
|
|
5229
|
-
)), /* @__PURE__ */
|
|
5300
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React.createElement(
|
|
5230
5301
|
ReservationStepOne_default,
|
|
5231
5302
|
{
|
|
5232
5303
|
formData,
|
|
@@ -5238,7 +5309,7 @@ var ReservationSidebar = ({
|
|
|
5238
5309
|
timeblocksError,
|
|
5239
5310
|
restaurantData
|
|
5240
5311
|
}
|
|
5241
|
-
)), /* @__PURE__ */
|
|
5312
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React.createElement(
|
|
5242
5313
|
ReservationStepTwo_default,
|
|
5243
5314
|
{
|
|
5244
5315
|
formData,
|
|
@@ -5248,7 +5319,7 @@ var ReservationSidebar = ({
|
|
|
5248
5319
|
isSubmitting,
|
|
5249
5320
|
menuData
|
|
5250
5321
|
}
|
|
5251
|
-
)), /* @__PURE__ */
|
|
5322
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React.createElement(
|
|
5252
5323
|
"button",
|
|
5253
5324
|
{
|
|
5254
5325
|
type: "button",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@happychef/reservation-sidebar",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|