salla-rating-modal

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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

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

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

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

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

PropertiesCopy Anchor Link

MethodsCopy Anchor Link

Call these on the element or a React ref.

close() => Promise<HTMLElement>Copy Anchor Link

Closes the rating modal.

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

open() => Promise<unknown>Copy Anchor Link

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>Copy Anchor Link

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.

RelatedCopy Anchor Link

Renders: <salla-modal>, <salla-button>, <salla-rating-stars>, <salla-file-upload>, <salla-rating-modal-v2>, <salla-skeleton>, <salla-placeholder>.

Used inside: <salla-orders>, <salla-verified-review>.