@shopgate/engage
Version:
Shopgate's ENGAGE library.
61 lines (60 loc) • 2.17 kB
JavaScript
import React, { Fragment } from 'react';
import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
import CardListItem from '@shopgate/pwa-ui-shared/CardList/components/Item';
import { MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
import { getPageSettings } from '@shopgate/engage/core/config';
import { messagesContainerCard, messagesCard, messagesContainerLine, messagesLine } from "./CartItem.style";
import { CartItemProductLayout } from "./CartItemProductLayout";
import { CartItemProductLayoutWide } from "./CartItemProductLayoutWide";
import { noGap } from "./CartItemProduct.style";
import { useCartItemProduct } from "./CartItem.hooks";
import CartItemSubstitution from "./CartItemSubstitution";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const messageStyles = {
card: {
container: messagesContainerCard,
message: messagesCard
},
line: {
container: messagesContainerLine,
message: messagesLine
}
};
/**
* The CartProduct component.
* @returns {JSX}
*/
const CartItemProduct = () => {
const {
messages,
cartItemRef,
isEditable
} = useCartItemProduct();
const {
cartItemsDisplay = 'line'
} = getPageSettings(CART_PATH);
return /*#__PURE__*/_jsx(CardListItem, {
className: cartItemsDisplay === 'card' ? noGap : null,
children: /*#__PURE__*/_jsxs("div", {
ref: cartItemRef,
"data-test-id": "cartItem",
children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
appAlways: true,
breakpoint: "<=xs",
children: /*#__PURE__*/_jsxs(_Fragment, {
children: [messages.length > 0 && /*#__PURE__*/_jsx(MessageBar, {
messages: messages,
classNames: messageStyles[cartItemsDisplay]
}), /*#__PURE__*/_jsx(CartItemProductLayout, {})]
})
}), /*#__PURE__*/_jsx(ResponsiveContainer, {
webOnly: true,
breakpoint: ">xs",
children: /*#__PURE__*/_jsx(CartItemProductLayoutWide, {})
}), /*#__PURE__*/_jsx(CartItemSubstitution, {
editable: isEditable
})]
})
});
};
export default CartItemProduct;