From 3c6ed6088cbaf58d37bf1da589cd8f95ffc4bc8e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 23 Mar 2026 21:50:28 +0000
Subject: [PATCH] Update src/app/checkout/page.tsx

---
 src/app/checkout/page.tsx | 292 +++++++++++++++++++++++---------------
 1 file changed, 174 insertions(+), 118 deletions(-)

diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 938e0bb..f78de94 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -1,154 +1,210 @@
 'use client';
 
-import React, { useState } from 'react';
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { CartProvider, useCart } from '@/components/cart/CartProvider';
-import { useRouter } from 'next/navigation';
-import { Package, CreditCard } from 'lucide-react';
-import Link from 'next/link';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { useCart } from '@/components/cart/CartProvider';
+import { CreditCard, Truck, Receipt, Facebook, Twitter, Instagram } from 'lucide-react';
+import React, { useState } from 'react';
 
 const CheckoutPageContent = () => {
-  const { cartItems, getCartTotal, clearCart } = useCart();
-  const router = useRouter();
-  const cartTotal = getCartTotal();
-
-  const [shippingInfo, setShippingInfo] = useState({
-    fullName: '',
+  const { cartItems, getTotalPrice, clearCart } = useCart();
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
     address: '',
     city: '',
     zip: '',
-    country: '',
+    cardNumber: '',
+    cardExpiry: '',
+    cardCVC: '',
   });
+  const [orderConfirmed, setOrderConfirmed] = useState(false);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setShippingInfo((prev) => ({ ...prev, [name]: value }));
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const handlePlaceOrder = (paymentMethod: string) => {
-    if (cartItems.length === 0) {
-      alert('Your cart is empty. Please add items before checking out.');
-      router.push('/products');
-      return;
-    }
-
-    if (!shippingInfo.fullName || !shippingInfo.address || !shippingInfo.city || !shippingInfo.zip || !shippingInfo.country) {
-        alert('Please fill in all shipping information.');
-        return;
-    }
-
-    alert(`Order placed successfully with ${paymentMethod}! Total: $${cartTotal.toFixed(2)}`);
-    clearCart();
-    router.push('/products'); // Redirect to products after checkout
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Simulate order processing
+    console.log('Order submitted:', formData, 'Items:', cartItems);
+    setOrderConfirmed(true);
+    clearCart(); // Clear cart after successful order
   };
 
-  if (cartItems.length === 0) {
+  const navItems = [
+    { name: 'Products', id: '/products' },
+    { name: 'Cart', id: '/cart' },
+    { name: 'Checkout', id: '/checkout' },
+  ];
+
+  if (orderConfirmed) {
     return (
-      <div className="min-h-screen pt-20 px-4 md:px-8 lg:px-16 pb-12 text-center">
-        <h1 className="text-4xl md:text-5xl font-extrabold mb-10 text-foreground flex items-center justify-center space-x-4">
-          <CreditCard className="w-10 h-10 text-primary-cta" />
-          <span>Checkout</span>
-        </h1>
-        <div className="py-20 bg-background-accent rounded-lg shadow-inner">
-          <p className="text-xl text-accent mb-4">Your cart is empty. Nothing to checkout.</p>
-          <Link href="/products" className="inline-block px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors duration-200">
-            Go to Products
-          </Link>
+      <>
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          button={{ text: 'Continue Shopping', href: '/products' }}
+        />
+        <main className="container mx-auto px-4 py-8 text-center min-h-[calc(100vh-160px)]">
+          <Receipt className="mx-auto text-green-500 mb-4" size={64} />
+          <h1 className="text-4xl font-bold mb-4">Order Confirmed!</h1>
+          <p className="text-lg mb-6">Thank you for your purchase. Your order will be shipped soon.</p>
+          <a href="/products" className="btn-primary px-6 py-3 rounded-md text-lg">Continue Shopping</a>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="GR Tackle"
+            copyrightText="© 2024 GR Tackle. All rights reserved."
+            socialLinks={[
+              { icon: Facebook, href: '#', ariaLabel: 'Facebook' },
+              { icon: Twitter, href: '#', ariaLabel: 'Twitter' },
+              { icon: Instagram, href: '#', ariaLabel: 'Instagram' }
+            ]}
+          />
         </div>
-      </div>
+      </>
     );
   }
 
   return (
-    <div className="min-h-screen pt-20 px-4 md:px-8 lg:px-16 pb-12">
-      <h1 className="text-4xl md:text-5xl font-extrabold text-center mb-10 text-foreground flex items-center justify-center space-x-4">
-        <CreditCard className="w-10 h-10 text-primary-cta" />
-        <span>Checkout</span>
-      </h1>
+    <>
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        button={{ text: 'Return to Cart', href: '/cart' }}
+      />
+      <main className="container mx-auto px-4 py-8 min-h-[calc(100vh-160px)]">
+        <h1 className="text-3xl font-bold mb-6 flex items-center">
+          <CreditCard className="mr-3" /> Checkout
+        </h1>
 
-      <div className="max-w-4xl mx-auto bg-card rounded-lg shadow-lg p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
-        <div>
-          <h2 className="text-2xl font-bold text-foreground mb-4 flex items-center space-x-2">
-            <Package size={24} />
-            <span>Shipping Information</span>
-          </h2>
-          <form className="space-y-4">
+        {cartItems.length === 0 ? (
+          <p className="text-lg">Your cart is empty. Please <a href="/products" className="text-primary-cta hover:underline">add items</a> before checking out.</p>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <div>
-              <label htmlFor="fullName" className="block text-sm font-medium text-accent">Full Name</label>
-              <input type="text" id="fullName" name="fullName" value={shippingInfo.fullName} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
-            </div>
-            <div>
-              <label htmlFor="address" className="block text-sm font-medium text-accent">Address</label>
-              <input type="text" id="address" name="address" value={shippingInfo.address} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label htmlFor="city" className="block text-sm font-medium text-accent">City</label>
-                <input type="text" id="city" name="city" value={shippingInfo.city} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
-              </div>
-              <div>
-                <label htmlFor="zip" className="block text-sm font-medium text-accent">Zip Code</label>
-                <input type="text" id="zip" name="zip" value={shippingInfo.zip} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
-              </div>
-            </div>
-            <div>
-              <label htmlFor="country" className="block text-sm font-medium text-accent">Country</label>
-              <input type="text" id="country" name="country" value={shippingInfo.country} onChange={handleInputChange} className="mt-1 block w-full p-2 border border-background-accent rounded-md bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta" required />
-            </div>
-          </form>
-        </div>
+              <h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <input
+                  type="text"
+                  name="name"
+                  placeholder="Full Name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full p-3 border rounded-md"
+                  required
+                />
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full p-3 border rounded-md"
+                  required
+                />
+                <input
+                  type="text"
+                  name="address"
+                  placeholder="Address"
+                  value={formData.address}
+                  onChange={handleChange}
+                  className="w-full p-3 border rounded-md"
+                  required
+                />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <input
+                    type="text"
+                    name="city"
+                    placeholder="City"
+                    value={formData.city}
+                    onChange={handleChange}
+                    className="w-full p-3 border rounded-md"
+                    required
+                  />
+                  <input
+                    type="text"
+                    name="zip"
+                    placeholder="ZIP Code"
+                    value={formData.zip}
+                    onChange={handleChange}
+                    className="w-full p-3 border rounded-md"
+                    required
+                  />
+                </div>
 
-        <div>
-          <h2 className="text-2xl font-bold text-foreground mb-4 flex items-center space-x-2">
-            <CreditCard size={24} />
-            <span>Order Summary</span>
-          </h2>
-          <div className="bg-background-accent p-4 rounded-md mb-4">
-            {cartItems.map((item) => (
-              <div key={item.id} className="flex justify-between items-center py-2 border-b last:border-b-0 border-card">
-                <span className="text-foreground">{item.name} x {item.quantity}</span>
-                <span className="text-foreground">${(item.price * item.quantity).toFixed(2)}</span>
+                <h2 className="text-2xl font-semibold mb-4 pt-6">Payment Information</h2>
+                <input
+                  type="text"
+                  name="cardNumber"
+                  placeholder="Card Number"
+                  value={formData.cardNumber}
+                  onChange={handleChange}
+                  className="w-full p-3 border rounded-md"
+                  required
+                />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <input
+                    type="text"
+                    name="cardExpiry"
+                    placeholder="MM/YY"
+                    value={formData.cardExpiry}
+                    onChange={handleChange}
+                    className="w-full p-3 border rounded-md"
+                    required
+                  />
+                  <input
+                    type="text"
+                    name="cardCVC"
+                    placeholder="CVC"
+                    value={formData.cardCVC}
+                    onChange={handleChange}
+                    className="w-full p-3 border rounded-md"
+                    required
+                  />
+                </div>
+
+                <button type="submit" className="btn-primary w-full px-6 py-3 rounded-md text-lg">Place Order</button>
+              </form>
+            </div>
+
+            <div>
+              <h2 className="text-2xl font-semibold mb-4">Order Summary</h2>
+              <div className="border rounded-md p-4">
+                {cartItems.map((item) => (
+                  <div key={item.id} className="flex justify-between items-center mb-2">
+                    <span>{item.name} (x{item.quantity})</span>
+                    <span>${(parseFloat(item.price) * item.quantity).toFixed(2)}</span>
+                  </div>
+                ))}
+                <div className="border-t pt-4 mt-4 flex justify-between items-center font-bold text-xl">
+                  <span>Total:</span>
+                  <span>${getTotalPrice().toFixed(2)}</span>
+                </div>
               </div>
-            ))}
-            <div className="flex justify-between items-center py-2 mt-2 font-bold text-xl text-foreground">
-              <span>Total:</span>
-              <span className="text-primary-cta">${cartTotal.toFixed(2)}</span>
             </div>
           </div>
-          <div className="space-y-4">
-            <button
-              onClick={() => handlePlaceOrder('Stripe')}
-              className="w-full px-6 py-3 bg-[#635BFF] text-white rounded-md font-semibold hover:bg-[#574fe3] transition-colors duration-200 shadow-md"
-            >
-              Pay with Stripe
-            </button>
-            <button
-              onClick={() => handlePlaceOrder('PayPal')}
-              className="w-full px-6 py-3 bg-[#0070BA] text-white rounded-md font-semibold hover:bg-[#005e9a] transition-colors duration-200 shadow-md"
-            >
-              Pay with PayPal
-            </button>
-          </div>
-        </div>
+        )}
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="GR Tackle"
+          copyrightText="© 2024 GR Tackle. All rights reserved."
+          socialLinks={[
+            { icon: Facebook, href: '#', ariaLabel: 'Facebook' },
+            { icon: Twitter, href: '#', ariaLabel: 'Twitter' },
+            { icon: Instagram, href: '#', ariaLabel: 'Instagram' }
+          ]}
+        />
       </div>
-    </div>
+    </>
   );
 };
 
 export default function CheckoutPage() {
   return (
     <ThemeProvider defaultButtonVariant="expand-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="bold">
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: 'Products', id: '/products' },
-          { name: 'Cart', id: '/cart' },
-        ]}
-        button={{ text: 'Checkout', href: '/checkout' }}
-      />
-      <CartProvider>
-        <CheckoutPageContent />
-      </CartProvider>
+      <CheckoutPageContent />
     </ThemeProvider>
   );
 }