update costs

src/pages/orders/components/UpdateOrderFeesModal.tsx

@@ -0,0 +1,97 @@
+import { type FC, useEffect, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import type { Order, UpdateOrderFeesType } from '../types/Types'
+
+interface UpdateOrderFeesModalProps {
+    isOpen: boolean
+    onClose: () => void
+    order: Order
+    isLoading?: boolean
+    onSubmit: (params: UpdateOrderFeesType) => void
+}
+
+const UpdateOrderFeesModal: FC<UpdateOrderFeesModalProps> = ({
+    isOpen,
+    onClose,
+    order,
+    isLoading,
+    onSubmit,
+}) => {
+    const [deliveryFee, setDeliveryFee] = useState(String(order.deliveryFee ?? 0))
+    const [packingFee, setPackingFee] = useState(String(order.packingFee ?? 0))
+    const [prepareTime, setPrepareTime] = useState(
+        order.prepareTime != null ? String(order.prepareTime) : ''
+    )
+
+    useEffect(() => {
+        if (!isOpen) return
+        setDeliveryFee(String(order.deliveryFee ?? 0))
+        setPackingFee(String(order.packingFee ?? 0))
+        setPrepareTime(order.prepareTime != null ? String(order.prepareTime) : '')
+    }, [isOpen, order.deliveryFee, order.packingFee, order.prepareTime])
+
+    const handleSubmit = () => {
+        onSubmit({
+            deliveryFee: Math.max(Number(deliveryFee) || 0, 0),
+            packingFee: Math.max(Number(packingFee) || 0, 0),
+            prepareTime: Math.max(Number(prepareTime) || 0, 0),
+        })
+    }
+
+    return (
+        <DefaulModal
+            open={isOpen}
+            close={onClose}
+            isHeader
+            title_header='ویرایش هزینه‌ها'
+            width={420}
+        >
+            <div className='mt-6 space-y-4'>
+                <Input
+                    label='هزینه ارسال (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    seprator
+                    value={deliveryFee}
+                    onChange={(e) => setDeliveryFee(e.target.value)}
+                />
+                <Input
+                    label='هزینه بسته‌بندی (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    seprator
+                    value={packingFee}
+                    onChange={(e) => setPackingFee(e.target.value)}
+                />
+                <Input
+                    label='زمان آماده‌سازی (دقیقه)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    value={prepareTime}
+                    onChange={(e) => setPrepareTime(e.target.value)}
+                    placeholder='مثلاً ۳۰'
+                />
+
+                <div className='flex gap-4 justify-center pt-4'>
+                    <Button
+                        label='ذخیره'
+                        onClick={handleSubmit}
+                        isloading={isLoading}
+                    />
+                    <Button
+                        label='انصراف'
+                        className='bg-transparent text-black border border-primary'
+                        onClick={onClose}
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default UpdateOrderFeesModal