# salla-order-cancel (https://docs.salla.dev/twilight/react/web-components/salla-order-cancel)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Cancel-order dialog for the customer order page. It renders a `salla-modal` with the id `modal-order-cancel`
containing a list of cancellation reasons (radio buttons), an optional note field, and confirm / go back buttons.
Confirming calls the order cancel API with the selected reason and reloads the page. The component does not
render its own trigger, so open the modal from your own button (for example `document.querySelector('#modal-order-cancel').open()`).

The reasons come from the `cancellation-reasons` prop or, when it is not set, from the order data of a
`salla-order-totals-card` on the page. Nothing is rendered when there are no active reasons. When the order data
contains `order_cancelled_reason`, it also inserts a "cancelled by" cell with the first reason after the order date
header cell of the page (`td.single-order-header-item`).
Choosing the reason with slug `other` shows a required note field (up to 250 characters).
The reasons are native radio inputs with labels, and the confirm and back buttons also respond to Enter and Space.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-cancel>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderCancel } from '@salla.sa/twilight-components-react/order-cancel';
```

## Example [#example]

```tsx
import { SallaOrderCancel } from '@salla.sa/twilight-components-react/order-cancel';

export function Example() {
  return (
    <SallaOrderCancel orderId="1234567" cancellationReasons='[{"id":1,"name":"Changed my mind","type":"system","slug":"changed_mind"},{"id":2,"name":"Other","type":"system","slug":"other"}]' />
  );
}
```

```html
<salla-order-cancel order-id="1234567" cancellation-reasons='[{"id":1,"name":"Changed my mind","type":"system","slug":"changed_mind"},{"id":2,"name":"Other","type":"system","slug":"other"}]'></salla-order-cancel>
```

## Properties [#properties]

| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Type                             | Default |
| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
| `cancellationReasons` | `cancellation-reasons` | The reasons the customer can choose from, as an array or a JSON string of `[{ id, name, type: 'system' \| 'custom', slug, sort?, is_active?, translations?: { [locale]: { name } } }]`. Reasons with `is_active: false` are hidden and the rest are ordered by `sort`. The reason with `slug: 'other'` asks for a written note. When it is not set, the reasons are read from the `cancellation_reasons` of the `salla-order-totals-card` order on the page. | `CancellationReason[] \| string` |         |
| `orderId`             | `order-id`             | The ID of the order to cancel. When it is not set, the id from the `salla-order-totals-card` order data is used, then the current page id.                                                                                                                                                                                                                                                                                                                   | `number \| string`               |         |

## Related [#related]

Renders: [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).