@happychef/reservation-sidebar 2.0.9 → 2.1.1

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 +1314 -202
  2. package/dist/index.mjs +1285 -173
  3. package/package.json +3 -2
package/dist/index.js CHANGED
@@ -1,18 +1,20 @@
1
1
  'use strict';
2
2
 
3
- var React4 = require('react');
3
+ var React9 = require('react');
4
+ var framerMotion = require('framer-motion');
5
+ var moment2 = require('moment-timezone');
4
6
  var algorithm = require('@happychef/algorithm');
7
+ var luxon = require('luxon');
8
+ var axios = require('axios');
5
9
  var Lottie = require('lottie-react');
6
10
  var fa = require('react-icons/fa');
7
- var axios = require('axios');
8
- var moment2 = require('moment-timezone');
9
11
 
10
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
13
 
12
- var React4__default = /*#__PURE__*/_interopDefault(React4);
13
- var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
14
- var axios__default = /*#__PURE__*/_interopDefault(axios);
14
+ var React9__default = /*#__PURE__*/_interopDefault(React9);
15
15
  var moment2__default = /*#__PURE__*/_interopDefault(moment2);
16
+ var axios__default = /*#__PURE__*/_interopDefault(axios);
17
+ var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
16
18
 
17
19
  var __create = Object.create;
18
20
  var __defProp = Object.defineProperty;
