@shopgate/engage
Version:
Shopgate's ENGAGE library.
171 lines (170 loc) • 6.88 kB
JavaScript
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { Grid, Link, ProductProperties, SurroundPortals, ConditionalWrapper, I18n } from '@shopgate/engage/components';
import { CART_ITEM_IMAGE, CART_ITEM_LINK, CART_ITEM_PROPERTIES, CART_ITEM_QUANTITY_PICKER } from '@shopgate/engage/cart';
import { showTaxDisclaimer } from '@shopgate/engage/market';
import { bin2hex } from '@shopgate/engage/core/helpers';
import { useWidgetSettings } from '@shopgate/engage/core/hooks';
import { ProductImage, PriceInfo, ITEM_PATH } from '@shopgate/engage/product';
import { CartItemProductChangeLocation, CartChangeFulfillmentMethod } from '@shopgate/engage/locations';
import { getLineItemActiveStatus } from '@shopgate/engage/orders';
import { CartItemQuantityPicker } from "./CartItemQuantityPicker";
import { CartItemProductTitle } from "./CartItemProductTitle";
import CartItemProductOrderDetails from "./CartItemProductOrderDetails";
import CartItemProductPriceList from "./CartItemProductPriceList";
import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
import styles from "./CartItemProductLayout.style";
/**
* The Cart Product Layout component.
* @returns {JSX.Element}
*/
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function CartItemProductLayout() {
// Added with PWA 6 - CCP-2372
const {
show
} = useWidgetSettings('@shopgate/engage/components/TaxDisclaimer');
// use widget setting if set to true/false, otherwise use market logic
const showDisclaimer = typeof show === 'boolean' ? show : showTaxDisclaimer;
const {
registerFulfillmentAction,
isOrderDetails,
isCheckoutConfirmation
} = useCartItem();
const context = useCartItemProduct();
const {
cartItem,
product,
currency,
editMode,
handleUpdate,
handleRemove,
toggleEditMode,
isEditable,
isLinkable,
allowQuantityChange
} = context;
const portalProps = useMemo(() => ({
context: {
type: context.type,
cartItemId: context.cartItemId,
product: context.product
},
...context,
isOrderDetails,
isCheckoutConfirmation,
quantity: cartItem.quantity,
handleDelete: handleRemove
}), [cartItem.quantity, context, handleRemove, isCheckoutConfirmation, isOrderDetails]);
const isActive = !isOrderDetails ? true : getLineItemActiveStatus(cartItem?.status, cartItem?.subStatus);
const showLineItemPromotions = useMemo(() => {
if (isOrderDetails || isCheckoutConfirmation) {
return false;
}
return (cartItem?.appliedPromotions || []).length > 0;
}, [cartItem, isCheckoutConfirmation, isOrderDetails]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Grid, {
className: classNames(styles.item, {
[styles.itemInactive]: !isActive
}),
children: [/*#__PURE__*/_jsxs(Grid.Item, {
className: styles.content,
grow: 1,
children: [/*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_LINK,
portalProps: portalProps,
children: /*#__PURE__*/_jsx(CartItemProductTitle, {
value: product.name,
productId: product.id
})
}), /*#__PURE__*/_jsxs(Grid, {
className: styles.info,
children: [/*#__PURE__*/_jsxs(Grid.Item, {
grow: 1,
className: styles.properties,
children: [/*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_PROPERTIES,
portalProps: portalProps,
children: /*#__PURE__*/_jsx(ProductProperties, {
properties: product.properties,
lineClamp: 2
})
}), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductOrderDetails, {})]
}), /*#__PURE__*/_jsxs(Grid.Item, {
grow: 1,
className: styles.price,
children: [isOrderDetails && /*#__PURE__*/_jsx(I18n.Text, {
string: "cart.subtotal",
className: styles.orderDetailsSubtotalLabel
}), !showLineItemPromotions && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
isSubtotal: true
}), /*#__PURE__*/_jsx(PriceInfo, {
product: product,
currency: currency,
className: styles.priceInfo
})]
})]
}), showDisclaimer && /*#__PURE__*/_jsx(Grid.Item, {
className: styles.disclaimerSpacer,
grow: 0,
shrink: 0
})]
}), showLineItemPromotions && /*#__PURE__*/_jsxs(Grid, {
className: classNames(styles.info, styles.promotionLine),
children: [/*#__PURE__*/_jsx(Grid.Item, {}), /*#__PURE__*/_jsxs(Grid.Item, {
className: styles.promotionLineItem,
children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
isSubtotal: true,
showLabels: true
}), /*#__PURE__*/_jsx(PriceInfo, {
product: product,
currency: currency,
className: styles.priceInfo
})]
})]
})]
}), /*#__PURE__*/_jsxs(Grid.Item, {
className: styles.leftColumn,
children: [/*#__PURE__*/_jsx("div", {
className: styles.image,
"aria-hidden": true,
children: /*#__PURE__*/_jsx(ConditionalWrapper, {
condition: isEditable && isLinkable,
wrapper: children => /*#__PURE__*/_jsx(Link, {
tagName: "a",
href: `${ITEM_PATH}/${bin2hex(product.id)}`,
children: children
}),
children: /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_IMAGE,
portalProps: portalProps,
children: /*#__PURE__*/_jsx(ProductImage, {
src: product.featuredImageBaseUrl || product.featuredImageUrl
})
})
})
}), !isOrderDetails && allowQuantityChange && /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_QUANTITY_PICKER,
portalProps: portalProps,
children: /*#__PURE__*/_jsx(CartItemQuantityPicker, {
unit: product.unit,
hasCatchWeight: product.hasCatchWeight,
quantity: cartItem.quantity,
editMode: editMode,
onChange: handleUpdate,
onToggleEditMode: toggleEditMode,
disabled: !isEditable
})
})]
})]
}), /*#__PURE__*/_jsx(CartItemProductChangeLocation, {
cartItem: cartItem,
registerAction: registerFulfillmentAction
}), /*#__PURE__*/_jsx(CartChangeFulfillmentMethod, {
cartItem: cartItem,
registerAction: registerFulfillmentAction
})]
});
}