Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 9x 9x 9x 9x 9x 70x 70x 70x 70x 70x 70x 70x 70x 72x 9x | import classNames from 'classnames';
import { isNumber } from 'lodash';
import React, { memo, FunctionComponent, ReactNode } from 'react';
import { ShopperCurrency } from '../currency';
export interface OrderSummaryItemProps {
id: string | number;
amount: number;
quantity: number;
name: string;
amountAfterDiscount?: number;
image?: ReactNode;
description?: ReactNode;
productOptions?: OrderSummaryItemOption[];
}
export interface OrderSummaryItemOption {
testId: string;
content: ReactNode;
}
const OrderSummaryItem: FunctionComponent<OrderSummaryItemProps> = ({
amount,
amountAfterDiscount,
image,
name,
productOptions,
quantity,
description,
}) => (
<div className="product" data-test="cart-item">
<figure className="product-column product-figure">
{ image }
</figure>
<div className="product-column product-body">
<h5
className="product-title optimizedCheckout-contentPrimary"
data-test="cart-item-product-title"
>
{ `${quantity} x ${name}` }
</h5>
<ul
className="product-options optimizedCheckout-contentSecondary"
data-test="cart-item-product-options"
>
{ (productOptions || []).map((option, index) =>
<li
className="product-option"
data-test={ option.testId }
key={ index }
>
{ option.content }
</li>
) }
</ul>
{ description && <div
className="product-description optimizedCheckout-contentSecondary"
data-test="cart-item-product-description"
>
{ description }
</div> }
</div>
<div className="product-column product-actions">
<div
className={ classNames(
'product-price',
'optimizedCheckout-contentPrimary',
{ 'product-price--beforeDiscount': isNumber(amountAfterDiscount) && amountAfterDiscount !== amount }
) }
data-test="cart-item-product-price"
>
<ShopperCurrency amount={ amount } />
</div>
{ isNumber(amountAfterDiscount) && amountAfterDiscount !== amount && <div
className="product-price"
data-test="cart-item-product-price--afterDiscount"
>
<ShopperCurrency amount={ amountAfterDiscount } />
</div> }
</div>
</div>
);
export default memo(OrderSummaryItem);
|