@shopgate/engage/cart/components/CartItems/CartItems.js

Shopgate's ENGAGE library.

import React from 'react';
import { CardList, ResponsiveContainer } from '@shopgate/engage/components';
import { FulfillmentSlotSwitcher } from '@shopgate/engage/locations';
import PropTypes from 'prop-types';
import CartItemsHeaderWide from "./CartItemsHeaderWide";
import { CartItemProvider, CartItem } from "../CartItem";
import { CartItemCard } from "./CartItemCard";
import { items, card } from "./CartItems.style";
import CartItemsSubstitution from "./CartItemsSubstitution";

/**
 * @typedef {import('../../../cart/cart.types').Item} Item
 */

/**
 * Renders the cart items.
 * @param {Object} props The component props.
 * @param {Item} [props.cartItems] The cart items.
 * @param {boolean} [props.multiLineReservation] Whether multi-line reservation is enabled.
 * @param {Function} props.onFocus The focus handler.
 * @param {boolean} [props.editable] Whether the cart is editable.
 * @param {boolean} [props.isOrderDetails] Whether this is for order details.
 * @param {boolean} [props.isDirectShipOnly] Whether the cart is direct-ship only.
 * @param {boolean} [props.isCheckoutConfirmation] Whether this is for checkout confirmation.
 * @param {string} [props.currencyOverride] The currency override.
 * @returns {JSX.Element|null}
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const CartItems = ({
  cartItems,
  onFocus,
  multiLineReservation,
  editable,
  isOrderDetails,
  isCheckoutConfirmation,
  currencyOverride,
  isDirectShipOnly
}) => {
  if (!cartItems || cartItems.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
      breakpoint: ">xs",
      webOnly: true,
      children: /*#__PURE__*/_jsx(CartItemsHeaderWide, {
        editable: editable,
        isOrderDetails: isOrderDetails,
        isDirectShipOnly: isDirectShipOnly,
        isCheckoutConfirmation: isCheckoutConfirmation
      })
    }), /*#__PURE__*/_jsxs(CardList, {
      className: items,
      children: [!isOrderDetails ? /*#__PURE__*/_jsx(ResponsiveContainer, {
        appAlways: true,
        breakpoint: "<=xs",
        children: /*#__PURE__*/_jsx(FulfillmentSlotSwitcher, {
          renderBar: true,
          card: true,
          editable: editable
        })
      }) : null, editable && !isDirectShipOnly && /*#__PURE__*/_jsx(ResponsiveContainer, {
        breakpoint: "<=xs",
        appAlways: true,
        children: /*#__PURE__*/_jsx(CartItemsSubstitution, {
          cartItems: cartItems,
          wrapCard: true,
          className: card
        })
      }), cartItems.map(item => /*#__PURE__*/_jsx(CardList.Item, {
        className: card,
        children: /*#__PURE__*/_jsx(CartItemProvider, {
          cartItem: item,
          isEditable: editable,
          isOrderDetails: isOrderDetails,
          cartIsDirectShipOnly: isDirectShipOnly,
          isCheckoutConfirmation: isCheckoutConfirmation,
          locationId: item.fulfillmentLocationId,
          children: /*#__PURE__*/_jsx("ul", {
            children: /*#__PURE__*/_jsx(CartItemCard, {
              multiLineReservation: multiLineReservation,
              fulfillmentLocationId: item.fulfillmentLocationId,
              fulfillmentMethod: item.fulfillmentMethod,
              hasMessages: Array.isArray(item.messages) && item.messages.length > 0,
              children: /*#__PURE__*/_jsx(CartItem, {
                item: item,
                onFocus: onFocus,
                editable: editable,
                currencyOverride: currencyOverride
              })
            })
          })
        })
      }, item.id))]
    })]
  });
};
CartItems.defaultProps = {
  cartItems: null,
  multiLineReservation: null,
  editable: true,
  isOrderDetails: false,
  isDirectShipOnly: false,
  isCheckoutConfirmation: false,
  currencyOverride: null
};
export default CartItems;