OrderedProductList

The OrderedProductsList component is a list component that displays the products that the user has ordered. You can use this component to show the products that the user has added to their cart.

Props

filter ((orderedProduct: FirmhouseOrderedProduct) => boolean)?

A function that is used to filter the ordered products that are displayed in the list. This prop is optional, and it defaults to include all ordered products.

groupBy ((orderedProduct: FirmhouseOrderedProduct, t?: TranslationFunction) => string)?

A function that is used to group the ordered products in the list. This prop is optional, and it defaults to not grouping the ordered products. The t parameter is a translation function that you can use to translate the group names.

onlyOneTimeProducts boolean?

A boolean that determines whether only one-time products are displayed in the list. This prop is optional, and it defaults to false.

onlyRecurringProducts boolean?

A boolean that determines whether only recurring products are displayed in the list. This prop is optional, and it defaults to false.

className string?

The class name that is applied to the list element. This prop is optional, and it defaults to an empty string.

itemClassName string?

The class name that is applied to the list items in the list. This prop is optional, and it defaults to an empty string.

header React.ReactNode?

A header component that is displayed at the top of the list only if there are ordered products that match the filter. This prop is optional, and it defaults to null.

fallback React.ReactNode?

A fallback component that is shown while the data is loading. This prop is optional, and it defaults to null.

OrderedProductComponent React.ComponentType<OrderedProductProps>?

A custom component that is used to render the ordered products in the list. This prop is optional, and it defaults to the OrderedProduct

OrderedProductsGroupComponent React.ComponentType<OrderedProductsGroupProps>?

A custom component that is used to render the ordered product groups in the list. This prop is optional, and it defaults to the OrderedProductsGroup component.

Example

<OrderedProductsList
  onlyRecurringProducts
  header={<h3>Recurring</h3>}
  groupBy={(op, t) => t?.(
      `opGroups.${op.product.intervalUnitOfMeasure?.toLocaleLowerCase()}`,
      { count: op.product.interval ?? 0 }
    ) ?? ""
  }
/>