@timum/booking 1.5.7 → 1.6.0
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/README.md +43 -43
- package/build/booking.js +70225 -7
- package/build/booking.umd.cjs +156 -156
- package/build/component/android-chrome-144x144.png +0 -0
- package/build/component/android-chrome-192x192.png +0 -0
- package/build/component/android-chrome-36x36.png +0 -0
- package/build/component/android-chrome-48x48.png +0 -0
- package/build/component/android-chrome-72x72.png +0 -0
- package/build/component/android-chrome-96x96.png +0 -0
- package/build/component/apple-touch-icon-114x114.png +0 -0
- package/build/component/apple-touch-icon-120x120.png +0 -0
- package/build/component/apple-touch-icon-144x144.png +0 -0
- package/build/component/apple-touch-icon-152x152.png +0 -0
- package/build/component/apple-touch-icon-180x180.png +0 -0
- package/build/component/apple-touch-icon-57x57.png +0 -0
- package/build/component/apple-touch-icon-60x60.png +0 -0
- package/build/component/apple-touch-icon-72x72.png +0 -0
- package/build/component/apple-touch-icon-76x76.png +0 -0
- package/build/component/apple-touch-icon-precomposed.png +0 -0
- package/build/component/apple-touch-icon.png +0 -0
- package/build/{index-b9c2cdb7.js → component/booking.js} +43979 -46409
- package/build/component/booking.umd.cjs +1454 -0
- package/build/component/browserconfig.xml +12 -0
- package/build/component/favicon-16x16.png +0 -0
- package/build/component/favicon-194x194.png +0 -0
- package/build/component/favicon-32x32.png +0 -0
- package/build/component/favicon-96x96.png +0 -0
- package/build/component/favicon.ico +0 -0
- package/build/component/logo192.png +0 -0
- package/build/component/logo512.png +0 -0
- package/build/component/manifest.json +46 -0
- package/build/component/mstile-144x144.png +0 -0
- package/build/component/mstile-150x150.png +0 -0
- package/build/component/mstile-310x150.png +0 -0
- package/build/component/mstile-310x310.png +0 -0
- package/build/component/mstile-70x70.png +0 -0
- package/build/component/robots.txt +3 -0
- package/build/component/timum-bg-large.png +0 -0
- package/build/component/timum-logo-bright.svg +63 -0
- package/build/component/timum-logo-white.svg +63 -0
- package/package.json +181 -173
- package/.eslintignore +0 -5
- package/.eslintrc +0 -30
- package/build/index-0a337bef.js +0 -6
- package/build/index-1733a1c8.js +0 -6
- package/build/index-27164277.js +0 -6
- package/build/index-2fca1232.js +0 -6
- package/build/index-61fde8ed.js +0 -6
- package/build/index-8c21f0a7.js +0 -45
- package/build/index-92a9e1b3.js +0 -6
- package/build/index-97b5a47c.js +0 -45
- package/build/index-ab4ea2aa.js +0 -6
- package/build/index-b70f40ff.js +0 -6
- package/build/mockServiceWorker.js +0 -303
- package/examples/callbacks.htm +0 -16
- package/examples/docuExample.htm +0 -113
- package/examples/fields.htm +0 -16
- package/examples/fullExample.htm +0 -533
- package/examples/list-view.htm +0 -16
- package/examples/local-language.htm +0 -16
- package/examples/local-preset.htm +0 -17
- package/examples/local-strings.htm +0 -16
- package/examples/multiple.htm +0 -153
- package/examples/selectable-product.htm +0 -16
- package/examples/usingChannelId.htm +0 -17
- package/examples/usingChannelKeyAndResourceRef.htm +0 -17
- package/examples/usingFullCalendar.htm +0 -17
- package/public/mockServiceWorker.js +0 -303
- package/remTags.bat +0 -14
- package/vite.config.js +0 -34
- package/yarn-error.log +0 -16276
package/README.md
CHANGED
|
@@ -8,31 +8,31 @@ This documentation guides you through all the customization capabilities.
|
|
|
8
8
|
## Content
|
|
9
9
|
|
|
10
10
|
- [Features](#features)
|
|
11
|
-
- [How to Integrate](#
|
|
12
|
-
- [In a Script Tag](#
|
|
13
|
-
- [As ESM import](#
|
|
14
|
-
- [Entity Referencing](#
|
|
15
|
-
- [Channel Reference](#
|
|
16
|
-
- [Resource Reference](#
|
|
17
|
-
- [Resource Reference + `channelKey`](#
|
|
11
|
+
- [How to Integrate](#how-to-integrate)
|
|
12
|
+
- [In a Script Tag](#in-a-script-tag)
|
|
13
|
+
- [As ESM import](#as-esm-import)
|
|
14
|
+
- [Entity Referencing](#entity-referencing)
|
|
15
|
+
- [Channel Reference](#channel-reference)
|
|
16
|
+
- [Resource Reference](#resource-reference)
|
|
17
|
+
- [Resource Reference + `channelKey`](#channel-reference-channel-key)
|
|
18
18
|
- [Example](#example)
|
|
19
|
-
- [Customer pre-identification](#
|
|
20
|
-
- [Identification via pData](#
|
|
21
|
-
- [Identification via logged-in User](#
|
|
22
|
-
- [Advanced Customisation](#
|
|
23
|
-
- [muiTheme](#
|
|
24
|
-
- [fcConfig](#
|
|
25
|
-
- [appConfig](#
|
|
26
|
-
- [How to use Callbacks](#
|
|
27
|
-
- [Booking Related](#
|
|
28
|
-
- [Cancelation Related](#
|
|
29
|
-
- [Data Fetching Related](#
|
|
19
|
+
- [Customer pre-identification](#customer-pre-identification)
|
|
20
|
+
- [Identification via pData](#identification-via-pdata)
|
|
21
|
+
- [Identification via logged-in User](#identification-via-logged-in-user)
|
|
22
|
+
- [Advanced Customisation](#advanced-usage)
|
|
23
|
+
- [muiTheme](#mui-theme)
|
|
24
|
+
- [fcConfig](#fc-config)
|
|
25
|
+
- [appConfig](#app-config)
|
|
26
|
+
- [How to use Callbacks](#how-to-use-callbacks)
|
|
27
|
+
- [Booking Related](#booking-related)
|
|
28
|
+
- [Cancelation Related](#cancelation-related)
|
|
29
|
+
- [Data Fetching Related](#data-fetching-related)
|
|
30
30
|
- [Localisation](#localisation)
|
|
31
31
|
- [Booking Form Fields](#bookingFormFields)
|
|
32
32
|
- [Custom Fields](#customFields)
|
|
33
33
|
- [Custom Field Example](#CustomFieldExample)
|
|
34
|
-
- [The Scenario](#
|
|
35
|
-
- [The Implementation](#
|
|
34
|
+
- [The Scenario](#the-scenario)
|
|
35
|
+
- [The Implementation](#the-implementation)
|
|
36
36
|
|
|
37
37
|
<a name=”features”></a>
|
|
38
38
|
|
|
@@ -54,11 +54,11 @@ This documentation guides you through all the customization capabilities.
|
|
|
54
54
|
- Support for multiple languages (English and German included) - add your own language
|
|
55
55
|
- Callbacks for custom code execution and event response (e.g. booking created, appointments loaded, booking canceled)
|
|
56
56
|
|
|
57
|
-
<a name=”
|
|
57
|
+
<a name=”how-to-integrate”></a>
|
|
58
58
|
|
|
59
59
|
## How to Integrate
|
|
60
60
|
|
|
61
|
-
<a name=”
|
|
61
|
+
<a name=”in-a-script-tag”></a>
|
|
62
62
|
|
|
63
63
|
### In a Script Tag
|
|
64
64
|
|
|
@@ -88,7 +88,7 @@ Alternatively, you can add `ref` to your url as a parameter. This allows you to
|
|
|
88
88
|
</script>
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
<a name=”
|
|
91
|
+
<a name=”as-esm-import”></a>
|
|
92
92
|
|
|
93
93
|
### As ESM import
|
|
94
94
|
|
|
@@ -109,28 +109,28 @@ init({ ref: 'booking-widget-demo-resource@timum' });
|
|
|
109
109
|
|
|
110
110
|
A example project can be found [here](https://stackblitz.com/edit/react-8q6r8b?file=src/index.js)
|
|
111
111
|
|
|
112
|
-
<a name="
|
|
112
|
+
<a name="entity-referencing"></a>
|
|
113
113
|
|
|
114
114
|
### Entity Referencing
|
|
115
115
|
|
|
116
|
-
As shown in [How to Integrate](#
|
|
116
|
+
As shown in [How to Integrate](#how-to-integrate), there are two ways in which to provide bookingjs with the necessary references to retrieve public appointments from the backend.
|
|
117
117
|
|
|
118
118
|
Additionally, there are three different kinds of references you can provide, each having their own implications concerning the delivered appointments or whether the booking frontend is shown at all.
|
|
119
119
|
|
|
120
|
-
<a name="
|
|
120
|
+
<a name="channel-reference"></a>
|
|
121
121
|
|
|
122
122
|
#### Channel Reference
|
|
123
123
|
|
|
124
124
|
Resource channels are entities in Timum, each storing a configuration that changes the booking experience for customers. Each individual resource has four channels that users can distribute to their customers through a link.
|
|
125
125
|
To use these channels in an embed scenario, provide a channel reference in the ref property (either in the URL or as part of the config). In this case, nothing else is required.
|
|
126
126
|
|
|
127
|
-
<a name="
|
|
127
|
+
<a name="resource-reference"></a>
|
|
128
128
|
|
|
129
129
|
#### Resource Reference
|
|
130
130
|
|
|
131
131
|
A reference that refers to a plain resource, where the channel is unknown. The default channel (and its corresponding configuration) is used instead.
|
|
132
132
|
|
|
133
|
-
<a name="
|
|
133
|
+
<a name="channel-reference-channel-key"></a>
|
|
134
134
|
|
|
135
135
|
#### Resource Reference + `ChannelKey`
|
|
136
136
|
|
|
@@ -161,14 +161,14 @@ The following table gives an overview of the different permutations and how book
|
|
|
161
161
|
|
|
162
162
|
- Fifth row: If a resource reference and a `channelKey` are provided in the config object, and there is nothing in the URL, the config object is used. BookingJs gets displayed using the channel uniquely identified by the resource reference and the `channelKey`.
|
|
163
163
|
|
|
164
|
-
<a name="
|
|
164
|
+
<a name="customer-pre-identification"></a>
|
|
165
165
|
|
|
166
166
|
#### Customer pre-identification
|
|
167
167
|
|
|
168
168
|
BookingJs can identify customers automatically if configured correctly.
|
|
169
169
|
This means they don't need to input their personal data prior to booking.
|
|
170
170
|
|
|
171
|
-
<a name="
|
|
171
|
+
<a name="identification-via-pdata"></a>
|
|
172
172
|
|
|
173
173
|
##### Identification via pDataId (personId)
|
|
174
174
|
|
|
@@ -178,7 +178,7 @@ General behaviour: If there is, then visitor is pre identified. If not: provide
|
|
|
178
178
|
</em>
|
|
179
179
|
See [appConfig](#appconfig) for more information about pData.
|
|
180
180
|
|
|
181
|
-
<a name="
|
|
181
|
+
<a name="identification-via-logged-in-user"></a>
|
|
182
182
|
|
|
183
183
|
##### Identification via Logged-in User
|
|
184
184
|
|
|
@@ -188,7 +188,7 @@ Even customers can register at timum and become registered and logged-in users.
|
|
|
188
188
|
|
|
189
189
|
---
|
|
190
190
|
|
|
191
|
-
<a name=”
|
|
191
|
+
<a name=”advanced-usage”></a>
|
|
192
192
|
|
|
193
193
|
## Advanced usage
|
|
194
194
|
|
|
@@ -203,7 +203,7 @@ The following table gives a rough overview over each.
|
|
|
203
203
|
| muiTheme | object, mui theme allowing you to change the look and feel of timum. Requires a professional plan. |
|
|
204
204
|
| fcConfig | object, only used if you use full calendar as a booking frontend (settable in appConfig). |
|
|
205
205
|
|
|
206
|
-
<a name=”
|
|
206
|
+
<a name=”mui-theme”></a>
|
|
207
207
|
|
|
208
208
|
### muiTheme
|
|
209
209
|
|
|
@@ -214,7 +214,7 @@ When you open the file `config.js` in [this](https://stackblitz.com/edit/react-8
|
|
|
214
214
|
|
|
215
215
|
Needs professional plan.
|
|
216
216
|
|
|
217
|
-
<a name=”
|
|
217
|
+
<a name=”fc-config”></a>
|
|
218
218
|
|
|
219
219
|
### fcConfig
|
|
220
220
|
|
|
@@ -246,7 +246,7 @@ There are also some options specific to bookingjs. In addition to the configurat
|
|
|
246
246
|
</tr>
|
|
247
247
|
</table>
|
|
248
248
|
|
|
249
|
-
<a name=”
|
|
249
|
+
<a name=”app-config”></a>
|
|
250
250
|
|
|
251
251
|
### appConfig
|
|
252
252
|
|
|
@@ -341,7 +341,7 @@ This object's options directly affect timum's behaviour or allow you to react to
|
|
|
341
341
|
<td>string, timum has, as of now, 4 different channels through which you can share your resource's appointments. <br> You can find them in the timum frontend under <resource name> -> Calendar Sharing (Terminbuchung freigeben). <br> Every channel has its own settings allowing you to control whom of your customers can see certain appointments, whether they book directly or create a request first and other settings. <br> Valid values for this attribute are: <br>
|
|
342
342
|
- RESOURCE_PUBLIC <br> referring to "Public Booking Link" (Öffentlicher Buchungs-Link) <br>
|
|
343
343
|
- RESOURCE_EXCLUSIVE <br> referring to "Exclusive Booking Access" (Exklusiver Buchungs-Zugang) <br>
|
|
344
|
-
-
|
|
344
|
+
- resource-reference <br> referring to "Embedded booking calendars" (Eingebettete Buchungskalender) <br>
|
|
345
345
|
- CALENDAR_PUBLIC <br> referring to "In all Website Plugin Views and your General Calendar" (In Website-Plugin Ansichten sowie Ihrem Gesamtkalender) <br>RESOURCE_PUBLIC is the default, used if you specify nothing else. <br><br>Can also be a url parameter.
|
|
346
346
|
</td>
|
|
347
347
|
</tr>
|
|
@@ -384,13 +384,13 @@ This object's options directly affect timum's behaviour or allow you to react to
|
|
|
384
384
|
</tr>
|
|
385
385
|
</table>
|
|
386
386
|
|
|
387
|
-
<a name=”
|
|
387
|
+
<a name=”how-to-use-callbacks”></a>
|
|
388
388
|
|
|
389
389
|
#### How to use callbacks
|
|
390
390
|
|
|
391
391
|
The callbacks object may contain any of the following functions.
|
|
392
392
|
|
|
393
|
-
<a name=”
|
|
393
|
+
<a name=”booking-related”></a>
|
|
394
394
|
|
|
395
395
|
##### Booking related
|
|
396
396
|
|
|
@@ -435,7 +435,7 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
|
|
|
435
435
|
|
|
436
436
|
Additionally, `createBookingFailed` and `createBookingSuccessfull` also have a RTKQ `response` object in their respective argument. See [here](https://redux-toolkit.js.org/rtk-query/usage-with-typescript#type-safe-error-handling) for a reference.
|
|
437
437
|
|
|
438
|
-
<a name=”
|
|
438
|
+
<a name=”cancelation-related”></a>
|
|
439
439
|
|
|
440
440
|
##### Cancelation Related
|
|
441
441
|
|
|
@@ -453,7 +453,7 @@ Additionally, `cancelationSuccessful` and `cancelationFailed` also have a RTKQ r
|
|
|
453
453
|
|
|
454
454
|
##### Dialog related
|
|
455
455
|
|
|
456
|
-
In addition to the dialog related callbacks already mentioned in [Cancelation Related](#
|
|
456
|
+
In addition to the dialog related callbacks already mentioned in [Cancelation Related](#cancelation-related) and [Booking related](#booking-related), there a callbacks for all other dialogs as well.
|
|
457
457
|
|
|
458
458
|
- `openedProductSelection`
|
|
459
459
|
- `openedResourceSelection`
|
|
@@ -464,7 +464,7 @@ In addition to the dialog related callbacks already mentioned in [Cancelation Re
|
|
|
464
464
|
|
|
465
465
|
These do not receive any parameters.
|
|
466
466
|
|
|
467
|
-
<a name=”
|
|
467
|
+
<a name=”data-fetching-related”></a>
|
|
468
468
|
|
|
469
469
|
##### Data Fetching Related
|
|
470
470
|
|
|
@@ -797,13 +797,13 @@ Type `select`:
|
|
|
797
797
|
Here is an example tying all of the aforementioned concepts together.
|
|
798
798
|
And [here](https://jsfiddle.net/timum/wov6pLk7/) is a fiddle containing the very example detailed in this chapter.
|
|
799
799
|
|
|
800
|
-
<a name=”
|
|
800
|
+
<a name=”the-scenario”></a>
|
|
801
801
|
|
|
802
802
|
#### The Scenario
|
|
803
803
|
|
|
804
804
|
It is necessary to determine the gender of customers for a specific purpose. The `mobile` and `message` fields are not necessary and will be removed. The new `gender` field must be filled, therefore a validation check is required to ensure it is completed. Both the name of the `gender` field and the validation messages must be translated into different languages.
|
|
805
805
|
|
|
806
|
-
<a name=”
|
|
806
|
+
<a name=”the-implementation”></a>
|
|
807
807
|
|
|
808
808
|
#### The Implementation
|
|
809
809
|
|