web-app: Separating checkout components and adding checkout completed…

… page

src/backend/web/web.client/web-app-new/src/app/cart/page.tsx

@@ -21,7 +21,7 @@ const CartPage: React.FC = () => {
         ))}
         <Link href="/checkout">
           <div className="mt-6 flex justify-end">
-            <button className="rounded-full bg-orange-500 px-4 py-2 font-bold text-white hover:bg-orange-600">
+            <button className="rounded-full w-1/3 bg-orange-500 px-4 py-2 font-bold text-white hover:bg-orange-600">
               Checkout
             </button>
           </div>

src/backend/web/web.client/web-app-new/src/app/checkout/complete/page.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
+
+const OrderCompletionPage: React.FC = () => {
+  // Replace with your actual data
+  const orderDetails = {
+    address: '24 Lexington Drive, Bella Vista, NSW 22353',
+    deliveryTime: 'Ready at 2:20 PM 03 March 2020',
+    orderNumber: 45,
+    orderTotal: '$33.89',
+    paymentMethod: 'Master Card ending **** 0987',
+    estimatedDeliveryTime: '11:53 AM',
+    email: '[email protected]',
+    helpNumber: '+02 9629 4884',
+  };
+
+  return (
+    <div className="max-w-md mx-auto bg-white p-6 shadow-lg rounded-lg">
+      <div className="text-center">
+        <CheckCircleIcon className="h-12 w-12 text-green-500 mx-auto" />
+        <h2 className="text-lg font-semibold my-2">Order Submitted</h2>
+        <p className="text-gray-600">{orderDetails.orderTotal} Paid with {orderDetails.paymentMethod}</p>
+        <button className="bg-orange-500 text-white px-4 py-2 rounded my-4">Track order</button>
+      </div>
+      <div className="my-4">
+        <h3 className="font-bold">Delivery Address</h3>
+        <p>{orderDetails.address}</p>
+        <p>{orderDetails.deliveryTime}</p>
+      </div>
+      <div className="my-4">
+        <h3 className="font-bold">Order Number</h3>
+        <p>#{orderDetails.orderNumber}</p>
+        <p>Estimated Delivery Time: {orderDetails.estimatedDeliveryTime}</p>
+      </div>
+      <div className="my-4">
+        <p>An email confirmation will be sent to {orderDetails.email}</p>
+      </div>
+      <div className="my-4">
+        <p>Need help with anything?</p>
+        <p>Call {orderDetails.helpNumber}</p>
+      </div>
+      <button className="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded my-4">Start a new order</button>
+    </div>
+  );
+};
+
+
+export default OrderCompletionPage;;

src/backend/web/web.client/web-app-new/src/app/checkout/page.tsx

@@ -1,20 +1,29 @@
 'use server';
 
-import { CheckoutComponent } from './checkout';
 import { getServerSession } from 'next-auth';
 import { redirect } from 'next/navigation';
 import { authOptions } from '@/lib/auth';
 import { headers } from 'next/headers';
+import { CheckoutForm } from '@/components/checkout/checkout-form';
 
 const Page = async () => {
   const session = await getServerSession(authOptions);
   if (!session?.user) {
-    const headersList = headers();
-    const callbackUrl = headersList.get('referer') || ''; //after sign redirect into checkout page again
+    const host = headers().get('x-forwarded-host');
+    const protocol = headers().get('x-forwarded-proto') || 'http';
+    const callbackUrl = `${protocol}://${host}/checkout`;
+
     const urlParam = new URLSearchParams({ callbackUrl });
     return redirect(`api/auth/signin/web-app?${urlParam}`);
   }
-  return <CheckoutComponent />;
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="mb-6 text-3xl font-bold">Checkout</h1>
+      <div className="rounded-lg bg-white p-6 shadow-lg">
+        <CheckoutForm />
+      </div>
+    </div>
+  );
 };
 
 export default Page;

src/backend/web/web.client/web-app-new/src/app/foods/[category]/page.tsx

