@timum/booking 1.9.1 → 1.10.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 +63 -54
- package/build/booking.js +10496 -10488
- package/build/booking.umd.cjs +82 -82
- package/build/component/booking.js +7440 -7432
- package/build/component/booking.umd.cjs +78 -78
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -362,10 +362,6 @@ This object's options directly affect timum's behaviour or allow you to react to
|
|
|
362
362
|
<tr>
|
|
363
363
|
<td>sendCustomValuesInMessage</td>
|
|
364
364
|
<td>boolean, whether values of custom fields are concatenated and comma-separated into a single string which is then sent to the backend as <code>message</code>. If field <code>message</code> is defined its input is concatenated to the generated string as well.</td>
|
|
365
|
-
</tr>
|
|
366
|
-
<tr>
|
|
367
|
-
<td>gatherAddressData</td>
|
|
368
|
-
<td>boolean, adds the fields <code>street</code>, <code>zipCode</code> and <code>city</code> in their default configuration to the booking page. You may also redefine/override them in the <code>fields</code> object, which supersedes this setting (needs professional plan). timum handles address data in a best effort basis, meaning it tries to parse the data and sync it to connected CRM systems, if possible.</td>
|
|
369
365
|
</tr>
|
|
370
366
|
<tr>
|
|
371
367
|
<td>channelKey</td>
|
|
@@ -378,7 +374,13 @@ This object's options directly affect timum's behaviour or allow you to react to
|
|
|
378
374
|
</tr>
|
|
379
375
|
<tr>
|
|
380
376
|
<td>calendarFrontend</td>
|
|
381
|
-
<td>string, one of <code>fullCalendar</code> (
|
|
377
|
+
<td>string, one of <code>fullCalendar</code>, <code>detailsFullCalendar</code> (these are what `init`'s 3rd parameter is for), <code>pureListView</code>, <code>detailsListView</code>, <code>condensedView</code> or <code>detailsCondensedView</code>
|
|
378
|
+
<br>
|
|
379
|
+
<br>
|
|
380
|
+
<blockquote>
|
|
381
|
+
Note: the <code>details</code> variants show details about the resource, like the description and the external url, as well as public information about the assigned consultant, if the channel allows that.
|
|
382
|
+
</blockquote>
|
|
383
|
+
</td>
|
|
382
384
|
</tr>
|
|
383
385
|
<tr>
|
|
384
386
|
<td>culture</td>
|
|
@@ -699,8 +701,6 @@ localization: {
|
|
|
699
701
|
|
|
700
702
|
You can customize the information you request from customers before booking by defining fields. The minimum required fields for timum are <code>firstName</code>, <code>lastName</code>, <code>email</code>, and <code>agbs</code>. By default, timum also requests <code>mobile</code> and <code>message</code> fields, but you can add your own fields as well.
|
|
701
703
|
|
|
702
|
-
Supported, but not present by default are the fields <code>street</code>, <code>zipCode</code> and <code>city</code>. You can activate them setting <code>gatherAddressData</code>, or by redefining fields with the same name as custom fields (see below).
|
|
703
|
-
|
|
704
704
|
Fields, including custom ones, support validation and localization.
|
|
705
705
|
Validation is realized using the yup library, which is included with timum. You can import it using the following code:
|
|
706
706
|
|
|
@@ -710,7 +710,7 @@ import { yup } from '@timum/booking';
|
|
|
710
710
|
|
|
711
711
|
Localization is achieved by using the title property in the field definition. You can specify a translation key and add the corresponding translation to the localization object. The same process can be applied to custom field validations.
|
|
712
712
|
|
|
713
|
-
The standard configuration can be overridden except for the aforementioned fields. The following is the standard configuration:
|
|
713
|
+
The standard configuration can be overridden except for the aforementioned, required fields. The following is the standard configuration:
|
|
714
714
|
|
|
715
715
|
```javascript
|
|
716
716
|
fields: {
|
|
@@ -743,24 +743,6 @@ fields: {
|
|
|
743
743
|
preferredCountries: ['DE', 'CH', 'AT'],
|
|
744
744
|
// validation: is in built and ignored
|
|
745
745
|
},
|
|
746
|
-
street: {
|
|
747
|
-
index: 4,
|
|
748
|
-
title: 'fields.street',
|
|
749
|
-
validation: yup.string().required('validation.field_required'),
|
|
750
|
-
ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
|
|
751
|
-
},
|
|
752
|
-
zipCode: {
|
|
753
|
-
index: 5,
|
|
754
|
-
title: 'fields.zipCode',
|
|
755
|
-
validation: yup.string().required('validation.field_required'),
|
|
756
|
-
ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
|
|
757
|
-
},
|
|
758
|
-
city: {
|
|
759
|
-
index: 6,
|
|
760
|
-
title: 'fields.city',
|
|
761
|
-
validation: yup.string().required('validation.field_required'),
|
|
762
|
-
ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
|
|
763
|
-
},
|
|
764
746
|
message: {
|
|
765
747
|
index: 7,
|
|
766
748
|
title: 'fields.message',
|
|
@@ -806,25 +788,52 @@ If the values retrieved via custom fields need to be transferred to timum backen
|
|
|
806
788
|
|
|
807
789
|
Anatomy of a custom booking form field:
|
|
808
790
|
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
791
|
+
`<fieldName> : {`
|
|
792
|
+
|
|
793
|
+
<blockquote>
|
|
794
|
+
<code>index</code>: number, index defines the order in which the fields get displayed.
|
|
795
|
+
(If you want to reorder the default fields or
|
|
796
|
+
want to inject a custom field between them,
|
|
797
|
+
you must redefine them as custom fields and manually change their indexes.)
|
|
798
|
+
</blockquote>
|
|
799
|
+
<br>
|
|
800
|
+
<blockquote>
|
|
801
|
+
<code>title</code>: string or JSXElement;
|
|
802
|
+
validation: yup based validation. See <a href="https://github.com/jquense/yup">yup docu</a>. Re-exported and accessible via timum.yup
|
|
803
|
+
|
|
804
|
+
</blockquote>
|
|
805
|
+
<br>
|
|
806
|
+
<blockquote>
|
|
807
|
+
<code>type</code>: string; either 'text' (default), 'phoneNumber', 'textarea', 'checkbox' or 'select'. Depending on the chosen type additional properties are available. See below.
|
|
808
|
+
</blockquote>
|
|
809
|
+
<br>
|
|
810
|
+
<blockquote>
|
|
811
|
+
<code>onChange</code>: function, allows to execute code whenever the user changes the fields value. Gets 'value' as function parameter.
|
|
812
|
+
</blockquote>
|
|
813
|
+
<br>
|
|
814
|
+
<blockquote>
|
|
815
|
+
<code>prefilled</code>: string; value a field is initiated with.
|
|
816
|
+
Note that for fields of type 'select' you must use the 'key' of one of it's options.
|
|
817
|
+
</blockquote>
|
|
818
|
+
<br>
|
|
819
|
+
<blockquote>
|
|
820
|
+
<code>preventRendering</code>: boolean, default false;
|
|
821
|
+
if true the field is not visible to the user.
|
|
822
|
+
Useful in conjunction with sendCustomValuesInMessage allowing you to
|
|
823
|
+
enrich booked appointments with internal data
|
|
824
|
+
without the customer becoming aware of your internal processes.
|
|
825
|
+
</blockquote>
|
|
826
|
+
<br>
|
|
827
|
+
<blockquote>
|
|
828
|
+
<code>preventRenderingFor</code>: array, prevents rendering of the field on the set booking screens. Valid values are
|
|
829
|
+
'identifiedCustomers' or 'unknownCustomers', which prevents rendering on the booking
|
|
830
|
+
screen shown to identified/unidentified customers, respectively. If both
|
|
831
|
+
'identifiedCustomers' and 'unknownCustomers' are set the behaviour is equal to
|
|
832
|
+
preventRendering.
|
|
833
|
+
Note that fields hidden in this manner get their validation disabled. This
|
|
834
|
+
ensures that the booking doesn't fail with a validation error the end user is unable to fix.
|
|
835
|
+
</blockquote>
|
|
836
|
+
`}`
|
|
828
837
|
|
|
829
838
|
fieldName
|
|
830
839
|
|
|
@@ -834,23 +843,23 @@ Depending on the type there are additional properties you can/must specify:
|
|
|
834
843
|
|
|
835
844
|
- Type `text`:
|
|
836
845
|
|
|
837
|
-
|
|
846
|
+
- `format`: string; the native input field's 'type' (e.g. 'email', 'number', etc.).
|
|
838
847
|
|
|
839
848
|
- Type `phoneNumber`:
|
|
840
849
|
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
850
|
+
- does NOT support `validation`. Phone number validation is complex, so timum handles it for you.
|
|
851
|
+
This does mean that field validation localisation is currently not supported for fields of this type.
|
|
852
|
+
This will be fixed in a future update.
|
|
853
|
+
- isRequired: boolean; if true, this field must be filled with a valid number
|
|
854
|
+
- defaultCountry: string, denotes the country code which is preselected when first rendering the component. Default is 'DE',
|
|
855
|
+
- preferredCountries: list of strings; denotes which countries are displayed first in the country drop down. Defaults are ['DE', 'CH', 'AT'],
|
|
847
856
|
|
|
848
857
|
- Type `textArea`:
|
|
849
858
|
|
|
850
|
-
|
|
859
|
+
- limit: number; sets the maximum number of characters customers can enter.
|
|
851
860
|
|
|
852
861
|
- Type `checkbox`:
|
|
853
|
-
|
|
862
|
+
- no special properties.
|
|
854
863
|
|
|
855
864
|
Type `select`:
|
|
856
865
|
|