send sms to user in order detail

src/pages/orders/Details.tsx

@@ -9,12 +9,16 @@ import {
     useAddOrderItem,
     useUpdateOrderItemQuantity,
     useRemoveOrderItem,
+    useSendPleaseComeSms,
 } from './hooks/useOrderData'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
+import { ArrowRight2 } from 'iconsax-react'
 import { formatFaNumber } from '@/helpers/func'
+import { Pages } from '@/config/Pages'
 import { OrderStatus, PaymentStatusEnum } from './enum/Enum'
 import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
 import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
+import Button from '@/components/Button'
 import ModalConfrim from '@/components/ModalConfrim'
 import CustomerInfo from './components/CustomerInfo'
 import OrderItemsDetails from './components/OrderItemsDetails'
@@ -25,6 +29,7 @@ import UpdateOrderFeesModal from './components/UpdateOrderFeesModal'
 import AddOrderItemModal from './components/AddOrderItemModal'
 import RefundPaymentModal from './components/RefundPaymentModal'
 import AddPaymentModal from './components/AddPaymentModal'
+import SendPleaseComeSmsModal from './components/SendPleaseComeSmsModal'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
 import { printOrderReceipt } from './print/orderReceiptPrint'
@@ -32,6 +37,7 @@ import type { UpdateOrderFeesType } from './types/Types'
 
 const OrderDetails: FC = () => {
     const { id } = useParams()
+    const navigate = useNavigate()
     const { data: orderData, isLoading } = useGetOrderById(id!)
     const { mutate: verifyPayment, isPending: isVerifyingPayment } = useVerifyPayment()
     const { mutate: changeOrderStatus, isPending: isChangingStatus } = useChangeOrderStatus()
@@ -41,8 +47,10 @@ const OrderDetails: FC = () => {
     const { mutate: addOrderItem, isPending: isAddingItem } = useAddOrderItem()
     const { mutate: updateOrderItemQuantity, isPending: isUpdatingItemQuantity } = useUpdateOrderItemQuantity()
     const { mutate: removeOrderItem, isPending: isRemovingItem } = useRemoveOrderItem()
+    const { mutate: sendPleaseComeSms, isPending: isSendingPleaseComeSms } = useSendPleaseComeSms()
 
     const [showCancelModal, setShowCancelModal] = useState(false)
+    const [showPleaseComeSmsModal, setShowPleaseComeSmsModal] = useState(false)
     const [refundModal, setRefundModal] = useState<{ defaultAmount: number; maxAmount: number } | null>(null)
     const [showAddPaymentModal, setShowAddPaymentModal] = useState(false)
     const [showEditFeesModal, setShowEditFeesModal] = useState(false)
@@ -98,6 +106,7 @@ const OrderDetails: FC = () => {
         OrderStatus.DELIVERED_TO_RECEPTIONIST,
         OrderStatus.SHIPPED,
     ].includes(order.status as OrderStatus)
+    const canSendPleaseComeSms = Boolean(order.user?.phone)
     const isCourierDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCourier
     const isDineInOrCarDelivery =
         order.deliveryMethod?.method === DeliveryMethodEnum.DineIn ||
@@ -306,12 +315,33 @@ const OrderDetails: FC = () => {
         )
     }
 
+    const handleConfirmPleaseComeSms = () => {
+        sendPleaseComeSms(order.id, {
+            onSuccess: (response) => {
+                toast.success(response.message || 'پیامک در صف ارسال قرار گرفت')
+                setShowPleaseComeSmsModal(false)
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            },
+        })
+    }
+
     return (
         <div className='mt-5 pb-8'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>
                     سفارش {formatFaNumber(order.orderNumber)}
                 </h1>
+                <Button
+                    className='w-fit px-6 bg-transparent text-primary border-primary border'
+                    onClick={() => navigate(Pages.orders.list)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <ArrowRight2 color='#000' size={18} />
+                        <span>بازگشت</span>
+                    </div>
+                </Button>
             </div>
 
             <div className='flex flex-col lg:flex-row gap-5 lg:gap-7 mt-6 sm:mt-9'>
@@ -356,13 +386,16 @@ const OrderDetails: FC = () => {
                         isCustomerPickup={isCustomerPickup}
                         isCanceled={isCanceled}
                         canCompleteOrder={canCompleteOrder}
+                        canSendPleaseComeSms={canSendPleaseComeSms}
                         isChangingStatus={isChangingStatus}
+                        isSendingPleaseComeSms={isSendingPleaseComeSms}
                         onSendToKitchen={handleSendToKitchen}
                         onDeliverToCourier={handleDeliverToCourier}
                         onDeliverToWaiter={handleDeliverToWaiter}
                         onDeliverToReceptionist={handleDeliverToReceptionist}
                         onCompleteOrder={handleCompleteOrder}
                         onCancelOrder={() => setShowCancelModal(true)}
+                        onSendPleaseComeSms={() => setShowPleaseComeSmsModal(true)}
                     />
                 </div>
             </div>
@@ -416,6 +449,15 @@ const OrderDetails: FC = () => {
                 isloading={isRemovingItem}
                 label='آیا از حذف این آیتم مطمئن هستید؟'
             />
+
+            <SendPleaseComeSmsModal
+                isOpen={showPleaseComeSmsModal}
+                onClose={() => setShowPleaseComeSmsModal(false)}
+                isLoading={isSendingPleaseComeSms}
+                customerName={order.user?.firstName || ''}
+                restaurantName={order.restaurant?.name || ''}
+                onConfirm={handleConfirmPleaseComeSms}
+            />
         </div>
     )
 }