@@ -4050,7 +4052,7 @@ var require_nl = __commonJS({
4050
4052
  "node_modules/moment/locale/nl.js"(exports$1, module) {
4051
4053
  (function(global, factory) {
4052
4054
  typeof exports$1 === "object" && typeof module !== "undefined" && typeof __require === "function" ? factory(require_moment()) : typeof define === "function" && define.amd ? define(["../moment"], factory) : factory(global.moment);
4053
- })(exports$1, (function(moment3) {
4055
+ })(exports$1, (function(moment7) {
4054
4056
  var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"), monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_"), monthsParse = [
4055
4057
  /^jan/i,
4056
4058
  /^feb/i,
@@ -4065,7 +4067,7 @@ var require_nl = __commonJS({
4065
4067
  /^nov/i,
4066
4068
  /^dec/i
4067
4069
  ], monthsRegex = /^(januari|februari|maart|april|mei|ju[nl]i|augustus|september|oktober|november|december|jan\.?|feb\.?|mrt\.?|apr\.?|ju[nl]\.?|aug\.?|sep\.?|okt\.?|nov\.?|dec\.?)/i;
4068
- var nl = moment3.defineLocale("nl", {
4070
+ var nl = moment7.defineLocale("nl", {
4069
4071
  months: "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split(
4070
4072
  "_"
4071
4073
  ),
@@ -4161,26 +4163,1120 @@ function styleInject(css, { insertAt } = {}) {
4161
4163
  }
4162
4164
  }
4163
4165
 
4166
+ // src/components/ReservationStepOne/css/valueSelector.css
4167
+ styleInject(".new-reservation-page .value-selector {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n}\n.new-reservation-page .non-absolute {\n position: relative !important;\n}\n.new-reservation-page .non-absolute::before {\n background: none;\n}\n.new-reservation-page .predefined-values {\n display: flex;\n gap: 10px;\n}\n.new-reservation-page .predefined-value-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n.new-reservation-page .predefined-value-button.active,\n.new-reservation-page .predefined-value-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .slider-container {\n display: flex;\n align-items: center;\n gap: 15px;\n}\n.new-reservation-page .slider {\n flex: 1;\n appearance: none;\n -webkit-appearance: none;\n height: 5px;\n background: #ddd;\n border-radius: 5px;\n outline: none;\n}\n.new-reservation-page .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: var(--color-blue);\n cursor: pointer;\n border-radius: 50%;\n}\n.new-reservation-page .value-input {\n width: 80px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n");
4168
+
4169
+ // src/components/ReservationStepOne/ValueSelector.js
4170
+ var ValueSelectorGuests = ({ setGuests, value: value2, onChange }) => {
4171
+ const predefinedValues = [1, 2, 3, "4+"];
4172
+ const [selectedValue, setSelectedValue] = React9.useState(value2 || "");
4173
+ const [showSlider, setShowSlider] = React9.useState(false);
4174
+ const handlePredefinedValueClick = (val) => {
4175
+ if (val === "4+") {
4176
+ setShowSlider(true);
4177
+ setSelectedValue(4);
4178
+ setGuests(4);
4179
+ onChange({ target: { name: "guests", value: 4 } });
4180
+ } else {
4181
+ setShowSlider(false);
4182
+ setSelectedValue(val);
4183
+ setGuests(val);
4184
+ onChange({ target: { name: "guests", value: val } });
4185
+ }
4186
+ };
4187
+ const handleSliderChange = (e) => {
4188
+ const val = e.target.value;
4189
+ setSelectedValue(val);
4190
+ setGuests(val);
4191
+ onChange({ target: { name: "guests", value: val } });
4192
+ };
4193
+ const handleInputChange = (e) => {
4194
+ const val = e.target.value;
4195
+ setSelectedValue(val);
4196
+ setGuests(val);
4197
+ onChange({ target: { name: "guests", value: val } });
4198
+ };
4199
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "value-selector", translate: "no" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "predefined-values" }, predefinedValues.map((val) => /* @__PURE__ */ React9__default.default.createElement(
4200
+ "button",
4201
+ {
4202
+ key: val,
4203
+ type: "button",
4204
+ className: `predefined-value-button ${selectedValue == val || val === "4+" && showSlider ? "active" : ""}`,
4205
+ onClick: () => handlePredefinedValueClick(val)
4206
+ },
4207
+ val === "4+" ? "4+" : `${val} ${val === 1 ? "p" : "p"}`
4208
+ ))), /* @__PURE__ */ React9__default.default.createElement(framerMotion.AnimatePresence, null, showSlider && /* @__PURE__ */ React9__default.default.createElement(
4209
+ framerMotion.motion.div,
4210
+ {
4211
+ className: "slider-container",
4212
+ initial: { opacity: 0, height: 0 },
4213
+ animate: { opacity: 1, height: "auto" },
4214
+ exit: { opacity: 0, height: 0 }
4215
+ },
4216
+ /* @__PURE__ */ React9__default.default.createElement(
4217
+ "input",
4218
+ {
4219
+ type: "range",
4220
+ min: "4",
4221
+ max: "15",
4222
+ step: "1",
4223
+ value: selectedValue,
4224
+ onChange: handleSliderChange,
4225
+ className: "slider non-absolute"
4226
+ }
4227
+ ),
4228
+ /* @__PURE__ */ React9__default.default.createElement(
4229
+ "input",
4230
+ {
4231
+ type: "number",
4232
+ name: "guests",
4233
+ value: selectedValue,
4234
+ onChange: handleInputChange,
4235
+ className: "value-input",
4236
+ min: "4",
4237
+ max: "100",
4238
+ step: "1"
4239
+ }
4240
+ )
4241
+ )));
4242
+ };
4243
+ var ValueSelector_default = ValueSelectorGuests;
4244
+
4245
+ // src/components/ReservationStepOne/Calendar.js
4246
+ __toESM(require_nl());
4247
+ var isWeekInPast = (weekStartDate) => {
4248
+ const today = moment2__default.default().tz("Europe/Brussels").startOf("day");
4249
+ const weekEndDate = weekStartDate.clone().add(6, "days").endOf("day");
4250
+ return weekEndDate.isBefore(today);
4251
+ };
4252
+ var isSameDay = (date1, date2) => date1.isSame(date2, "day");
4253
+
4254
+ // src/components/ReservationStepOne/css/calendar.css
4255
+ styleInject(".new-reservation-page .calendar-container {\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .calendar-container .calendar-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .calendar-container .calendar {\n position: absolute;\n z-index: 1000;\n width: 100%;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInCalendar 0.3s ease-in-out;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n@keyframes fadeInCalendar {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .calendar-container .availability-hold-btn {\n font-size: 10px;\n}\n.new-reservation-page .calendar-container .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n gap: 8px;\n flex-wrap: wrap;\n}\n.new-reservation-page .calendar-container .calendar-header button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n font-size: 18px;\n}\n.new-reservation-page .calendar-container .calendar-header span {\n font-size: 15px;\n color: gray;\n font-weight: 500;\n}\n.new-reservation-page .calendar-container .calendar-weeks-wrapper {\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-table {\n width: 100%;\n border-collapse: collapse;\n}\n.new-reservation-page .calendar-container .calendar-table th,\n.new-reservation-page .calendar-container .calendar-table td {\n width: 14.28%;\n text-align: center;\n padding: 5px;\n}\n.calendar-container .calendar-table th {\n color: #666;\n font-weight: normal;\n padding-bottom: 10px;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n vertical-align: middle;\n cursor: pointer;\n border: none;\n opacity: 1;\n position: relative;\n}\n.new-reservation-page .calendar-container .calendar-table td.empty-day {\n cursor: default;\n}\n.new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {\n transform: scale(1.05);\n}\n.new-reservation-page .calendar-container .day-square {\n position: relative;\n width: 38px;\n height: 38px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n transition: all 0.2s ease;\n font-size: 16px;\n margin: 0 auto;\n}\n.new-reservation-page .calendar-container .day-number {\n line-height: 1;\n z-index: 2;\n}\n.new-reservation-page .calendar-container .available .day-square {\n background-color: #ccffcc;\n color: #006600;\n}\n.new-reservation-page .calendar-container .available:hover .day-square {\n background-color: #b3ffb3;\n}\n.new-reservation-page .calendar-container .available:active .day-square {\n background-color: #99ff99;\n}\n.new-reservation-page .calendar-container .unavailable .day-square {\n background-color: rgba(139, 0, 0, 0.13);\n color: darkred;\n}\n.new-reservation-page .calendar-container .gray-out .day-square {\n background-color: #e0e0e0;\n color: #999;\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .selected .day-square {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable,\n.new-reservation-page .calendar-container .calendar-table td.gray-out {\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,\n.new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {\n transform: none;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n border: none;\n}\n.new-reservation-page .calendar-container .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n.new-reservation-page .calendar-container .available .availability-badge {\n background: #38a169;\n}\n.new-reservation-page .calendar-container .selected .availability-badge {\n background: #2d3748;\n}\n@media screen and (max-width: 900px) {\n .calendar-container .day-square {\n width: 35px !important;\n height: 35px !important;\n font-size: 15px !important;\n }\n .calendar-container .calendar-header span {\n font-size: 12px;\n }\n .new-reservation-page .calendar-container .availability-toggle-btn {\n padding: 5px 8px;\n font-size: 11px;\n }\n}\n");
4256
+
4257
+ // src/components/ReservationStepOne/translations.json
4258
+ var translations_default = {
4259
+ nl: {
4260
+ reservationStepOne: {
4261
+ errors: {
4262
+ openingHoursNotSet: "Openingstijden niet ingesteld.",
4263
+ clickHereToSet: "Klik hier om uw openingsuren in te stellen."
4264
+ },
4265
+ modes: {
4266
+ withLimits: "Met Limieten",
4267
+ unlimited: "Onbeperkt",
4268
+ openingHours: "Openingsuren",
4269
+ free: "Vrij"
4270
+ },
4271
+ fields: {
4272
+ time: "Tijd"
4273
+ },
4274
+ messages: {
4275
+ searchingTables: "Beschikbare tafels zoeken...",
4276
+ noTablesAvailable: "Geen specifieke tafels beschikbaar voor deze selectie."
4277
+ },
4278
+ warnings: {
4279
+ unlimitedMode: "Onbeperkt zal geen rekening houden met maximum limieten."
4280
+ }
4281
+ },
4282
+ calendar: {
4283
+ selectDatePlaceholder: "Selecteer een datum",
4284
+ today: "Vandaag",
4285
+ tomorrow: "Morgen",
4286
+ prevWeek: "Vorige week",
4287
+ nextWeek: "Volgende week",
4288
+ dayHeaders: ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
4289
+ seatsQuestion: "Zitplaatsen?"
4290
+ },
4291
+ timeSelector: {
4292
+ shifts: {
4293
+ breakfast: "Ontbijt",
4294
+ lunch: "Lunch",
4295
+ dinner: "Diner"
4296
+ },
4297
+ selectMeal: "Selecteer een maaltijd",
4298
+ selectTime: "Selecteer een tijd",
4299
+ noDateSelected: "Selecteer eerst een datum.",
4300
+ noTimes: "Geen beschikbare tijden.",
4301
+ back: "Terug"
4302
+ },
4303
+ tableSelector: {
4304
+ label: "Selecteer beschikbare tafel(s):",
4305
+ table: "Tafel",
4306
+ max: "Max",
4307
+ noTables: "Geen specifieke tafels beschikbaar voor deze tijd/gasten combinatie."
4308
+ }
4309
+ },
4310
+ en: {
4311
+ reservationStepOne: {
4312
+ errors: {
4313
+ openingHoursNotSet: "Opening hours not set.",
4314
+ clickHereToSet: "Click here to set your opening hours."
4315
+ },
4316
+ modes: {
4317
+ withLimits: "With Limits",
4318
+ unlimited: "Unlimited",
4319
+ openingHours: "Opening Hours",
4320
+ free: "Free"
4321
+ },
4322
+ fields: {
4323
+ time: "Time"
4324
+ },
4325
+ messages: {
4326
+ searchingTables: "Searching for available tables...",
4327
+ noTablesAvailable: "No specific tables available for this selection."
4328
+ },
4329
+ warnings: {
4330
+ unlimitedMode: "Unlimited will not take into account maximum limits."
4331
+ }
4332
+ },
4333
+ calendar: {
4334
+ selectDatePlaceholder: "Select a date",
4335
+ today: "Today",
4336
+ tomorrow: "Tomorrow",
4337
+ prevWeek: "Previous week",
4338
+ nextWeek: "Next week",
4339
+ dayHeaders: ["M", "T", "W", "T", "F", "S", "S"],
4340
+ seatsQuestion: "Seating?"
4341
+ },
4342
+ timeSelector: {
4343
+ shifts: {
4344
+ breakfast: "Breakfast",
4345
+ lunch: "Lunch",
4346
+ dinner: "Dinner"
4347
+ },
4348
+ selectMeal: "Select a meal",
4349
+ selectTime: "Select a time",
4350
+ noDateSelected: "Please select a date first.",
4351
+ noTimes: "No available times.",
4352
+ back: "Back"
4353
+ },
4354
+ tableSelector: {
4355
+ label: "Select available table(s):",
4356
+ table: "Table",
4357
+ max: "Max",
4358
+ noTables: "No specific tables available for this time/guest combination."
4359
+ }
4360
+ },
4361
+ fr: {
4362
+ reservationStepOne: {
4363
+ errors: {
4364
+ openingHoursNotSet: "Horaires non d\xE9finies.",
4365
+ clickHereToSet: "Cliquez ici pour d\xE9finir vos horaires."
4366
+ },
4367
+ modes: {
4368
+ withLimits: "Avec Limites",
4369
+ unlimited: "Illimit\xE9",
4370
+ openingHours: "Horaires",
4371
+ free: "Libre"
4372
+ },
4373
+ fields: {
4374
+ time: "Heure"
4375
+ },
4376
+ messages: {
4377
+ searchingTables: "Recherche de tables disponibles...",
4378
+ noTablesAvailable: "Aucune table sp\xE9cifique disponible pour cette s\xE9lection."
4379
+ },
4380
+ warnings: {
4381
+ unlimitedMode: "Illimit\xE9 ne tiendra pas compte des limites maximales."
4382
+ }
4383
+ },
4384
+ calendar: {
4385
+ selectDatePlaceholder: "S\xE9lectionnez une date",
4386
+ today: "Aujourd'hui",
4387
+ tomorrow: "Demain",
4388
+ prevWeek: "Semaine pr\xE9c\xE9dente",
4389
+ nextWeek: "Semaine suivante",
4390
+ dayHeaders: ["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
4391
+ seatsQuestion: "Places ?"
4392
+ },
4393
+ timeSelector: {
4394
+ shifts: {
4395
+ breakfast: "Petit-d\xE9jeuner",
4396
+ lunch: "D\xE9jeuner",
4397
+ dinner: "D\xEEner"
4398
+ },
4399
+ selectMeal: "S\xE9lectionnez un repas",
4400
+ selectTime: "S\xE9lectionnez une heure",
4401
+ noDateSelected: "Veuillez d'abord s\xE9lectionner une date.",
4402
+ noTimes: "Aucun horaire disponible.",
4403
+ back: "Retour"
4404
+ },
4405
+ tableSelector: {
4406
+ label: "S\xE9lectionnez les table(s) disponibles :",
4407
+ table: "Table",
4408
+ max: "Max",
4409
+ noTables: "Aucune table sp\xE9cifique disponible pour cette combinaison temps/convives."
4410
+ }
4411
+ }
4412
+ };
4413
+
4414
+ // src/components/ReservationStepOne/Calendar.js
4415
+ moment2__default.default.locale("nl");
4416
+ var Calendar = ({
4417
+ guests: guests2,
4418
+ selectedDate,
4419
+ onSelectDate,
4420
+ autoExpand,
4421
+ reservationMode,
4422
+ restaurantData,
4423
+ startDate,
4424
+ onWeekChange,
4425
+ reservations,
4426
+ giftcard,
4427
+ zitplaats
4428
+ }) => {
4429
+ const lang = localStorage.getItem("preferredLanguage") || "nl";
4430
+ const t = translations_default[lang].calendar;
4431
+ const [isExpanded, setIsExpanded] = React9.useState(autoExpand || false);
4432
+ const [showAvailabilities, setShowAvailabilities] = React9.useState(false);
4433
+ const calendarRef = React9.useRef(null);
4434
+ const hideAvailTimerRef = React9.useRef(null);
4435
+ const maxDate = moment2__default.default().tz("Europe/Amsterdam").add(1, "year").endOf("day");
4436
+ React9.useEffect(() => {
4437
+ if (autoExpand) {
4438
+ setIsExpanded(true);
4439
+ }
4440
+ }, [autoExpand]);
4441
+ React9.useEffect(() => {
4442
+ const handleClickOutside = (event) => {
4443
+ if (calendarRef.current && !calendarRef.current.contains(event.target)) {
4444
+ setIsExpanded(false);
4445
+ setShowAvailabilities(false);
4446
+ }
4447
+ };
4448
+ document.addEventListener("mousedown", handleClickOutside);
4449
+ return () => {
4450
+ document.removeEventListener("mousedown", handleClickOutside);
4451
+ };
4452
+ }, []);
4453
+ React9.useEffect(() => {
4454
+ return () => {
4455
+ if (hideAvailTimerRef.current) {
4456
+ clearTimeout(hideAvailTimerRef.current);
4457
+ hideAvailTimerRef.current = null;
4458
+ }
4459
+ };
4460
+ }, []);
4461
+ const showAvailabilityNow = () => {
4462
+ if (hideAvailTimerRef.current) {
4463
+ clearTimeout(hideAvailTimerRef.current);
4464
+ hideAvailTimerRef.current = null;
4465
+ }
4466
+ setShowAvailabilities(true);
4467
+ };
4468
+ const hideAvailabilityAfterDelay = (delay = 1e3) => {
4469
+ if (hideAvailTimerRef.current) {
4470
+ clearTimeout(hideAvailTimerRef.current);
4471
+ }
4472
+ hideAvailTimerRef.current = setTimeout(() => {
4473
+ setShowAvailabilities(false);
4474
+ hideAvailTimerRef.current = null;
4475
+ }, delay);
4476
+ };
4477
+ const computeMaxGuestsForDate = (date, today) => {
4478
+ if (date.isBefore(today, "day") || date.isAfter(maxDate, "day")) {
4479
+ return 0;
4480
+ }
4481
+ const formattedDate = date.format("YYYY-MM-DD");
4482
+ if (showAvailabilities) {
4483
+ const tableSettings2 = restaurantData?.["table-settings"] || {};
4484
+ const isTableAssignmentEnabled2 = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
4485
+ let maxFittable2 = 0;
4486
+ for (let g = 1; g <= 21; g++) {
4487
+ let ok;
4488
+ if (isTableAssignmentEnabled2) {
4489
+ ok = algorithm.isDateAvailableWithTableCheck(
4490
+ restaurantData,
4491
+ formattedDate,
4492
+ reservations,
4493
+ g,
4494
+ giftcard || null
4495
+ );
4496
+ } else {
4497
+ ok = algorithm.isDateAvailable(
4498
+ restaurantData,
4499
+ formattedDate,
4500
+ reservations,
4501
+ g,
4502
+ giftcard || null
4503
+ );
4504
+ }
4505
+ if (ok) maxFittable2 = g;
4506
+ }
4507
+ return maxFittable2;
4508
+ }
4509
+ if (reservationMode === "vrije_keuze") {
4510
+ return 21;
4511
+ }
4512
+ if (reservationMode !== "met_limieten") {
4513
+ const open = algorithm.isDateAvailable(
4514
+ restaurantData,
4515
+ formattedDate,
4516
+ reservations,
4517
+ -1e4,
4518
+ null
4519
+ );
4520
+ return open ? 21 : 0;
4521
+ }
4522
+ const tableSettings = restaurantData?.["table-settings"] || {};
4523
+ const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && reservationMode === "met_limieten";
4524
+ let maxFittable = 0;
4525
+ for (let g = 1; g <= 21; g++) {
4526
+ let ok;
4527
+ if (isTableAssignmentEnabled) {
4528
+ ok = algorithm.isDateAvailableWithTableCheck(
4529
+ restaurantData,
4530
+ formattedDate,
4531
+ reservations,
4532
+ g,
4533
+ giftcard || null
4534
+ );
4535
+ } else {
4536
+ ok = algorithm.isDateAvailable(
4537
+ restaurantData,
4538
+ formattedDate,
4539
+ reservations,
4540
+ g,
4541
+ giftcard || null
4542
+ );
4543
+ }
4544
+ if (ok) maxFittable = g;
4545
+ }
4546
+ return maxFittable;
4547
+ };
4548
+ const generateCalendarDays = (currentDate) => {
4549
+ const days2 = [];
4550
+ const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
4551
+ const firstDayOfMonth = currentDate.clone().startOf("month");
4552
+ const lastDayOfMonth = currentDate.clone().endOf("month");
4553
+ const tableSettings = restaurantData?.["table-settings"] || {};
4554
+ const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && reservationMode === "met_limieten";
4555
+ let date = firstDayOfMonth.clone();
4556
+ while (date.isSameOrBefore(lastDayOfMonth, "day")) {
4557
+ const formattedDate = date.format("YYYY-MM-DD");
4558
+ let isAvailable;
4559
+ if (reservationMode === "vrije_keuze") {
4560
+ isAvailable = date.isBetween(today, maxDate, null, "[]");
4561
+ } else {
4562
+ const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
4563
+ if (isTableAssignmentEnabled) {
4564
+ isAvailable = algorithm.isDateAvailableWithTableCheck(
4565
+ restaurantData,
4566
+ formattedDate,
4567
+ reservations,
4568
+ adjustedGuests,
4569
+ reservationMode === "met_limieten" ? giftcard : null
4570
+ );
4571
+ } else {
4572
+ isAvailable = algorithm.isDateAvailable(
4573
+ restaurantData,
4574
+ formattedDate,
4575
+ reservations,
4576
+ adjustedGuests,
4577
+ reservationMode === "met_limieten" ? giftcard : null
4578
+ );
4579
+ }
4580
+ }
4581
+ const maxGuestsAvailable = computeMaxGuestsForDate(date, today);
4582
+ days2.push({
4583
+ date: date.clone(),
4584
+ isPast: date.isBefore(today, "day"),
4585
+ isFuture: date.isAfter(maxDate, "day"),
4586
+ isAvailable,
4587
+ maxGuestsAvailable
4588
+ });
4589
+ date.add(1, "day");
4590
+ }
4591
+ return days2;
4592
+ };
4593
+ const handleDateClick = (day) => {
4594
+ if (day.isAvailable && !day.isPast && !day.isFuture) {
4595
+ onSelectDate(day.date.format("YYYY-MM-DD"));
4596
+ setIsExpanded(false);
4597
+ setShowAvailabilities(false);
4598
+ }
4599
+ };
4600
+ const handlePrevMonth = () => {
4601
+ const newStartDate = startDate.clone().subtract(1, "month").startOf("month");
4602
+ const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
4603
+ if (newStartDate.clone().endOf("month").isBefore(today, "day")) {
4604
+ console.log("Cannot go to previous month. It is in the past.");
4605
+ return;
4606
+ }
4607
+ onWeekChange(newStartDate);
4608
+ };
4609
+ const handleNextMonth = () => {
4610
+ const newStartDate = startDate.clone().add(1, "month").startOf("month");
4611
+ onWeekChange(newStartDate);
4612
+ };
4613
+ const formatDisplayDate = () => {
4614
+ if (!selectedDate) {
4615
+ return t.selectDatePlaceholder;
4616
+ }
4617
+ const selectedMoment = moment2__default.default(selectedDate, "YYYY-MM-DD").tz("Europe/Amsterdam").startOf("day");
4618
+ const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
4619
+ const tomorrow = today.clone().add(1, "day");
4620
+ if (selectedMoment.isSame(today, "day")) {
4621
+ return t.today;
4622
+ } else if (selectedMoment.isSame(tomorrow, "day")) {
4623
+ return t.tomorrow;
4624
+ } else {
4625
+ return selectedMoment.format("dddd D MMMM YYYY");
4626
+ }
4627
+ };
4628
+ const renderCalendarGrid = (days2) => {
4629
+ const firstDayOfMonth = startDate.clone().startOf("month");
4630
+ const dayOfWeek = firstDayOfMonth.day();
4631
+ const mondayStartDayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
4632
+ const calendarGrid = [];
4633
+ for (let i = 0; i < mondayStartDayOfWeek; i++) {
4634
+ calendarGrid.push(null);
4635
+ }
4636
+ calendarGrid.push(...days2);
4637
+ const totalCells = calendarGrid.length;
4638
+ const weeksNeeded = Math.ceil(totalCells / 7);
4639
+ while (calendarGrid.length < weeksNeeded * 7) {
4640
+ calendarGrid.push(null);
4641
+ }
4642
+ const weeks2 = [];
4643
+ for (let week = 0; week < weeksNeeded; week++) {
4644
+ const weekDays = calendarGrid.slice(week * 7, week * 7 + 7);
4645
+ weeks2.push(weekDays);
4646
+ }
4647
+ return weeks2;
4648
+ };
4649
+ const days = startDate ? generateCalendarDays(startDate) : [];
4650
+ const weeks = startDate ? renderCalendarGrid(days) : [];
4651
+ const dayHeaders = t.dayHeaders;
4652
+ const renderAvailabilityNumber = (value2) => {
4653
+ if (value2 >= 21) return "20+";
4654
+ return String(value2);
4655
+ };
4656
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-container", ref: calendarRef }, /* @__PURE__ */ React9__default.default.createElement(
4657
+ "div",
4658
+ {
4659
+ className: "calendar-display",
4660
+ onClick: () => setIsExpanded(!isExpanded)
4661
+ },
4662
+ /* @__PURE__ */ React9__default.default.createElement("span", null, formatDisplayDate()),
4663
+ /* @__PURE__ */ React9__default.default.createElement("span", { className: "arrow" }, /* @__PURE__ */ React9__default.default.createElement(
4664
+ "svg",
4665
+ {
4666
+ width: "12",
4667
+ height: "12",
4668
+ viewBox: "0 0 24 24",
4669
+ style: {
4670
+ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
4671
+ transition: "transform 0.2s"
4672
+ }
4673
+ },
4674
+ /* @__PURE__ */ React9__default.default.createElement(
4675
+ "path",
4676
+ {
4677
+ d: "M7 10l5 5 5-5",
4678
+ fill: "none",
4679
+ stroke: "currentColor",
4680
+ strokeWidth: "2"
4681
+ }
4682
+ )
4683
+ ))
4684
+ ), isExpanded && startDate && /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-header" }, /* @__PURE__ */ React9__default.default.createElement(
4685
+ "button",
4686
+ {
4687
+ type: "button",
4688
+ onClick: handlePrevMonth,
4689
+ "aria-label": t.prevWeek
4690
+ },
4691
+ "<"
4692
+ ), /* @__PURE__ */ React9__default.default.createElement("span", null, startDate.format("MMMM YYYY")), /* @__PURE__ */ React9__default.default.createElement(
4693
+ "button",
4694
+ {
4695
+ type: "button",
4696
+ onClick: handleNextMonth,
4697
+ "aria-label": t.nextWeek
4698
+ },
4699
+ ">"
4700
+ ), /* @__PURE__ */ React9__default.default.createElement(
4701
+ "button",
4702
+ {
4703
+ type: "button",
4704
+ className: `availability-hold-btn ${showAvailabilities ? "active" : ""}`,
4705
+ "aria-pressed": showAvailabilities,
4706
+ "aria-label": "Houd ingedrukt om beschikbaarheden te tonen",
4707
+ onMouseDown: showAvailabilityNow,
4708
+ onMouseUp: () => hideAvailabilityAfterDelay(1e3),
4709
+ onMouseLeave: () => hideAvailabilityAfterDelay(1e3),
4710
+ onTouchStart: showAvailabilityNow,
4711
+ onTouchEnd: () => hideAvailabilityAfterDelay(1e3),
4712
+ onTouchCancel: () => hideAvailabilityAfterDelay(1e3),
4713
+ onKeyDown: (e) => {
4714
+ if (e.key === " " || e.key === "Enter") showAvailabilityNow();
4715
+ },
4716
+ onKeyUp: (e) => {
4717
+ if (e.key === " " || e.key === "Enter")
4718
+ hideAvailabilityAfterDelay(1e3);
4719
+ },
4720
+ style: {
4721
+ fontSize: "15px",
4722
+ color: "gray",
4723
+ fontWeight: "450",
4724
+ textDecoration: "underline"
4725
+ }
4726
+ },
4727
+ t.seatsQuestion
4728
+ )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-weeks-wrapper" }, /* @__PURE__ */ React9__default.default.createElement("table", { className: "calendar-table" }, /* @__PURE__ */ React9__default.default.createElement("thead", null, /* @__PURE__ */ React9__default.default.createElement("tr", { translate: "no" }, dayHeaders.map((day, i) => /* @__PURE__ */ React9__default.default.createElement("th", { key: i }, day)))), /* @__PURE__ */ React9__default.default.createElement("tbody", null, weeks.map((week, weekIndex) => /* @__PURE__ */ React9__default.default.createElement("tr", { key: weekIndex, translate: "no" }, week.map((dayObj, dayIndex) => {
4729
+ if (!dayObj) {
4730
+ return /* @__PURE__ */ React9__default.default.createElement("td", { key: dayIndex, className: "empty-day" });
4731
+ }
4732
+ const isSelected = selectedDate && isSameDay(
4733
+ dayObj.date,
4734
+ moment2__default.default(selectedDate, "YYYY-MM-DD").tz(
4735
+ "Europe/Amsterdam"
4736
+ )
4737
+ );
4738
+ const classNames = [];
4739
+ if (dayObj.isPast) {
4740
+ classNames.push("gray-out");
4741
+ } else if (dayObj.isAvailable) {
4742
+ classNames.push("available");
4743
+ } else {
4744
+ classNames.push("unavailable");
4745
+ }
4746
+ if (isSelected) {
4747
+ classNames.push("selected");
4748
+ }
4749
+ return /* @__PURE__ */ React9__default.default.createElement(
4750
+ "td",
4751
+ {
4752
+ key: dayIndex,
4753
+ className: classNames.join(" "),
4754
+ onClick: () => handleDateClick(dayObj),
4755
+ style: {
4756
+ "--animation-order": dayIndex + weekIndex * 7
4757
+ }
4758
+ },
4759
+ /* @__PURE__ */ React9__default.default.createElement(
4760
+ "div",
4761
+ {
4762
+ className: `day-square ${showAvailabilities ? "showing-availabilities" : ""}`
4763
+ },
4764
+ /* @__PURE__ */ React9__default.default.createElement("span", { className: "day-number" }, showAvailabilities ? renderAvailabilityNumber(
4765
+ dayObj.maxGuestsAvailable
4766
+ ) : dayObj.date.date())
4767
+ )
4768
+ );
4769
+ }))))))));
4770
+ };
4771
+ var Calendar_default = Calendar;
4772
+
4773
+ // src/components/ReservationStepOne/DateSelector.js
4774
+ var import_moment = __toESM(require_moment());
4775
+ var DateSelector = ({
4776
+ guests: guests2,
4777
+ formData,
4778
+ handleChange,
4779
+ resetFormDataFields,
4780
+ restaurantData,
4781
+ reservations,
4782
+ startDate,
4783
+ onWeekChange,
4784
+ reservationMode
4785
+ }) => {
4786
+ const handleDateSelect = (date) => {
4787
+ const formatted = (0, import_moment.default)(date).format("YYYY-MM-DD");
4788
+ console.log("Selected date:", formatted);
4789
+ handleChange({ target: { name: "date", value: formatted } });
4790
+ resetFormDataFields(["time"]);
4791
+ };
4792
+ const monthStartDate = startDate ? startDate.clone().startOf("month") : (0, import_moment.default)().startOf("month");
4793
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9__default.default.createElement(
4794
+ Calendar_default,
4795
+ {
4796
+ guests: guests2,
4797
+ selectedDate: formData.date || null,
4798
+ onSelectDate: handleDateSelect,
4799
+ autoExpand: false,
4800
+ reservationMode,
4801
+ restaurantData,
4802
+ startDate: monthStartDate,
4803
+ onWeekChange,
4804
+ reservations,
4805
+ giftcard: formData.giftcard,
4806
+ zitplaats: formData.zitplaats
4807
+ }
4808
+ ));
4809
+ };
4810
+ var DateSelector_default = DateSelector;
4811
+
4812
+ // src/components/ReservationStepOne/css/timeSelector.css
4813
+ styleInject(".new-reservation-page .time-selector-container {\n position: relative;\n}\n.new-reservation-page .time-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .time-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .time-selector {\n position: absolute;\n z-index: 1000;\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInTimeSelector 0.3s ease-in-out;\n top: 75px;\n}\n@keyframes fadeInTimeSelector {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .time-period {\n margin-bottom: 15px;\n}\n.new-reservation-page .time-period-label {\n font-weight: bold;\n margin-bottom: 5px;\n}\n.new-reservation-page .time-options {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n.new-reservation-page .time-option {\n padding: 8px 12px;\n background-color: #ccffcc;\n color: #006600;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .time-option:hover {\n background-color: #b3ffb3;\n}\n.new-reservation-page .time-option.selected {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .info-text {\n color: #666;\n font-style: italic;\n}\n.new-reservation-page .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .time-option {\n padding: 6px 10px;\n font-size: 14px;\n }\n}\n");
4814
+ var TimeSelector = ({
4815
+ guests: guests2,
4816
+ formData,
4817
+ handleChange,
4818
+ field,
4819
+ selectedDate,
4820
+ expanded,
4821
+ setCurrentExpandedField,
4822
+ restaurantData,
4823
+ reservations,
4824
+ reservationMode
4825
+ }) => {
4826
+ const lang = localStorage.getItem("preferredLanguage") || "nl";
4827
+ const t = translations_default[lang].timeSelector;
4828
+ const [isExpanded, setIsExpanded] = React9.useState(expanded || false);
4829
+ const [availableTimes, setAvailableTimes] = React9.useState([]);
4830
+ const [selectedMealPeriod, setSelectedMealPeriod] = React9.useState(null);
4831
+ const timeSelectorRef = React9.useRef(null);
4832
+ const shifts = {
4833
+ breakfast: { start: "07:00", end: "11:00", label: t.shifts.breakfast },
4834
+ lunch: { start: "11:00", end: "16:00", label: t.shifts.lunch },
4835
+ dinner: { start: "16:00", end: "23:00", label: t.shifts.dinner }
4836
+ };
4837
+ React9.useEffect(() => {
4838
+ if (!selectedDate || !guests2) {
4839
+ setAvailableTimes([]);
4840
+ return;
4841
+ }
4842
+ if (reservationMode === "vrije_keuze") {
4843
+ if (selectedMealPeriod) {
4844
+ const shift = shifts[selectedMealPeriod];
4845
+ const start = luxon.DateTime.fromISO(`${selectedDate}T${shift.start}`, {
4846
+ zone: "Europe/Brussels"
4847
+ });
4848
+ const end = luxon.DateTime.fromISO(`${selectedDate}T${shift.end}`, {
4849
+ zone: "Europe/Brussels"
4850
+ });
4851
+ const times = [];
4852
+ let current = start;
4853
+ while (current < end) {
4854
+ times.push({
4855
+ value: current.toFormat("HH:mm"),
4856
+ label: current.toFormat("HH:mm")
4857
+ });
4858
+ current = current.plus({ minutes: 15 });
4859
+ }
4860
+ setAvailableTimes(times);
4861
+ } else {
4862
+ setAvailableTimes([]);
4863
+ }
4864
+ } else {
4865
+ if (restaurantData && reservations) {
4866
+ const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
4867
+ const tableSettings = restaurantData?.["table-settings"] || {};
4868
+ const shouldUseTableFiltering = reservationMode === "met_limieten" && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
4869
+ const selectedGiftcard = reservationMode === "met_limieten" ? formData.giftcard : null;
4870
+ const timeblocks = algorithm.getAvailableTimeblocks(
4871
+ restaurantData,
4872
+ selectedDate,
4873
+ reservations,
4874
+ adjustedGuests,
4875
+ selectedGiftcard
4876
+ );
4877
+ const filtered = shouldUseTableFiltering ? algorithm.getAvailableTimeblocksWithTableCheck(
4878
+ restaurantData,
4879
+ selectedDate,
4880
+ timeblocks,
4881
+ adjustedGuests,
4882
+ reservations
4883
+ ) : timeblocks;
4884
+ const times = Object.keys(filtered).map((time) => ({
4885
+ value: time,
4886
+ label: filtered[time].name || time
4887
+ }));
4888
+ times.sort((a, b) => {
4889
+ const [aH, aM] = a.value.split(":").map(Number);
4890
+ const [bH, bM] = b.value.split(":").map(Number);
4891
+ return aH * 60 + aM - (bH * 60 + bM);
4892
+ });
4893
+ setAvailableTimes(times);
4894
+ if (formData[field.id] && !times.some((ti) => ti.value === formData[field.id])) {
4895
+ handleChange({ target: { name: field.id, value: "" } });
4896
+ }
4897
+ } else {
4898
+ setAvailableTimes([]);
4899
+ }
4900
+ }
4901
+ }, [
4902
+ selectedDate,
4903
+ guests2,
4904
+ restaurantData,
4905
+ reservations,
4906
+ reservationMode,
4907
+ field.id,
4908
+ selectedMealPeriod,
4909
+ // only track the specific time value (not the whole formData) to avoid seat-triggered reruns
4910
+ formData[field.id],
4911
+ handleChange
4912
+ ]);
4913
+ React9.useEffect(() => {
4914
+ if (reservationMode === "vrije_keuze") {
4915
+ setSelectedMealPeriod(null);
4916
+ if (formData[field.id]) {
4917
+ handleChange({ target: { name: field.id, value: "" } });
4918
+ }
4919
+ }
4920
+ }, [selectedDate, reservationMode]);
4921
+ const handleTimeSelect = (timeValue) => {
4922
+ handleChange({ target: { name: field.id, value: timeValue } });
4923
+ setIsExpanded(false);
4924
+ setCurrentExpandedField?.(null);
4925
+ };
4926
+ const handleMealPeriodSelect = (period) => {
4927
+ if (selectedMealPeriod !== period && formData[field.id]) {
4928
+ handleChange({ target: { name: field.id, value: "" } });
4929
+ }
4930
+ setSelectedMealPeriod(period);
4931
+ };
4932
+ const formatDisplayTime = () => {
4933
+ if (reservationMode === "vrije_keuze") {
4934
+ if (!selectedMealPeriod) {
4935
+ return t.selectMeal;
4936
+ }
4937
+ if (formData[field.id]) {
4938
+ return `${shifts[selectedMealPeriod].label} \u2013 ${formData[field.id]}`;
4939
+ }
4940
+ return `${shifts[selectedMealPeriod].label} \u2013 ${t.selectTime}`;
4941
+ } else {
4942
+ if (formData[field.id]) {
4943
+ const sel = availableTimes.find(
4944
+ (time) => time.value === formData[field.id]
4945
+ );
4946
+ return sel ? sel.label : t.selectTime;
4947
+ }
4948
+ return t.selectTime;
4949
+ }
4950
+ };
4951
+ if (!field) return null;
4952
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group time-selector-container", ref: timeSelectorRef }, !selectedDate ? /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, t.noDateSelected) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(
4953
+ "div",
4954
+ {
4955
+ className: "time-display",
4956
+ onClick: () => {
4957
+ setIsExpanded(!isExpanded);
4958
+ if (!isExpanded) setCurrentExpandedField?.(field.id);
4959
+ }
4960
+ },
4961
+ /* @__PURE__ */ React9__default.default.createElement("span", null, formatDisplayTime()),
4962
+ /* @__PURE__ */ React9__default.default.createElement("span", { className: "arrow" }, /* @__PURE__ */ React9__default.default.createElement(
4963
+ "svg",
4964
+ {
4965
+ width: "12",
4966
+ height: "12",
4967
+ viewBox: "0 0 24 24",
4968
+ style: {
4969
+ transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
4970
+ transition: "transform 0.2s"
4971
+ }
4972
+ },
4973
+ /* @__PURE__ */ React9__default.default.createElement(
4974
+ "path",
4975
+ {
4976
+ d: "M7 10l5 5 5-5",
4977
+ fill: "none",
4978
+ stroke: "currentColor",
4979
+ strokeWidth: "2"
4980
+ }
4981
+ )
4982
+ ))
4983
+ ), isExpanded && /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-selector" }, reservationMode === "vrije_keuze" ? selectedMealPeriod ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-period" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-period-label" }, shifts[selectedMealPeriod].label, /* @__PURE__ */ React9__default.default.createElement(
4984
+ "button",
4985
+ {
4986
+ onClick: () => setSelectedMealPeriod(null),
4987
+ style: {
4988
+ marginLeft: "10px",
4989
+ background: "none",
4990
+ border: "none",
4991
+ cursor: "pointer",
4992
+ color: "#006600",
4993
+ fontSize: "0.9rem",
4994
+ padding: 0
4995
+ }
4996
+ },
4997
+ "\u2190 ",
4998
+ t.back
4999
+ )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, availableTimes.length === 0 ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "no-times" }, t.noTimes) : availableTimes.map((time) => /* @__PURE__ */ React9__default.default.createElement(
5000
+ "div",
5001
+ {
5002
+ key: time.value,
5003
+ className: `time-option ${formData[field.id] === time.value ? "selected" : ""}`,
5004
+ onClick: () => handleTimeSelect(time.value)
5005
+ },
5006
+ time.label
5007
+ )))) : /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, Object.keys(shifts).map((period) => /* @__PURE__ */ React9__default.default.createElement(
5008
+ "div",
5009
+ {
5010
+ key: period,
5011
+ className: `time-option ${selectedMealPeriod === period ? "selected" : ""}`,
5012
+ onClick: () => handleMealPeriodSelect(period)
5013
+ },
5014
+ shifts[period].label
5015
+ ))) : /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, availableTimes.length === 0 ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "no-times" }, t.noTimes) : availableTimes.map((time) => /* @__PURE__ */ React9__default.default.createElement(
5016
+ "div",
5017
+ {
5018
+ key: time.value,
5019
+ className: `time-option ${formData[field.id] === time.value ? "selected" : ""}`,
5020
+ onClick: () => handleTimeSelect(time.value)
5021
+ },
5022
+ time.label
5023
+ ))))));
5024
+ };
5025
+ var TimeSelector_default = TimeSelector;
5026
+
5027
+ // src/components/ReservationStepOne/css/tableSelector.css
5028
+ styleInject(".new-reservation-page .table-selector-container {\n margin-top: 15px;\n padding: 10px;\n border: 1px solid #eee;\n border-radius: 4px;\n background-color: #f9f9f9;\n}\n.new-reservation-page .table-selector-label {\n display: block;\n margin-bottom: 10px;\n font-weight: bold;\n color: #333;\n font-size: 0.95rem;\n}\n.new-reservation-page .table-options {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n.new-reservation-page .table-option {\n display: inline-block;\n margin-right: 15px;\n margin-bottom: 5px;\n padding: 5px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background-color: #fff;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .table-option label {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: 0.9rem;\n color: #555;\n}\n.new-reservation-page .table-option input[type=checkbox] {\n margin-right: 8px;\n cursor: pointer;\n accent-color: var(--primary-color, #006600);\n}\n.new-reservation-page .table-option:has(input[type=checkbox]:checked) {\n background-color: #e0f2e0;\n border-color: #006600;\n}\n.new-reservation-page .table-option:hover {\n background-color: #f0f0f0;\n}\n.new-reservation-page .info-text {\n margin-top: 10px;\n font-size: 0.85rem;\n color: #666;\n}\n.new-reservation-page .selected-tables-info {\n margin-top: 10px;\n font-style: italic;\n}\n.new-reservation-page .info-text.loading-tables {\n font-style: italic;\n color: #006600;\n}\n");
5029
+
5030
+ // src/components/ReservationStepOne/TableSelector.js
5031
+ var TableSelector = ({
5032
+ availableTables = [],
5033
+ isFetching = false,
5034
+ formData = {},
5035
+ handleChange,
5036
+ setFormData
5037
+ // optional fallback if handleChange not provided
5038
+ }) => {
5039
+ const lang = localStorage.getItem("preferredLanguage") || "nl";
5040
+ const troot = translations_default?.[lang]?.tableSelector || {};
5041
+ const t = {
5042
+ label: troot.label || "Tafels",
5043
+ noTables: troot.noTables || "Geen tafels beschikbaar voor deze selectie.",
5044
+ table: troot.table || "Tafel",
5045
+ max: troot.max || "Max"
5046
+ };
5047
+ const selectedNumbers = Array.isArray(formData.selectedTableNumbers) ? formData.selectedTableNumbers : [];
5048
+ const selectedIds = Array.isArray(formData.selectedTableIds) ? formData.selectedTableIds : [];
5049
+ const updateSelection = (nextNums, nextIds) => {
5050
+ if (typeof handleChange === "function") {
5051
+ handleChange({
5052
+ target: {
5053
+ multiple: true,
5054
+ updates: {
5055
+ selectedTableNumbers: nextNums,
5056
+ selectedTableIds: nextIds
5057
+ }
5058
+ }
5059
+ });
5060
+ return;
5061
+ }
5062
+ if (typeof setFormData === "function") {
5063
+ setFormData((prev) => ({
5064
+ ...prev,
5065
+ selectedTableNumbers: nextNums,
5066
+ selectedTableIds: nextIds
5067
+ }));
5068
+ }
5069
+ };
5070
+ const onToggle = (tableNumber) => (e) => {
5071
+ const checked = e.target.checked;
5072
+ const table = availableTables.find((t2) => t2.tableNumber === tableNumber);
5073
+ if (!table) return;
5074
+ let nextNums = [...selectedNumbers];
5075
+ let nextIds = [...selectedIds];
5076
+ if (checked) {
5077
+ if (!nextNums.includes(tableNumber)) nextNums.push(tableNumber);
5078
+ if (!nextIds.includes(table.tableId)) nextIds.push(table.tableId);
5079
+ } else {
5080
+ nextNums = nextNums.filter((n) => n !== tableNumber);
5081
+ nextIds = nextIds.filter((id) => id !== table.tableId);
5082
+ }
5083
+ nextNums.sort((a, b) => a - b);
5084
+ updateSelection(nextNums, nextIds);
5085
+ };
5086
+ if (isFetching) {
5087
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, "Laden\u2026"));
5088
+ }
5089
+ if (!availableTables || availableTables.length === 0) {
5090
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, t.noTables));
5091
+ }
5092
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("div", { className: "table-options" }, availableTables.map((table) => {
5093
+ const number = table.tableNumber;
5094
+ const maxCapacity = table.maxCapacity ?? table.capacity ?? table.seats ?? "-";
5095
+ const checked = selectedNumbers.includes(number);
5096
+ return /* @__PURE__ */ React9__default.default.createElement("div", { key: `${table.tableId || number}`, className: "table-option" }, /* @__PURE__ */ React9__default.default.createElement("label", null, /* @__PURE__ */ React9__default.default.createElement(
5097
+ "input",
5098
+ {
5099
+ type: "checkbox",
5100
+ value: number,
5101
+ checked,
5102
+ onChange: onToggle(number)
5103
+ }
5104
+ ), t.table, " ", number, " (", t.max, ": ", maxCapacity, ")"));
5105
+ })));
5106
+ };
5107
+ var TableSelector_default = TableSelector;
5108
+
4164
5109
  // src/components/ReservationStepOne/css/reservationMode.css
