@timum/booking 1.24.0 → 1.24.1

package/README.md

@@ -32,6 +32,7 @@ This documentation guides you through all the customization capabilities.
   - [Localisation](#localisation)
   - [Booking Form Fields](#booking-form-fields)
     - [Custom Fields](#custom-fields)
+  - [Global config override](#global-config-override)  
 - [Examples](#examples)
 
   - [Multi-Resource Mode for CondensedView](#multi-resource-mode-example)
@@ -39,7 +40,7 @@ This documentation guides you through all the customization capabilities.
   - [Conditionally Hide BookingJS When No Bookables Are Availables](#conditionally-hide-bookingjs-when-no-bookables-are-available)
   - [Custom Field Example](#custom-field-example)
 
-  <a name=”features”></a>
+  <a id="features"></a>
 
 ## Features
 
@@ -62,11 +63,11 @@ This documentation guides you through all the customization capabilities.
 - Callbacks for custom code execution and event response (e.g. booking created, appointments loaded, booking canceled)
 - Responsive layout handling for embedded views - EyeCandy and PureListView automatically adapt to available space and viewport constraints
 
-<a name=”how-to-integrate”></a>
+<a id="how-to-integrate"></a>
 
 ## How to Integrate
 
-<a name=”in-a-script-tag”></a>
+<a id="in-a-script-tag"></a>
 
 These are some minimal examples. BookingJs is highly customizable.
 An overview over all configuration options can be found in [Advanced Customisation](#advanced-usage)
@@ -99,7 +100,7 @@ Alternatively, you can add `ref` to your url as a parameter. This allows you to
 </script>
 ```
 
-<a name=”as-esm-import”></a>
+<a id="as-esm-import"></a>
 
 ### As ESM import
 
@@ -179,7 +180,7 @@ Each instance:
 - Receives configuration updates and postMessages independently
 - Is properly cleaned up when unmounted, preventing memory leaks
 
-<a name="entity-referencing"></a>
+<a id="entity-referencing"></a>
 
 ### Entity Referencing
 
@@ -187,20 +188,20 @@ As shown in [How to Integrate](#how-to-integrate), there are two ways in which t
 
 Additionally, there are three different kinds of references you can provide, each having their own implications concerning the delivered appointments or whether the booking frontend is shown at all.
 
-<a name="channel-reference"></a>
+<a id="channel-reference"></a>
 
 #### Channel Reference
 
 Resource channels are entities in Timum, each storing a configuration that changes the booking experience for customers. Each individual resource has four channels that users can distribute to their customers through a link.
 To use these channels in an embed scenario, provide a channel reference in the ref property (either in the URL or as part of the config). In this case, nothing else is required.
 
-<a name="resource-reference"></a>
+<a id="resource-reference"></a>
 
 #### Resource Reference
 
 A reference that refers to a plain resource, where the channel is unknown. The default channel (and its corresponding configuration) is used instead.
 
-<a name="#resource-reference-with-channelKey"></a>
+<a id="resource-reference-with-channelKey"></a>
 
 #### Resource Reference with ChannelKey
 
@@ -221,7 +222,7 @@ The following table gives an overview of the different permutations and how book
 - RESref: short for resource reference.
 - CHref: short for channel reference.
 
-<a name="example"></a>
+<a id="example"></a>
 
 ##### Example
 
@@ -231,14 +232,14 @@ The following table gives an overview of the different permutations and how book
 
 - Fifth row: If a resource reference and a `channelKey` are provided in the config object, and there is nothing in the URL, the config object is used. BookingJs gets displayed using the channel uniquely identified by the resource reference and the `channelKey`.
 
-<a name="customer-pre-identification"></a>
+<a id="customer-pre-identification"></a>
 
 #### Customer pre-identification
 
 BookingJs can identify customers automatically if configured correctly.
 This means they don't need to input their personal data prior to booking.
 
-<a name="identification-via-pdataid"></a>
+<a id="identification-via-pdataid"></a>
 
 ##### Identification via pDataId
 
@@ -248,7 +249,7 @@ General behaviour: If there is, then visitor is pre identified. If not: provide
 </em>
 See [appConfig](#appconfig) for more information about pData.
 
-<a name="identification-via-logged-in-user"></a>
+<a id="identification-via-logged-in-user"></a>
 
 ##### Identification via Logged-in User
 
@@ -258,7 +259,7 @@ Even customers can register at timum and become registered and logged-in users.
 
 ---
 
-<a name=”advanced-usage”></a>
+<a id="advanced-usage"></a>
 
 ## Advanced usage
 
@@ -273,7 +274,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 id="muitheme"></a>
 
 ### muiTheme
 
@@ -288,7 +289,7 @@ Needs professional plan.
 
 You can set global or per-component fonts via the MUI theme (e.g., typography.fontFamily or component styleOverrides). BookingJS can also load the corresponding font files for you; see [Font Loading](#font-loading) for how to declare font resources in the theme and control the loading strategy. Requires a professional plan for custom theming.
 
-<a name="fcconfig"></a>
+<a id="fcconfig"></a>
 
 ### fcConfig
 
@@ -320,7 +321,7 @@ There are also some options specific to bookingjs. In addition to the configurat
    </tr>
 </table>
 
-<a name="appconfig"></a>
+<a id="appconfig"></a>
 
 ### appConfig
 
@@ -526,7 +527,7 @@ This object's options directly affect timum's behaviour or allow you to react to
    </tr>
 </table>
 
-<a name=”font-loading”></a>
+<a id="font-loading"></a>
 
 #### Font Loading
 
@@ -626,13 +627,13 @@ Notes and best practices
 - If fonts are hosted on a different domain, ensure proper CORS headers so the browser can load them.
 - You can still use per-component overrides to mix families (e.g., Sora for Buttons only) by setting components.MuiButton.styleOverrides.root.fontFamily; just ensure the face is declared under fontFaces or provided via fontSource as shown above.
 
-<a name=”how-to-use-callbacks”></a>
+<a id="how-to-use-callbacks"></a>
 
 #### How to use callbacks
 
 The callbacks object may contain any of the following functions.
 
-<a name=”booking-related”></a>
+<a id="booking-related"></a>
 
 ##### Booking related
 
@@ -677,7 +678,7 @@ All Booking related callbacks receive a <em>single obejct</em> as argument conta
 
 Additionally, `createBookingFailed` and `createBookingSuccessful` 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>
+<a id="cancelation-related"></a>
 
 ##### Cancelation Related
 
@@ -687,11 +688,11 @@ Additionally, `createBookingFailed` and `createBookingSuccessful` also have a RT
 - `cancelationSuccessful`
 - `cancelationFailed`
 
-All cancelation related callbacks receive a single obejct as argument containing the same properties as described in [Booking related](#bookingRelated)
+All cancelation related callbacks receive a single obejct as argument containing the same properties as described in [Booking related](#booking-related)
 
 Additionally, `cancelationSuccessful` and `cancelationFailed` also have a RTKQ response object in their respecive argument. See here for a reference.
 
-<a name=”dialog_related”></a>
+<a id="dialog_related"></a>
 
 ##### Dialog related
 
@@ -706,7 +707,7 @@ In addition to the dialog related callbacks already mentioned in [Cancelation Re
 
 These do not receive any parameters.
 
-<a name=”data-fetching-related”></a>
+<a id="data-fetching-related"></a>
 
 ##### Data Fetching Related
 
@@ -791,7 +792,7 @@ 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>
 
-<a name=”localisation”></a>
+<a id="localisation"></a>
 
 #### Localisation
 
@@ -908,7 +909,7 @@ localization: {
 },
 ```
 
-<a name=”booking-form-fields”></a>
+<a id="booking-form-fields"></a>
 
 #### Booking Form Fields
 
@@ -985,7 +986,7 @@ fields: {
 },
 ```
 
-<a name=”custom-fields”></a>
+<a id="custom-fields"></a>
 
 ##### Custom Fields
 
@@ -1071,7 +1072,7 @@ Depending on the type there are additional properties you can/must specify:
 
   - 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="global-config-override"></a>
+<a id="global-config-override"></a>
 
 ### Global config via `window.timumBookingConfig`
 
@@ -1115,13 +1116,11 @@ All four slots are optional. You can set only top-level slots, only per-instance
 
 When multiple BookingJS instances live on the same page and you want to give them different overrides, set `appConfig.rootElId` to a stable identifier (typically the ID of the DOM element that hosts the widget) and use that same string as the key in `window.timumBookingConfig`.
 
-The snippet generator built into the Timum backend already does this for you: each embed snippet it produces stamps `rootElId: "bookingjs-<uuid>"` into the generated `init()` call, using the same UUID that identifies the Custom URL. That means you can write per-instance overrides using the UUID you were shown when you created the URL, and they will be picked up automatically when the snippet runs — no changes to the snippet or backend required.
-
 If you omit `rootElId`, only the top-level slots apply — per-instance lookup is skipped entirely.
 
 #### Scoping config to provider channel snippets
 
-Each embed snippet you create in the Timum interface (under Publication > Custom URLs) represents a **provider channel** identified by a UUID. The generated snippet already stamps `rootElId: "bookingjs-<provider-channel-uuid>"` into its `init()` call. You can use that same key in `window.timumBookingConfig` to scope configuration to a specific snippet:
+Each embed snippet you create in the Timum interface (found in "Appointment booking" ("Terminbuchung") in the top bar) represents a **provider channel** identified by a UUID. The generated snippet already stamps `rootElId: "bookingjs-<provider-channel-uuid>"` into its `init()` call. You can use that same key in `window.timumBookingConfig` to scope configuration to a specific snippet:
 
 ```js
 window.timumBookingConfig = {
@@ -1143,6 +1142,9 @@ window.timumBookingConfig = {
 
 This is useful when you embed multiple booking widgets on the same page and want each one to have different styling or behavior, without having to configure all of that through the Timum interface. You find the provider channel UUID in the embed code that the Custom URL entry generates for you.
 
+The configs get merged. Meaning the specific snippet configuration gets properties it doesn't override itself from the general top level config. Any properties not defined in there come either from the config of the snippet, provider or account wide configs or, if nothing else can be found, the timum default values. 
+This is a cascade from most specific to least specific.   
+
 #### Reserved names
 
 The strings `'appConfig'`, `'muiTheme'`, and `'fcConfig'` are reserved as top-level slot names. If you accidentally set `appConfig.rootElId` to one of these values, BookingJS will log a `console.warn` and skip the per-instance lookup for that instance (only the top-level slots will apply). Pick a less generic identifier for your widgets.
@@ -1151,7 +1153,7 @@ The strings `'appConfig'`, `'muiTheme'`, and `'fcConfig'` are reserved as top-le
 
 The `<TimumBooking>` React component intentionally **ignores** `window.timumBookingConfig`. React consumers pass `appConfig` / `muiTheme` / `fcConfig` directly as props per call and are expected to use React idioms (context, providers) for sharing config across components. The global override layer is therefore a script-tag / snippet feature only.
 
-<a name=”examples”></a>
+<a id="examples"></a>
 
 # Examples
 
@@ -1213,7 +1215,7 @@ The example below shows how to set a new default font (`Ysabeau Office`) and the
 </script>
 ```
 
-<a name=”restrict-bookingjs-access-to-invited-customers”></a>
+<a id="restrict-bookingjs-access-to-invited-customers"></a>
 
 ## Restrict BookingJS Access to Invited Customers
 
@@ -1296,7 +1298,7 @@ The following code demonstrates how to extract the necessary parameters from the
 
 The key used within the `pData` object (e.g., `personId`) must match the expected parameter name for your connected platform (onOffice, FlowFact, etc.) to correctly authenticate the user. Consult the platform-specific integration guide for the correct parameter name. (See also: [pData Configuration](#appconfig)
 
-<a name=”conditionally-hide-bookingjs-when-no-bookables-are-available”></a>
+<a id="conditionally-hide-bookingjs-when-no-bookables-are-available"></a>
 
 ## Conditionally Hide BookingJS When No Bookables Are Available
 
@@ -1351,7 +1353,7 @@ The following snippet demonstrates how to hide the main bookingjs container by c
 </script>
 ```
 
-<a name="multi-resource-mode-example"></a>
+<a id="multi-resource-mode-example"></a>
 
 ## Multi-Resource Mode for CondensedView
 
@@ -1415,7 +1417,7 @@ Customers can click any slot to book with their preferred consultant, without ne
 - Works seamlessly with other CondensedView options like `forceResourceSelectorDialog`
 - Professional plan may be required for additional customizations (custom theming, form fields, etc.)
 
-<a name="eyecandy-responsive-layout"></a>
+<a id="eyecandy-responsive-layout"></a>
 
 ## EyeCandy Responsive Layout in DetailsView
 
@@ -1473,24 +1475,24 @@ import { TimumBooking } from '@timum/booking';
 
 The component respects both DetailsView's viewport assessment and its own container measurements to deliver consistent, responsive layouts across all screen sizes.
 
-<a name="custom-field-example"></a>
+<a id="custom-field-example"></a>
 
 ## 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.
 
-<a name=”the-scenario”></a>
+<a id="the-scenario"></a>
 
 ### The Scenario
 
 It is necessary to determine the gender of customers for a specific purpose. The `mobile` and `message` fields are not necessary and will be removed. The new `gender` field must be filled, therefore a validation check is required to ensure it is completed. Both the name of the `gender` field and the validation messages must be translated into different languages.
 
-<a name=”the-implementation”></a>
+<a id="the-implementation"></a>
 
 ### The Implementation
 
-This is the base configuration. As it uses the standard field configuration shown in [Booking form fields](#bookingFormFields) :
+This is the base configuration. As it uses the standard field configuration shown in [Booking form fields](#booking-form-fields) :
 
 ```html
 <div id="bookingjs" style="margin: 32px"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@timum/booking",
-  "version": "1.24.0",
-  "next_version": "1.24.0",
+  "version": "1.24.1",
+  "next_version": "1.24.1",
   "current_major_version": "1",
   "license": "CC-BY-ND-4.0",
   "type": "module",