web-app: Order completion page

src/backend/web/web.client/web-app-new/src/app/checkout/completed/component.tsx

@@ -1,21 +1,40 @@
+'use client';
+
 import React from 'react';
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { useCart } from '@/context/cart-context';
+
+interface Props {
+  address: string;
+  orderDateTime: string;
+  orderNumber: string;
+  orderTotal: string;
+}
+
+const OrderCompletion: React.FC<Props> = ({
+  address,
+  orderDateTime,
+  orderNumber,
+  orderTotal
+}: Props) => {
+  const { clearCart } = useCart();
+  clearCart();
 
-const OrderCompletion: 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',
+    address: address,
+    orderDateTime: orderDateTime,
+    orderNumber: orderNumber,
+    orderTotal: orderTotal,
+
     paymentMethod: 'Master Card ending **** 0987',
-    estimatedDeliveryTime: '11:53 AM',
+    estimatedDeliveryTime: 'XX:XX AM',
     email: '[email protected]',
     helpNumber: '+02 9629 4884'
   };
 
   return (
-    <div className="mx-auto max-w-md rounded-lg bg-white p-6 shadow-lg">
+    <div className="mx-auto mt-10 max-w-md rounded-lg bg-white p-6 shadow-lg">
       <div className="text-center">
         <CheckCircleIcon className="mx-auto h-12 w-12 text-green-500" />
         <h2 className="my-2 text-lg font-semibold">Order Submitted</h2>
@@ -27,7 +46,7 @@ const OrderCompletion: React.FC = () => {
       <div className="my-4">
         <h3 className="font-bold">Delivery Address</h3>
         <p>{orderDetails.address}</p>
-        <p>{orderDetails.deliveryTime}</p>
+        <p>{orderDetails.orderDateTime}</p>
       </div>
       <div className="my-4">
         <h3 className="font-bold">Order Number</h3>

src/backend/web/web.client/web-app-new/src/app/checkout/completed/loading.tsx

@@ -0,0 +1,24 @@
+import { ArrowPathIcon } from '@heroicons/react/24/solid';
+export default function Loading() {
+  return (
+    <div className="mx-auto mt-10 max-w-md  rounded-lg border  bg-white p-6 shadow-lg">
+      <div className="text-center">
+        <ArrowPathIcon className="mx-auto h-12 w-12 text-slate-700" />
+        <h3 className="my-2 text-lg font-semibold">Submitting the order...</h3>
+      </div>
+      <div className="flex animate-pulse space-x-4">
+        <div className="h-10 w-10 rounded-full bg-slate-700"></div>
+        <div className="flex-1 space-y-6 py-1">
+          <div className="h-2 rounded bg-slate-700"></div>
+          <div className="space-y-3">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="col-span-2 h-2 rounded bg-slate-700"></div>
+              <div className="col-span-1 h-2 rounded bg-slate-700"></div>
+            </div>
+            <div className="h-2 rounded bg-slate-700"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,30 @@
+import { getOrderByTransactionID, sleep } from '@/lib/fetch';
 import OrderCompletion from './component';
 
-export default function Page({ searchParams }: { searchParams?: { [key: string]: string } }) {
-  console.log(searchParams);
-  return <OrderCompletion />;
+export default async function Page({ searchParams }: { searchParams?: { [key: string]: string } }) {
+  const address = '';
+  let orderNumber = '';
+  let orderDate = new Date().toISOString();
+  let orderTotal = '';
+
+  if (searchParams?.transactionId) {
+    const order = await getOrderByTransactionID(searchParams?.transactionId);
+    await sleep(4000);
+    orderNumber = order.id;
+    orderDate = order.orderedDate;
+    const totalPrice = order.orderItems.reduce(
+      (total, item) => total + item.unitPrice * item.units,
+      0
+    );
+    orderTotal = `${totalPrice.toFixed(2)} Eur`;
+  }
+
+  return (
+    <OrderCompletion
+      orderTotal={orderTotal}
+      address={address}
+      orderNumber={orderNumber}
+      orderDateTime={orderDate}
+    />
+  );
 }

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

@@ -83,5 +83,5 @@ export async function checkoutServer(prevState: any, formData: FormData): Promis
     checkoutId: checkouted.checkout_id
   });
 
-  redirect(createUrl(`/checkout/complete`, params));
+  redirect(createUrl(`/checkout/completed`, params));
 }

src/backend/web/web.client/web-app-new/src/lib/fetch.ts

@@ -1,4 +1,5 @@
 import { Categories, CategoriesScheme, FoodItems, FoodItemsScheme } from './types/food-item';
+import { CustomerOrder, OrderSchema } from './types/order';
 
 export async function fetchFoodItems(): Promise<FoodItems> {
   const apiUrl = process.env.API_BASE_URL + '/catalog/items/all';
@@ -47,4 +48,27 @@ export async function getUserInfo(userId: string) {
   }
 
   return await res.json();
+}
+
+
+export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const retryCount = 5;
+
+export async function getOrderByTransactionID(transactioId: string): Promise<CustomerOrder> {
+  const apiUrl = process.env.API_BASE_URL + `/order/api/v1/orders/byTransaction/${transactioId}`;
+  const res = await fetch(apiUrl);
+  if (res.ok) {
+    return OrderSchema.parse(await res.json());
+  }
+
+  if (res.status == 500) {
+    for (let i = 0; i < retryCount; i++) {
+      await sleep(1000);
+      const res = await fetch(apiUrl);
+      if (res.ok) {
+        return OrderSchema.parse(await res.json());
+      }
+    }
+  }
+  throw new Error('Failed to fetch user orders');
 }

src/backend/web/web.client/web-app-new/src/lib/types/order.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const OrderItemSchema = z.object({
+    id: z.string().uuid(),
+    foodId: z.number(),
+    unitPrice: z.number(),
+    units: z.number(),
+});
+
+export const OrderSchema = z.object({
+    id: z.string().uuid(),
+    orderedDate: z.string(),
+    orderItems: z.array(OrderItemSchema),
+})
+
+export type CustomerOrder = z.infer<typeof OrderSchema>;
+export type CustomerOrderItem = z.infer<typeof OrderItemSchema>;