import { Price } from '@components/ui'; import { alpha, darken, makeStyles, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Typography, } from '@material-ui/core'; import React from 'react'; import { CartQuery, UpdateCartMutationVariables } from '../../graphql'; import CartTableRow from './CartTableRow'; const useStyles = makeStyles( ({ breakpoints, palette }) => ({ root: { borderTop: `1px solid ${darken(alpha(palette.divider, 1), 0.68)}`, display: 'block', [breakpoints.up('sm')]: { borderTop: 0, display: 'table', }, }, footer: { display: 'block', [breakpoints.up('sm')]: { display: 'table-footer-group', }, '& tr': { display: 'flex', [breakpoints.up('sm')]: { display: 'table-row', }, }, '& td': { '&:nth-of-type(n+2)': { flexGrow: 1, }, '&:nth-of-type(3)': { textAlign: 'right', [breakpoints.up('sm')]: { textAlign: 'left', }, }, }, }, }), { name: 'CartTable' }, ); type Props = { cart: NonNullable<CartQuery['cart']>; loading?: boolean; onUpdate?: (values: UpdateCartMutationVariables) => void; }; const CartTable: React.VFC<Props> = ({ cart, loading, onUpdate }) => { const styles = useStyles(); return ( <Table className={styles.root}> <TableHead sx={{ display: { xs: 'none', sm: 'table-header-group' } }}> <TableRow> <TableCell colSpan={2}>Product</TableCell> <TableCell>Price</TableCell> <TableCell>Quantity</TableCell> <TableCell colSpan={2}>Total Price</TableCell> </TableRow> </TableHead> <TableBody sx={{ display: { xs: 'block', sm: 'table-row-group' } }}> {cart.contents?.nodes?.map( (item) => item != null && ( <CartTableRow key={item.key} item={item} loading={loading} onUpdate={onUpdate} /> ), )} </TableBody> <TableFooter className={styles.footer}> <TableRow> <TableCell colSpan={3} /> <TableCell> <Typography>Subtotal</Typography> </TableCell> <TableCell colSpan={2}> <Price>{cart.subtotal}</Price> </TableCell> </TableRow> {(cart.appliedCoupons?.length ?? 0) > 0 && ( <TableRow> <TableCell colSpan={3} /> <TableCell> <Typography>Discount</Typography> </TableCell> <TableCell colSpan={2}> <Price color="error">{`-${cart.discountTotal}`}</Price> </TableCell> </TableRow> )} </TableFooter> </Table> ); }; export default CartTable;