Component

// src/components/Header.js
import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/cart">Cart</Link></li>
          <li><Link to="/checkout">Checkout</Link></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

// src/components/Hero.js
import React from 'react';

const Hero = () => {
  return (
    <section className="hero">
      <h1>Welcome to Our Store</h1>
      <p>Find the best products here.</p>
    </section>
  );
};

export default Hero;

// src/components/ProductCard.js
import React from 'react';
import { Link } from 'react-router-dom';

const ProductCard = ({ product }) => {
  return (
    <div className="product-card">
      <img src={product.images[0].src} alt={product.name} />
      <h2>{product.name}</h2>
      <p>{product.price} {product.currency}</p>
      <Link to={`/product/${product.id}`}>View Details</Link>
    </div>
  );
};

export default ProductCard;

// src/components/ProductListing.js
import React, { useEffect, useState } from 'react';
import apiConfig from '../constants/api';
import ProductCard from './ProductCard';

const ProductListing = () => {
  const [products, setProducts] = useState([]);
  const defaultImage = 'https://via.placeholder.com/150'; // Update this path to your default image

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await apiConfig.get('products');
        setProducts(response.data);
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    };

    fetchProducts();
  }, []);

  return (
    <div className="product-listing">
      {products.map(product => (
        <ProductCard key={product.id} product={product} defaultImage={defaultImage} />
      ))}
    </div>
  );
};

export default ProductListing;

// src/components/ProductDetails.js
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import apiConfig from '../constants/api';

const ProductDetails = () => {
  const { id } = useParams();
  const [product, setProduct] = useState(null);
  const defaultImage = 'https://via.placeholder.com/150'; // Update this path to your default image

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await apiConfig.get(`products/${id}`);
        setProduct(response.data);
      } catch (error) {
        console.error('Error fetching product:', error);
      }
    };

    fetchProduct();
  }, [id]);

  if (!product) {
    return <div>Loading...</div>;
  }

  const productImage = product.images.length > 0 ? product.images[0].src : defaultImage;

  return (
    <div className="product-details">
      <h1>{product.name}</h1>
      <img src={productImage} alt={product.name} onError={(e) => e.target.src = defaultImage} />
      <p>{product.price} {product.currency}</p>
      <p>{product.description}</p>
    </div>
  );
};

export default ProductDetails;

// src/components/Cart.js
import React, { useContext } from 'react';
import { CartContext } from '../context/CartContext';

const Cart = () => {
  const { cart, removeFromCart } = useContext(CartContext);

  return (
    <div className="cart">
      <h1>Shopping Cart</h1>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            <h2>{item.name}</h2>
            <p>{item.price} {item.currency}</p>
            <button onClick={() => removeFromCart(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Cart;

// src/components/Checkout.js
import React, { useContext } from 'react';
import { CartContext } from '../context/CartContext';
import axios from 'axios';
import apiConfig from '../constants/api';

const Checkout = () => {
  const { cart, clearCart } = useContext(CartContext);

  const handleCheckout = async () => {
    try {
      const response = await axios.post(`${apiConfig.baseURL}orders`, {
        auth: {
          username: apiConfig.consumerKey,
          password: apiConfig.consumerSecret,
        },
        data: {
          payment_method: 'bacs',
          payment_method_title: 'Direct Bank Transfer',
          set_paid: true,
          billing: {
            first_name: 'John',
            last_name: 'Doe',
            address_1: '123 Main St',
            city: 'Anytown',
            state: 'CA',
            postcode: '12345',
            country: 'US',
            email: 'john.doe@example.com',
            phone: '(555) 555-5555'
          },
          line_items: cart.map(item => ({
            product_id: item.id,
            quantity: 1
          }))
        }
      });
      console.log('Order created successfully:', response.data);
      clearCart();
    } catch (error) {
      console.error('Error creating order:', error);
    }
  };

  return (
    <div className="checkout">
      <h1>Checkout</h1>
      <button onClick={handleCheckout}>Place Order</button>
    </div>
  );
};

export default Checkout;