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

import React from 'react';
import { Link } from 'react-router-dom';

const OrderHistory = () => {
  const orders = [
    {
      id: 'ORD-001',
      date: '2024-01-15',
      status: 'Delivered',
      total: 129.99,
      items: [
        { name: 'Wireless Headphones', quantity: 1, price: 99.99 },
        { name: 'Phone Case', quantity: 1, price: 29.99 }
      ]
    },
    {
      id: 'ORD-002',
      date: '2024-01-10',
      status: 'Processing',
      total: 299.98,
      items: [
        { name: 'Smart Watch', quantity: 1, price: 199.99 },
        { name: 'Charging Cable', quantity: 2, price: 49.99 }
      ]
    },
    {
      id: 'ORD-003',
      date: '2024-01-05',
      status: 'Shipped',
      total: 74.97,
      items: [
        { name: 'Cotton T-Shirt', quantity: 3, price: 74.97 }
      ]
    }
  ];

  const getStatusColor = (status) => {
    switch (status.toLowerCase()) {
      case 'delivered':
        return '#28a745';
      case 'shipped':
        return '#17a2b8';
      case 'processing':
        return '#ffc107';
      case 'cancelled':
        return '#dc3545';
      default:
        return '#6c757d';
    }
  };

  const getStatusText = (status) => {
    switch (status.toLowerCase()) {
      case 'delivered':
        return 'Delivered';
      case 'shipped':
        return 'Shipped';
      case 'processing':
        return 'Processing';
      case 'cancelled':
        return 'Cancelled';
      default:
        return status;
    }
  };

  return (
    <div style={containerStyle}>
      <div style={headerStyle}>
        <h1>Order History</h1>
        <p>View your recent orders and their status</p>
      </div>

      {orders.length === 0 ? (
        <div style={emptyStateStyle}>
          <h2>No Orders Yet</h2>
          <p>You haven't placed any orders yet. Start shopping to see your orders here.</p>
          <Link to="/products" style={shopButtonStyle}>
            Start Shopping
          </Link>
        </div>
      ) : (
        <div style={ordersListStyle}>
          {orders.map(order => (
            <div key={order.id} style={orderCardStyle}>
              <div style={orderHeaderStyle}>
                <div style={orderInfoStyle}>
                  <h3 style={orderIdStyle}>Order #{order.id}</h3>
                  <p style={orderDateStyle}>Placed on {order.date}</p>
                </div>
                <div style={orderStatusStyle}>
                  <span 
                    style={{
                      ...statusBadgeStyle,
                      backgroundColor: getStatusColor(order.status)
                    }}
                  >
                    {getStatusText(order.status)}
                  </span>
                  <div style={orderTotalStyle}>${order.total}</div>
                </div>
              </div>

              <div style={orderItemsStyle}>
                <h4>Items:</h4>
                {order.items.map((item, index) => (
                  <div key={index} style={orderItemStyle}>
                    <span style={itemNameStyle}>{item.name}</span>
                    <span style={itemDetailsStyle}>
                      Qty: {item.quantity} × ${item.price}
                    </span>
                  </div>
                ))}
              </div>

              <div style={orderActionsStyle}>
                <Link 
                  to={`/orders/${order.id}`}
                  style={viewDetailsButtonStyle}
                >
                  View Order Details
                </Link>
                {order.status === 'Delivered' && (
                  <button style={reorderButtonStyle}>
                    Reorder
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

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

const headerStyle = {
  textAlign: 'center',
  marginBottom: '3rem',
};

const ordersListStyle = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1.5rem',
};

const orderCardStyle = {
  backgroundColor: 'white',
  border: '1px solid #e0e0e0',
  borderRadius: '8px',
  padding: '1.5rem',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
};

const orderHeaderStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'flex-start',
  marginBottom: '1rem',
  flexWrap: 'wrap',
  gap: '1rem',
};

const orderInfoStyle = {
  flex: 1,
};

const orderIdStyle = {
  margin: '0 0 0.5rem 0',
  fontSize: '1.3rem',
  color: '#333',
};

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

const orderStatusStyle = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
  gap: '0.5rem',
};

const statusBadgeStyle = {
  padding: '0.25rem 0.75rem',
  borderRadius: '20px',
  color: 'white',
  fontSize: '0.8rem',
  fontWeight: '600',
  textTransform: 'uppercase',
  letterSpacing: '0.5px',
};

const orderTotalStyle = {
  fontSize: '1.2rem',
  fontWeight: 'bold',
  color: '#2c5aa0',
};

const orderItemsStyle = {
  marginBottom: '1.5rem',
  padding: '1rem 0',
  borderTop: '1px solid #f0f0f0',
  borderBottom: '1px solid #f0f0f0',
};

const orderItemStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '0.5rem 0',
};

const itemNameStyle = {
  fontWeight: '500',
  color: '#333',
};

const itemDetailsStyle = {
  color: '#666',
  fontSize: '0.9rem',
};

const orderActionsStyle = {
  display: 'flex',
  gap: '1rem',
  justifyContent: 'flex-end',
};

const viewDetailsButtonStyle = {
  padding: '0.5rem 1rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  textDecoration: 'none',
  borderRadius: '4px',
  fontSize: '0.9rem',
  transition: 'background-color 0.3s',
};

const reorderButtonStyle = {
  padding: '0.5rem 1rem',
  backgroundColor: 'transparent',
  color: '#2c5aa0',
  border: '1px solid #2c5aa0',
  borderRadius: '4px',
  cursor: 'pointer',
  fontSize: '0.9rem',
  transition: 'background-color 0.3s',
};

const emptyStateStyle = {
  textAlign: 'center',
  padding: '4rem 2rem',
  color: '#666',
};

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

export default OrderHistory;