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



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

<Callout title="Used inside salla-rating-modal">
  [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal) renders this component for you. You rarely use it directly.
</Callout>

A step-by-step modal that lets a customer rate the products of an order (with optional
review factors, photos and videos), the store and the shipping company, or rate a single
product. It can also open an edit dialog and a delete confirmation for an existing review.
A theme places it once, usually on the order page or in a "rate" flow, and opens it from
a button by calling `open()`. The page is reloaded after a review is edited or deleted, and
after the thank-you countdown ends.

Without `order-id`, the order id is read from the `page.id` store config value. Image and
video attachments and the contact-support icons appear only when the matching store rating
settings are enabled.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <>
      <SallaRatingModalV2 orderId="123456" />
      <SallaButton onclick="document.querySelector('salla-rating-modal-v2').open()">
        Rate your order
      </SallaButton>
    </>
  );
}
```

```html
<salla-rating-modal-v2 order-id="123456"></salla-rating-modal-v2>
<salla-button onclick="document.querySelector('salla-rating-modal-v2').open()">
  Rate your order
</salla-button>
```

```ts
// Review one product that was not bought through an order (unverified review)
const modal = document.querySelector('salla-rating-modal-v2');
await modal.setOrder(null, 987654);
modal.open();
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                | Type               | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `orderId`   | `order-id`   | The order id, to rate on its products & shipping. Explicitly `null` means an unverified (no order) product review. When left undefined, the `page.id` store config value is used.                          | `number \| string` |         |
| `productId` | `product-id` | Id of a single product to rate. When set, only that product is rated and the store and shipping steps are skipped. Use it together with `order-id` set to `null` for a review that has no order behind it. | `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 closed.

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

Opens the rating modal, loads the order feedback data and starts the rating steps.

Returns `Promise<unknown>`: A Promise that resolves to `true` once opening has started. Loading errors are shown inside the modal instead of rejecting.

### `openDeleteModal(params: { feedback_id: number; }) => Promise<unknown>` [#opendeletemodalparams--feedback_id-number---promiseunknown]

Opens a confirmation dialog for deleting an existing review. Confirming deletes the
review and then reloads the page.

| Parameter | Type                       | Description                                      |
| --------- | -------------------------- | ------------------------------------------------ |
| `params`  | `{ feedback_id: number; }` | `feedback_id` is the id of the review to delete. |

Returns `Promise<unknown>`: A Promise that resolves to `true` once the confirmation dialog is open.

### `openEditModal(params: { type: "product" | "store" | "shipping"; feedback_id: number; }) => Promise<void>` [#openeditmodalparams--type-product--store--shipping-feedback_id-number---promisevoid]

Opens the dialog for editing an existing review. Saving sends the changes and then
reloads the page.

| Parameter | Type                                                                 | Description                                                                                                              |
| --------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `params`  | `{ type: "product" \| "store" \| "shipping"; feedback_id: number; }` | `type` is the kind of review (`'product'`, `'store'` or `'shipping'`) and `feedback_id` is the id of the review to edit. |

### `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 to rate, or `null` for a product review with no order. |
| `productId` | `string \| number` | Optional id of the single product to rate.                          |

## Related [#related]

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