# salla-rating-modal (https://docs.salla.dev/twilight/react/web-components/salla-rating-modal)



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

The modal where a customer rates an order: its products, and (when available) the store and shipping, with
optional comments, images and videos. Add it once to the order details page (or any page that lets customers
review) and open it with `open()` or by dispatching the `rating::open` event. It loads the order's rating data
itself and renders the rating UI through an inner `salla-rating-modal-v2` element.

Events it listens to: `rating::open` (detail `{orderId?, productId?}`; `orderId` defaults to the current page ID),
`rating::edit` and `rating::delete` (open the edit and delete-confirmation dialogs). It dispatches `rating::ready`
with the component instance once loaded.

## Use it [#use-it]

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

```tsx
import { SallaRatingModal } from '@salla.sa/twilight-components-react/rating-modal';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaRatingModal } from '@salla.sa/twilight-components-react/rating-modal';

export function Example() {
  return (
    <SallaRatingModal />
  );
}
```

```html
<salla-rating-modal></salla-rating-modal>
```

```tsx
import { SallaRatingModal } from '@salla.sa/twilight-components-react/rating-modal';

export function Example() {
  return (
    <SallaRatingModal orderId="123456" productId="789" />
  );
}
```

```html
<salla-rating-modal order-id="123456" product-id="789"></salla-rating-modal>
```

```ts
// Open it for an order from JavaScript
salla.event.dispatch('rating::open', { orderId: 123456 });
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                             | Type               | Default |
| ----------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `orderId`   | `order-id`   | The ID of the order to rate its products and shipping. Defaults to the current page ID (`page.id` in the store config). Explicitly `null` means an unverified (no order) product review, which also needs `product-id`. | `number \| string` |         |
| `productId` | `product-id` | Limits the rating to a single product of the order (and skips the testimonial step). Leave unset to rate all unrated products. Combine with `order-id` set to `null` (via `setOrder`) for an unverified product review. | `number \| string` |         |

## Methods [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the rating modal.

Returns `Promise<HTMLElement>`: A Promise that resolves when the modal has been asked to close.

### `open() => Promise<unknown>` [#open--promiseunknown]

Opens the rating modal for the current `orderId` (or page ID) and `productId`.

Returns `Promise<unknown>`: A Promise that resolves when the modal has been asked to open.

### `setOrder(orderId: number | string | null, productId?: number | string) => Promise<void>` [#setorderorderid-number--string--null-productid-number--string--promisevoid]

Point the modal at a different order/product and invalidate any cached
order so the next open() re-fetches instead of reusing stale data.
Pass `orderId` as `null` for an eligible-but-unverified product review.

| Parameter   | Type               | Description                                               |
| ----------- | ------------------ | --------------------------------------------------------- |
| `orderId`   | `string \| number` | The order ID, or `null` for an unverified product review. |
| `productId` | `string \| number` | Optional product ID to limit the rating to one product.   |

## 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), [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars), [`<salla-file-upload>`](https://docs.salla.dev/twilight/react/web-components/salla-file-upload), [`<salla-rating-modal-v2>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal-v2), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder).

Used inside: [`<salla-orders>`](https://docs.salla.dev/twilight/react/web-components/salla-orders), [`<salla-verified-review>`](https://docs.salla.dev/twilight/react/web-components/salla-verified-review).