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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 3x 9x 9x 9x 3x | import { LineItemMap, ShopperCurrency as ShopperCurrencyType, StoreCurrency } from '@bigcommerce/checkout-sdk';
import React, { Fragment, FunctionComponent, ReactNode } from 'react';
import { preventDefault } from '../common/dom';
import { TranslatedString } from '../locale';
import { IconClose } from '../ui/icon';
import { Modal, ModalHeader } from '../ui/modal';
import OrderSummaryItems from './OrderSummaryItems';
import OrderSummarySection from './OrderSummarySection';
import OrderSummarySubtotals, { OrderSummarySubtotalsProps } from './OrderSummarySubtotals';
import OrderSummaryTotal from './OrderSummaryTotal';
export interface OrderSummaryDrawerProps {
additionalLineItems?: ReactNode;
lineItems: LineItemMap;
total: number;
storeCurrency: StoreCurrency;
shopperCurrency: ShopperCurrencyType;
isOpen: boolean;
headerLink?: ReactNode;
onRequestClose?(): void;
onAfterOpen?(): void;
}
const OrderSummaryModal: FunctionComponent<OrderSummaryDrawerProps & OrderSummarySubtotalsProps> = ({
additionalLineItems,
children,
onRequestClose,
onAfterOpen,
storeCurrency,
shopperCurrency,
isOpen,
headerLink,
lineItems,
total,
...orderSummarySubtotalsProps
}) => (
<Modal
additionalBodyClassName="cart-modal-body optimizedCheckout-orderSummary"
additionalHeaderClassName="cart-modal-header optimizedCheckout-orderSummary"
header={ renderHeader({ headerLink, onRequestClose }) }
isOpen={ isOpen }
onAfterOpen={ onAfterOpen }
onRequestClose={ onRequestClose }
>
<OrderSummarySection>
<OrderSummaryItems items={ lineItems } />
</OrderSummarySection>
<OrderSummarySection>
<OrderSummarySubtotals
{ ...orderSummarySubtotalsProps }
/>
{ additionalLineItems }
</OrderSummarySection>
<OrderSummarySection>
<OrderSummaryTotal
orderAmount={ total }
shopperCurrencyCode={ shopperCurrency.code }
storeCurrencyCode={ storeCurrency.code }
/>
</OrderSummarySection>
</Modal>
);
const renderHeader: FunctionComponent<{
headerLink: ReactNode;
onRequestClose?(): void;
}> = ({
onRequestClose,
headerLink,
}) => (<Fragment>
<a
className="cart-modal-close"
href="#"
onClick={ preventDefault(onRequestClose) }
>
<span className="is-srOnly">
<TranslatedString id="common.close_action" />
</span>
<IconClose />
</a>
<ModalHeader additionalClassName="cart-modal-title">
<TranslatedString id="cart.cart_heading" />
</ModalHeader>
{ headerLink }
</Fragment>);
export default OrderSummaryModal;
|