salla-order-cancel

Cancel-order dialog for the customer order page. It renders a salla-modal with the id modal-order-cancel containing a list of cancellation reasons (radio buttons), an optional note field, and confirm / go back buttons. Confirming calls the order cancel API with the selected reason and reloads the page. The component does not render its own trigger, so open the modal from your own button (for example document.querySelector('#modal-order-cancel').open()).

The reasons come from the cancellation-reasons prop or, when it is not set, from the order data of a salla-order-totals-card on the page. Nothing is rendered when there are no active reasons. When the order data contains order_cancelled_reason, it also inserts a "cancelled by" cell with the first reason after the order date header cell of the page (td.single-order-header-item). Choosing the reason with slug other shows a required note field (up to 250 characters). The reasons are native radio inputs with labels, and the confirm and back buttons also respond to Enter and Space.

Use itCopy Anchor Link

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

import { SallaOrderCancel } from '@salla.sa/twilight-components-react/order-cancel';

ExampleCopy Anchor Link

import { SallaOrderCancel } from '@salla.sa/twilight-components-react/order-cancel';

export function Example() {
  return (
    <SallaOrderCancel orderId="1234567" cancellationReasons='[{"id":1,"name":"Changed my mind","type":"system","slug":"changed_mind"},{"id":2,"name":"Other","type":"system","slug":"other"}]' />
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-modal>, <salla-button>.