{"size": 1171, "ext": "js", "max_stars_repo_path": "themes/default-theme/components/CheckoutDetails.js", "max_stars_repo_name": "sjha2048/gatsby-ecommerce-pwa", "max_stars_repo_stars_event_min_datetime": "2018-07-29T06:30:47.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-04T15:41:33.000Z", "max_issues_repo_path": "themes/default-theme/components/CheckoutDetails.js", "max_issues_repo_name": "sjha2048/gatsby-ecommerce-pwa", "max_issues_repo_issues_event_min_datetime": "2018-07-17T02:48:35.000Z", "max_issues_repo_issues_event_max_datetime": "2018-08-29T06:34:55.000Z", "max_forks_repo_path": "themes/default-theme/components/CheckoutDetails.js", "max_forks_repo_name": "smiti-123/NTCC", "max_forks_repo_forks_event_min_datetime": "2019-01-28T15:26:45.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-23T20:07:43.000Z"}
{"max_stars_count": 59, "max_issues_count": 26, "max_forks_count": 23, "avg_line_length": 24.914893617, "max_line_length": 94, "alphanum_fraction": 0.5294619983}
import React from 'react';
import PropTypes from 'prop-types';
import { Container, Flex, Box } from 'rebass';

const CheckoutDetails = ({ cartDetails }) => {
  let itemCount = 0;
  let totalPrice = 0;
  if (cartDetails) {
    Object.keys(cartDetails).forEach((key) => {
      itemCount += 1;
      totalPrice += (cartDetails[key].productPrice / 7.0) * cartDetails[key].purchaseQuantity;
    });
  }

  return (
    <Container p={3} style={{ boxShadow: '1px 1px 4px 1px rgba(158,158,158, 0.5)' }}>
      <Flex flexWrap="wrap">
        <Box width={[1]} py={2}>
          <span>
            {itemCount}
            {' '}
            items
          </span>
          <span style={{ float: 'right' }}>
            {`Rs. ${totalPrice.toFixed(2)}`}
          </span>
        </Box>
        <Box width={[1]} py={2}>
          <span>
            Shipping charges
          </span>
          <span style={{ float: 'right' }}>
            0.00
          </span>
        </Box>
      </Flex>
    </Container>
  );
};

CheckoutDetails.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  cartDetails: PropTypes.object.isRequired,
};

export default CheckoutDetails;
