@timum/booking 1.7.1 → 1.8.0

package/README.md

@@ -51,7 +51,7 @@ This documentation guides you through all the customization capabilities.
 - Customizable wording across languages (availabe with professional plans)
 - Dynamic definition of input fields with localized labels and validation (available with professional plans)
   - Therefore, ability to request additional information from customers during booking process
-- Support for multiple languages (English and German included) - add your own language
+- Support for multiple languages (English, Italian, Spanish, French and German included) - add your own language
 - Callbacks for custom code execution and event response (e.g. booking created, appointments loaded, booking canceled)
 
 <a name=”how-to-integrate”></a>
@@ -335,6 +335,10 @@ This object's options directly affect timum's behaviour or allow you to react to
     <tr>
       <td>sendCustomValuesInMessage</td>
       <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>
+   </tr>
+    <tr>
+      <td>gatherAddressData</td>
+      <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>
    </tr>
    <tr>
       <td>channelKey</td>
@@ -453,7 +457,7 @@ Additionally, `cancelationSuccessful` and `cancelationFailed` also have a RTKQ r
 
 ##### Dialog related
 
-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.
+In addition to the dialog related callbacks already mentioned in [Cancelation Related](#cancelation-related) and [Booking related](#booking-related), there are callbacks for all other dialogs as well.
 
 - `openedProductSelection`
 - `openedResourceSelection`
@@ -549,7 +553,7 @@ In order to display public appointments, resource and calendar information timum
 
 #### Localisation
 
-timum booking has the ability to change all of its text. It comes with English and German pre-installed, but you can add additional translations as well. You can also change the text for these languages to your preference. You don't have to redefine the entire localization object; you can just add or change the specific texts you want. Any missing texts will be taken from the default.
+timum booking has the ability to change all of its text. It comes with English, Italian, Spanish, French and German pre-installed, but you can add additional translations as well. You can also change the text for these languages to your preference. You don't have to redefine the entire localization object; you can just add or change the specific texts you want. Any missing texts will be taken from the default.
 The code snippet provided shows the complete localization object and the standard text for both English and German. For each language, it includes text for different parts of the booking process such as product selection, appointment booking, appointment request, appointment cancellation, form fields, and more.
 
 ```javascript
@@ -666,7 +670,9 @@ localization: {
 
 #### Booking Form Fields
 
-You can customize the information you request from customers before booking by defining fields. The minimum required fields for timum are firstName, lastName, email, and agbs. By default, timum also requests mobile and message fields, but you can add your own fields as well.
+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.
+
+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).
 
 Fields, including custom ones, support validation and localization.
 Validation is realized using the yup library, which is included with timum. You can import it using the following code:
@@ -680,55 +686,87 @@ Localization is achieved by using the title property in the field definition. Yo
 The standard configuration can be overridden except for the aforementioned fields. The following is the standard configuration:
 
 ```javascript
-  fields: {
-    firstName: {
-      title: 'fields.firstName',
-      validation: yup.string().required('validation.field_required'), // <- compare with key in 'localization'
-    },
-    lastName: {
-      title: 'fields.lastName',
-      validation: yup.string().required('validation.field_required'),
-    },
-    email: {
-      title: 'fields.email',
-      format: 'email',
-      type: 'text',
-      validation: yup
-        .string()
-        .email('validation.email_field_must_be_valid')
-        .required('validation.field_required'),
-    },
-    mobile: {
-      title: 'fields.mobile',
-      type: 'phoneNumber',
-      isRequired: false,
-      defaultCountry: 'DE',
-      preferredCountries: ['DE', 'CH', 'AT'],
-      // validation: is in built and ignored
-    },
-    message: {
-      title: 'fields.message',
-      type: 'textarea',
-      validation: yup.string().max(1024),
-      limit: 1024,
-    },
-    agbs: {
-      title: 'fields.accept_timum_privacy',
-      type: 'checkbox',
-      validation: yup
-        .boolean()
-        .required('validation.field_required')
-        .test(
-          'privacyAccepted',
-          'validation.privacy_field_required',
-          (value) => value === true
-        ),
-    },
-    locale: {
-      index: 6,
-      preventRendering: true,
-    },
+fields: {
+  firstName: {
+    index: 0,
+    title: 'fields.firstName',
+    validation: yup.string().required('validation.field_required'), // <- compare with key in localisation
   },
+  lastName: {
+    index: 1,
+    title: 'fields.lastName',
+    validation: yup.string().required('validation.field_required'),
+  },
+  email: {
+    index: 2,
+    title: 'fields.email',
+    format: 'email',
+    type: 'text',
+    validation: yup
+      .string()
+      .email('validation.email_field_must_be_valid')
+      .required('validation.field_required'),
+  },
+  mobile: {
+    index: 3,
+    title: 'fields.mobile',
+    type: 'phoneNumber',
+    isRequired: false,
+    defaultCountry: 'DE',
+    preferredCountries: ['DE', 'CH', 'AT'],
+    // validation: is in built and ignored
+  },
+  street: {
+    index: 4,
+    title: 'fields.street',
+    validation: yup.string().required('validation.field_required'),
+    ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
+  },
+  zipCode: {
+    index: 5,
+    title: 'fields.zipCode',
+    validation: yup.string().required('validation.field_required'),
+    ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
+  },
+  city: {
+    index: 6,
+    title: 'fields.city',
+    validation: yup.string().required('validation.field_required'),
+    ignore: true, // gets filtered by default. Set gatherAddressData: true to activate this field. Or just add it to your custom field config.
+  },
+  message: {
+    index: 7,
+    title: 'fields.message',
+    type: 'textarea',
+    validation: yup
+      .string()
+      .max(1024)
+      .test(
+        'no-emojis',
+        'validation.no_emojis',
+        (value) => !RE_EMOJI.test(value),
+      ),
+    limit: 1024,
+    onChange: (value) => value.replace(RE_EMOJI, ''),
+  },
+  agbs: {
+    index: 8,
+    title: 'fields.accept_timum_privacy',
+    type: 'checkbox',
+    validation: yup
+      .boolean()
+      .required('validation.field_required')
+      .test(
+        'privacyAccepted',
+        'validation.privacy_field_required',
+        (value) => value === true,
+      ),
+  },
+  locale: {
+    index: 9,
+    preventRendering: true,
+  },
+},
 ```
 
 <a name=”customFields”></a>