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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 19x 19x 8x 27x 27x 27x 7x 76x 8x 27x 27x 20x 7x 8x 27x 27x 19x 3x 3x 8x 8x | import { LineItemMap } from '@bigcommerce/checkout-sdk';
import React, { Fragment, ReactNode } from 'react';
import { TranslatedString } from '../locale';
import { IconChevronDown, IconChevronUp } from '../ui/icon';
import getItemsCount from './getItemsCount';
import mapFromCustom from './mapFromCustom';
import mapFromDigital from './mapFromDigital';
import mapFromGiftCertificate from './mapFromGiftCertificate';
import mapFromPhysical from './mapFromPhysical';
import OrderSummaryItem from './OrderSummaryItem';
const COLLAPSED_ITEMS_LIMIT = 4;
export interface OrderSummaryItemsProps {
items: LineItemMap;
}
interface OrderSummaryItemsState {
isExpanded: boolean;
}
class OrderSummaryItems extends React.Component<OrderSummaryItemsProps, OrderSummaryItemsState> {
constructor(props: OrderSummaryItemsProps) {
super(props);
this.state = {
isExpanded: false,
};
}
render(): ReactNode {
const { items } = this.props;
const { isExpanded } = this.state;
return (<Fragment>
<h3
className="cart-section-heading optimizedCheckout-contentPrimary"
data-test="cart-count-total"
>
<TranslatedString
data={ { count: getItemsCount(items) } }
id="cart.item_count_text"
/>
</h3>
<ul aria-live="polite" className="productList">
{
[
...items.physicalItems
.slice()
.sort(item => item.variantId)
.map(mapFromPhysical),
...items.giftCertificates
.slice()
.map(mapFromGiftCertificate),
...items.digitalItems
.slice()
.sort(item => item.variantId)
.map(mapFromDigital),
...(items.customItems || [])
.map(mapFromCustom),
]
.slice(0, isExpanded ? undefined : COLLAPSED_ITEMS_LIMIT)
.map(summaryItemProps =>
<li
className="productList-item is-visible"
key={ summaryItemProps.id }
>
<OrderSummaryItem { ...summaryItemProps } />
</li>
)
}
</ul>
{ this.renderActions() }
</Fragment>);
}
private renderActions(): ReactNode {
const { isExpanded } = this.state;
if (this.getLineItemCount() < 5) {
return;
}
return (
<div className="cart-actions">
<button
className="button button--tertiary button--tiny optimizedCheckout-buttonSecondary"
onClick={ this.handleToggle }
type="button"
>
{ isExpanded ?
<Fragment>
<TranslatedString id="cart.see_less_action" />
<IconChevronUp />
</Fragment> :
<Fragment>
<TranslatedString id="cart.see_all_action" />
<IconChevronDown />
</Fragment> }
</button>
</div>
);
}
private getLineItemCount(): number {
const { items } = this.props;
return (items.customItems || []).length +
items.physicalItems.length +
items.digitalItems.length +
items.giftCertificates.length;
}
private handleToggle: () => void = () => {
const { isExpanded } = this.state;
this.setState({ isExpanded: !isExpanded });
};
}
export default OrderSummaryItems;
|