@@ -1,4 +1,4 @@
-import { fetchCategories, fetchFoodItemsByCategory } from '../../../lib/fetch';
+import { fetchCategories, fetchFoodItemsByCategory } from '@/lib/fetch';
 import { FoodsPage } from '../foods';
 
 const Page = async ({ params }: { params: { category: string } }) => {

src/backend/web/web.client/web-app-new/src/app/foods/foods.tsx

@@ -1,7 +1,7 @@
 import CategoriesSidebar from '@/components/categories-sidebar';
 import { Item } from '@/components/food-item';
 import RightSidebar from '@/components/right-sidebar';
-import { Categories, FoodItems } from '@/lib/types';
+import { Categories, FoodItems } from '@/lib/types/food-item';
 
 export const FoodsPage = ({
   foodItems,

src/backend/web/web.client/web-app-new/src/app/foods/page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { fetchCategories, fetchFoodItems } from '../../lib/fetch';
 import { FoodsPage } from './foods';
+import { fetchCategories, fetchFoodItems } from '@/lib/fetch';
 
 const Page = async () => {
   const [categories, foodItems] = await Promise.all([fetchCategories(), fetchFoodItems()]);

src/backend/web/web.client/web-app-new/src/app/layout.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { Providers } from './providers';
-import Layout from '@/components/Layout';
+import Layout from '@/components/layout';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className=" bg-gray-100 ">
       <body className={inter.className}>
         <Providers>
           <Layout>{children}</Layout>

src/backend/web/web.client/web-app-new/src/components/Layout.tsx

@@ -5,7 +5,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex flex-col md:flex-row">
       <Navbar />
-      <main className="flex-1 bg-gray-100 pt-16">{children}</main>
+      <main className="flex-1 pt-16">{children}</main>
     </div>
   );
 }

src/backend/web/web.client/web-app-new/src/components/cart/actions.ts

@@ -2,7 +2,7 @@
 
 import { SessionCartItem } from '@/context/cart-context';
 import { authOptions } from '@/lib/auth';
-import { Cart } from '@/lib/types';
+import { Cart } from '@/lib/types/cart';
 import { getServerSession } from 'next-auth';
 
 export async function addItemServer(customerId: string, cartItem: SessionCartItem) {

src/backend/web/web.client/web-app-new/src/components/cart/add-to-cart.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { SessionCartItem, useCart } from '@/context/cart-context';
-import { FoodItem } from '@/lib/types';
 // import { useFormState } from 'react-dom';
 import { addItemServer } from './actions';
 import { SubmitButton } from './submit-button';
 import { useSession } from 'next-auth/react';
+import { FoodItem } from '@/lib/types/food-item';
 
 export function AddToCart({ quantity, foodItem }: { quantity: number; foodItem: FoodItem }) {
   //   const [message, formAction] = useFormState(addItemServer, null);

src/backend/web/web.client/web-app-new/src/components/categories-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { Categories } from '@/lib/types';
+import { Categories } from '@/lib/types/food-item';
 
 type CategoryProps = {
   name: string;

src/backend/web/web.client/web-app-new/src/components/checkout/actions.tsx

@@ -0,0 +1,9 @@
+import { authOptions } from '@/lib/auth';
+import { getServerSession } from 'next-auth';
+
+export async function checkoutServer() {
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    throw new Error('User is not authenticated');
+  }
+}

src/backend/web/web.client/web-app-new/src/components/checkout/checkout-form.tsx

@@ -0,0 +1,45 @@
+'use client';
+import { PaymentDetails } from '@/components/checkout/payment-details';
+import { ShippingAddressDetails } from '@/components/checkout/shipping-address-details';
+import React, { useState } from 'react';
+
+export const CheckoutForm: React.FC = () => {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    street_address: '',
+    city: '',
+    state: '',
+    zip_code: '',
+    country: '',
+    credit_card_number: '',
+    credit_card_expiration_month: '',
+    credit_card_expiration_year: '',
+    credit_card_cvv: ''
+  });
+
+  console.log(setFormData);
+
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   setFormData({ ...formData, [e.target.name]: e.target.value });
+  // };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // TODO: Implement the checkout functionality here
+    console.log(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="mx-auto max-w-lg">
+      <PaymentDetails />
+      <ShippingAddressDetails />
+      <button
+        type="submit"
+        className="rounded w-full bg-orange-500 px-4 py-2 font-bold text-white hover:bg-orange-600"
+      >
+        Complete
+      </button>
+    </form>
+  );
+};