4165
5110
  styleInject(".new-reservation-page .form-row .field-label {\n display: block;\n margin-bottom: 6px;\n font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin: 15px 0;\n padding: 12px 15px;\n background-color: #fff3cd;\n border: 1px solid #ffeaa7;\n border-radius: var(--border-radius, 4px);\n border-left: 4px solid #e67e22;\n font-size: 0.9rem;\n line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n color: #e67e22;\n font-size: 1.1rem;\n margin-top: 2px;\n flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n color: #856404;\n margin: 0;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .unlimited-mode-warning {\n margin: 10px 0;\n padding: 10px 12px;\n font-size: 0.85rem;\n }\n .new-reservation-page .unlimited-mode-warning .warning-icon {\n font-size: 1rem;\n }\n}\n.new-reservation-page .reservation-sidebar-component {\n position: fixed;\n top: 0;\n right: -400px;\n width: 400px;\n height: 100%;\n background-color: #fff;\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n z-index: var(--z-index-sidebar-reservation);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n padding: 20px;\n padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n width: 100%;\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n z-index: var(--z-index-modal) !important;\n transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n position: relative;\n top: 2px;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .reservation-sidebar-component {\n width: 100%;\n }\n}\n.new-reservation-page .sidebar-section-personeel {\n margin-bottom: 10px;\n}\n");
