@timum/booking 1.2.7 → 1.3.1

package/README.md

@@ -28,9 +28,9 @@ This documentation guides you through all the customization capabilities.
     - [Cancelation Related](#cancelation_related)
     - [Data Fetching Related](#data_fetching_related)
   - [Localisation](#localisation)
-  - [How to Define Fields](#how_to_define_fields)
-    - [Anatomy of a Field](#anatomy_of_a_field)
-  - [An Example](#an_example)
+  - [Booking Form Fields](#bookingFormFields)
+    - [Custom Fields](#customFields)
+  - [Custom Field Example](#CustomFieldExample)
     - [The Scenario](#the_scenario)
     - [The Implementation](#the_implementation)
 
@@ -67,7 +67,7 @@ Add the following code to your webpage:
 ```html
 <div id="bookingjs" style="margin: 32px"></div>
 <script type="module">
-  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.8.0/build/timum-booking.js';
+  import * as timum from 'https://cdn.timum.de/bookingjs/booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -82,7 +82,7 @@ Alternatively, you can add `ref` to your url as a parameter. This allows you to
 ```html
 <div id="bookingjs" style="margin: 32px"></div>
 <script type="module">
-  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.8.0/build/timum-booking.js';
+  import * as timum from 'https://cdn.timum.de/bookingjs/booking.js';
 
   timum.init(); //<- no need for the reference here
 </script>
@@ -92,7 +92,7 @@ Alternatively, you can add `ref` to your url as a parameter. This allows you to
 
 ### As ESM import
 
-1. Add timum-booking to your project with
+1. Add timum booking to your project with
    `yarn add @timum/booking`
    or use npm with
    `npm install @timum/booking`
@@ -223,6 +223,29 @@ See [here](https://fullcalendar.io/docs#toc) for a full list of configuration op
 
 > Note that since fullCalendar isn't mui based, it does not consider the muiTheme object.
 
+There are also some options specific to bookingjs. In addition to the configuration options of fullcalendar the following options are also available (all of them are optional):
+
+<table>
+   <tr>
+      <th>Property</th>
+      <th>Description</th>
+   </tr>
+   <tr>
+      <td>largeView</td>
+      <td>string, Determines which <code>view</code> is displayed for screen widths <i>greater</i> 601px. <br>Please refer to the fullcalendar docs linked above for an overview of applicable values. </td>
+   </tr>
+   <tr>
+      <td>smallView</td>
+      <td>string, Determines which <code>view</code> is displayed for screen widths <i>smaller</i> 601px. <br> Please refer to the fullcalendar docs linked above for an overview of applicable values. 
+   </td>
+   </tr>
+   <tr>
+      <td>useCustomTimumCss</td>
+      <td>boolean, to increase responsiveness, timum overrides some fullcalendar css classes. Set this to <code>false</code> to gain total control over fullcalendar's css.
+   </td>
+   </tr>
+</table>
+
 <a name=”app_config”></a>
 
 ### appConfig
@@ -238,6 +261,25 @@ This object's options directly affect timum's behaviour or allow you to react to
       <td>ref</td>
       <td>string, Reference of the resource to show the appointments of. <br><em> This is the only prop that is mandatory.</em><br> Everything else is optional. <br>Can also be a url parameter.</td>
    </tr>
+   <tr>
+      <td>platform</td>
+      <td>string, A fully qualified reference (<code>id@someUuid@platform</code>) can be unwieldy especially if used as a url param. This prop allows you to hardcode the <code>platform</code> part.
+      <br><br>Note that this prop is ignored if <code>ref</code> is both:
+      <ul>
+        <li>used as a url param </li>
+        <li>contains an @.</li>
+      </ul>  
+   </td>
+   </tr>
+   <tr>
+      <td>prvUuid</td>
+      <td>string, A fully qualified reference (<code>id@someUuid@platform</code>) can be unwieldy especially if used as a url param. This prop allows you to hardcode the <code>someUuid</code> part. This part is only sometimes necessary to uniquely identify a resource in timum. <br><br>Note that this prop is ignored if <code>ref</code> is both:
+      <ul>
+        <li>used as a url param </li>
+        <li>contains an @.</li>
+      </ul>  
+   </td>
+   </tr>
    <tr>
       <td>height</td>
       <td>  string, Height of timum on your page. `500px` is standard.</td>
@@ -334,7 +376,7 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
         untouchedEnd: ISO String e.g: "2023-01-27T09:35:00+01:00" as the server sent it
         }
   ```
-- a `data` looking like this:
+- a `data` object looking like this:
 
 ```javascript
  {
@@ -343,13 +385,13 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
    email: 'string',
    agbs: 'bool'
 
-   // plus whatever optional and/or custom fields you yourself has defined.
+   // plus whatever optional and/or custom fields you yourself have defined.
    // -> so the makeup of this object changes depending on your settings.
  }
 
 ```
 
-Additionally, `createBookingFailed` and `createBookingSuccessfull` also have a RTKQ `response` object in their respecive argument. See [here](https://redux-toolkit.js.org/rtk-query/usage-with-typescript#type-safe-error-handling) for a reference.
+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.
 
 <a name=”cancelation_related”></a>
 
@@ -559,9 +601,9 @@ localization: {
 },
 ```
 
-<a name=”how_to_define_fields”></a>
+<a name=”bookingFormFields”></a>
 
-#### How to define fields
+#### 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.
 
@@ -622,9 +664,15 @@ The standard configuration can be overridden except for the aforementioned field
   },
 ```
 
-<a name=”anatomy_of_a_field”></a>
+<a name=”customFields”></a>
 
-##### Anatomy of a field
+##### Custom Fields
+
+If the values retrieved via custom fields need to be transferred to timum backend as additional booking information, set the parameter `sendCustomValuesInMessage`. With this, the values of custom fields are attached to the customer message. They will be visible to the customer as well in booking confirmation mailings.
+
+`sendCustomValuesInMessage: true, // necessary to transmit custom field values as part of the customer message`
+
+Anatomy of a custom booking form field:
 
 ```
   <fieldName> : {
@@ -641,6 +689,10 @@ The standard configuration can be overridden except for the aforementioned field
   }
 ```
 
+fieldName
+
+- define a field name
+
 Depending on the type there are additional properties you can/must specify:
 
 - Type `text`:
@@ -665,9 +717,9 @@ Type `select`:
 
 - options: array of objects with structure { title: string, key: string }. The title is displayed and the key is passed in the data object to callbacks.
 
-<a name=”an_example”></a>
+<a name=”CustomFieldExample”></a>
 
-### An Example
+### Custom Field Example
 
 Here is an example tying all of the aforementioned concepts together.
 And [here](https://jsfiddle.net/timum/wov6pLk7/) is a fiddle containing the very example detailed in this chapter.
@@ -682,12 +734,12 @@ It is necessary to determine the gender of customers for a specific purpose. The
 
 #### The Implementation
 
-This is the base configuration. As it is it uses the standard field configuration shown in [How to define fields](#howToDefineFields).
+This is the base configuration. As it uses the standard field configuration shown in [Booking form fields](#bookingFormFields) :
 
 ```html
 <div id="bookingjs" style="margin: 32px"></div>
 <script type="module">
-  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.8.0/build/timum-booking.js';
+  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -698,11 +750,11 @@ Let's add the necessary changes:
 ```html
 <div id="bookingjs" style="margin: 32px"></div>
 <script type="module">
-  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.8.0/build/timum-booking.js';
+  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';
 
-  timum.init(
-  {
+  timum.init({
     ref: 'booking-widget-demo-resource@timum',
+
     fields: {
       // set these fields to undefined explicitly in order to remove them
       message: undefined,
@@ -711,12 +763,12 @@ Let's add the necessary changes:
         // index defines the order in which the fields get displayed
         index: 0,
         title: 'fields.firstName',
-        validation: yup.string().required('validation.field_required'), // <- compare with key in localisation
+        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'),
+        validation: yup.string().required('validation.field_required')
       },
       email: {
         index: 2,
@@ -726,7 +778,7 @@ Let's add the necessary changes:
         validation: yup
           .string()
           .email('validation.email_field_must_be_valid')
-          .required('validation.field_required'),
+          .required('validation.field_required')
       },
       gender: {
         index: 3,
@@ -740,8 +792,8 @@ Let's add the necessary changes:
         options: [
           { key: 'm', title: 'fields.gender.male' },
           { key: 'w', title: 'fields.gender.female' },
-          { key: 'd', title: 'fields.gender.other' },
-        ],
+          { key: 'd', title: 'fields.gender.other' }
+        ]
       },
       agbs: {
         index: 4,
@@ -754,9 +806,10 @@ Let's add the necessary changes:
             'privacyAccepted',
             'validation.privacy_field_required',
             (value) => value === true
-          ),
-      },
-    }
+          )
+      }
+    },
+    sendCustomValuesInMessage: true, // necessary to transmit custom field values as part of the customer message
 
     // now we need to add the new translation keys and their translations.
 
@@ -771,28 +824,28 @@ Let's add the necessary changes:
             male: 'Männlich',
             female: 'Weiblich',
             other: 'Divers'
-          },
+          }
         }
       },
       en: {
-          validation: {
+        validation: {
           gender_field_required: 'Please select an option.'
         },
-          fields: {
-            gender: {
-              title: 'Gender',
-              male: 'Male',
-              female: 'Female',
-              other: 'Others'
-            },
+        fields: {
+          gender: {
+            title: 'Gender',
+            male: 'Male',
+            female: 'Female',
+            other: 'Others'
+          }
         }
       }
-    }
+    },
 
     // the following callback consumes the customers input, allowing you to act on
     //the entered gender value.
     callback: {
-      createBookingStarted: ({data}) => {
+      createBookingStarted: ({ data }) => {
         console.log(data.gender);
       }
     }

package/build/{timum-booking.js → booking.js}

@@ -1,4 +1,4 @@
-import { R as s, H as o, J as t, G as e, I as m } from "./index-ce93f3a6.js";
+import { R as s, H as o, J as t, G as e, I as m } from "./index-628aaacf.js";
 export {
   s as React,
   o as TimumBooking,