@timum/booking 0.7.1 → 0.7.2

package/README.md

@@ -2,6 +2,7 @@
 
 ## Content
 
+- [Features](#features)
 - [Basic Usage](#basicUsage)
   - [In a Script Tag](#inAScriptTag)
   - [As ESM import](#asEsmImport)
@@ -20,16 +21,36 @@
     - [The Scenario](#theScenario)
     - [The Implementation](#theImplementation)
 
-### Basic Usage {#basicUsage}
+<a name=”features”></a>
 
-#### In a Script Tag {#inAScriptTag}
+## Features
+
+- Direct booking or appointment requests for public appointments
+- Approval required for requested appointments
+- Option to show/hide fully booked appointments
+- Option to prevent booking if appointment is too close to current time
+- Customer ability to cancel appointments with proper authentication
+- Customizable wording across languages
+- Support for multiple languages (English and German included)
+- Callbacks for custom code execution and event response (e.g. booking created, appointments loaded, booking canceled)
+- Customizable look and feel with mui theming (available with professional plan)
+- 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>
+
+## Basic Usage
+
+<a name=”inAScriptTag”></a>
+
+### In a Script Tag
 
 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.1/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.2/build/timum-booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -44,13 +65,15 @@ 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.1/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.2/build/timum-booking.js';
 
   timum.init(); //<- no need for the reference here
 </script>
 ```
 
-#### As ESM import {#asEsmImport}
+<a name=”asEsmImport”></a>
+
+### As ESM import
 
 1. Add timum-booking to your project with
    `yarn add @timum/booking`
@@ -71,7 +94,9 @@ A example project can be found [here](https://stackblitz.com/edit/react-8q6r8b?f
 
 ---
 
-### Advanced usage {#advancedUsage}
+<a name=”advancedUsage”></a>
+
+## Advanced usage
 
 timum booking has a lot of customisation options.
 
@@ -84,21 +109,27 @@ 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).          |
 
-#### muiTheme {#muiTheme}
+<a name=”muiTheme”></a>
+
+### muiTheme
 
 timum uses mui components for all frontends. The muiTheme object allows global design changes.
 See [here](https://mui.com/) for a general overview. <br> See [here](https://mui.com/material-ui/customization/default-theme/) for theme related documentation.
 
 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.
 
-#### fcConfig {#fullCalendar}
+<a name=”fcConfig”></a>
+
+### fcConfig
 
 FullCalendar can be set as one of the frontends in appConfig.
 See [here](https://fullcalendar.io/docs#toc) for a full list of configuration options.
 
 > Note that since fullCalendar isn't mui based, it does not consider the muiTheme object.
 
-#### appConfig {#appConfig}
+<a name=”appConfig”></a>
+
+### appConfig
 
 This object's options directly affect timum's behaviour or allow you to react to it.
 
@@ -109,7 +140,8 @@ This object's options directly affect timum's behaviour or allow you to react to
 </tr>
 <tr>
 <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>
+<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>height</td>
@@ -151,11 +183,15 @@ This object's options directly affect timum's behaviour or allow you to react to
 </tr>
 </table>
 
-##### How to use callbacks {#howToUseCallbacks}
+<a name=”howToUseCallbacks”></a>
+
+#### How to use callbacks
 
 The callbacks object may contain any of the following functions.
 
-###### Booking related {#bookingRelated}
+<a name=”bookingRelated”></a>
+
+##### Booking related
 
 - `createBookingStarted`
 - `createBookingSuccessfull`
@@ -196,7 +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.
 
-###### Cancelation Related {#cancelationRelated}
+<a name=”cancelationRelated”></a>
+
+##### Cancelation Related {#cancelationRelated}
 
 - `cancelationStarted`
 - `cancelationSuccessful`
@@ -206,7 +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.
 
-###### Data Fetching Related {#dataFetchingRelated}
+<a name=”dataFetchingRelated”></a>
+
+##### Data Fetching Related {#dataFetchingRelated}
 
 In order to display public appointments, resource and calendar information timum sends several requests.
 
@@ -283,7 +323,9 @@ In order to display public appointments, resource and calendar information timum
     receives a single RTKQ error object. See [here](https://redux-toolkit.js.org/rtk-query/usage-with-typescript#type-safe-error-handling) for a reference.
     <br>
 
-##### Localisation {#localisation}
+<a name=”localisation”></a>
+
+#### 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.
 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.
@@ -393,7 +435,7 @@ localization: {
 },
 ```
 
-##### How to define fields {#howToDefineFields}
+#### How to define fields {#howToDefineFields}
 
 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.
 
@@ -454,7 +496,9 @@ The standard configuration can be overridden except for the aforementioned field
   },
 ```
 
-###### Anatomy of a field {#anatomyOfAField}
+<a name=”anatomyOfAField”></a>
+
+##### Anatomy of a field
 
 ```
   <fieldName> : {
@@ -489,25 +533,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.
 
-#### An Example {#anExample}
+<a name=”anExample”></a>
+
+### An Example {#anExample}
 
 Here is an example Tying all of the aforementioned concepts together.
 
-##### The Scenario {#theScenario}
+<a name=”theScenario”></a>
+
+#### The Scenario {#theScenario}
 
 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.
 
-##### The Implementation {#theImplementation}
+<a name=”theImplementation”></a>
+
+#### The Implementation {#theImplementation}
 
 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.1/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.2/build/timum-booking.js';
 
   timum.init({ ref: 'booking-widget-demo-resource@timum' });
 </script>
@@ -518,7 +568,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.1/build/timum-booking.js';
+  import * as timum from 'https://cdn.jsdelivr.net/npm/@timum/booking@0.7.2/build/timum-booking.js';
 
   timum.init(
   {
@@ -609,7 +659,8 @@ Let's add the necessary changes:
       }
     }
 
-    // the following callback consumes the customers input, allowing you to act on the entered gender value.
+    // the following callback consumes the customers input, allowing you to act on
+    //the entered gender value.
     callback: {
       createBookingStarted: ({data}) => {
         console.log(data.gender);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timum/booking",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "license": "CC-BY-ND-4.0",
   "type": "module",
   "main": "build/timum-booking.umd.cjs",