Releases

1.2.4

• fix only hidden articles on validation

1.2.3

• add custom translations for 'datepicker'
• 'datepicker' validations
• hide summaries in 'all steps'

1.2.2

• add submit validation for 'all steps' modus
• fix to change an address

1.2.1

• Fix hidden articles

1.2.0

• new flow to show all steps at once.
• new option to apply selected quantity to all active articles (shared articles)
• new option to show calendar (datepicker)
• new way to visualize customer step (grid)
• improved styling

Activity logging

Inline custom events like 'activity' are not supported in HTML. JavaScript event listeners are needed to handle the 'activity' event.

<decoloop-planner id="widget"/>

<script>
	document
        .getElementById("widget")
        .addEventListener("activity", e => { console.log(e.detail) });
</script>

button name="dlpButtonLoader" id="widget-button">[text]</button>

<script>
	document
        .getElementById("widget-button")
        .addEventListener("activity", e => { console.log(e.detail) });
</script>

Example logging object

{
    "details": {
        "skillCode": "OTHER.MEASURE.PIECES",
        "active": true
    },
    "hasErrors": false,
    "errors": [],
    "kind": 0,
    "action": "toggle"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | kind | int | Widget step | | action | string | Action within the step | | details | object or null | based on action | | hasErrors | boolean | true when the errors list has values | | errors | string[] | list of errors |

Widget step: Articles

Kind = 0

Action: toggle

{
    "details": {
        "skillCode": "OTHER.MEASURE.PIECES",
        "active": true
    },
    "hasErrors": false,
    "errors": [],
    "kind": 0,
    "action": "toggle"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | skillCode | string | selected article | | active | boolean | selected or deselected |

Action: change

{
    "details": {
        "skillCode": "OTHER.MEASURE.PIECES",
        "quantity": "5"
    },
    "kind": 0,
    "hasErrors": false,
    "errors": [],
    "action": "change"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | skillCode | string | selected article | | quantity | int | selected quantity |

Action: submit

{
    "details": {
        "articles": [
            {
                "code": "OTHER.MEASURE.PIECES",
                "quantity": 5
            }
        ]
    },
    "kind": 0,
    "hasErrors": false,
    "errors": [],
    "action": "submit"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | articles | object[] | list of selected articles | | articles[].code | string | code | | articles[].quantity | int | quantity |

Possible errors that can occur:

• error.session.session_expired
• error.articles.articles_requires_at_least_1_item
• error.articles.article_invalid
• error.employees.no_valid_skills"

Widget step: Address

Kind = 1

Action: autocomplete

• Works only on dutch addresses.
• Non-blocking action, full address fields are visible in case of invalid address

{
    "details": {
        "request": {
            "streetNumber": "51",
            "zip": "8011CA"
        },
        "response": {
            "address": {
                "streetName": "Westerlaan",
                "streetNumber": "51",
                "addition": null,
                "zipCode": "8011CA",
                "cityName": "Zwolle",
                "country_ISO3166_1_2": "NL",
            },
            "isValid": true
        }
    },
    "kind": 1,
    "hasErrors": false,
    "errors": [],
    "action": "autocomplete"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | request | object | inserted address info | | request.streetNumber | string | streetNumber | | request.zip | string | zip | | response | object or null | received info | | response.address.isValid | boolean | if address can be found | | response.address | object or null | address info, null when isValid is false | | response.address.streetName | string | street name| | response.address.streetNumber | string | street number | | response.address.addition | string | addition | | response.address.zipCode | string | zip | | response.address.cityName | string | city | | response.address.country_ISO3166_1_2 | string | country code |

Possible errors that can occur:

• error.session.session_expired
• error.address.address_invalid

Action: branch

{
    "details": {
        "licenseeId": 999
    },
    "kind": 1,
    "hasErrors": false,
    "errors": [],
    "action": "branch"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | licenseeId | int | branch id |

Action: submit

{
    "details": {
        "request": {
            "streetNumber": "51",
            "zip": "8011",
            "streetName": "Westerlaan",
            "city": "Zwolle",
            "licenseeId": null
        },
        "response": {
            "streetName": "Westerlaan",
            "streetNumber": "51",
            "addition": null,
            "zipCode": "8011 CA",
            "cityName": "Zwolle",
            "country_ISO3166_1_2": "nl"
        }
    },
    "kind": 1,
    "hasErrors": false,
    "errors": [],
    "action": "submit"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | request | object | inserted address info | | request.streetNumber | string | street number | | request.streetName | string | street name | | request.zip | string | zip | | request.city | string | city | | request.licenseeId | int or null | branch id | | response | object or null | received info | | response.streetName | string | street name| | response.streetNumber | string | street number | | response.addition | string | addition | | response.zipCode | string | zip | | response.cityName | string | city | | response.country_ISO3166_1_2 | string | country code |

Possible errors that can occur:

• error.session.session_expired
• error.address.address_invalid
• error.address.address_difference_detection
• error.address.address_difference_detection.zip
• error.address.address_difference_detection.street_name
• error.address.address_difference_detection.street_number
• error.address.address_difference_detection.city
• error.worklocation.none_in_area
• error.worklocation.none_in_max_distance

Widget step: Schedule

Kind = 3

Action: set_time

{
    "details": {
        "time": "2022-12-28T12:00:00Z"
    },
    "kind": 2,
    "hasErrors": false,
    "errors": [],
    "action": "set_time"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | time | DateTime | selected date and time |

Action: next_range

{
    "details": null,
    "kind": 2,
    "hasErrors": false,
    "errors": [],
    "action": "next_range"
}

Action: previous_range

{
    "details": null,
    "kind": 2,
    "hasErrors": false,
    "errors": [],
    "action": "previous_range"
}

Action: submit

{
    "details": {
        "firstName": "John",
        "middleName": "",
        "lastName": "Doe",
        "emailAddress": "[email protected]",
        "phoneNumber": "0612345678",
        "mobilePhoneNumber": "",
        "languageAbbreviation": "nl",
        "remark": "Extra info"
    },
    "kind": 3,
    "hasErrors": false,
    "errors": [],
    "action": "submit"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | firstName | string | | | middleName | string | | | lastName | string | | | emailAddress | string | | | phoneNumber | string | | | mobilePhoneNumber | string | | | languageAbbreviation | string | | | remark | string | |

Widget step: Confirm

Kind = 4

Action: submit

{
    "details": {
        "reference": "1010.00125"
    },
    "kind": 4,
    "hasErrors": false,
    "errors": [],
    "action": "submit"
}

| Parameter | Type | Description | | --------- | -------- | -------------------------- | | reference | string | received reference number |

Possible errors that can occur:

• error.session_expired
• error.dateslot.invalid_timeslot
• error.unknown.unknown

Generic action: previous

Available in each step

{
    "details": null,
    "kind": 1,
    "hasErrors": false,
    "errors": [],
    "action": "previous"
}