125 lines
3.3 KiB
JavaScript
125 lines
3.3 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import PropTypes from 'prop-types';
|
|
import QuantitySelector from '@woocommerce/base-components/quantity-selector';
|
|
import { getCurrency } from '@woocommerce/base-utils';
|
|
import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
|
|
import { Icon, trash } from '@woocommerce/icons';
|
|
import { getSetting } from '@woocommerce/settings';
|
|
import {
|
|
ProductImage,
|
|
ProductLowStockBadge,
|
|
ProductMetadata,
|
|
ProductName,
|
|
ProductPrice,
|
|
ProductSaleBadge,
|
|
} from '@woocommerce/base-components/cart-checkout';
|
|
|
|
/**
|
|
* @typedef {import('@woocommerce/type-defs/cart').CartItem} CartItem
|
|
*/
|
|
|
|
/**
|
|
*
|
|
* @param {boolean} backOrdersAllowed Whether to allow backorders or not.
|
|
* @param {number|null} lowStockAmount If present the number of stock
|
|
* remaining.
|
|
*
|
|
* @return {number} The maximum number value for the quantity input.
|
|
*/
|
|
const getMaximumQuantity = ( backOrdersAllowed, lowStockAmount ) => {
|
|
const maxQuantityLimit = getSetting( 'quantitySelectLimit', 99 );
|
|
if ( backOrdersAllowed || ! lowStockAmount ) {
|
|
return maxQuantityLimit;
|
|
}
|
|
return Math.min( lowStockAmount, maxQuantityLimit );
|
|
};
|
|
|
|
/**
|
|
* Cart line item table row component.
|
|
*/
|
|
const CartLineItemRow = ( { lineItem } ) => {
|
|
const {
|
|
name,
|
|
summary,
|
|
low_stock_remaining: lowStockRemaining = null,
|
|
backorders_allowed: backOrdersAllowed,
|
|
permalink,
|
|
images,
|
|
variation,
|
|
prices,
|
|
} = lineItem;
|
|
|
|
const {
|
|
quantity,
|
|
changeQuantity,
|
|
removeItem,
|
|
isPending: itemQuantityDisabled,
|
|
} = useStoreCartItemQuantity( lineItem );
|
|
|
|
const currency = getCurrency( prices );
|
|
const regularPrice = parseInt( prices.regular_price, 10 ) * quantity;
|
|
const purchasePrice = parseInt( prices.price, 10 ) * quantity;
|
|
const saleAmount = regularPrice - purchasePrice;
|
|
|
|
return (
|
|
<tr className="wc-block-cart-items__row">
|
|
<td className="wc-block-cart-item__image">
|
|
<a href={ permalink }>
|
|
<ProductImage image={ images.length ? images[ 0 ] : {} } />
|
|
</a>
|
|
</td>
|
|
<td className="wc-block-cart-item__product">
|
|
<ProductName permalink={ permalink } name={ name } />
|
|
<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
|
|
<ProductMetadata summary={ summary } variation={ variation } />
|
|
</td>
|
|
<td className="wc-block-cart-item__quantity">
|
|
<QuantitySelector
|
|
disabled={ itemQuantityDisabled }
|
|
quantity={ quantity }
|
|
maximum={ getMaximumQuantity(
|
|
backOrdersAllowed,
|
|
lowStockRemaining
|
|
) }
|
|
onChange={ changeQuantity }
|
|
itemName={ name }
|
|
/>
|
|
<button
|
|
disabled={ itemQuantityDisabled }
|
|
className="wc-block-cart-item__remove-link"
|
|
onClick={ removeItem }
|
|
>
|
|
{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
|
|
</button>
|
|
<button
|
|
disabled={ itemQuantityDisabled }
|
|
className="wc-block-cart-item__remove-icon"
|
|
onClick={ removeItem }
|
|
>
|
|
<Icon srcElement={ trash } />
|
|
</button>
|
|
</td>
|
|
<td className="wc-block-cart-item__total">
|
|
<ProductPrice
|
|
currency={ currency }
|
|
regularValue={ regularPrice }
|
|
value={ purchasePrice }
|
|
/>
|
|
<ProductSaleBadge
|
|
currency={ currency }
|
|
saleAmount={ saleAmount }
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
CartLineItemRow.propTypes = {
|
|
lineItem: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default CartLineItemRow;
|