@bookinglab/booking-ui-react 1.12.0 → 1.12.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.
- package/dist/index.js +211 -180
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +130 -103
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,129 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
|
|
6
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
9
|
+
|
|
6
10
|
var __defProp = Object.defineProperty;
|
|
7
11
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
12
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
9
13
|
var cx = (...classes) => classes.filter(Boolean).join(" ");
|
|
14
|
+
function DateInputGroup({
|
|
15
|
+
question,
|
|
16
|
+
value,
|
|
17
|
+
onChange,
|
|
18
|
+
inputId,
|
|
19
|
+
hasError,
|
|
20
|
+
errorId,
|
|
21
|
+
fieldsetCls,
|
|
22
|
+
legendCls,
|
|
23
|
+
groupCls,
|
|
24
|
+
itemCls,
|
|
25
|
+
sublabelCls,
|
|
26
|
+
dateInputCls,
|
|
27
|
+
renderHelpText,
|
|
28
|
+
renderError
|
|
29
|
+
}) {
|
|
30
|
+
const parseValue = (raw) => {
|
|
31
|
+
const m = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
32
|
+
if (!m) return { day: "", month: "", year: "" };
|
|
33
|
+
return { year: m[1], month: String(Number(m[2])), day: String(Number(m[3])) };
|
|
34
|
+
};
|
|
35
|
+
const [parts, setParts] = React.useState(() => parseValue(value));
|
|
36
|
+
const lastEmittedRef = React__default.default.useRef(value);
|
|
37
|
+
React.useEffect(() => {
|
|
38
|
+
if (value !== lastEmittedRef.current) {
|
|
39
|
+
setParts(parseValue(value));
|
|
40
|
+
lastEmittedRef.current = value;
|
|
41
|
+
}
|
|
42
|
+
}, [value]);
|
|
43
|
+
const buildValue = (d, m, y) => {
|
|
44
|
+
if (!/^\d{1,2}$/.test(d) || !/^\d{1,2}$/.test(m) || !/^\d{4}$/.test(y)) return "";
|
|
45
|
+
const dn = Number(d), mn = Number(m), yn = Number(y);
|
|
46
|
+
const date = new Date(yn, mn - 1, dn);
|
|
47
|
+
if (date.getFullYear() !== yn || date.getMonth() !== mn - 1 || date.getDate() !== dn) return "";
|
|
48
|
+
return `${String(yn).padStart(4, "0")}-${String(mn).padStart(2, "0")}-${String(dn).padStart(2, "0")}`;
|
|
49
|
+
};
|
|
50
|
+
const handleSubChange = (part, v) => {
|
|
51
|
+
const sanitized = v.replace(/[^\d]/g, "");
|
|
52
|
+
const max = part === "year" ? 4 : 2;
|
|
53
|
+
const next = { ...parts, [part]: sanitized.slice(0, max) };
|
|
54
|
+
setParts(next);
|
|
55
|
+
const combined = buildValue(next.day, next.month, next.year);
|
|
56
|
+
lastEmittedRef.current = combined;
|
|
57
|
+
onChange(combined);
|
|
58
|
+
};
|
|
59
|
+
const dayId = `${inputId}-day`;
|
|
60
|
+
const monthId = `${inputId}-month`;
|
|
61
|
+
const yearId = `${inputId}-year`;
|
|
62
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: fieldsetCls, "aria-describedby": hasError ? errorId : void 0, children: [
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsxs("legend", { className: legendCls, children: [
|
|
64
|
+
question.name,
|
|
65
|
+
question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
|
|
66
|
+
] }),
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupCls, role: "group", children: [
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
"input",
|
|
72
|
+
{
|
|
73
|
+
id: dayId,
|
|
74
|
+
type: "text",
|
|
75
|
+
inputMode: "numeric",
|
|
76
|
+
pattern: "[0-9]*",
|
|
77
|
+
maxLength: 2,
|
|
78
|
+
value: parts.day,
|
|
79
|
+
onChange: (e) => handleSubChange("day", e.target.value),
|
|
80
|
+
className: cx(dateInputCls, "w-16"),
|
|
81
|
+
"aria-invalid": hasError ? true : void 0,
|
|
82
|
+
"aria-required": question.required || void 0
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
87
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: monthId, className: sublabelCls, children: "Month" }),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
89
|
+
"input",
|
|
90
|
+
{
|
|
91
|
+
id: monthId,
|
|
92
|
+
type: "text",
|
|
93
|
+
inputMode: "numeric",
|
|
94
|
+
pattern: "[0-9]*",
|
|
95
|
+
maxLength: 2,
|
|
96
|
+
value: parts.month,
|
|
97
|
+
onChange: (e) => handleSubChange("month", e.target.value),
|
|
98
|
+
className: cx(dateInputCls, "w-16"),
|
|
99
|
+
"aria-invalid": hasError ? true : void 0,
|
|
100
|
+
"aria-required": question.required || void 0
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
] }),
|
|
104
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: yearId, className: sublabelCls, children: "Year" }),
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
"input",
|
|
108
|
+
{
|
|
109
|
+
id: yearId,
|
|
110
|
+
type: "text",
|
|
111
|
+
inputMode: "numeric",
|
|
112
|
+
pattern: "[0-9]*",
|
|
113
|
+
maxLength: 4,
|
|
114
|
+
value: parts.year,
|
|
115
|
+
onChange: (e) => handleSubChange("year", e.target.value),
|
|
116
|
+
className: cx(dateInputCls, "w-24"),
|
|
117
|
+
"aria-invalid": hasError ? true : void 0,
|
|
118
|
+
"aria-required": question.required || void 0
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
] })
|
|
122
|
+
] }),
|
|
123
|
+
renderHelpText(),
|
|
124
|
+
renderError()
|
|
125
|
+
] });
|
|
126
|
+
}
|
|
10
127
|
function FormField({
|
|
11
128
|
question,
|
|
12
129
|
value,
|
|
@@ -150,30 +267,6 @@ function FormField({
|
|
|
150
267
|
renderError()
|
|
151
268
|
] });
|
|
152
269
|
case "date": {
|
|
153
|
-
const raw = typeof value === "string" ? value : "";
|
|
154
|
-
const match2 = raw.match(/^(\d{0,4})-?(\d{0,2})-?(\d{0,2})$/);
|
|
155
|
-
const yearPart = match2?.[1] ?? "";
|
|
156
|
-
const monthPart = match2?.[2] ? String(Number(match2[2])) : "";
|
|
157
|
-
const dayPart = match2?.[3] ? String(Number(match2[3])) : "";
|
|
158
|
-
const dayId = `${inputId}-day`;
|
|
159
|
-
const monthId = `${inputId}-month`;
|
|
160
|
-
const yearId = `${inputId}-year`;
|
|
161
|
-
const buildValue = (d, m, y) => {
|
|
162
|
-
const dt = d.trim();
|
|
163
|
-
const mt = m.trim();
|
|
164
|
-
const yt = y.trim();
|
|
165
|
-
if (!dt && !mt && !yt) return "";
|
|
166
|
-
if (/^\d{1,2}$/.test(dt) && /^\d{1,2}$/.test(mt) && /^\d{4}$/.test(yt)) {
|
|
167
|
-
const dn = Number(dt);
|
|
168
|
-
const mn = Number(mt);
|
|
169
|
-
const yn = Number(yt);
|
|
170
|
-
const date = new Date(yn, mn - 1, dn);
|
|
171
|
-
if (date.getFullYear() === yn && date.getMonth() === mn - 1 && date.getDate() === dn) {
|
|
172
|
-
return `${String(yn).padStart(4, "0")}-${String(mn).padStart(2, "0")}-${String(dn).padStart(2, "0")}`;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
return "";
|
|
176
|
-
};
|
|
177
270
|
const dateInputBase = classNames?.dateInput ?? classNames?.input ?? defaultInput;
|
|
178
271
|
const dateInputCls = hasError ? cx(dateInputBase, classNames?.inputError ?? defaultInputError) : dateInputBase;
|
|
179
272
|
const sublabelCls = classNames?.dateInputLabel ?? "block text-xs font-medium mb-1 text-gray-700";
|
|
@@ -181,85 +274,23 @@ function FormField({
|
|
|
181
274
|
const groupCls = classNames?.dateInputGroup ?? "flex flex-row gap-3 items-end";
|
|
182
275
|
const legendCls = classNames?.dateLegend ?? labelClasses;
|
|
183
276
|
const fieldsetCls = classNames?.dateFieldset ?? (classNames?.fieldWrapper ?? defaultFieldWrapper);
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
const next = {
|
|
187
|
-
day: part === "day" ? sanitized : dayPart,
|
|
188
|
-
month: part === "month" ? sanitized : monthPart,
|
|
189
|
-
year: part === "year" ? sanitized : yearPart
|
|
190
|
-
};
|
|
191
|
-
const combined = buildValue(next.day, next.month, next.year);
|
|
192
|
-
onChange(combined);
|
|
193
|
-
};
|
|
194
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
195
|
-
"fieldset",
|
|
277
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
278
|
+
DateInputGroup,
|
|
196
279
|
{
|
|
197
|
-
|
|
198
|
-
"
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
type: "text",
|
|
212
|
-
inputMode: "numeric",
|
|
213
|
-
pattern: "[0-9]*",
|
|
214
|
-
maxLength: 2,
|
|
215
|
-
value: dayPart,
|
|
216
|
-
onChange: (e) => handleSubChange("day", e.target.value),
|
|
217
|
-
className: cx(dateInputCls, "w-16"),
|
|
218
|
-
"aria-invalid": hasError ? true : void 0,
|
|
219
|
-
"aria-required": question.required || void 0
|
|
220
|
-
}
|
|
221
|
-
)
|
|
222
|
-
] }),
|
|
223
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
224
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: monthId, className: sublabelCls, children: "Month" }),
|
|
225
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
226
|
-
"input",
|
|
227
|
-
{
|
|
228
|
-
id: monthId,
|
|
229
|
-
type: "text",
|
|
230
|
-
inputMode: "numeric",
|
|
231
|
-
pattern: "[0-9]*",
|
|
232
|
-
maxLength: 2,
|
|
233
|
-
value: monthPart,
|
|
234
|
-
onChange: (e) => handleSubChange("month", e.target.value),
|
|
235
|
-
className: cx(dateInputCls, "w-16"),
|
|
236
|
-
"aria-invalid": hasError ? true : void 0,
|
|
237
|
-
"aria-required": question.required || void 0
|
|
238
|
-
}
|
|
239
|
-
)
|
|
240
|
-
] }),
|
|
241
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
|
|
242
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: yearId, className: sublabelCls, children: "Year" }),
|
|
243
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
244
|
-
"input",
|
|
245
|
-
{
|
|
246
|
-
id: yearId,
|
|
247
|
-
type: "text",
|
|
248
|
-
inputMode: "numeric",
|
|
249
|
-
pattern: "[0-9]*",
|
|
250
|
-
maxLength: 4,
|
|
251
|
-
value: yearPart,
|
|
252
|
-
onChange: (e) => handleSubChange("year", e.target.value),
|
|
253
|
-
className: cx(dateInputCls, "w-24"),
|
|
254
|
-
"aria-invalid": hasError ? true : void 0,
|
|
255
|
-
"aria-required": question.required || void 0
|
|
256
|
-
}
|
|
257
|
-
)
|
|
258
|
-
] })
|
|
259
|
-
] }),
|
|
260
|
-
renderHelpText(),
|
|
261
|
-
renderError()
|
|
262
|
-
]
|
|
280
|
+
question,
|
|
281
|
+
value: typeof value === "string" ? value : "",
|
|
282
|
+
onChange,
|
|
283
|
+
inputId,
|
|
284
|
+
hasError,
|
|
285
|
+
errorId,
|
|
286
|
+
fieldsetCls,
|
|
287
|
+
legendCls,
|
|
288
|
+
groupCls,
|
|
289
|
+
itemCls,
|
|
290
|
+
sublabelCls,
|
|
291
|
+
dateInputCls,
|
|
292
|
+
renderHelpText,
|
|
293
|
+
renderError
|
|
263
294
|
}
|
|
264
295
|
);
|
|
265
296
|
}
|
|
@@ -322,10 +353,10 @@ function BookingForm({
|
|
|
322
353
|
...classNamesProp,
|
|
323
354
|
label: classNamesProp?.label ?? labelClassName
|
|
324
355
|
};
|
|
325
|
-
const [values, setValues] =
|
|
326
|
-
const [errors, setErrors] =
|
|
327
|
-
const [touched, setTouched] =
|
|
328
|
-
const isQuestionVisible =
|
|
356
|
+
const [values, setValues] = React.useState({});
|
|
357
|
+
const [errors, setErrors] = React.useState({});
|
|
358
|
+
const [touched, setTouched] = React.useState({});
|
|
359
|
+
const isQuestionVisible = React.useCallback(
|
|
329
360
|
(question) => {
|
|
330
361
|
const { settings } = question;
|
|
331
362
|
if (!settings?.conditional_answers) {
|
|
@@ -418,7 +449,7 @@ function BookingForm({
|
|
|
418
449
|
[values, questions]
|
|
419
450
|
);
|
|
420
451
|
const visibleQuestions = questions.filter((q) => isAdmin || !q.admin_only).filter(isQuestionVisible);
|
|
421
|
-
const validateField =
|
|
452
|
+
const validateField = React.useCallback((question, value) => {
|
|
422
453
|
if (question.detail_type === "heading") return null;
|
|
423
454
|
if (question.required) {
|
|
424
455
|
if (value === void 0 || value === "" || value === null) {
|
|
@@ -439,7 +470,7 @@ function BookingForm({
|
|
|
439
470
|
}
|
|
440
471
|
return null;
|
|
441
472
|
}, []);
|
|
442
|
-
const validateAll =
|
|
473
|
+
const validateAll = React.useCallback(() => {
|
|
443
474
|
const newErrors = {};
|
|
444
475
|
let isValid2 = true;
|
|
445
476
|
visibleQuestions.forEach((question) => {
|
|
@@ -452,7 +483,7 @@ function BookingForm({
|
|
|
452
483
|
setErrors(newErrors);
|
|
453
484
|
return isValid2;
|
|
454
485
|
}, [visibleQuestions, values, validateField]);
|
|
455
|
-
|
|
486
|
+
React.useEffect(() => {
|
|
456
487
|
const visibleIds = new Set(visibleQuestions.map((q) => q.id));
|
|
457
488
|
setErrors((prev) => {
|
|
458
489
|
let changed = false;
|
|
@@ -655,7 +686,7 @@ var DEFAULT_FIELDS = [
|
|
|
655
686
|
}
|
|
656
687
|
];
|
|
657
688
|
var HIDEABLE_FIELDS = ["address1", "address2", "city", "postcode"];
|
|
658
|
-
var RegistrationForm =
|
|
689
|
+
var RegistrationForm = React.forwardRef(
|
|
659
690
|
({
|
|
660
691
|
fields = DEFAULT_FIELDS,
|
|
661
692
|
additionalFields,
|
|
@@ -667,10 +698,10 @@ var RegistrationForm = react.forwardRef(
|
|
|
667
698
|
classNames = {},
|
|
668
699
|
fieldSettings = {}
|
|
669
700
|
}, ref) => {
|
|
670
|
-
const formId =
|
|
671
|
-
const [values, setValues] =
|
|
672
|
-
const [errors, setErrors] =
|
|
673
|
-
const [touched, setTouched] =
|
|
701
|
+
const formId = React.useId();
|
|
702
|
+
const [values, setValues] = React.useState({});
|
|
703
|
+
const [errors, setErrors] = React.useState({});
|
|
704
|
+
const [touched, setTouched] = React.useState({});
|
|
674
705
|
const visibleFields = fields.filter((field) => {
|
|
675
706
|
if (HIDEABLE_FIELDS.includes(field.name)) {
|
|
676
707
|
const setting = fieldSettings[field.name];
|
|
@@ -679,7 +710,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
679
710
|
return true;
|
|
680
711
|
});
|
|
681
712
|
const allFields = additionalFields ? [...visibleFields, ...additionalFields] : visibleFields;
|
|
682
|
-
const validateMatching =
|
|
713
|
+
const validateMatching = React.useCallback(
|
|
683
714
|
(fieldName, value, currentValues) => {
|
|
684
715
|
if (fieldName === "verifyEmail") {
|
|
685
716
|
if (value && currentValues.email && value !== currentValues.email) {
|
|
@@ -695,7 +726,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
695
726
|
},
|
|
696
727
|
[]
|
|
697
728
|
);
|
|
698
|
-
const validateField =
|
|
729
|
+
const validateField = React.useCallback(
|
|
699
730
|
(field, value, currentValues) => {
|
|
700
731
|
if (field.required && (!value || value.trim() === "")) {
|
|
701
732
|
return "This field is required";
|
|
@@ -710,7 +741,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
710
741
|
},
|
|
711
742
|
[validateMatching]
|
|
712
743
|
);
|
|
713
|
-
const validateAll =
|
|
744
|
+
const validateAll = React.useCallback(() => {
|
|
714
745
|
const newErrors = {};
|
|
715
746
|
let isValid2 = true;
|
|
716
747
|
for (const field of allFields) {
|
|
@@ -724,7 +755,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
724
755
|
setErrors(newErrors);
|
|
725
756
|
return isValid2;
|
|
726
757
|
}, [allFields, values, validateField]);
|
|
727
|
-
const checkIsValid =
|
|
758
|
+
const checkIsValid = React.useCallback(
|
|
728
759
|
(currentValues) => {
|
|
729
760
|
for (const field of allFields) {
|
|
730
761
|
const value = currentValues[field.name] || "";
|
|
@@ -735,7 +766,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
735
766
|
},
|
|
736
767
|
[allFields, validateField]
|
|
737
768
|
);
|
|
738
|
-
const handleChange =
|
|
769
|
+
const handleChange = React.useCallback(
|
|
739
770
|
(fieldName, value) => {
|
|
740
771
|
const newValues = { ...values, [fieldName]: value };
|
|
741
772
|
setValues(newValues);
|
|
@@ -789,14 +820,14 @@ var RegistrationForm = react.forwardRef(
|
|
|
789
820
|
},
|
|
790
821
|
[values, touched, allFields, validateField, onChange, checkIsValid]
|
|
791
822
|
);
|
|
792
|
-
const handleCheckboxChange =
|
|
823
|
+
const handleCheckboxChange = React.useCallback(
|
|
793
824
|
(fieldName, checked) => {
|
|
794
825
|
const value = checked ? "true" : "";
|
|
795
826
|
handleChange(fieldName, value);
|
|
796
827
|
},
|
|
797
828
|
[handleChange]
|
|
798
829
|
);
|
|
799
|
-
const handleBlur =
|
|
830
|
+
const handleBlur = React.useCallback(
|
|
800
831
|
(fieldName) => {
|
|
801
832
|
setTouched((prev) => ({ ...prev, [fieldName]: true }));
|
|
802
833
|
if (validateOnBlur) {
|
|
@@ -818,7 +849,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
818
849
|
},
|
|
819
850
|
[validateOnBlur, allFields, values, validateField]
|
|
820
851
|
);
|
|
821
|
-
const handleSubmit =
|
|
852
|
+
const handleSubmit = React.useCallback(
|
|
822
853
|
(e) => {
|
|
823
854
|
e.preventDefault();
|
|
824
855
|
const allTouched = {};
|
|
@@ -832,7 +863,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
832
863
|
},
|
|
833
864
|
[allFields, validateAll, onSubmit, values]
|
|
834
865
|
);
|
|
835
|
-
|
|
866
|
+
React.useImperativeHandle(
|
|
836
867
|
ref,
|
|
837
868
|
() => ({
|
|
838
869
|
reset: () => {
|
|
@@ -948,7 +979,7 @@ var RegistrationForm = react.forwardRef(
|
|
|
948
979
|
);
|
|
949
980
|
RegistrationForm.displayName = "RegistrationForm";
|
|
950
981
|
var cx2 = (...classes) => classes.filter(Boolean).join(" ");
|
|
951
|
-
var ContactDetailsForm =
|
|
982
|
+
var ContactDetailsForm = React.forwardRef(
|
|
952
983
|
({
|
|
953
984
|
questions = [],
|
|
954
985
|
onSubmit,
|
|
@@ -962,13 +993,13 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
962
993
|
hideSubmitButton = false,
|
|
963
994
|
isSubmitted = false
|
|
964
995
|
}, ref) => {
|
|
965
|
-
const formId =
|
|
966
|
-
const [firstName, setFirstName] =
|
|
967
|
-
const [lastName, setLastName] =
|
|
968
|
-
const [emailValue, setEmailValue] =
|
|
969
|
-
const [contactErrors, setContactErrors] =
|
|
970
|
-
const [contactTouched, setContactTouched] =
|
|
971
|
-
const [questionValues, setQuestionValues] =
|
|
996
|
+
const formId = React.useId();
|
|
997
|
+
const [firstName, setFirstName] = React.useState(initialValues?.firstName || "");
|
|
998
|
+
const [lastName, setLastName] = React.useState(initialValues?.lastName || "");
|
|
999
|
+
const [emailValue, setEmailValue] = React.useState(initialValues?.email || "");
|
|
1000
|
+
const [contactErrors, setContactErrors] = React.useState({});
|
|
1001
|
+
const [contactTouched, setContactTouched] = React.useState({});
|
|
1002
|
+
const [questionValues, setQuestionValues] = React.useState(() => {
|
|
972
1003
|
if (!initialValues?.questions) return {};
|
|
973
1004
|
const init = {};
|
|
974
1005
|
for (const [key, val] of Object.entries(initialValues.questions)) {
|
|
@@ -976,8 +1007,8 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
976
1007
|
}
|
|
977
1008
|
return init;
|
|
978
1009
|
});
|
|
979
|
-
const [questionErrors, setQuestionErrors] =
|
|
980
|
-
const [questionTouched, setQuestionTouched] =
|
|
1010
|
+
const [questionErrors, setQuestionErrors] = React.useState({});
|
|
1011
|
+
const [questionTouched, setQuestionTouched] = React.useState({});
|
|
981
1012
|
const getFieldRequired = (name) => {
|
|
982
1013
|
const s = fieldSettings[name];
|
|
983
1014
|
return s?.required !== void 0 ? s.required : true;
|
|
@@ -991,7 +1022,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
991
1022
|
{ name: "lastName", label: "Last name", value: lastName, setter: setLastName },
|
|
992
1023
|
{ name: "email", label: "Email", value: emailValue, setter: setEmailValue }
|
|
993
1024
|
];
|
|
994
|
-
const validateContactField =
|
|
1025
|
+
const validateContactField = React.useCallback((name, value) => {
|
|
995
1026
|
const isRequired = getFieldRequired(name);
|
|
996
1027
|
if (name === "email") {
|
|
997
1028
|
const validators = isRequired ? compose(required, email) : email;
|
|
@@ -999,7 +1030,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
999
1030
|
}
|
|
1000
1031
|
return isRequired ? required(value) : null;
|
|
1001
1032
|
}, [fieldSettings]);
|
|
1002
|
-
const validateQuestionField =
|
|
1033
|
+
const validateQuestionField = React.useCallback((question, value) => {
|
|
1003
1034
|
if (question.detail_type === "heading") return null;
|
|
1004
1035
|
if (question.disabled) return null;
|
|
1005
1036
|
if (question.required) {
|
|
@@ -1021,7 +1052,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1021
1052
|
}
|
|
1022
1053
|
return null;
|
|
1023
1054
|
}, []);
|
|
1024
|
-
const validateAllContacts =
|
|
1055
|
+
const validateAllContacts = React.useCallback(() => {
|
|
1025
1056
|
const errs = {};
|
|
1026
1057
|
let valid = true;
|
|
1027
1058
|
for (const f of contactFields) {
|
|
@@ -1035,7 +1066,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1035
1066
|
setContactErrors(errs);
|
|
1036
1067
|
return valid;
|
|
1037
1068
|
}, [firstName, lastName, emailValue, validateContactField, fieldSettings]);
|
|
1038
|
-
const validateAllQuestions =
|
|
1069
|
+
const validateAllQuestions = React.useCallback(() => {
|
|
1039
1070
|
const errs = {};
|
|
1040
1071
|
let valid = true;
|
|
1041
1072
|
for (const q of questions) {
|
|
@@ -1048,7 +1079,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1048
1079
|
setQuestionErrors(errs);
|
|
1049
1080
|
return valid;
|
|
1050
1081
|
}, [questions, questionValues, validateQuestionField]);
|
|
1051
|
-
const buildOutput =
|
|
1082
|
+
const buildOutput = React.useCallback(() => {
|
|
1052
1083
|
const q = {};
|
|
1053
1084
|
const answers = [];
|
|
1054
1085
|
for (const question of questions) {
|
|
@@ -1072,7 +1103,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1072
1103
|
}
|
|
1073
1104
|
return { firstName, lastName, email: emailValue, q, answers };
|
|
1074
1105
|
}, [firstName, lastName, emailValue, questions, questionValues]);
|
|
1075
|
-
const handleContactChange =
|
|
1106
|
+
const handleContactChange = React.useCallback((name, value) => {
|
|
1076
1107
|
const setter = name === "firstName" ? setFirstName : name === "lastName" ? setLastName : setEmailValue;
|
|
1077
1108
|
setter(value);
|
|
1078
1109
|
if (contactTouched[name]) {
|
|
@@ -1084,7 +1115,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1084
1115
|
});
|
|
1085
1116
|
}
|
|
1086
1117
|
}, [contactTouched, validateContactField]);
|
|
1087
|
-
const handleContactBlur =
|
|
1118
|
+
const handleContactBlur = React.useCallback((name, value) => {
|
|
1088
1119
|
setContactTouched((prev) => ({ ...prev, [name]: true }));
|
|
1089
1120
|
if (validateOnBlur) {
|
|
1090
1121
|
const err = validateContactField(name, value);
|
|
@@ -1095,7 +1126,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1095
1126
|
});
|
|
1096
1127
|
}
|
|
1097
1128
|
}, [validateOnBlur, validateContactField]);
|
|
1098
|
-
const handleQuestionChange =
|
|
1129
|
+
const handleQuestionChange = React.useCallback((questionId, value) => {
|
|
1099
1130
|
setQuestionValues((prev) => ({ ...prev, [questionId]: value }));
|
|
1100
1131
|
setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
|
|
1101
1132
|
if (questionTouched[questionId]) {
|
|
@@ -1110,7 +1141,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1110
1141
|
}
|
|
1111
1142
|
}
|
|
1112
1143
|
}, [questionTouched, questions, validateQuestionField]);
|
|
1113
|
-
const handleQuestionBlur =
|
|
1144
|
+
const handleQuestionBlur = React.useCallback((questionId) => {
|
|
1114
1145
|
setQuestionTouched((prev) => ({ ...prev, [questionId]: true }));
|
|
1115
1146
|
if (validateOnBlur) {
|
|
1116
1147
|
const question = questions.find((q) => q.id === questionId);
|
|
@@ -1124,7 +1155,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1124
1155
|
}
|
|
1125
1156
|
}
|
|
1126
1157
|
}, [validateOnBlur, questions, questionValues, validateQuestionField]);
|
|
1127
|
-
const handleSubmit =
|
|
1158
|
+
const handleSubmit = React.useCallback((e) => {
|
|
1128
1159
|
e.preventDefault();
|
|
1129
1160
|
const allContactTouched = {};
|
|
1130
1161
|
for (const f of contactFields) allContactTouched[f.name] = true;
|
|
@@ -1138,7 +1169,7 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1138
1169
|
onSubmit(buildOutput());
|
|
1139
1170
|
}
|
|
1140
1171
|
}, [contactFields, questions, validateAllContacts, validateAllQuestions, onSubmit, buildOutput]);
|
|
1141
|
-
|
|
1172
|
+
React.useImperativeHandle(ref, () => ({
|
|
1142
1173
|
reset: () => {
|
|
1143
1174
|
setFirstName(initialValues?.firstName || "");
|
|
1144
1175
|
setLastName(initialValues?.lastName || "");
|
|
@@ -1367,13 +1398,13 @@ var ContactDetailsForm = react.forwardRef(
|
|
|
1367
1398
|
return null;
|
|
1368
1399
|
}
|
|
1369
1400
|
};
|
|
1370
|
-
|
|
1401
|
+
React.useEffect(() => {
|
|
1371
1402
|
if (isSubmitted) {
|
|
1372
1403
|
validateAllContacts();
|
|
1373
1404
|
validateAllQuestions();
|
|
1374
1405
|
}
|
|
1375
1406
|
}, [isSubmitted]);
|
|
1376
|
-
|
|
1407
|
+
React.useEffect(() => {
|
|
1377
1408
|
if (hideSubmitButton && _onChange) {
|
|
1378
1409
|
const contactValid = !contactFields.some((f) => {
|
|
1379
1410
|
if (getFieldDisabled(f.name)) return false;
|
|
@@ -1400,7 +1431,7 @@ var FIELDS = [
|
|
|
1400
1431
|
{ name: "newPassword", label: "New Password" },
|
|
1401
1432
|
{ name: "confirmNewPassword", label: "Confirm New Password" }
|
|
1402
1433
|
];
|
|
1403
|
-
var ResetPasswordForm =
|
|
1434
|
+
var ResetPasswordForm = React.forwardRef(
|
|
1404
1435
|
({
|
|
1405
1436
|
onSubmit,
|
|
1406
1437
|
onChange,
|
|
@@ -1409,15 +1440,15 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1409
1440
|
className = "",
|
|
1410
1441
|
classNames = {}
|
|
1411
1442
|
}, ref) => {
|
|
1412
|
-
const formId =
|
|
1413
|
-
const [values, setValues] =
|
|
1443
|
+
const formId = React.useId();
|
|
1444
|
+
const [values, setValues] = React.useState({
|
|
1414
1445
|
currentPassword: "",
|
|
1415
1446
|
newPassword: "",
|
|
1416
1447
|
confirmNewPassword: ""
|
|
1417
1448
|
});
|
|
1418
|
-
const [errors, setErrors] =
|
|
1419
|
-
const [touched, setTouched] =
|
|
1420
|
-
const validateField =
|
|
1449
|
+
const [errors, setErrors] = React.useState({});
|
|
1450
|
+
const [touched, setTouched] = React.useState({});
|
|
1451
|
+
const validateField = React.useCallback(
|
|
1421
1452
|
(name, val, allValues) => {
|
|
1422
1453
|
if (!val || val.trim() === "") return "This field is required";
|
|
1423
1454
|
if (name === "confirmNewPassword" && val !== allValues.newPassword) {
|
|
@@ -1427,7 +1458,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1427
1458
|
},
|
|
1428
1459
|
[]
|
|
1429
1460
|
);
|
|
1430
|
-
const checkIsValid =
|
|
1461
|
+
const checkIsValid = React.useCallback(
|
|
1431
1462
|
(v) => {
|
|
1432
1463
|
for (const field of FIELDS) {
|
|
1433
1464
|
if (validateField(field.name, v[field.name], v)) return false;
|
|
@@ -1436,7 +1467,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1436
1467
|
},
|
|
1437
1468
|
[validateField]
|
|
1438
1469
|
);
|
|
1439
|
-
const handleChange =
|
|
1470
|
+
const handleChange = React.useCallback(
|
|
1440
1471
|
(name, val) => {
|
|
1441
1472
|
const newValues = { ...values, [name]: val };
|
|
1442
1473
|
setValues(newValues);
|
|
@@ -1466,7 +1497,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1466
1497
|
},
|
|
1467
1498
|
[values, touched, validateField, onChange, checkIsValid]
|
|
1468
1499
|
);
|
|
1469
|
-
const handleBlur =
|
|
1500
|
+
const handleBlur = React.useCallback(
|
|
1470
1501
|
(name) => {
|
|
1471
1502
|
setTouched((prev) => ({ ...prev, [name]: true }));
|
|
1472
1503
|
if (validateOnBlur) {
|
|
@@ -1484,7 +1515,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1484
1515
|
},
|
|
1485
1516
|
[validateOnBlur, values, validateField]
|
|
1486
1517
|
);
|
|
1487
|
-
const handleSubmit =
|
|
1518
|
+
const handleSubmit = React.useCallback(
|
|
1488
1519
|
(e) => {
|
|
1489
1520
|
e.preventDefault();
|
|
1490
1521
|
const allTouched = {};
|
|
@@ -1509,7 +1540,7 @@ var ResetPasswordForm = react.forwardRef(
|
|
|
1509
1540
|
},
|
|
1510
1541
|
[values, validateField, onSubmit]
|
|
1511
1542
|
);
|
|
1512
|
-
|
|
1543
|
+
React.useImperativeHandle(ref, () => ({
|
|
1513
1544
|
reset: () => {
|
|
1514
1545
|
setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
|
|
1515
1546
|
setErrors({});
|
|
@@ -4462,30 +4493,30 @@ function SchemaFormBuilder(props) {
|
|
|
4462
4493
|
onVenueSet,
|
|
4463
4494
|
onProcessing
|
|
4464
4495
|
} = props;
|
|
4465
|
-
const [formValues, setFormValues] =
|
|
4466
|
-
const [formFields, setFormFields] =
|
|
4467
|
-
const [schema, setSchema] =
|
|
4468
|
-
const [showSubmit, setShowSubmit] =
|
|
4469
|
-
const [loading, setLoading] =
|
|
4470
|
-
const [suggestions, setSuggestions] =
|
|
4471
|
-
const [, _setSearching] =
|
|
4472
|
-
const [searchText, setSearchText] =
|
|
4473
|
-
const [touchedFields, setTouchedFields] =
|
|
4474
|
-
const [dirtyFields, setDirtyFields] =
|
|
4475
|
-
const formServicesRef =
|
|
4476
|
-
const extraItemsRef =
|
|
4477
|
-
const pendingExtraItemFetchesRef =
|
|
4478
|
-
const venueSearchTimerRef =
|
|
4479
|
-
const activeFormIdRef =
|
|
4480
|
-
const initialisedRef =
|
|
4481
|
-
const validatorMapRef =
|
|
4482
|
-
|
|
4496
|
+
const [formValues, setFormValues] = React.useState({});
|
|
4497
|
+
const [formFields, setFormFields] = React.useState([]);
|
|
4498
|
+
const [schema, setSchema] = React.useState(null);
|
|
4499
|
+
const [showSubmit, setShowSubmit] = React.useState(showSubmitProp ?? false);
|
|
4500
|
+
const [loading, setLoading] = React.useState(true);
|
|
4501
|
+
const [suggestions, setSuggestions] = React.useState([]);
|
|
4502
|
+
const [, _setSearching] = React.useState(false);
|
|
4503
|
+
const [searchText, setSearchText] = React.useState("");
|
|
4504
|
+
const [touchedFields, setTouchedFields] = React.useState(/* @__PURE__ */ new Set());
|
|
4505
|
+
const [dirtyFields, setDirtyFields] = React.useState(/* @__PURE__ */ new Set());
|
|
4506
|
+
const formServicesRef = React.useRef({});
|
|
4507
|
+
const extraItemsRef = React.useRef([]);
|
|
4508
|
+
const pendingExtraItemFetchesRef = React.useRef(/* @__PURE__ */ new Set());
|
|
4509
|
+
const venueSearchTimerRef = React.useRef(null);
|
|
4510
|
+
const activeFormIdRef = React.useRef("");
|
|
4511
|
+
const initialisedRef = React.useRef(false);
|
|
4512
|
+
const validatorMapRef = React.useRef(/* @__PURE__ */ new Map());
|
|
4513
|
+
React.useEffect(() => {
|
|
4483
4514
|
if (initialisedRef.current && formUpdateId === activeFormIdRef.current && !initialSchema) return;
|
|
4484
4515
|
initialisedRef.current = true;
|
|
4485
4516
|
activeFormIdRef.current = formUpdateId ?? formId;
|
|
4486
4517
|
initialiseForm(formUpdateId ?? formId);
|
|
4487
4518
|
}, [formId, formUpdateId, initialSchema]);
|
|
4488
|
-
|
|
4519
|
+
React.useEffect(() => {
|
|
4489
4520
|
if (formFields.length > 0) {
|
|
4490
4521
|
refreshVisibility();
|
|
4491
4522
|
}
|
|
@@ -4512,7 +4543,7 @@ function SchemaFormBuilder(props) {
|
|
|
4512
4543
|
});
|
|
4513
4544
|
}
|
|
4514
4545
|
}, [formValues]);
|
|
4515
|
-
|
|
4546
|
+
React.useEffect(() => {
|
|
4516
4547
|
if (!formFields.length) return;
|
|
4517
4548
|
const visibleFieldsWithExtraItems = formFields.filter(
|
|
4518
4549
|
(f) => f.page === currentPage && (f.visible || f.is_visible) && (f["extra-item"] || f.resource_ids)
|
|
@@ -4521,14 +4552,14 @@ function SchemaFormBuilder(props) {
|
|
|
4521
4552
|
void setExtraItems(field);
|
|
4522
4553
|
}
|
|
4523
4554
|
}, [formFields, formValues]);
|
|
4524
|
-
|
|
4555
|
+
React.useEffect(() => {
|
|
4525
4556
|
return () => {
|
|
4526
4557
|
if (venueSearchTimerRef.current) {
|
|
4527
4558
|
clearTimeout(venueSearchTimerRef.current);
|
|
4528
4559
|
}
|
|
4529
4560
|
};
|
|
4530
4561
|
}, []);
|
|
4531
|
-
const setFieldValue =
|
|
4562
|
+
const setFieldValue = React.useCallback(
|
|
4532
4563
|
(fieldName, value, _options) => {
|
|
4533
4564
|
setFormValues((prev) => ({ ...prev, [fieldName]: value }));
|
|
4534
4565
|
persistAnswer(formId, fieldName, value);
|