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