OrderReturns container

The OrderReturns container displays the list of returns associated with a specific order. Each return is presented with relevant details, such as return status and associated items. If no returns have been created for the order, the container is not rendered, ensuring that the interface remains clean and free of unnecessary placeholders.

OrderReturns container

Configurations

The OrderReturns container provides the following configuration options:

Options	Type	Req?	Description
slot.ReturnItemsDetails	slot	No	Provides the ability to expand information for a specific card. Allows adding additional data or attributes to make the card more detailed and customizable, adapting it to specific product or interface requirements.
slot.DetailsActionParams	slot	No	Enables customization of actions by adding elements, buttons, or links to replace the default setup. This allows for tailored functionality to meet specific user tasks or requirements.
className	string	No	Allows custom CSS classes to be applied to the form for styling.
orderData	OrderDataModel	No	A structured object containing transformed order data. It can be passed as an initial value and used as a fallback if data is not received from the backend.
withHeader	boolean	No	Controls the visibility of the container header, allowing it to be shown or hidden.
withThumbnails	boolean	No	Enables or disables the display of product thumbnails on order cards.
routeReturnDetails	function	No	Specifies the URL where the return number link redirects the customer.
routeProductDetails	function	No	A function that returns the URL for the product details page.
routeTracking	function	No	Specifies the URL where the tracking number link redirects the customer.

Example

The following example demonstrates how to render the OrderReturns container:

export default async function decorate(block) {
  const isAuthenticated = checkIsAuthenticated();
  const returnDetailsPath = isAuthenticated
    ? CUSTOMER_RETURN_DETAILS_PATH
    : RETURN_DETAILS_PATH;

  await orderRenderer.render(OrderReturns, {
    routeTracking: ({ carrier, number }) => {
      if (carrier?.toLowerCase() === 'ups') {
        return `${UPS_TRACKING_URL}?tracknum=${number}`;
      }
      return '';
    },
    routeReturnDetails: ({ orderNumber, returnNumber, token }) => {
      const { searchParams } = new URL(window.location.href);
      const orderRefFromUrl = searchParams.get('orderRef');
      const newOrderRef = isAuthenticated ? orderNumber : token;

      const encodedOrderRef = encodeURIComponent(orderRefFromUrl || newOrderRef);

      return `${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`;
    },
    routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
  })(block);
}