@happychef/reservation-sidebar 2.0.2 → 2.0.4

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