<commit_before>import React from "react"
import { makeStyles, Theme } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"
import Typography from "@material-ui/core/Typography"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"
import Divider from "@material-ui/core/Divider"
import { useCartStore } from "features/ShoppingCart/CartStore"
import useCartItems from "common/hooks/useCartItems"
import { FormikValues } from "../utils/initialValues"
import { getShippingValues, getPaymentValues } from "../utils/getListValues"

const useStyles = makeStyles((theme: Theme) => ({
  details: {
    marginBottom: theme.spacing(3),
  },
  listItem: {
    padding: theme.spacing(1, 0),
  },
  total: {
    fontWeight: 700,
  },
  title: {
    marginTop: theme.spacing(2),
  },
}))

type Props = {
  /** Object containing all entered form data */
  formData: FormikValues
}

const OrderSummary = ({ formData }: Props) => {
  const classes = useStyles()
  const {
    state: { addedItems },
  } = useCartStore()
  const { getCartTotal } = useCartItems()

  return (
    <React.Fragment>
      <Typography variant="h2" gutterBottom>
        Order Summary
      </Typography>
      <List disablePadding>
        {addedItems.map((item, index) => (
          <ListItem className={classes.listItem} key={index}>
            <ListItemText primary={item.name} secondary={item.id} />
            <Typography variant="body2">{item.fee}</Typography>
          </ListItem>
        ))}
        <ListItem className={classes.listItem}>
          <ListItemText
            disableTypography
            primary={
              <Typography variant="h3" className={classes.total}>
                Total
              </Typography><commit_msg>feat: add background colors to section titles<commit_after>import React from "react"
import { makeStyles, Theme } from "@material-ui/core/styles"
import { grey } from "@material-ui/core/colors"
import Grid from "@material-ui/core/Grid"
import Typography from "@material-ui/core/Typography"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"
import Divider from "@material-ui/core/Divider"
import { useCartStore } from "features/ShoppingCart/CartStore"
import useCartItems from "common/hooks/useCartItems"
import { FormikValues } from "../utils/initialValues"
import { getShippingValues, getPaymentValues } from "../utils/getListValues"

const useStyles = makeStyles((theme: Theme) => ({
  details: {
    marginBottom: theme.spacing(3),
  },
  listItem: {
    padding: theme.spacing(1, 0),
  },
  total: {
    fontWeight: 700,
  },
  title: {
    marginTop: theme.spacing(2),
    backgroundColor: grey[400],
    padding: theme.spacing(1),
  },
  subheader: {
    backgroundColor: grey[400],
    padding: theme.spacing(1),
  },
}))

type Props = {
  /** Object containing all entered form data */
  formData: FormikValues
}

const OrderSummary = ({ formData }: Props) => {
  const classes = useStyles()
  const {
    state: { addedItems },
  } = useCartStore()
  const { getCartTotal } = useCartItems()

  return (
    <React.Fragment>
      <Typography className={classes.subheader} variant="h2" gutterBottom>
        Order Summary
      </Typography>
      <List disablePadding>
        {addedItems.map((item, index) => (
          <ListItem className={classes.listItem} key={index}>
            <ListItemText primary={item.name} secondary={item.id} />
            <Typography variant="body2">{item.fee}</Typography>
          </ListItem>
        ))}
        <ListItem className={classes.listItem}>
          <ListItemText
            disableTypography
            primary={
              <Typography variant="h3" className={classes.total}>
                Total
              </Typography>
{'fraction_non_alphanumeric': 0.1308006119326874, 'fraction_numerical': 0.0071392146863844975, 'mean_word_length': 3.1601272534464475, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2359339', 'n_tokens_mistral': 1166, 'n_tokens_neox': 1153, 'n_words': 263}