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



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

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

Shows the customer's own review of one product inside an order: the review text, a "pending" note, the star rating,
review factor tags and the attached photos and videos. Use it on the order details page, once per product.
The order is loaded by the current page id (`page.id`), so it only works on a page whose id is the order id.
It renders nothing when the order has no review for that product.
When the store setting `store.settings.rating.allow_update` is on, it also shows edit and delete buttons. They dispatch
`rating::edit` (payload `{ type: 'product', feedback_id }`) and `rating::delete` (payload `{ feedback_id }`) through `salla.event`,
and are disabled with an explanatory tooltip once the review can no longer be changed.

## Use it [#use-it]

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

```tsx
import { SallaReviewOrderItem } from '@salla.sa/twilight-components-react/review-order-item';
```

## Example [#example]

```tsx
import { SallaReviewOrderItem } from '@salla.sa/twilight-components-react/review-order-item';

export function Example() {
  return (
    <SallaReviewOrderItem productId="123" />
  );
}
```

```html
<salla-review-order-item product-id="123"></salla-review-order-item>
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                                                           | Type               | Default |
| ----------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `productId` | `product-id` | Id of the product whose review to show, matched against the order items and the order's product ratings. Use `product-id` in markup. The order itself is fetched using `page.id`. Nothing is shown while it is empty. Changing it reloads the review. | `number \| string` |         |

## Related [#related]

Renders: [`<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-review-factors-tags>`](https://docs.salla.dev/twilight/react/web-components/salla-review-factors-tags), [`<salla-attachments>`](https://docs.salla.dev/twilight/react/web-components/salla-attachments).