@shopgate/engage
Version:
Shopgate's ENGAGE library.
84 lines (83 loc) • 3.21 kB
JavaScript
import * as React from 'react';
import PropTypes from 'prop-types';
import { SurroundPortals } from '@shopgate/engage/components';
import { CART_ITEM_IMAGE, CART_ITEM_NAME, CART_ITEM_COUPON_CODE, CART_ITEM_PRICE } from '@shopgate/pwa-common-commerce/cart';
import Grid from '@shopgate/pwa-common/components/Grid';
import { CartItemCouponIcon } from "./CartItemCouponIcon";
import { CartItemCouponPrice } from "./CartItemCouponPrice";
import { CartItemCouponFreeShipping } from "./CartItemCouponFreeShipping";
import { CartItemCouponTitle } from "./CartItemCouponTitle";
import { CartItemCouponCode } from "./CartItemCouponCode";
import { CartItemCouponDelete } from "./CartItemCouponDelete";
import { item, icon, content, contentLast } from "./CartItemCouponLayout.style";
/**
* The CouponLayout component.
* @param {Object} props The component properties.
* @param {Object} props.coupon The coupon details.
* @param {string} props.currency The currency to display.
* @param {Function} [props.handleDelete] The delete handler function.
* @param {Object} context The component context.
* @param {string} context.cartItemId The cart item ID.
* @param {string} context.type The type of the cart item.
* @param {boolean} [context.editable] Whether the item is editable.
* @returns {JSX.Element}
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function CartItemCouponLayout(props, context) {
const {
coupon,
currency,
handleDelete
} = props;
return /*#__PURE__*/_jsxs(Grid, {
className: item,
children: [/*#__PURE__*/_jsx(Grid.Item, {
className: icon,
children: /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_IMAGE,
portalProps: context,
children: /*#__PURE__*/_jsx(CartItemCouponIcon, {})
})
}), /*#__PURE__*/_jsxs(Grid.Item, {
className: content,
grow: 1,
children: [/*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_NAME,
portalProps: context,
children: /*#__PURE__*/_jsx(CartItemCouponTitle, {
value: coupon.label
})
}), /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_COUPON_CODE,
portalProps: context,
children: /*#__PURE__*/_jsx(CartItemCouponCode, {
value: coupon.code
})
})]
}), /*#__PURE__*/_jsxs(Grid.Item, {
className: `${content} ${contentLast}`,
grow: 1,
shrink: 0,
children: [context.editable && /*#__PURE__*/_jsx(CartItemCouponDelete, {
handleDelete: handleDelete
}), /*#__PURE__*/_jsx(CartItemCouponFreeShipping, {
freeShipping: !!coupon.freeShipping
}), coupon.savedPrice && coupon.savedPrice.value > 0 && /*#__PURE__*/_jsx(SurroundPortals, {
portalName: CART_ITEM_PRICE,
portalProps: context,
children: /*#__PURE__*/_jsx(CartItemCouponPrice, {
currency: currency,
savedPrice: coupon.savedPrice
})
})]
})]
});
}
CartItemCouponLayout.defaultProps = {
handleDelete: () => {}
};
CartItemCouponLayout.contextTypes = {
cartItemId: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
editable: PropTypes.bool
};