@shopgate/engage/cart/components/CartItem/CartItemProductLayoutWide.js

Shopgate's ENGAGE library.

import React from 'react';
import classNames from 'classnames';
import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals } from '@shopgate/engage/components';
import { ProductImage, CartUnitQuantityPicker, PriceInfo, ProductName, ITEM_PATH } from '@shopgate/engage/product';
import { CART_ITEM_NAME, CART_ITEM_QUANTITY_PICKER } from '@shopgate/pwa-common-commerce/cart';
import { bin2hex } from '@shopgate/engage/core';
import { getLineItemActiveStatus } from '@shopgate/engage/orders';
import { CartContextMenuChangeFulfillment } from '@shopgate/engage/locations';
import CartItemProductPriceList from "./CartItemProductPriceList";
import { CartItemProductLayoutWideRemoveItem } from "./CartItemProductLayoutWideRemoveItem";
import { CartItemProductLayoutWideFulfillmentLabel } from "./CartItemProductLayoutWideFulfillmentLabel";
import CartItemProductLayoutWideOrderDetails from "./CartItemProductLayoutWideOrderDetails";
import { CartItemProductPriceCaption } from "./CartItemProductPriceCaption";
import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
import { container, containerInactive, imageColumn, detailsColumn, priceColumnWide, productName, productProperties, column, quantityPicker, quantityPickerDisabled, price, priceInfo, priceListEntry, priceListPromo, contextMenu, messageContainer, messageContainerRope } from "./CartItemProductLayoutWide.style";

/**
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const CartItemProductLayoutWide = () => {
  const {
    merchantFulfillmentMethodsCount,
    isOrderDetails,
    cartHasLineItemPromotions
  } = useCartItem();
  const context = useCartItemProduct();
  const {
    cartItem,
    product,
    currency,
    handleUpdate,
    isEditable,
    isLinkable,
    allowQuantityChange,
    messages
  } = context;
  const hasUnitWithDecimals = product.unit && product.hasCatchWeight || false;
  const isActive = !isOrderDetails ? true : getLineItemActiveStatus(cartItem?.status, cartItem?.subStatus);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs("div", {
      className: classNames(container, {
        [containerInactive]: !isActive
      }),
      children: [/*#__PURE__*/_jsx("div", {
        className: imageColumn,
        children: /*#__PURE__*/_jsx(ProductImage, {
          src: product.featuredImageBaseUrl || product.featuredImageUrl
        })
      }), /*#__PURE__*/_jsxs("div", {
        className: detailsColumn,
        children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
          condition: isEditable && isLinkable,
          wrapper: children => /*#__PURE__*/_jsx(TextLink, {
            href: `${ITEM_PATH}/${bin2hex(product.id)}`,
            children: children
          }),
          children: /*#__PURE__*/_jsx(ProductName, {
            name: product.name,
            className: productName,
            portalName: CART_ITEM_NAME,
            portalProps: context,
            testId: product.name
          })
        }), /*#__PURE__*/_jsx(ProductProperties, {
          className: productProperties,
          properties: product.properties,
          lineClamp: 2
        }), !isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideFulfillmentLabel, {})]
      }), /*#__PURE__*/_jsxs("div", {
        className: cartHasLineItemPromotions ? priceColumnWide : column,
        children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
          cartItem: cartItem,
          classes: {
            price,
            priceStriked: price,
            entry: priceListEntry,
            promo: priceListPromo
          }
        }), /*#__PURE__*/_jsx(PriceInfo, {
          product: product,
          currency: currency,
          className: priceInfo
        }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
      }), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideOrderDetails, {}), /*#__PURE__*/_jsxs("div", {
        className: column,
        children: [isEditable && allowQuantityChange ? /*#__PURE__*/_jsx(SurroundPortals, {
          portalName: CART_ITEM_QUANTITY_PICKER,
          portalProps: {
            product,
            cartItem,
            isOrderDetails,
            handleUpdate,
            isEditable
          },
          children: /*#__PURE__*/_jsx(CartUnitQuantityPicker, {
            productId: product.id,
            value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
            unit: product.unit,
            hasCatchWeight: product.hasCatchWeight,
            onChange: handleUpdate,
            classNames: {
              withDecimals: quantityPicker,
              withoutDecimals: quantityPicker
            }
          })
        }) : /*#__PURE__*/_jsx(QuantityLabel, {
          className: quantityPickerDisabled,
          value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
          unit: hasUnitWithDecimals ? product.unit : null,
          maxDecimals: hasUnitWithDecimals ? 2 : 0
        }), isEditable && /*#__PURE__*/_jsx(CartItemProductLayoutWideRemoveItem, {})]
      }), /*#__PURE__*/_jsxs("div", {
        className: column,
        children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
          isSubtotal: true,
          cartItem: cartItem,
          classes: {
            price,
            priceStriked: price,
            entry: priceListEntry,
            promo: priceListPromo
          }
        }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
      }), isEditable && merchantFulfillmentMethodsCount > 1 && /*#__PURE__*/_jsx("div", {
        className: contextMenu,
        children: /*#__PURE__*/_jsx(CartContextMenuChangeFulfillment, {
          cartItem: cartItem
        })
      })]
    }), messages.length > 0 && /*#__PURE__*/_jsx(MessageBar, {
      messages: messages,
      showIcons: true,
      classNames: {
        container: cartItem.fulfillment ? messageContainerRope : messageContainer
      }
    })]
  });
};
export { CartItemProductLayoutWide };