@timum/booking 0.7.2 → 0.7.4

package/README.md

@@ -3,23 +3,23 @@
 ## Content
 
 - [Features](#features)
-- [Basic Usage](#basicUsage)
-  - [In a Script Tag](#inAScriptTag)
-  - [As ESM import](#asEsmImport)
-- [Advanced Usage](#advancedUsage)
-  - [muiTheme](#muiTheme)
-  - [fcConfig](#fullCalendar)
-  - [appConfig](#appConfig)
-  - [How to use Callbacks](#howToUseCallbacks)
-    - [Booking Related](#bookingRelated)
-    - [Cancelation Related](#cancelationRelated)
-    - [Data Fetching Related](#dataFetchingRelated)
+- [Basic Usage](#basic_usage)
+  - [In a Script Tag](#in_a_script_tag)
+  - [As ESM import](#as_esm_import)
+- [Advanced Usage](#advanced_usage)
+  - [muiTheme](#mui_theme)
+  - [fcConfig](#fc_config)
+  - [appConfig](#app_config)
+  - [How to use Callbacks](#how_to_use_callbacks)
+    - [Booking Related](#booking_related)
+    - [Cancelation Related](#cancelation_related)
+    - [Data Fetching Related](#data_fetching_related)
   - [Localisation](#localisation)
-  - [How to Define Fields](#howToDefineFields)
-    - [Anatomy of a Field](#anatomyOfAField)
-  - [An Example](#anExample)
-    - [The Scenario](#theScenario)
-    - [The Implementation](#theImplementation)
+  - [How to Define Fields](#how_to_define_fields)
+    - [Anatomy of a Field](#anatomy_of_a_field)
+  - [An Example](#an_example)
+    - [The Scenario](#the_scenario)
+    - [The Implementation](#the_implementation)
 
 <a name=”features”></a>
 
@@ -37,11 +37,11 @@
 - Dynamic definition of input fields with localized labels and validation
   - Therefore, ability to request additional information from customers during booking process
 
-<a name=”basicUsage”></a>
+<a name=”basic_usage”></a>
 
 ## Basic Usage
 
-<a name=”inAScriptTag”></a>
+<a name=”in_a_script_tag”></a>
 
 ### In a Script Tag
 
@@ -50,7 +50,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.7.2/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.4/build/timum-booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -65,13 +65,13 @@ 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.7.2/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.4/build/timum-booking.js';
 
   timum.init(); //<- no need for the reference here
 </script>
 ```
 
-<a name=”asEsmImport”></a>
+<a name=”as_esm_import”></a>
 
 ### As ESM import
 
@@ -94,7 +94,7 @@ A example project can be found [here](https://stackblitz.com/edit/react-8q6r8b?f
 
 ---
 
-<a name=”advancedUsage”></a>
+<a name=”advanced_usage”></a>
 
 ## Advanced usage
 
@@ -109,7 +109,7 @@ The following table gives a rough overview over each.
 | muiTheme  | object, mui theme allowing you to change the look and feel of timum. Requires a professional plan. |
 | fcConfig  | object, only used if you use full calendar as a booking frontend (settable in appConfig).          |
 
-<a name=”muiTheme”></a>
+<a name=”mui_theme”></a>
 
 ### muiTheme
 
@@ -118,7 +118,7 @@ See [here](https://mui.com/) for a general overview. <br> See [here](https://mui
 
 When you open the file `config.js` in [this](https://stackblitz.com/edit/react-8q6r8b?file=src/index.js) example, you can find an elaborate custom configuration which includes a redesign of the standard timum theme.
 
-<a name=”fcConfig”></a>
+<a name=”fc_config”></a>
 
 ### fcConfig
 
@@ -127,7 +127,7 @@ 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.
 
-<a name=”appConfig”></a>
+<a name=”app_config”></a>
 
 ### appConfig
 
@@ -183,13 +183,13 @@ This object's options directly affect timum's behaviour or allow you to react to
 </tr>
 </table>
 
-<a name=”howToUseCallbacks”></a>
+<a name=”how_to_use_callbacks”></a>
 
 #### How to use callbacks
 
 The callbacks object may contain any of the following functions.
 
-<a name=”bookingRelated”></a>
+<a name=”booking_related”></a>
 
 ##### Booking related
 
@@ -202,17 +202,17 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
 - a `timeslot` looking like this:
   ```
      {
-            start: luxon Datetime object. Internal state. "2023-01-27T09:05:00.000Z",
-            end: luxon Datetime object. Internal state. "2023-01-27T09:35:00.000Z",
-            timeslot_uuid: uuid of the booked timeslot. e.g. "82ec5220-9d55-11ed-8617-e4a7a0ca32e8",
-            product_uuid: uuid of the booked product e.g. "92867f70-4836-11e5-bc04-021a52c25043",
-            product_name: string. e.g. "Meeting",
-            resource_name: string. e.g. "Booking Widget DEMO",
-            capacity: number e.g. 1,
-            capacity_left: number e.g. 1,
-            kind: either "models.Bookable" or "models.LotAppointment",
-            untouchedStart: ISO String e.g: "2023-01-27T09:05:00+01:00" as the server sent it,
-            untouchedEnd: ISO String e.g: "2023-01-27T09:35:00+01:00" as the server sent it
+        start: luxon Datetime object. Internal state. "2023-01-27T09:05:00.000Z",
+        end: luxon Datetime object. Internal state. "2023-01-27T09:35:00.000Z",
+        timeslot_uuid: uuid of the booked timeslot. e.g. "82ec5220-9d55-11ed-8617-e4a7a0ca32e8",
+        product_uuid: uuid of the booked product e.g. "92867f70-4836-11e5-bc04-021a52c25043",
+        product_name: string. e.g. "Meeting",
+        resource_name: string. e.g. "Booking Widget DEMO",
+        capacity: number e.g. 1,
+        capacity_left: number e.g. 1,
+        kind: either "models.Bookable" or "models.LotAppointment",
+        untouchedStart: ISO String e.g: "2023-01-27T09:05:00+01:00" as the server sent it,
+        untouchedEnd: ISO String e.g: "2023-01-27T09:35:00+01:00" as the server sent it
         }
   ```
 - a `data` looking like this:
@@ -232,9 +232,9 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
 
 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.
 
-<a name=”cancelationRelated”></a>
+<a name=”cancelation_related”></a>
 
-##### Cancelation Related {#cancelationRelated}
+##### Cancelation Related
 
 - `cancelationStarted`
 - `cancelationSuccessful`
@@ -244,9 +244,9 @@ All cancelation related callbacks receive a single obejct as argument containing
 
 Additionally, `cancelationSuccessful` and `cancelationFailed` also have a RTKQ response object in their respecive argument. See here for a reference.
 
-<a name=”dataFetchingRelated”></a>
+<a name=”data_fetching_related”></a>
 
-##### Data Fetching Related {#dataFetchingRelated}
+##### Data Fetching Related
 
 In order to display public appointments, resource and calendar information timum sends several requests.
 
@@ -435,7 +435,9 @@ localization: {
 },
 ```
 
-#### How to define fields {#howToDefineFields}
+<a name=”how_to_define_fields”></a>
+
+#### How to define fields
 
 You can customize the information required 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.
 
@@ -496,7 +498,7 @@ The standard configuration can be overridden except for the aforementioned field
   },
 ```
 
-<a name=”anatomyOfAField”></a>
+<a name=”anatomy_of_a_field”></a>
 
 ##### Anatomy of a field
 
@@ -533,31 +535,31 @@ 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=”anExample”></a>
+<a name=”an_example”></a>
 
-### An Example {#anExample}
+### An Example
 
 Here is an example Tying all of the aforementioned concepts together.
 
-<a name=”theScenario”></a>
+<a name=”the_scenario”></a>
 
-#### The Scenario {#theScenario}
+#### The Scenario
 
 For whatever reason it is important to know the gender of customers.
 On the other side the optional fields `mobile` and `message` aren't important for you and you wish to remove them.
 This new gender field must be filled, therefore a validation is required.
 Both the title of the field and it's validations must be localized.
 
-<a name=”theImplementation”></a>
+<a name=”the_implementation”></a>
 
-#### The Implementation {#theImplementation}
+#### The Implementation
 
 This is the base configuration. As it is it uses the standard field configuration shown in [How to define fields](#howToDefineFields).
 
 ```html
 <div id="bookingjs" style="margin: 32px"></div>
 <script type="module">
-  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.2/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.4/build/timum-booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -568,7 +570,7 @@ 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.7.2/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.4/build/timum-booking.js';
 
   timum.init(
   {