text: import React, { useContext } from 'react'
  import Typography from '@material-ui/core/Typography'
  import Row from 'react-storefront/Row'
  import clsx from 'clsx'
  import CartItem from '../components/cart/CartItem'
  import { createLazyProps, fetchFromAPI } from 'react-storefront/props'
  import { makeStyles } from '@material-ui/core/styles'
  import { Grid, Hidden, Divider, Container, Button } from '@material-ui/core'
  import { price } from 'react-storefront/utils/format'
  import Spacer from 'react-storefront/Spacer'
  import Link from 'react-storefront/link/Link'
  import { Hbox } from 'react-storefront/Box'
  import SessionContext from 'react-storefront/session/SessionContext'
  import get from 'lodash/get'
  import useCartTotal from 'react-storefront/hooks/useCartTotal'
  import LoadMask from 'react-storefront/LoadMask'
  
  const styles = theme => ({
    root: {
      paddingBottom: '64px',
    },
    heading: {
      marginTop: theme.spacing(2),
    },
    checkoutPanel: {
      backgroundColor: theme.palette.grey['200'],
      borderRadius: theme.shape.borderRadius,
      padding: `${theme.spacing(2)}px`,
    },
    total: {
      fontWeight: 'bold',
    },
    checkoutButton: {
      width: '100%',
    },
    docked: {
      [theme.breakpoints.down('xs')]: {
        fontSize: theme.typography.subtitle1.fontSize,
        padding: `${theme.spacing(2)}px`,
        position: 'fixed',
        left: 0,
        bottom: 0,
        width: '100%',
        zIndex: 10,
        borderRadius: '0',
        boxShadow: 'none',
      },
    },
  })
  
  const useStyles = makeStyles(styles)
  
  export default function Cart() {
    const classes = useStyles()
    const { session, actions } = useContext(SessionContext)
    const total = useCartTotal()
    const items = get(session, 'cart.items')
  
    const handleUpdateQuantity = (product, quantity) => {
      actions.updateCart({
        item: product,
        quantity,
      })
    }
  
    const handleRemove = product => {
      actions.removeCartItem({
        item: product,
      })
    }
  
    return (
      <Container className={classes.root}>
        <Row>
          <Typography variant="h6" className={classes.heading}>
            My Cart ({total} {total === 1 ? 'item' : 'items'})
          </Typography>
        </Row>
        {!session.cart ? (
          <LoadMask />
        ) : (
          <Row>
            <Grid container spacing={4}>
              <Grid item xs={12} sm={8}>
                {items.length ? (
                  items.map((product, i) => (
                    <CartItem
                      key={product.id}
                      updateQuantity={handleUpdateQuantity}
                      remove={handleRemove}
                      product={product}
                    />
                  ))
                ) : (
                  <Typography variant="body1">There are no items in your cart.</Typography>
                )}
              </Grid>
              {items.length === 0 ? null : (
                <Grid item xs={12} sm={4}>
                  <div className={classes.checkoutPanel}>
                    <Hbox alignItems="flex-start">
                      <div>
                        <Typography variant="subtitle2" className={classes.total}>
                          Estimated Total
                        </Typography>
                        <Typography variant="caption">Tax calculated in checkout</Typography>
                      </div>
                      <Spacer />
                      <Typography variant="subtitle2" className={classes.total}>
                        {price(
                          items.reduce((a, b) => a + b.quantity * parseFloat(b.price), 0),
                          { currency: get(session, 'currency') }
                        )}
                      </Typography>
                    </Hbox>
                    <Hidden xsDown implementation="css">
                      <Row>
                        <Divider />
                      </Row>
                    </Hidden>
                    {items.length === 0 ? null : (
                      <Link href="/checkout">
                        <Button
                          color="primary"
                          variant="contained"
                          className={clsx(classes.checkoutButton, classes.docked)}
                        >
                          Checkout
                        </Button>
                      </Link>
                    )}
                  </div>
                </Grid>
              )}
            </Grid>
          </Row>
        )}
      </Container>
    )
  }
  
  Cart.getInitialProps = createLazyProps(fetchFromAPI)
  