salla-rating-modal-v2

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

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).

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

ExampleCopy Anchor Link

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>
    </>
  );
}

// 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();

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 closed.

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

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

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

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

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

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-file-upload>, <salla-rating-stars>, <salla-modal>, <salla-button>, <salla-skeleton>, <salla-placeholder>.

Used inside: <salla-rating-modal>.