details order refactor

src/pages/orders/components/OrderActions.tsx

@@ -1,41 +1,76 @@
 import Button from '@/components/Button'
-import type { FC } from 'react'
+import { type FC, useState, useEffect } from 'react'
 
 interface OrderActionsProps {
     showVerifyCashPaymentButton: boolean
-    canConfirm: boolean
     showSendToKitchenButton: boolean
     showCancelButton: boolean
     isPreparing: boolean
     isCourierDelivery: boolean
+    isDineInOrCarDelivery: boolean
+    isCustomerPickup: boolean
     isCanceled: boolean
     isVerifyingPayment: boolean
     isChangingStatus: boolean
     onVerifyCashPayment: () => void
-    onConfirmOrder: () => void
     onSendToKitchen: () => void
     onDeliverToCourier: () => void
-    onOrderReady: () => void
+    onDeliverToWaiter: () => void
+    onDeliverToReceptionist: () => void
     onCancelOrder: () => void
 }
 
 const OrderActions: FC<OrderActionsProps> = ({
     showVerifyCashPaymentButton,
-    canConfirm,
     showSendToKitchenButton,
     showCancelButton,
     isPreparing,
     isCourierDelivery,
+    isDineInOrCarDelivery,
+    isCustomerPickup,
     isCanceled,
     isVerifyingPayment,
     isChangingStatus,
     onVerifyCashPayment,
-    onConfirmOrder,
     onSendToKitchen,
     onDeliverToCourier,
-    onOrderReady,
+    onDeliverToWaiter,
+    onDeliverToReceptionist,
     onCancelOrder
 }) => {
+    const [loadingAction, setLoadingAction] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (!isChangingStatus && !isVerifyingPayment) {
+            setLoadingAction(null)
+        }
+    }, [isChangingStatus, isVerifyingPayment])
+
+    const handleSendToKitchen = () => {
+        setLoadingAction('sendToKitchen')
+        onSendToKitchen()
+    }
+
+    const handleDeliverToCourier = () => {
+        setLoadingAction('deliverToCourier')
+        onDeliverToCourier()
+    }
+
+    const handleDeliverToWaiter = () => {
+        setLoadingAction('deliverToWaiter')
+        onDeliverToWaiter()
+    }
+
+    const handleDeliverToReceptionist = () => {
+        setLoadingAction('deliverToReceptionist')
+        onDeliverToReceptionist()
+    }
+
+    const handleCancelOrder = () => {
+        setLoadingAction('cancelOrder')
+        onCancelOrder()
+    }
+
     if (isCanceled) return null
 
     return (
@@ -49,19 +84,11 @@ const OrderActions: FC<OrderActionsProps> = ({
                 />
             )}
 
-            {canConfirm && (
-                <Button
-                    label='تایید سفارش'
-                    onClick={onConfirmOrder}
-                    isloading={isChangingStatus}
-                />
-            )}
-
             {showSendToKitchenButton && (
                 <Button
                     label='ارسال به آشپزخانه'
-                    onClick={onSendToKitchen}
-                    isloading={isChangingStatus}
+                    onClick={handleSendToKitchen}
+                    isloading={isChangingStatus && loadingAction === 'sendToKitchen'}
                     className='bg-orange-600 hover:bg-orange-700'
                 />
             )}
@@ -69,26 +96,35 @@ const OrderActions: FC<OrderActionsProps> = ({
             {isPreparing && isCourierDelivery && (
                 <Button
                     label='تحویل به پیک'
-                    onClick={onDeliverToCourier}
-                    isloading={isChangingStatus}
+                    onClick={handleDeliverToCourier}
+                    isloading={isChangingStatus && loadingAction === 'deliverToCourier'}
                     className='bg-blue-600 hover:bg-blue-700'
                 />
             )}
 
-            {isPreparing && !isCourierDelivery && (
+            {isPreparing && isDineInOrCarDelivery && (
                 <Button
-                    label='غذا آماده است'
-                    onClick={onOrderReady}
-                    isloading={isChangingStatus}
-                    className='bg-green-600 hover:bg-green-700'
+                    label='تحویل به گارسون'
+                    onClick={handleDeliverToWaiter}
+                    isloading={isChangingStatus && loadingAction === 'deliverToWaiter'}
+                    className='bg-purple-600 hover:bg-purple-700'
+                />
+            )}
+
+            {isPreparing && isCustomerPickup && (
+                <Button
+                    label='تحویل به رسپشنیست'
+                    onClick={handleDeliverToReceptionist}
+                    isloading={isChangingStatus && loadingAction === 'deliverToReceptionist'}
+                    className='bg-indigo-600 hover:bg-indigo-700'
                 />
             )}
 
             {showCancelButton && (
                 <Button
                     label='لغو سفارش'
-                    onClick={onCancelOrder}
-                    isloading={isChangingStatus}
+                    onClick={handleCancelOrder}
+                    isloading={isChangingStatus && loadingAction === 'cancelOrder'}
                     className='bg-red-600 hover:bg-red-700'
                 />
             )}