4166
5111
 
4167
- // src/components/ReservationStepOne/ReservationStepOne.js
5112
+ // src/components/ReservationStepOne/index.js
5113
+ var import_moment2 = __toESM(require_moment());
5114
+ var useApi = () => {
5115
+ const getJwtToken = React9.useCallback(() => {
5116
+ return localStorage.getItem("accessToken");
5117
+ }, []);
5118
+ const get = React9.useCallback(
5119
+ (endpoint, config = {}) => {
5120
+ const { params, ...axiosConfig } = config;
5121
+ const token = getJwtToken();
5122
+ return axios__default.default.get(endpoint, {
5123
+ ...axiosConfig,
5124
+ params,
5125
+ headers: {
5126
+ ...axiosConfig.headers,
5127
+ ...token ? { Authorization: `Bearer ${token}` } : {}
5128
+ }
5129
+ }).then((response) => response.data).catch((error) => {
5130
+ console.error("Error fetching data:", error);
5131
+ throw error;
5132
+ });
5133
+ },
5134
+ [getJwtToken]
5135
+ );
5136
+ const mutate = React9.useCallback(
5137
+ (method, endpoint, data = null, config = {}) => {
5138
+ const token = getJwtToken();
5139
+ return axios__default.default({
5140
+ method,
5141
+ url: endpoint,
5142
+ data,
5143
+ ...config,
5144
+ headers: {
5145
+ ...config.headers,
5146
+ ...token ? { Authorization: `Bearer ${token}` } : {}
5147
+ }
5148
+ }).then((response) => response.data).catch((error) => {
5149
+ console.error(`Error with ${method} request:`, error);
5150
+ throw error;
5151
+ });
5152
+ },
5153
+ [getJwtToken]
5154
+ );
5155
+ const apiMethods = React9.useMemo(
5156
+ () => ({
5157
+ get,
5158
+ post: (endpoint, data, config) => mutate("POST", endpoint, data, config),
5159
+ put: (endpoint, data, config) => mutate("PUT", endpoint, data, config),
5160
+ patch: (endpoint, data, config) => mutate("PATCH", endpoint, data, config),
5161
+ delete: (endpoint, config) => mutate("DELETE", endpoint, null, config)
5162
+ }),
5163
+ [get, mutate]
5164
+ );
5165
+ return apiMethods;
5166
+ };
5167
+ var useApi_default = useApi;
4168
5168
  var ReservationStepOne = ({
4169
5169
  formData,
4170
5170
  errors,
4171
5171
  handleChange,
5172
+ handleStepOneSubmit,
4172
5173
  setFormData,
4173
- restaurantData,
4174
- reservations = []
5174
+ timeblocks,
5175
+ loadingTimeblocks,
5176
+ timeblocksError,
5177
+ restaurantData
4175
5178
  }) => {
4176
- const [availableTables, setAvailableTables] = React4.useState([]);
4177
- const [isFetchingTables, setIsFetchingTables] = React4.useState(false);
4178
- const tableSettings = restaurantData?.["table-settings"] || {};
4179
- const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
4180
- const seatOptions = ["Terras", "Restaurant"];
4181
- React4.useEffect(() => {
4182
- const isAutomaticAssignment = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
4183
- if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0) {
5179
+ const lang = localStorage.getItem("preferredLanguage") || "nl";
5180
+ const t = translations_default[lang].reservationStepOne;
5181
+ const [guests2, setGuests] = React9.useState(formData.guests || 2);
5182
+ const [startDate, setStartDate] = React9.useState(null);
5183
+ const [reservations, setReservations] = React9.useState([]);
5184
+ const [availableTables, setAvailableTables] = React9.useState([]);
5185
+ const [isFetchingTables, setIsFetchingTables] = React9.useState(false);
5186
+ const api = useApi_default();
5187
+ const initializationDone = React9.useRef(false);
5188
+ const prevSelectedTables = React9.useRef({
5189
+ numbers: formData.selectedTableNumbers || [],
5190
+ ids: formData.selectedTableIds || []
5191
+ });
5192
+ const resetFormDataFields = React9.useCallback(
5193
+ (fieldsToReset) => {
5194
+ setFormData((prevFormData) => {
5195
+ const newFormData = { ...prevFormData };
5196
+ fieldsToReset.forEach((field) => {
5197
+ newFormData[field] = "";
5198
+ });
5199
+ if (fieldsToReset.includes("date") || fieldsToReset.includes("time") || fieldsToReset.includes("guests")) {
5200
+ newFormData.selectedTableNumbers = [];
5201
+ newFormData.selectedTableIds = [];
5202
+ setAvailableTables([]);
5203
+ prevSelectedTables.current = { numbers: [], ids: [] };
5204
+ }
5205
+ return newFormData;
5206
+ });
5207
+ },
5208
+ [setFormData]
5209
+ );
5210
+ React9.useEffect(() => {
5211
+ const today = (0, import_moment2.default)().tz("Europe/Amsterdam").startOf("day");
5212
+ let firstWeekStart = today.clone().startOf("isoWeek");
5213
+ while (isWeekInPast(firstWeekStart)) {
5214
+ firstWeekStart.add(1, "week");
5215
+ }
5216
+ setStartDate(firstWeekStart);
5217
+ }, []);
5218
+ React9.useEffect(() => {
5219
+ const fetchReservations = async () => {
5220
+ if (startDate && ["met_limieten", "zonder_regels"].includes(formData.reservationMode)) {
5221
+ const tableSettings2 = restaurantData?.["table-settings"] || {};
5222
+ const isAutomaticAssignment = tableSettings2.isInstalled && tableSettings2.assignmentMode === "automatic";
5223
+ if (formData.reservationMode === "met_limieten" || formData.reservationMode === "zonder_regels" && isAutomaticAssignment) {
5224
+ const beginDate = startDate.format("YYYY-MM-DD");
5225
+ const endDate = startDate.clone().add(13, "days").format("YYYY-MM-DD");
5226
+ const restaurantId = localStorage.getItem("username");
5227
+ const endpoint = `${window.baseDomain}api/slots/${restaurantId}/${beginDate}/${endDate}`;
5228
+ try {
5229
+ const data = await api.get(endpoint, { noCache: true });
5230
+ setReservations(data || []);
5231
+ } catch (error) {
5232
+ console.error("Error fetching reservations:", error);
5233
+ setReservations([]);
5234
+ }
5235
+ } else {
5236
+ setReservations([]);
5237
+ }
5238
+ } else {
5239
+ setReservations([]);
5240
+ }
5241
+ };
5242
+ fetchReservations();
5243
+ }, [startDate, api, formData.reservationMode, restaurantData]);
5244
+ const handleWeekChange = (newStartDate) => {
5245
+ setStartDate(newStartDate);
5246
+ resetFormDataFields(["date", "time", "selectedTableNumbers", "selectedTableIds"]);
5247
+ };
5248
+ React9.useEffect(() => {
5249
+ if (!initializationDone.current) {
5250
+ const updates = {};
5251
+ let needsUpdate = false;
5252
+ if (!formData.reservationMode) {
5253
+ updates.reservationMode = "met_limieten";
5254
+ needsUpdate = true;
5255
+ }
5256
+ if (!formData.guests || formData.guests === "") {
5257
+ updates.guests = guests2;
5258
+ needsUpdate = true;
5259
+ }
5260
+ if (!Array.isArray(formData.selectedTableNumbers)) {
5261
+ updates.selectedTableNumbers = [];
5262
+ needsUpdate = true;
5263
+ }
5264
+ if (!Array.isArray(formData.selectedTableIds)) {
5265
+ updates.selectedTableIds = [];
5266
+ needsUpdate = true;
5267
+ }
5268
+ if (needsUpdate) {
5269
+ setTimeout(() => {
5270
+ handleChange({ target: { multiple: true, updates } });
5271
+ }, 0);
5272
+ }
5273
+ initializationDone.current = true;
5274
+ }
5275
+ }, [formData, guests2, handleChange]);
5276
+ React9.useEffect(() => {
5277
+ const tableSettings2 = restaurantData?.["table-settings"] || {};
5278
+ const isAutomaticAssignment = tableSettings2.isInstalled && tableSettings2.assignmentMode === "automatic";
5279
+ if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0 && restaurantData && reservations) {
4184
5280
  setIsFetchingTables(true);
4185
5281
  const available = algorithm.getAvailableTablesForTime(
4186
5282
  restaurantData,
@@ -4195,13 +5291,19 @@ var ReservationStepOne = ({
4195
5291
  const stillAvailableNumbers = [];
4196
5292
  const stillAvailableIds = [];
4197
5293
  selectedNumbers.forEach((num) => {
4198
- const table = available.find((t) => t.tableNumber === num);
5294
+ const table = available.find((t2) => t2.tableNumber === num);
4199
5295
  if (table && selectedIds.includes(table.tableId)) {
4200
5296
  stillAvailableNumbers.push(num);
4201
5297
  stillAvailableIds.push(table.tableId);
4202
5298
  }
4203
5299
  });
4204
- if (stillAvailableNumbers.length !== selectedNumbers.length || stillAvailableIds.length !== selectedIds.length) {
5300
+ const numbersChanged = stillAvailableNumbers.toString() !== prevSelectedTables.current.numbers.toString();
5301
+ const idsChanged = stillAvailableIds.toString() !== prevSelectedTables.current.ids.toString();
5302
+ if (numbersChanged || idsChanged) {
5303
+ prevSelectedTables.current = {
5304
+ numbers: stillAvailableNumbers,
5305
+ ids: stillAvailableIds
5306
+ };
4205
5307
  handleChange({
4206
5308
  target: {
4207
5309
  multiple: true,
@@ -4215,14 +5317,7 @@ var ReservationStepOne = ({
4215
5317
  setIsFetchingTables(false);
4216
5318
  } else {
4217
5319
  setAvailableTables([]);
4218
- if ((formData.selectedTableNumbers?.length || 0) > 0 || (formData.selectedTableIds?.length || 0) > 0) {
4219
- handleChange({
4220
- target: {
4221
- multiple: true,
4222
- updates: { selectedTableNumbers: [], selectedTableIds: [] }
4223
- }
4224
- });
4225
- }
5320
+ prevSelectedTables.current = { numbers: [], ids: [] };
4226
5321
  }
4227
5322
  }, [
4228
5323
  formData.date,
@@ -4230,60 +5325,131 @@ var ReservationStepOne = ({
4230
5325
  formData.guests,
4231
5326
  restaurantData,
4232
5327
  reservations,
4233
- formData.selectedTableNumbers,
4234
- formData.selectedTableIds,
4235
- handleChange,
4236
- tableSettings.assignmentMode,
4237
- tableSettings.isInstalled
5328
+ handleChange
4238
5329
  ]);
4239
- const handleGuestChange = (e) => {
4240
- parseInt(e.target.value, 10) || 1;
4241
- handleChange(e);
4242
- setFormData((prev) => ({
4243
- ...prev,
4244
- selectedTableNumbers: [],
4245
- selectedTableIds: []
4246
- }));
5330
+ const handleGuestChange = (event) => {
5331
+ const newGuestCount = parseInt(event.target.value, 10) || 1;
5332
+ setGuests(newGuestCount);
5333
+ handleChange(event);
5334
+ resetFormDataFields(["time", "selectedTableNumbers", "selectedTableIds"]);
5335
+ };
5336
+ React9.useEffect(() => {
5337
+ resetFormDataFields(["date", "time", "selectedTableNumbers", "selectedTableIds"]);
5338
+ }, [formData.reservationMode, resetFormDataFields]);
5339
+ const handleTopLevelSelection = (mode) => {
5340
+ if (mode === "met_limieten") {
5341
+ handleChange({ target: { name: "reservationMode", value: "met_limieten" } });
5342
+ } else if (mode === "onbeperkt_parent") {
5343
+ if (!["zonder_regels", "vrije_keuze"].includes(formData.reservationMode)) {
5344
+ handleChange({ target: { name: "reservationMode", value: "zonder_regels" } });
5345
+ }
5346
+ }
4247
5347
  };
4248
- const handleSeatPick = (seat) => {
4249
- setFormData((prev) => ({ ...prev, zitplaats: seat }));
5348
+ const handleSubSelection = (mode) => {
5349
+ handleChange({ target: { name: "reservationMode", value: mode } });
4250
5350
  };
4251
- const showTableSelector = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && availableTables.length > 0 && formData.date && formData.time && formData.guests > 0;
4252
- return /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-step-one-placeholder" }, /* @__PURE__ */ React4__default.default.createElement("h3", null, "Reservation"), /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("label", null, "Guests:", /* @__PURE__ */ React4__default.default.createElement(
4253
- "input",
5351
+ const currentMode = formData.reservationMode;
5352
+ const isFinalMode = ["met_limieten", "zonder_regels", "vrije_keuze"].includes(currentMode);
5353
+ const tableSettings = restaurantData?.["table-settings"] || {};
5354
+ const showTableSelector = isFinalMode && formData.date && formData.time && formData.guests > 0 && tableSettings.isInstalled && tableSettings.assignmentMode === "automatic" && availableTables.length > 0;
5355
+ const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
5356
+ const seatOptions = ["Terras", "Restaurant"];
5357
+ const handleSeatPick = (seat) => setFormData((prev) => ({ ...prev, zitplaats: seat }));
5358
+ if (timeblocksError) {
5359
+ return /* @__PURE__ */ React9__default.default.createElement("div", null, t.errors.openingHoursNotSet, " ", /* @__PURE__ */ React9__default.default.createElement(
5360
+ "a",
5361
+ {
5362
+ href: "https://happychef.cloud/#/openinghours/dinner",
5363
+ target: "_blank",
5364
+ rel: "noopener noreferrer",
5365
+ style: { color: "var(--color-blue)", textDecoration: "underline" }
5366
+ },
5367
+ t.errors.clickHereToSet
5368
+ ));
5369
+ }
5370
+ return /* @__PURE__ */ React9__default.default.createElement("form", { className: "account-manage-form", noValidate: true }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group reservation-mode" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-modes-container" }, /* @__PURE__ */ React9__default.default.createElement(
5371
+ "button",
4254
5372
  {
4255
- type: "number",
4256
- min: "1",
4257
- name: "guests",
4258
- value: formData.guests || 1,
4259
- onChange: handleGuestChange
4260
- }
4261
- )), 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(
4262
- "input",
5373
+ type: "button",
5374
+ className: `reservation-mode-button ${currentMode === "met_limieten" ? "active" : ""}`,
5375
+ onClick: () => handleTopLevelSelection("met_limieten"),
5376
+ "aria-pressed": currentMode === "met_limieten"
5377
+ },
5378
+ t.modes.withLimits
5379
+ ), /* @__PURE__ */ React9__default.default.createElement(
5380
+ "button",
4263
5381
  {
4264
- type: "date",
4265
- name: "date",
4266
- value: formData.date || "",
4267
- onChange: handleChange
5382
+ type: "button",
5383
+ className: `reservation-mode-button ${["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode) ? "active" : ""}`,
5384
+ onClick: () => handleTopLevelSelection("onbeperkt_parent"),
5385
+ "aria-pressed": ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode)
5386
+ },
5387
+ t.modes.unlimited
5388
+ )), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode) && /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-modes-container sub-modes" }, /* @__PURE__ */ React9__default.default.createElement(
5389
+ "button",
5390
+ {
5391
+ type: "button",
5392
+ className: `reservation-mode-button ${currentMode === "zonder_regels" ? "active" : ""}`,
5393
+ onClick: () => handleSubSelection("zonder_regels"),
5394
+ "aria-pressed": currentMode === "zonder_regels"
5395
+ },
5396
+ t.modes.openingHours
5397
+ ), /* @__PURE__ */ React9__default.default.createElement(
5398
+ "button",
5399
+ {
5400
+ type: "button",
5401
+ className: `reservation-mode-button ${currentMode === "vrije_keuze" ? "active" : ""}`,
5402
+ onClick: () => handleSubSelection("vrije_keuze"),
5403
+ "aria-pressed": currentMode === "vrije_keuze"
5404
+ },
5405
+ t.modes.free
5406
+ ))), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode) && /* @__PURE__ */ React9__default.default.createElement("div", { className: "unlimited-mode-warning" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "warning-text" }, t.warnings?.unlimitedMode || (lang === "nl" ? "Let op: Bij onbeperkte boekingen wordt geen rekening gehouden met de maximale capaciteit van het restaurant. De maximale zitplaatslimiet kan worden overschreden." : "Warning: Unlimited bookings do not take into account the restaurant's maximum capacity. The maximum seating limit may be exceeded."))), /* @__PURE__ */ React9__default.default.createElement(ValueSelector_default, { value: formData.guests || guests2, onChange: handleGuestChange, error: errors.guests, setGuests }), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9__default.default.createElement(
5407
+ DateSelector_default,
5408
+ {
5409
+ guests: formData.guests,
5410
+ formData,
5411
+ handleChange,
5412
+ resetFormDataFields,
5413
+ restaurantData,
5414
+ reservations,
5415
+ startDate,
5416
+ onWeekChange: handleWeekChange,
5417
+ reservationMode: currentMode
4268
5418
  }
4269
- )), 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(
4270
- "input",
5419
+ ), isFinalMode && formData.date && /* @__PURE__ */ React9__default.default.createElement(
5420
+ TimeSelector_default,
4271
5421
  {
4272
- type: "time",
4273
- name: "time",
4274
- value: formData.time || "",
4275
- onChange: handleChange
5422
+ guests: formData.guests,
5423
+ formData,
5424
+ handleChange,
5425
+ field: { id: "time", label: t.fields.time },
5426
+ selectedDate: formData.date,
5427
+ setCurrentExpandedField: () => {
5428
+ },
5429
+ restaurantData,
5430
+ reservations,
5431
+ reservationMode: currentMode
4276
5432
  }
4277
- )), errors.time && /* @__PURE__ */ React4__default.default.createElement("span", { className: "error" }, errors.time)), seatSelectionEnabled && /* @__PURE__ */ React4__default.default.createElement("div", { className: "seat-selection" }, seatOptions.map((seat) => /* @__PURE__ */ React4__default.default.createElement(
5433
+ ), seatSelectionEnabled && /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-row", style: { marginTop: 12 } }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-mode-buttons" }, seatOptions.map((opt) => /* @__PURE__ */ React9__default.default.createElement(
4278
5434
  "button",
4279
5435
  {
4280
- key: seat,
5436
+ key: opt,
4281
5437
  type: "button",
4282
- className: formData.zitplaats === seat ? "active" : "",
4283
- onClick: () => handleSeatPick(seat)
5438
+ className: `reservation-mode-button ${formData.zitplaats === opt ? "active" : ""}`,
5439
+ onClick: () => handleSeatPick(opt),
5440
+ "aria-pressed": formData.zitplaats === opt
4284
5441
  },
4285
- seat
4286
- ))), isFetchingTables && /* @__PURE__ */ React4__default.default.createElement("p", null, "Calculating table availability..."), showTableSelector && /* @__PURE__ */ React4__default.default.createElement("div", { className: "available-tables" }, /* @__PURE__ */ React4__default.default.createElement("h4", null, "Available Tables (", availableTables.length, ")"), /* @__PURE__ */ React4__default.default.createElement("ul", null, availableTables.map((table) => /* @__PURE__ */ React4__default.default.createElement("li", { key: table.tableId }, "Table ", table.tableNumber, " - Capacity: ", table.capacity)))));
5442
+ opt
5443
+ ))), errors.zitplaats && /* @__PURE__ */ React9__default.default.createElement("small", { className: "error" }, errors.zitplaats)), showTableSelector && /* @__PURE__ */ React9__default.default.createElement(
5444
+ TableSelector_default,
5445
+ {
5446
+ availableTables,
5447
+ isFetching: isFetchingTables,
5448
+ formData,
5449
+ setFormData,
5450
+ handleChange
5451
+ }
5452
+ ));
4287
5453
  };
