RequisitionListView Container

Displays the contents of a specific requisition list, including items, quantities, and management actions. Provides functionality to view products, update quantities, delete items, add items to cart, and manage the requisition list itself.

RequisitionListView container

Version: 1.1.0

Configuration

The RequisitionListView container provides the following configuration options:

Parameter	Type	Req?	Description
`requisitionListUid`	`string`	Yes	Specifies the UID of the requisition list to display. Must be a base64-encoded string. If an invalid UID is provided, renders the NotFound state. Fetches the requisition list data internally using this identifier.
`skipProductLoading`	`boolean`	No	Controls whether to skip automatic product data fetching on component mount. Set to true in test environments to prevent API calls or when product data is loaded externally.
`pageSize`	`number`	No	Sets the number of items displayed per page for pagination. Controls how many requisition list items appear in each page view. Defaults to DEFAULT_PAGE_SIZE if not specified.
`selectedItems`	`Set<string>`	Yes	Provides a Set of selected item UIDs for batch operations. Tracks which items are selected for actions like adding to cart or deleting. Required to enable multi-select functionality.
`routeRequisitionListGrid`	`function`	No	Generates the URL for navigating back to the requisition list grid view. Use to implement breadcrumb navigation, back buttons, or custom routing logic that preserves query parameters or application state.
`fallbackRoute`	`string`	No	Sets the fallback URL to redirect when requisition lists are not enabled or unavailable. Defaults to ‘/customer/account’. Use to provide graceful degradation when B2B features are disabled.
`getProductData`	`(skus: string[]) => Promise<Product[] \| null>`	Yes	Fetches products by SKU from the catalog service. Takes an array of SKUs and returns an array of products with all their data.
`enrichConfigurableProducts`	`(items: Item[]) => Promise<Item[]>`	Yes	Enriches the configurable products contained in requisition list items. Takes an array of items and returns the same array with configured product data attached.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the RequisitionListView container with the required getProductData and enrichConfigurableProducts props:

1
import { render as provider } from '@dropins/storefront-requisition-list/render.js';
2
import RequisitionListView from '@dropins/storefront-requisition-list/containers/RequisitionListView.js';
3
import {
4
  getProductData as pdpGetProductData,
5
  getRefinedProduct as pdpGetRefinedProduct,
6
} from '@dropins/storefront-pdp/api.js';
7

8
const selectedItems = new Set();
9

10
/**
11
 * Normalizes a product object into the shape expected by the requisition list UI:
12
 * url, urlKey, images[].url, and price (final.amount.{ value, currency }).
13
 * Handles multiple PDP response shapes (GraphQL, transformed prices, priceRange).
14
 *
15
 * @param {Object} product - Raw product from PDP (getProductData / getRefinedProduct).
16
 * @returns {Object} Product with normalized url, urlKey, images, price; or original if null.
17
 */
18
function ensureProductShape(product) {
19
  if (!product) return product;
20
  const url = product.url ?? product.canonicalUrl ?? '';
21
  const urlKey = product.urlKey ?? product.url_key ?? '';
22
  const images = Array.isArray(product.images)
23
    ? product.images.map((img) => ({
24
        url: img?.url ?? '',
25
        label: img?.label ?? '',
26
        roles: Array.isArray(img?.roles) ? img.roles : [],
27
      }))
28
    : [];
29
  let { price } = product;
30
  const { final: priceFinal } = price || {};
31
  const { amount: amt } = priceFinal || {};
32
  if (amt != null && typeof amt === 'object' && 'value' in amt) {
33
    // Already in GraphQL shape; no change
34
  } else if (amt != null && typeof amt === 'number') {
35
    price = { final: { amount: { value: amt, currency: priceFinal?.currency ?? '' } } };
36
  } else if (product.prices?.final != null) {
37
    const { final: pf, regular: pr } = product.prices;
38
    const regularAmount = pr != null
39
      ? { amount: { value: pr.amount ?? 0, currency: pr.currency ?? '' } }
40
      : undefined;
41
    price = {
42
      final: { amount: { value: pf.amount ?? 0, currency: pf.currency ?? '' } },
43
      regular: regularAmount,
44
    };
45
  } else if (product.priceRange?.minimum?.final?.amount != null) {
46
    price = {
47
      final: { amount: product.priceRange.minimum.final.amount },
48
      regular: product.priceRange.minimum.regular,
49
    };
50
  }
51
  return {
52
    ...product,
53
    url,
54
    urlKey,
55
    images,
56
    ...(price != null && { price }),
57
  };
58
}
59

60
/**
61
 * Fetches products by SKU and normalizes them for the requisition list.
62
 * PDP exposes getProductData(sku) → single product; this adapts it to
63
 * getProductData(skus) → products[] and is passed as a required prop to RequisitionListView.
64
 *
65
 * @param {string[]} skus - Product SKUs to fetch.
66
 * @returns {Promise<Object[]>} Resolved array of normalized products (falsy results omitted).
67
 */
68
const getProductData = async (skus) => {
69
  const results = await Promise.all(skus.map((sku) => pdpGetProductData(sku)));
70
  return results.filter(Boolean).map(ensureProductShape);
71
};
72

73
/**
74
 * Enriches requisition list line items that have configurable options by resolving
75
 * the configured variant via PDP getRefinedProduct and attaching it as configured_product.
76
 *
77
 * @param {Object[]} items - Requisition list items (each with product, configurable_options).
78
 * @returns {Promise<Object[]>} Same items with configured_product set where resolution succeeds.
79
 */
80
const enrichConfigurableProducts = async (items) => {
81
  if (!items?.length) return items;
82
  return Promise.all(
83
    items.map(async (item) => {
84
      const { product, configurable_options: opts } = item;
85
      if (!product?.sku || !opts?.length) return item;
86
      const optionIds = opts.map((o) => {
87
        const optionUid = o.option_uid ?? o.configurable_product_option_uid;
88
        const valueUid = o.value_uid ?? o.configurable_product_option_value_uid;
89
        return btoa(`configurable/${atob(optionUid)}/${atob(valueUid)}`);
90
      });
91
      try {
92
        const configured = await pdpGetRefinedProduct(product.sku, optionIds);
93
        if (!configured) return item;
94
        const images = Array.isArray(configured.images)
95
          ? configured.images.map((img) => ({ url: img?.url ?? '' }))
96
          : [];
97
        return { ...item, configured_product: { ...configured, images } };
98
      } catch {
99
        return item;
100
      }
101
    }),
102
  );
103
};
104

105
await provider.render(RequisitionListView, {
106
  requisitionListUid: 'MQ==',
107
  selectedItems,
108
  pageSize: 20,
109
  routeRequisitionListGrid: () => '/requisition-lists',
110
  getProductData,
111
  enrichConfigurableProducts,
112
})(block);

Features

Display all items in a requisition list
Update item quantities
Delete individual items or multiple items (batch delete)
Add items to cart (individual or batch)
Rename the requisition list
Delete the entire requisition list
Pagination support for large numbers of items
Empty state when the requisition list has no items
Not found state when the requisition list doesn’t exist or is inaccessible
Product data loading and display