Administrator / spring-boot-microservices-onlineshooping-fullstack · Files

import React from 'react';
import { Link } from 'react-router-dom';
import { useCart } from '../context/CartContext';

const Cart = () => {
  const { cartItems, removeFromCart, updateQuantity, getCartTotal, clearCart } = useCart();

  if (cartItems.length === 0) {
    return (
      <div style={emptyCartStyle}>
        <h2>Your Cart is Empty</h2>
        <p>Add some products to your cart to see them here.</p>
        <Link to="/products" style={shopButtonStyle}>
          Continue Shopping
        </Link>
      </div>
    );
  }

  return (
    <div style={containerStyle}>
      <div style={headerStyle}>
        <h1>Shopping Cart</h1>
        <button onClick={clearCart} style={clearCartButtonStyle}>
          Clear Cart
        </button>
      </div>

      <div style={cartContentStyle}>
        <div style={itemsSectionStyle}>
          {cartItems.map(item => (
            <div key={item.id} style={cartItemStyle}>
              <div style={itemImageStyle}>
                {item.name}
              </div>
              
              <div style={itemDetailsStyle}>
                <h3 style={itemNameStyle}>{item.name}</h3>
                <p style={itemDescriptionStyle}>{item.description}</p>
                <div style={itemPriceStyle}>${item.price}</div>
              </div>

              <div style={quantityControlsStyle}>
                <label>Qty:</label>
                <select
                  value={item.quantity}
                  onChange={(e) => updateQuantity(item.id, parseInt(e.target.value))}
                  style={quantitySelectStyle}
                >
                  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => (
                    <option key={num} value={num}>{num}</option>
                  ))}
                </select>
              </div>

              <div style={itemTotalStyle}>
                ${(item.price * item.quantity).toFixed(2)}
              </div>

              <button 
                onClick={() => removeFromCart(item.id)}
                style={removeButtonStyle}
              >
                Remove
              </button>
            </div>
          ))}
        </div>

        <div style={summarySectionStyle}>
          <div style={summaryCardStyle}>
            <h3>Order Summary</h3>
            
            <div style={summaryRowStyle}>
              <span>Subtotal:</span>
              <span>${getCartTotal().toFixed(2)}</span>
            </div>
            
            <div style={summaryRowStyle}>
              <span>Shipping:</span>
              <span>Free</span>
            </div>
            
            <div style={summaryRowStyle}>
              <span>Tax:</span>
              <span>${(getCartTotal() * 0.08).toFixed(2)}</span>
            </div>
            
            <div style={totalRowStyle}>
              <strong>Total:</strong>
              <strong>${(getCartTotal() * 1.08).toFixed(2)}</strong>
            </div>

            <Link to="/checkout" style={checkoutButtonStyle}>
              Proceed to Checkout
            </Link>

            <Link to="/products" style={continueShoppingStyle}>
              Continue Shopping
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

const containerStyle = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem 1rem',
};

const headerStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginBottom: '2rem',
};

const clearCartButtonStyle = {
  padding: '0.5rem 1rem',
  backgroundColor: '#dc3545',
  color: 'white',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
};

const cartContentStyle = {
  display: 'grid',
  gridTemplateColumns: '2fr 1fr',
  gap: '2rem',
};

const itemsSectionStyle = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1rem',
};

const cartItemStyle = {
  display: 'grid',
  gridTemplateColumns: '80px 1fr auto auto auto',
  gap: '1rem',
  alignItems: 'center',
  padding: '1rem',
  backgroundColor: 'white',
  borderRadius: '8px',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
};

const itemImageStyle = {
  width: '80px',
  height: '80px',
  backgroundColor: '#f5f5f5',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '0.8rem',
  color: '#666',
  borderRadius: '4px',
  textAlign: 'center',
  padding: '0.5rem',
};

const itemDetailsStyle = {
  flex: 1,
};

const itemNameStyle = {
  margin: '0 0 0.5rem 0',
  fontSize: '1.1rem',
};

const itemDescriptionStyle = {
  margin: '0 0 0.5rem 0',
  color: '#666',
  fontSize: '0.9rem',
};

const itemPriceStyle = {
  fontWeight: 'bold',
  color: '#2c5aa0',
};

const quantityControlsStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '0.5rem',
};

const quantitySelectStyle = {
  padding: '0.25rem',
  border: '1px solid #ddd',
  borderRadius: '4px',
};

const itemTotalStyle = {
  fontWeight: 'bold',
  fontSize: '1.1rem',
};

const removeButtonStyle = {
  padding: '0.5rem 1rem',
  backgroundColor: 'transparent',
  color: '#dc3545',
  border: '1px solid #dc3545',
  borderRadius: '4px',
  cursor: 'pointer',
};

const summarySectionStyle = {
  position: 'sticky',
  top: '2rem',
  height: 'fit-content',
};

const summaryCardStyle = {
  backgroundColor: 'white',
  padding: '1.5rem',
  borderRadius: '8px',
  boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
};

const summaryRowStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '0.5rem',
  paddingBottom: '0.5rem',
  borderBottom: '1px solid #eee',
};

const totalRowStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  margin: '1rem 0',
  paddingTop: '1rem',
  borderTop: '2px solid #333',
  fontSize: '1.2rem',
};

const checkoutButtonStyle = {
  display: 'block',
  width: '100%',
  padding: '1rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  textAlign: 'center',
  textDecoration: 'none',
  borderRadius: '4px',
  fontWeight: 'bold',
  marginBottom: '1rem',
};

const continueShoppingStyle = {
  display: 'block',
  width: '100%',
  padding: '0.5rem',
  backgroundColor: 'transparent',
  color: '#2c5aa0',
  textAlign: 'center',
  textDecoration: 'none',
  border: '1px solid #2c5aa0',
  borderRadius: '4px',
};

const emptyCartStyle = {
  textAlign: 'center',
  padding: '4rem 1rem',
};

const shopButtonStyle = {
  display: 'inline-block',
  marginTop: '1rem',
  padding: '1rem 2rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  textDecoration: 'none',
  borderRadius: '4px',
  fontWeight: 'bold',
};

export default Cart;