4288
5454
  var ReservationStepOne_default = ReservationStepOne;
4289
5455
 
@@ -4301,7 +5467,7 @@ var getSection = (translationsObj, sectionKey, fallbackLang = "nl") => {
4301
5467
  var magicAnimation_default = { v: "5.12.1", fr: 30, ip: 0, op: 530, w: 1024, h: 900, nm: "gr1", ddd: 0, assets: [], layers: [{ ddd: 0, ind: 1, ty: 4, nm: "Layer 6", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 25, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 145, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 265, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 385, s: [9] }, { t: 505, s: [0] }], ix: 10 }, p: { a: 0, k: [1206.514, -59.851, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 25, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 145, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 265, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 385, s: [134.764, 134.764, 100] }, { t: 505, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 150, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[446.031, 78.565], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], o: [[-474.322, -83.548], [0, 0], [0, 0], [0.57, 0.727], [0, 0], [-8.99, -11.449]], v: [[-95.525, 259.75], [-429.671, -292.588], [-219.085, -449.194], [448.196, 448.091], [449.016, 449.194], [448.196, 448.091]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.129411771894, 0.149019613862, 0.313725501299, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1535, st: 25, ct: 1, bm: 0 }, { ddd: 0, ind: 2, ty: 4, nm: "Layer 5", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 20, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 140, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 260, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 380, s: [9] }, { t: 500, s: [0] }], ix: 10 }, p: { a: 0, k: [1073.85, -30.391, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 20, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 140, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 260, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 380, s: [134.764, 134.764, 100] }, { t: 500, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 150, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[424.081, 79.754], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], o: [[-450.977, -84.811], [0, 0], [0, 0], [0.55, 0.7], [0, 0], [-8.65, -11.031]], v: [[-50.221, 245.909], [-467.951, -214.723], [-174.945, -432.62], [467.71, 431.558], [468.5, 432.62], [467.71, 431.558]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156875134, 0.843137264252, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1530, st: 20, ct: 1, bm: 0 }, { ddd: 0, ind: 3, ty: 4, nm: "Layer 4", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 15, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 135, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 255, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 375, s: [9] }, { t: 495, s: [0] }], ix: 10 }, p: { a: 0, k: [988.859, 75.079, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 15, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 135, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 255, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 375, s: [134.764, 134.764, 100] }, { t: 495, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 100, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 75, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-78.678, 155.686], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 195, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-97.842, 203.742], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 315, s: [{ i: [[253.734, 244.526], [0, 0], [0, 0], [123.76, -96.677]], o: [[-324.079, -312.318], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-129.581, 213.076], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 435, s: [{ i: [[226.573, 11.739], [0, 0], [0, 0], [123.76, -96.677]], o: [[-147.242, -7.629], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-215.336, 122.406], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { t: 529, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-78.678, 155.686], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.929411768913, 1, 0.482352942228, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1525, st: 15, ct: 1, bm: 0 }, { ddd: 0, ind: 4, ty: 4, nm: "Layer 3", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 10, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 130, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 250, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 370, s: [9] }, { t: 490, s: [0] }], ix: 10 }, p: { a: 0, k: [894.117, 84.677, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 10, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 130, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 250, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 370, s: [134.764, 134.764, 100] }, { t: 490, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 40, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 67, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 190, s: [{ i: [[303.862, 85.416], [0, 0], [0, 0], [92.214, -68.58]], o: [[-353.863, -99.472], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-114.955, 184.127], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 310, s: [{ i: [[66.949, 140.982], [0, 0], [0, 0], [92.213, -68.58]], o: [[-157.679, -332.04], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-182.308, 153.536], [-647.392, -141.284], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 430, s: [{ i: [[160.75, 51.563], [0, 0], [0, 0], [92.213, -68.58]], o: [[-350.011, -112.272], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-133.05, 149.658], [-420.434, -232.638], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { t: 524, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "st", c: { a: 0, k: [0.129411771894, 0.149019613862, 0.313725501299, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 8, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1520, st: 10, ct: 1, bm: 0 }, { ddd: 0, ind: 5, ty: 4, nm: "Layer 2", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 5, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 125, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 245, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 365, s: [9] }, { t: 485, s: [0] }], ix: 10 }, p: { a: 0, k: [894.117, 83.978, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 5, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 125, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 245, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 365, s: [134.764, 134.764, 100] }, { t: 485, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 62, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 185, s: [{ i: [[303.862, 85.416], [0, 0], [0, 0], [92.214, -68.58]], o: [[-353.863, -99.472], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-114.955, 184.127], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 305, s: [{ i: [[66.949, 140.982], [0, 0], [0, 0], [92.213, -68.58]], o: [[-157.679, -332.04], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-182.308, 153.536], [-647.392, -141.284], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 425, s: [{ i: [[160.75, 51.563], [0, 0], [0, 0], [92.213, -68.58]], o: [[-350.011, -112.272], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-133.05, 149.658], [-420.434, -232.638], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { t: 519, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.956862747669, 0.980392158031, 0.976470589638, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1515, st: 5, ct: 1, bm: 0 }, { ddd: 0, ind: 6, ty: 4, nm: "Layer 1", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 0, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 120, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 240, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 360, s: [9] }, { t: 480, s: [0] }], ix: 10 }, p: { a: 0, k: [895.851, 111.19, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 0, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 120, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 240, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 360, s: [134.764, 134.764, 100] }, { t: 480, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 200, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 57, s: [{ i: [[261.24, 94.803], [0, 0], [0, 0], [280.19, -208.366]], o: [[-261.24, -94.803], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-130.27, 227.181], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 180, s: [{ i: [[240.029, 117.135], [0, 0], [0, 0], [280.191, -208.366]], o: [[-249.757, -121.882], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-256.037, 109.609], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 300, s: [{ i: [[153.185, 80.344], [0, 0], [0, 0], [280.191, -208.366]], o: [[-246.114, -129.083], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-99.854, 269.938], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 420, s: [{ i: [[172.303, 15.256], [0, 0], [0, 0], [280.191, -208.366]], o: [[-418.35, -37.043], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-1.548, 216.055], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { t: 514, s: [{ i: [[261.24, 94.803], [0, 0], [0, 0], [280.19, -208.366]], o: [[-261.24, -94.803], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-130.27, 227.181], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156875134, 0.843137264252, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1510, st: 0, ct: 1, bm: 0 }], markers: [], props: {} };
4302
5468
 
4303
5469
  // src/components/FormField/translations.json
4304
- var translations_default = {
5470
+ var translations_default2 = {
4305
5471
  nl: {
4306
5472
  formField: {
4307
5473
  selectPlaceholder: "Selecteer een optie",
@@ -4352,14 +5518,14 @@ var FormField = ({
4352
5518
  onRightIconClick: onRightIconClick2,
4353
5519
  tooltipContent
4354
5520
  }) => {
4355
- const t = getSection(translations_default, "formField");
5521
+ const t = getSection(translations_default2, "formField");
4356
5522
  const selectPlaceholderText = selectPlaceholder || t.selectPlaceholder;
4357
- const [showTooltip, setShowTooltip] = React4.useState(false);
4358
- const tooltipRef = React4.useRef(null);
4359
- const timerRef = React4.useRef(null);
5523
+ const [showTooltip, setShowTooltip] = React9.useState(false);
5524
+ const tooltipRef = React9.useRef(null);
5525
+ const timerRef = React9.useRef(null);
4360
5526
  const RightIconComponent = rightIcon2;
4361
5527
  const Icon = icon;
4362
- React4.useEffect(() => {
5528
+ React9.useEffect(() => {
4363
5529
  const handleClickOutside = (e) => {
4364
5530
  if (tooltipRef.current && !tooltipRef.current.contains(e.target)) {
4365
5531
  if (timerRef.current) clearTimeout(timerRef.current);
@@ -4379,19 +5545,19 @@ var FormField = ({
4379
5545
  };
4380
5546
  const renderControl = () => {
4381
5547
  if (type === "select") {
4382
- 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)));
5548
+ return /* @__PURE__ */ React9__default.default.createElement("select", { ...baseControlProps }, /* @__PURE__ */ React9__default.default.createElement("option", { value: "" }, selectPlaceholderText), options.map((opt) => /* @__PURE__ */ React9__default.default.createElement("option", { key: opt.value, value: opt.value }, opt.label)));
4383
5549
  }
4384
5550
  if (type === "textarea")
4385
- return /* @__PURE__ */ React4__default.default.createElement("textarea", { ...baseControlProps, placeholder });
4386
- return /* @__PURE__ */ React4__default.default.createElement("input", { type, ...baseControlProps, placeholder });
5551
+ return /* @__PURE__ */ React9__default.default.createElement("textarea", { ...baseControlProps, placeholder });
5552
+ return /* @__PURE__ */ React9__default.default.createElement("input", { type, ...baseControlProps, placeholder });
4387
5553
  };
4388
- return /* @__PURE__ */ React4__default.default.createElement(
5554
+ return /* @__PURE__ */ React9__default.default.createElement(
4389
5555
  "div",
4390
5556
  {
4391
5557
  className: `form-group ${halfWidth ? "half-width" : ""}`,
4392
5558
  style: { position: "relative" }
4393
5559
  },
4394
- /* @__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(
5560
+ /* @__PURE__ */ React9__default.default.createElement("div", { className: "input-container" }, Icon && /* @__PURE__ */ React9__default.default.createElement(Icon, { className: "input-icon" }), renderControl(), RightIconComponent && /* @__PURE__ */ React9__default.default.createElement(
4395
5561
  "div",
4396
5562
  {
4397
5563
  className: "magic-wand-container",
@@ -4411,14 +5577,14 @@ var FormField = ({
4411
5577
  cursor: "pointer"
4412
5578
  }
4413
5579
  },
4414
- /* @__PURE__ */ React4__default.default.createElement(
5580
+ /* @__PURE__ */ React9__default.default.createElement(
4415
5581
  RightIconComponent,
4416
5582
  {
4417
5583
  className: "magic-wand-icon",
4418
5584
  style: { color: "#B567C2" }
4419
5585
  }
4420
5586
  ),
4421
- showTooltip && tooltipContent && /* @__PURE__ */ React4__default.default.createElement(
5587
+ showTooltip && tooltipContent && /* @__PURE__ */ React9__default.default.createElement(
4422
5588
  "div",
4423
5589
  {
4424
5590
  ref: tooltipRef,
@@ -4438,7 +5604,7 @@ var FormField = ({
4438
5604
  overflow: "hidden"
4439
5605
  }
4440
5606
  },
4441
- /* @__PURE__ */ React4__default.default.createElement(
5607
+ /* @__PURE__ */ React9__default.default.createElement(
4442
5608
  "div",
4443
5609
  {
4444
5610
  className: "lottie-container",
@@ -4453,7 +5619,7 @@ var FormField = ({
4453
5619
  zIndex: 1
4454
5620
  }
4455
5621
  },
4456
- /* @__PURE__ */ React4__default.default.createElement(
5622
+ /* @__PURE__ */ React9__default.default.createElement(
4457
5623
  Lottie__default.default,
4458
5624
  {
4459
5625
  animationData: magicAnimation_default,
@@ -4462,7 +5628,7 @@ var FormField = ({
4462
5628
  }
4463
5629
  )
4464
5630
  ),
4465
- /* @__PURE__ */ React4__default.default.createElement("div", { style: { position: "relative", zIndex: 2, padding: "12px 20px" } }, /* @__PURE__ */ React4__default.default.createElement(
5631
+ /* @__PURE__ */ React9__default.default.createElement("div", { style: { position: "relative", zIndex: 2, padding: "12px 20px" } }, /* @__PURE__ */ React9__default.default.createElement(
4466
5632
  "div",
4467
5633
  {
4468
5634
  style: {
@@ -4472,7 +5638,7 @@ var FormField = ({
4472
5638
  }
4473
5639
  },
4474
5640
  tooltipContent
4475
- ), /* @__PURE__ */ React4__default.default.createElement(
5641
+ ), /* @__PURE__ */ React9__default.default.createElement(
4476
5642
  "div",
4477
5643
  {
4478
5644
  style: {
@@ -4483,7 +5649,7 @@ var FormField = ({
4483
5649
  }
4484
5650
  },
4485
5651
  t.tooltip?.confirm
4486
- ), /* @__PURE__ */ React4__default.default.createElement(
5652
+ ), /* @__PURE__ */ React9__default.default.createElement(
4487
5653
  "div",
4488
5654
  {
4489
5655
  style: {
@@ -4497,71 +5663,17 @@ var FormField = ({
4497
5663
  ))
4498
5664
  )
4499
5665
  )),
4500
- error && /* @__PURE__ */ React4__default.default.createElement("p", { className: "form-error" }, error)
5666
+ error && /* @__PURE__ */ React9__default.default.createElement("p", { className: "form-error" }, error)
4501
5667
  );
4502
5668
  };
4503
5669
  var FormField_default = FormField;
4504
5670
 
4505
5671
  // src/components/ReservationStepTwo/ReservationStepTwo.js
4506
- var import_moment = __toESM(require_moment());
5672
+ var import_moment3 = __toESM(require_moment());
4507
5673
  __toESM(require_nl());
4508
- var useApi = () => {
4509
- const getJwtToken = React4.useCallback(() => {
4510
- return localStorage.getItem("accessToken");
4511
- }, []);
4512
- const get = React4.useCallback(
4513
- (endpoint, config = {}) => {
4514
- const { params, ...axiosConfig } = config;
4515
- const token = getJwtToken();
4516
- return axios__default.default.get(endpoint, {
4517
- ...axiosConfig,
4518
- params,
4519
- headers: {
4520
- ...axiosConfig.headers,
4521
- ...token ? { Authorization: `Bearer ${token}` } : {}
4522
- }
4523
- }).then((response) => response.data).catch((error) => {
4524
- console.error("Error fetching data:", error);
4525
- throw error;
4526
- });
4527
- },
4528
- [getJwtToken]
4529
- );
4530
- const mutate = React4.useCallback(
4531
- (method, endpoint, data = null, config = {}) => {
4532
- const token = getJwtToken();
4533
- return axios__default.default({
4534
- method,
4535
- url: endpoint,
4536
- data,
4537
- ...config,
4538
- headers: {
4539
- ...config.headers,
4540
- ...token ? { Authorization: `Bearer ${token}` } : {}
4541
- }
4542
- }).then((response) => response.data).catch((error) => {
4543
- console.error(`Error with ${method} request:`, error);
4544
- throw error;
4545
- });
4546
- },
4547
- [getJwtToken]
4548
- );
4549
- const apiMethods = React4.useMemo(
4550
- () => ({
4551
- get,
4552
- post: (endpoint, data, config) => mutate("POST", endpoint, data, config),
4553
- put: (endpoint, data, config) => mutate("PUT", endpoint, data, config),
4554
- patch: (endpoint, data, config) => mutate("PATCH", endpoint, data, config),
4555
- delete: (endpoint, config) => mutate("DELETE", endpoint, null, config)
4556
- }),
4557
- [get, mutate]
4558
- );
4559
- return apiMethods;
4560
- };
4561
- var useApi_default = useApi;
4562
5674
 
4563
5675
  // src/components/ReservationStepTwo/translations.json
4564
- var translations_default2 = {
5676
+ var translations_default3 = {
4565
5677
  nl: {
4566
5678
  reservationStepTwoFiltering: {
4567
5679
  labels: {
@@ -4696,25 +5808,25 @@ var ReservationStepTwo = ({
4696
5808
  menuData
4697
5809
  }) => {
4698
5810
  const lang = getPreferredLanguage();
4699
- const t = getSection(translations_default2, "reservationStepTwoFiltering");
4700
- const [availableMenus, setAvailableMenus] = React4.useState([]);
4701
- const [hasAutofilled, setHasAutofilled] = React4.useState(false);
4702
- const [pendingAutofill, setPendingAutofill] = React4.useState(null);
5811
+ const t = getSection(translations_default3, "reservationStepTwoFiltering");
5812
+ const [availableMenus, setAvailableMenus] = React9.useState([]);
5813
+ const [hasAutofilled, setHasAutofilled] = React9.useState(false);
5814
+ const [pendingAutofill, setPendingAutofill] = React9.useState(null);
4703
5815
  const api = useApi_default();
4704
- React4.useEffect(() => {
4705
- import_moment.default.locale(lang);
5816
+ React9.useEffect(() => {
5817
+ import_moment3.default.locale(lang);
4706
5818
  if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
4707
- const sel = (0, import_moment.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
5819
+ const sel = (0, import_moment3.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
4708
5820
  const filtered = menuData.filter((menu) => {
4709
5821
  const inDate = sel.isBetween(
4710
- (0, import_moment.default)(menu.startDate, "YYYY-MM-DD"),
4711
- (0, import_moment.default)(menu.endDate, "YYYY-MM-DD"),
5822
+ (0, import_moment3.default)(menu.startDate, "YYYY-MM-DD"),
5823
+ (0, import_moment3.default)(menu.endDate, "YYYY-MM-DD"),
4712
5824
  "day",
4713
5825
  "[]"
4714
5826
  );
4715
- const inTime = (0, import_moment.default)(formData.time, "HH:mm").isBetween(
4716
- (0, import_moment.default)(menu.startHour, "HH:mm"),
4717
- (0, import_moment.default)(menu.endHour, "HH:mm"),
5827
+ const inTime = (0, import_moment3.default)(formData.time, "HH:mm").isBetween(
5828
+ (0, import_moment3.default)(menu.startHour, "HH:mm"),
5829
+ (0, import_moment3.default)(menu.endHour, "HH:mm"),
4718
5830
  "minute",
4719
5831
  "[]"
4720
5832
  );
@@ -4747,10 +5859,10 @@ var ReservationStepTwo = ({
4747
5859
  console.error("Autofill error");
4748
5860
  }
4749
5861
  };
4750
- React4.useEffect(() => {
5862
+ React9.useEffect(() => {
4751
5863
  tryAutofill();
4752
5864
  }, [formData.email, formData.phone]);
4753
- const magicProps = React4.useMemo(() => {
5865
+ const magicProps = React9.useMemo(() => {
4754
5866
  if (!pendingAutofill)
4755
5867
  return { email: {}, phone: {} };
4756
5868
  const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
@@ -4762,15 +5874,15 @@ var ReservationStepTwo = ({
4762
5874
  return {
4763
5875
  email: emailActive ? {
4764
5876
  ...common,
4765
- 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))
5877
+ tooltipContent: /* @__PURE__ */ React9__default.default.createElement("div", null, /* @__PURE__ */ React9__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.phone))
4766
5878
  } : {},
4767
5879
  phone: phoneActive ? {
4768
5880
  ...common,
4769
- 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))
5881
+ tooltipContent: /* @__PURE__ */ React9__default.default.createElement("div", null, /* @__PURE__ */ React9__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.email))
4770
5882
  } : {}
4771
5883
  };
4772
5884
  }, [pendingAutofill, formData.email, formData.phone, t.magic?.title]);
4773
- 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(
5885
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-step-two" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "account-manage-form" }, availableMenus.length > 0 && /* @__PURE__ */ React9__default.default.createElement(
4774
5886
  FormField_default,
4775
5887
  {
4776
5888
  label: t.labels?.menu || "Menu",
@@ -4781,7 +5893,7 @@ var ReservationStepTwo = ({
4781
5893
  onChange: handleChange,
4782
5894
  error: errors.menu
4783
5895
  }
4784
- ), /* @__PURE__ */ React4__default.default.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React4__default.default.createElement(
5896
+ ), /* @__PURE__ */ React9__default.default.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React9__default.default.createElement(
4785
5897
  FormField_default,
4786
5898
  {
4787
5899
  label: t.labels?.firstName || "Voornaam",
@@ -4792,7 +5904,7 @@ var ReservationStepTwo = ({
4792
5904
  error: errors.firstName,
4793
5905
  icon: fa.FaUser
4794
5906
  }
4795
- ), /* @__PURE__ */ React4__default.default.createElement(
5907
+ ), /* @__PURE__ */ React9__default.default.createElement(
4796
5908
  FormField_default,
4797
5909
  {
4798
5910
  label: t.labels?.lastName || "Achternaam",
@@ -4803,7 +5915,7 @@ var ReservationStepTwo = ({
4803
5915
  error: errors.lastName,
4804
5916
  icon: fa.FaUser
4805
5917
  }
4806
- )), /* @__PURE__ */ React4__default.default.createElement(
5918
+ )), /* @__PURE__ */ React9__default.default.createElement(
4807
5919
  FormField_default,
4808
5920
  {
4809
5921
  label: t.labels?.email || "Email",
@@ -4817,7 +5929,7 @@ var ReservationStepTwo = ({
4817
5929
  icon: fa.FaEnvelope,
4818
5930
  ...magicProps.email
4819
5931
  }
4820
- ), /* @__PURE__ */ React4__default.default.createElement(
5932
+ ), /* @__PURE__ */ React9__default.default.createElement(
4821
5933
  FormField_default,
4822
5934
  {
4823
5935
  label: t.labels?.phone || "Telefoon",
@@ -4831,7 +5943,7 @@ var ReservationStepTwo = ({
4831
5943
  icon: fa.FaPhone,
4832
5944
  ...magicProps.phone
4833
5945
  }
4834
- ), /* @__PURE__ */ React4__default.default.createElement(
5946
+ ), /* @__PURE__ */ React9__default.default.createElement(
4835
5947
  FormField_default,
4836
5948
  {
4837
5949
  label: t.labels?.extraInfo || "Extra info",
@@ -4848,7 +5960,7 @@ var ReservationStepTwo = ({
4848
5960
  var ReservationStepTwo_default = ReservationStepTwo;
4849
5961
 
4850
5962
  // src/components/ReservationSummary/translations.json
4851
- var translations_default3 = {
5963
+ var translations_default4 = {
4852
5964
  nl: {
4853
5965
  reservationStepTwoFiltering: {
4854
5966
  labels: {
@@ -4979,13 +6091,13 @@ var ReservationSummary = ({
4979
6091
  formData,
4980
6092
  onNewReservation
4981
6093
  }) => {
4982
- const t = getSection(translations_default3, "reservationSummary");
4983
- 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));
6094
+ const t = getSection(translations_default4, "reservationSummary");
6095
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-summary" }, /* @__PURE__ */ React9__default.default.createElement("ul", { className: "reservation-details" }, /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.title)), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.guests, ":"), " ", formData.guests), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.date, ":"), " ", formData.date), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.time, ":"), " ", formData.time), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.firstName, ":"), " ", formData.firstName), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.lastName, ":"), " ", formData.lastName), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.email, ":"), " ", formData.email), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.phone, ":"), " ", formData.phone), formData.menu && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.menu, ":"), " ", formData.menu), formData.personeel && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.staff, ":"), " ", formData.personeel), formData.giftcard && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.giftcard, ":"), " ", formData.giftcard), formData.extraInfo && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.extraInfo, ":"), " ", formData.extraInfo), formData.zitplaats && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.seatPlace, ":"), " ", formData.zitplaats)), /* @__PURE__ */ React9__default.default.createElement("button", { className: "button-style-3", onClick: onNewReservation }, t.newReservationButton));
4984
6096
  };
4985
6097
  var ReservationSummary_default = ReservationSummary;
4986
6098
 
4987
6099
  // src/components/GiftcardSelection/translations.json
4988
- var translations_default4 = {
6100
+ var translations_default5 = {
4989
6101
  nl: {
4990
6102
  zitplaatsSelection: {
4991
6103
  labels: { seating: "Zitplaats" },
@@ -5028,9 +6140,9 @@ var GiftcardSelection = ({
5028
6140
  handleChange,
5029
6141
  resetFormDataFields
5030
6142
  }) => {
5031
- const t = getSection(translations_default4, "giftcardSelection");
5032
- const [availableGiftcards, setAvailableGiftcards] = React4.useState([]);
5033
- React4.useEffect(() => {
6143
+ const t = getSection(translations_default5, "giftcardSelection");
6144
+ const [availableGiftcards, setAvailableGiftcards] = React9.useState([]);
6145
+ React9.useEffect(() => {
5034
6146
  if (!restaurantData) return;
5035
6147
  const periods = ["breakfast", "lunch", "dinner"];
5036
6148
  const cards = /* @__PURE__ */ new Set();
@@ -5050,7 +6162,7 @@ var GiftcardSelection = ({
5050
6162
  handleChange({ target: { name: "giftcard", value: e.target.value } });
5051
6163
  resetFormDataFields(["date", "time"]);
5052
6164
  };
5053
- return /* @__PURE__ */ React4__default.default.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React4__default.default.createElement(
6165
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React9__default.default.createElement(
5054
6166
  FormField_default,
5055
6167
  {
5056
6168
  label: t.labels?.giftcard || "Giftcard",
@@ -5066,7 +6178,7 @@ var GiftcardSelection = ({
5066
6178
  var GiftcardSelection_default = GiftcardSelection;
5067
6179
 
5068
6180
  // src/components/ZitplaatsSelection/translations.json
5069
- var translations_default5 = {
6181
+ var translations_default6 = {
5070
6182
  nl: {
5071
6183
  zitplaatsSelection: {
5072
6184
  labels: { seating: "Zitplaats" },
@@ -5109,9 +6221,9 @@ var ZitplaatsSelection = ({
5109
6221
  handleChange,
5110
6222
  resetFormDataFields
5111
6223
  }) => {
5112
- const [availableZitplaatsen, setAvailableZitplaatsen] = React4.useState([]);
5113
- const t = getSection(translations_default5, "zitplaatsSelection");
5114
- React4.useEffect(() => {
6224
+ const [availableZitplaatsen, setAvailableZitplaatsen] = React9.useState([]);
6225
+ const t = getSection(translations_default6, "zitplaatsSelection");
6226
+ React9.useEffect(() => {
5115
6227
  if (!restaurantData?.floors || !Array.isArray(restaurantData.floors)) return;
5116
6228
  const set = /* @__PURE__ */ new Set();
5117
6229
  restaurantData.floors.forEach(
@@ -5127,7 +6239,7 @@ var ZitplaatsSelection = ({
5127
6239
  const tableSettings = restaurantData?.["table-settings"] || {};
5128
6240
  const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
5129
6241
  if (!isTableAssignmentEnabled || availableZitplaatsen.length === 0) return null;
5130
- 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(
6242
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: "zitplaats-selection" }, /* @__PURE__ */ React9__default.default.createElement("label", { htmlFor: "zitplaats", className: "form-label" }, t.labels?.seating || "Zitplaats"), /* @__PURE__ */ React9__default.default.createElement("div", { className: "input-container select-field" }, /* @__PURE__ */ React9__default.default.createElement(
5131
6243
  "select",
5132
6244
  {
5133
6245
  id: "zitplaats",
@@ -5135,8 +6247,8 @@ var ZitplaatsSelection = ({
5135
6247
  value: formData.zitplaats || "",
5136
6248
  onChange: handleZitplaatsChange
5137
6249
  },
5138
- /* @__PURE__ */ React4__default.default.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
5139
- availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React4__default.default.createElement(
6250
+ /* @__PURE__ */ React9__default.default.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
6251
+ availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React9__default.default.createElement(
5140
6252
  "option",
5141
6253
  {
5142
6254
  key: zitplaats,
@@ -5189,20 +6301,20 @@ var ReservationSidebar = ({
5189
6301
  onNewReservation,
5190
6302
  apiBaseDomain
5191
6303
  }) => {
5192
- React4.useEffect(() => {
6304
+ React9.useEffect(() => {
5193
6305
  if (apiBaseDomain && !window.baseDomain) {
5194
6306
  window.baseDomain = apiBaseDomain;
5195
6307
  }
5196
6308
  }, [apiBaseDomain]);
5197
6309
  const api = useApi_default();
5198
- const [timeblocks, setTimeblocks] = React4.useState([]);
5199
- const [loadingTimeblocks, setLoadingTimeblocks] = React4.useState(false);
5200
- const [timeblocksError, setTimeblocksError] = React4.useState(null);
5201
- const [menuData, setMenuData] = React4.useState([]);
5202
- const [restaurantData, setRestaurantData] = React4.useState({});
5203
- const [availablePersoneel, setAvailablePersoneel] = React4.useState([]);
6310
+ const [timeblocks, setTimeblocks] = React9.useState([]);
6311
+ const [loadingTimeblocks, setLoadingTimeblocks] = React9.useState(false);
6312
+ const [timeblocksError, setTimeblocksError] = React9.useState(null);
6313
+ const [menuData, setMenuData] = React9.useState([]);
6314
+ const [restaurantData, setRestaurantData] = React9.useState({});
6315
+ const [availablePersoneel, setAvailablePersoneel] = React9.useState([]);
5204
6316
  const t = getSection(translationsReservationSidebar_default, "reservationSidebar");
5205
- const resetFormDataFields = React4.useCallback(
6317
+ const resetFormDataFields = React9.useCallback(
5206
6318
  (fieldsToReset) => {
5207
6319
  setFormData((prev) => {
5208
6320
  const next = { ...prev };
@@ -5214,7 +6326,7 @@ var ReservationSidebar = ({
5214
6326
  },
5215
6327
  [setFormData]
5216
6328
  );
5217
- React4.useEffect(() => {
6329
+ React9.useEffect(() => {
5218
6330
  if (!isOpen) return;
5219
6331
  setLoadingTimeblocks(true);
5220
6332
  const fetchData = async () => {
@@ -5245,7 +6357,7 @@ var ReservationSidebar = ({
5245
6357
  };
5246
6358
  fetchData();
5247
6359
  }, [isOpen, api]);
5248
- const handleNewReservationClick = React4.useCallback(() => {
6360
+ const handleNewReservationClick = React9.useCallback(() => {
5249
6361
  setFormData({
5250
6362
  guests,
5251
6363
  date: "",
@@ -5266,21 +6378,21 @@ var ReservationSidebar = ({
5266
6378
  onNewReservation();
5267
6379
  }, [onNewReservation, setFormData]);
5268
6380
  const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
5269
- 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(
6381
+ return /* @__PURE__ */ React9__default.default.createElement("div", { className: `reservation-sidebar-component ${isOpen ? "open" : ""}` }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-sidebar-content" }, /* @__PURE__ */ React9__default.default.createElement("h2", { className: "admin-title" }, "Admin Reservatie"), /* @__PURE__ */ React9__default.default.createElement(
5270
6382
  "button",
5271
6383
  {
5272
6384
  className: "close-sidebar-button",
5273
6385
  onClick: onClose,
5274
6386
  "aria-label": "Sluiten"
5275
6387
  },
5276
- /* @__PURE__ */ React4__default.default.createElement(fa.FaTimes, { size: 20, color: "#000" })
5277
- ), reservationSubmitted ? /* @__PURE__ */ React4__default.default.createElement(
6388
+ /* @__PURE__ */ React9__default.default.createElement(fa.FaTimes, { size: 20, color: "#000" })
6389
+ ), reservationSubmitted ? /* @__PURE__ */ React9__default.default.createElement(
5278
6390
  ReservationSummary_default,
5279
6391
  {
5280
6392
  formData,
5281
6393
  onNewReservation: handleNewReservationClick
5282
6394
  }
5283
- ) : /* @__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(
6395
+ ) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, restaurantData && Object.keys(restaurantData).length > 0 && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-giftcard" }, /* @__PURE__ */ React9__default.default.createElement(
5284
6396
  GiftcardSelection_default,
5285
6397
  {
5286
6398
  restaurantData,
@@ -5288,7 +6400,7 @@ var ReservationSidebar = ({
5288
6400
  handleChange,
5289
6401
  resetFormDataFields
5290
6402
  }
5291
- )), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React4__default.default.createElement(
6403
+ )), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React9__default.default.createElement(
5292
6404
  ZitplaatsSelection_default,
5293
6405
  {
5294
6406
  restaurantData,
@@ -5296,7 +6408,7 @@ var ReservationSidebar = ({
5296
6408
  handleChange,
5297
6409
  resetFormDataFields
5298
6410
  }
5299
- )), availablePersoneel.length > 0 && /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React4__default.default.createElement(
6411
+ )), availablePersoneel.length > 0 && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React9__default.default.createElement(
5300
6412
  FormField_default,
5301
6413
  {
5302
6414
  label: "",
@@ -5311,7 +6423,7 @@ var ReservationSidebar = ({
5311
6423
  error: errors.personeel,
5312
6424
  selectPlaceholder: "Toewijzen aan persoon"
5313
6425
  }
5314
- )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React4__default.default.createElement(
6426
+ )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React9__default.default.createElement(
5315
6427
  ReservationStepOne_default,
5316
6428
  {
5317
6429
  formData,
@@ -5323,7 +6435,7 @@ var ReservationSidebar = ({
5323
6435
  timeblocksError,
5324
6436
  restaurantData
5325
6437
  }
5326
- )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React4__default.default.createElement(
6438
+ )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React9__default.default.createElement(
5327
6439
  ReservationStepTwo_default,
5328
6440
  {
5329
6441
  formData,
@@ -5333,7 +6445,7 @@ var ReservationSidebar = ({
5333
6445
  isSubmitting,
5334
6446
  menuData
5335
6447
  }
5336
- )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React4__default.default.createElement(
6448
+ )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React9__default.default.createElement(
5337
6449
  "button",
5338
6450
  {
5339
6451
  type: "button",