From 1ac837438554e0092cc518f2a60b0a9786e9a566 Mon Sep 17 00:00:00 2001
From: zntb <zenetibi@yahoo.com>
Date: Mon, 4 Mar 2024 14:52:22 +0200
Subject: [PATCH] Order Item card update status

---
 src/components/OrderItemCard.tsx | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/OrderItemCard.tsx b/src/components/OrderItemCard.tsx
index d8b61ef..0d2b48f 100644
--- a/src/components/OrderItemCard.tsx
+++ b/src/components/OrderItemCard.tsx
@@ -1,4 +1,4 @@
-import { Order } from '@/types';
+import { Order, OrderStatus } from '@/types';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Separator } from './ui/separator';
 import { Badge } from './ui/badge';
@@ -11,12 +11,29 @@ import {
   SelectValue,
 } from './ui/select';
 import { ORDER_STATUS } from '@/config/order-status-config';
+import { useUpdateMyRestaurantOrder } from '@/api/MyRestaurantApi';
+import { useEffect, useState } from 'react';
 
 type Props = {
   order: Order;
 };
 
 const OrderItemCard = ({ order }: Props) => {
+  const { updateRestaurantStatus, isLoading } = useUpdateMyRestaurantOrder();
+  const [status, setStatus] = useState<OrderStatus>(order.status);
+
+  useEffect(() => {
+    setStatus(order.status);
+  }, [order.status]);
+
+  const handleStatusChange = async (newStatus: OrderStatus) => {
+    await updateRestaurantStatus({
+      orderId: order._id as string,
+      status: newStatus,
+    });
+    setStatus(newStatus);
+  };
+
   const getTime = () => {
     const orderDateTime = new Date(order.createdAt);
 
@@ -51,7 +68,7 @@ const OrderItemCard = ({ order }: Props) => {
           <div>
             Total Cost:
             <span className="ml-2 font-normal">
-              £{(order.totalAmount / 100).toFixed(2)}
+              ${(order.totalAmount / 100).toFixed(2)}
             </span>
           </div>
         </CardTitle>
@@ -59,8 +76,8 @@ const OrderItemCard = ({ order }: Props) => {
       </CardHeader>
       <CardContent className="flex flex-col gap-6">
         <div className="flex flex-col gap-2">
-          {order.cartItems.map((cartItem) => (
-            <span>
+          {order.cartItems.map((cartItem, index) => (
+            <span key={index}>
               <Badge variant="outline" className="mr-2">
                 {cartItem.quantity}
               </Badge>
@@ -70,7 +87,11 @@ const OrderItemCard = ({ order }: Props) => {
         </div>
         <div className="flex flex-col space-y-1.5">
           <Label htmlFor="status">What is the status of this order?</Label>
-          <Select>
+          <Select
+            value={status}
+            disabled={isLoading}
+            onValueChange={(value) => handleStatusChange(value as OrderStatus)}
+          >
             <SelectTrigger id="status">
               <SelectValue placeholder="Status" />
             </SelectTrigger>