docs: add initial delivery options beta docs

src/documentation/60.delivery-options.md

@@ -9,6 +9,10 @@ title: Delivery Options
     <GitHubShield repo="myparcelnl/delivery-options" link="pulls" />
 </Stack>
 
+::: note
+This is the documentation for the stable version of the delivery options. If you're looking for the documentation for the beta version, please see the [beta documentation](./61.delivery-options-beta.md).
+:::
+
 This is the MyParcel delivery options module for use in any e-commerce platform's checkout, by <DataType type="platform" name="myparcel" /> , <DataType type="platform" name="belgie" /> and <DataType type="platform" name="flespakket" /> customers. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings. It only has the bare minimum css styling, so it should integrate with the design of your webshop easily.
 
 ## Sandbox

src/documentation/61.delivery-options-beta.md

@@ -0,0 +1,166 @@
+---
+title: Delivery Options v6.x (beta)
+---
+
+::: note
+This is the documentation for the beta version of the Delivery Options. If you're looking for the documentation for the stable version, please see the [stable documentation](./60.delivery-options.md).
+:::
+
+## Introduction
+
+This is the MyParcel delivery options module for use in any e-commerce platform's checkout, by [MyParcel] and [SendMyParcel] customers. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings.
+
+## Getting started
+
+First, you need to add the delivery options script to your page. You can do this using your favorite package manager or by including the script from the CDN in your HTML.
+
+### CDN
+
+This is the easiest way. Include Vue 3 and the `@myparcel/delivery-options` JavaScript and CSS from the CDN in your HTML.
+
+```html
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<script src="https://unpkg.com/@myparcel/delivery-options@beta/dist/myparcel.lib.js"></script>
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@myparcel/delivery-options@beta/dist/style.css" />
+```
+
+### Package manager
+
+Install the package using your favorite package manager.
+
+<InstallNode package="@myparcel/delivery-options^beta" />
+
+#### Plain JavaScript
+
+```js
+import '@myparcel/delivery-options/dist/myparcel.js';
+import '@myparcel/delivery-options/dist/style.css';
+```
+
+Add the wrapper div to your html:
+
+```html
+<div id="myparcel-delivery-options" />
+```
+
+#### Vue 3
+
+```vue
+<script setup>
+import {
+  MyParcelDeliveryOptions,
+  MyParcelConfiguration,
+  defineConfig,
+} from '@myparcel/delivery-options';
+
+const configuration = ref(
+  defineConfig({
+    // Your configuration here
+  }),
+);
+</script>
+
+<template>
+  <MyParcelDeliveryOptions :configuration="configuration" />
+</template>
+```
+
+## Configuration
+
+::: tip
+For the most comprehensive information, you can check out our [Sandbox]. Here you can see (and try) all the possible configuration options and see the result in real-time.
+:::
+
+### Cutoff times and drop off days
+
+Drop off days are the days on which you can drop off your parcels at the carrier. This is used to calculate the delivery date. They can be entered in a couple of different ways.
+
+**As a string or array of numbers**
+
+```json
+{
+  "cutoffTime": "16:00",
+  "sameDayCutoffTime": "9:30",
+  "dropOffDays": "1,2,3,4,5",
+  // or
+  "dropOffDays": "1;2;3",
+  // or
+  "dropOffDays": [2, 3, 4]
+}
+```
+
+In this example, all drop off days will use the `cutoffTime` and the `sameDayCutoffTime` from the root of the configuration, so `16:00` and `9:30` respectively.
+
+**As an array of objects and/or numbers**
+
+```json
+{
+  "cutoffTime": "15:00",
+  "sameDayCutoffTime": "9:30",
+  "dropOffDays": [
+    1,
+    {
+      "day": 2,
+      "cutoffTime": "16:00",
+      "sameDayCutoffTime": "10:00"
+    },
+    3,
+    {
+      "day": 5,
+      "cutoffTime": "14:00"
+    }
+  ]
+}
+```
+
+In this example the drop-off days are as follows:
+
+| Day       | Cutoff time     | Same day cutoff time |
+| --------- | --------------- | -------------------- |
+| Monday    | 15:00 (default) | 9:30 (default)       |
+| Tuesday   | 16:00           | 10:00                |
+| Wednesday | 15:00 (default) | 9:30 (default)       |
+| Friday    | 14:00           | 9:30 (default)       |
+
+## Upgrading
+
+### v5 to v6
+
+The app was rewritten from scratch to be able to upgrade all underlying technologies and to improve the performance and stability. The existing behavior will mostly continue to work, so you can upgrade to v6 without huge changes. However, there are some breaking changes and deprecations, so please read the following list carefully.
+
+#### Improvements
+
+- A beautiful new design.
+- Vastly improved performance and stability.
+- The app can now be used as a Vue component in any Vue 3 app.
+- TypeScript support.
+- More exported methods, constants, types and interfaces.
+- Package type `package_small` is now supported.
+
+#### Breaking changes
+
+- It's no longer possible to set `showDeliveryDate` per carrier. This is now a global setting only.
+- The CSS is no longer bundled, so you must manually include `dist/style.css`. This does not apply if you're using the Vue component.
+
+#### Deprecated
+
+- `cutoffTime` is deprecated, use `dropOffDays` instead
+- Rather than relying on `allowDeliveryOptions`, use `allowStandardDelivery` instead.
+
+::: note
+The existing behavior will continue to work throughout v6 but will be removed/changed in the next major version.
+:::
+
+#### New features
+
+- It's now possible to set separate cutoff times per day and per carrier.
+
+#### Internal changes
+
+- The app is now written in TypeScript.
+- Upgraded from Vue 2 to Vue 3.
+- Upgraded from Vue CLI to Vite.
+
+[Sandbox]: https://myparcel-delivery-options.netlify.app