ReturnsList container

The ReturnsList container displays a complete list of all created returns available to the user. Each return card follows the same structure as the OrderReturns container, allowing consistent presentation of return details. It provides an overview of all return requests, enabling users to manage and track their status in one place.

ReturnsList container

Configurations

The ReturnsList container provides the following configuration options:

Options	Type	Req?	Description
slot.ReturnItemsDetails	slot	No	Provides the ability to expand information for a specific return card. Allows adding additional data or attributes to make the card more detailed and customizableto specific 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.
withReturnsListButton	boolean	No	Determines whether the button at the bottom of the container is visible (applies only in minified view).
className	string	No	Allows custom CSS classes to be applied to the form for styling.
minifiedView	boolean	No	Enables or disables the minified view of the container.
withHeader	boolean	No	Controls the visibility of the container header.
withThumbnails	boolean	No	Enables or disables the display of product thumbnails on order cards.
returnPageSize	number	No	Specifies the number of items displayed on a single page of the returns list.
returnsInMinifiedView	number	No	Defines the number of returns visible in the minified view (default is 1).
routeReturnDetails	function	No	Specifies the URL where the return number link redirects the customer.
routeOrderDetails	function	No	Specifies the URL where the customer should be redirected when clicking the order number link (number and token).
routeTracking	function	No	Specifies the URL where the tracking number link redirects the customer.
routeReturnsList	function	No	Defines the URL for the button click at the bottom of the container.
routeProductDetails	function	No	A function that returns the URL for the product details page.

Example

The following example demonstrates how to render the ReturnsList container:

export default async function decorate(block) {
  const {
    'minified-view': minifiedViewConfig = 'false',
  } = readBlockConfig(block);

  if (!checkIsAuthenticated()) {
    window.location.href = CUSTOMER_LOGIN_PATH;
  } else {
    await orderRenderer.render(ReturnsList, {
      minifiedView: minifiedViewConfig === 'true',
      routeTracking: ({ carrier, number }) => {
        if (carrier?.toLowerCase() === 'ups') {
          return `${UPS_TRACKING_URL}?tracknum=${number}`;
        }
        return '';
      },
      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
      routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
      routeReturnsList: () => CUSTOMER_RETURNS_PATH,
      routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
    })(block);
  }
}