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



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

The order editing screen of the customer account. It lists the order items with quantity controls
and editable product options, lets the customer remove items or add products from the store (a
side panel on desktop, a modal on mobile), and shows a countdown while the edit session is open.
Use it once on the order edit page, passing the order data you already loaded.

Changes are kept locally until the customer presses Save. Saving sends them to the order edit API,
then shows a summary modal with the new totals, where the customer either confirms (and is sent
to the payment page when a payment is required) or goes back to the order. The last item cannot be
removed. When the edit session time ends, the edit form is replaced by an "edit session expired"
message. The product search and the Add product list use salla-products-list.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <SallaOrderEdit
      orderId="123456"
      orderData='{"id":123456,"customer_editing_session":{"ends_at":"2025-01-01 12:30:00"},"items":[{"id":1,"quantity":2,"product":{"id":10,"name":"T-shirt","price":120,"image":{"url":"/t.jpg"}}}]}'
      excludedCategories="[12,15]" />
  );
}
```

```html
<salla-order-edit
  order-id="123456"
  order-data='{"id":123456,"customer_editing_session":{"ends_at":"2025-01-01 12:30:00"},"items":[{"id":1,"quantity":2,"product":{"id":10,"name":"T-shirt","price":120,"image":{"url":"/t.jpg"}}}]}'
  excluded-categories="[12,15]"
></salla-order-edit>
```

## Properties [#properties]

| Property             | Attribute             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Type               | Default |
| -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------- |
| `excludedCategories` | `excluded-categories` | JSON-encoded array of category IDs to exclude from the products list (e.g. "\[1,2,3]"). Only positive integers are used.                                                                                                                                                                                                                                                                                                                                                                                                 | `string`           |         |
| `orderData`          | `order-data`          | The order to edit, as a JSON string (or a parsed object when set from JavaScript). It must have an `items` array, where each item has `id`, `quantity` and a `product` (`id`, `name`, `price`, `image`, `options`, `url`, `max_quantity_per_order`). An optional `customer_editing_session.ends_at` (`YYYY-MM-DD HH:mm:ss`, read as UTC+3) sets the edit countdown and the expiry. The order is not fetched by `order-id`, so this is required; without it, or with invalid JSON, an "order not found" message is shown. | `string`           |         |
| `orderId`            | `order-id`            | The order ID to edit. Sent to the order edit API when saving or cancelling the edit session.                                                                                                                                                                                                                                                                                                                                                                                                                             | `number \| string` |         |

## Related [#related]

Renders: [`<salla-products-list>`](https://docs.salla.dev/twilight/react/web-components/salla-products-list), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading), [`<salla-quantity-input>`](https://docs.salla.dev/twilight/react/web-components/salla-quantity-input), [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-count-down>`](https://docs.salla.dev/twilight/react/web-components/salla-count-down), [`<salla-order-edit-item>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit-item).