103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import { type FC, useEffect, useState } from 'react'
|
|
import DefaulModal from '@/components/DefaulModal'
|
|
import Button from '@/components/Button'
|
|
import Input from '@/components/Input'
|
|
import Textarea from '@/components/Textarea'
|
|
import Select from '@/components/Select'
|
|
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
|
|
|
|
interface AddPaymentModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
defaultAmount: number
|
|
isLoading?: boolean
|
|
onSubmit: (amount: number, description: string) => void
|
|
}
|
|
|
|
const AddPaymentModal: FC<AddPaymentModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
defaultAmount,
|
|
isLoading,
|
|
onSubmit,
|
|
}) => {
|
|
const [amount, setAmount] = useState(String(defaultAmount))
|
|
const [description, setDescription] = useState('')
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return
|
|
setAmount(String(Math.max(0, defaultAmount)))
|
|
setDescription('')
|
|
setError('')
|
|
}, [isOpen, defaultAmount])
|
|
|
|
const handleSubmit = () => {
|
|
const parsed = Number(amount)
|
|
if (!parsed || parsed <= 0) {
|
|
setError('مبلغ پرداخت باید بیشتر از صفر باشد')
|
|
return
|
|
}
|
|
onSubmit(parsed, description.trim())
|
|
}
|
|
|
|
return (
|
|
<DefaulModal
|
|
open={isOpen}
|
|
close={onClose}
|
|
isHeader
|
|
title_header='افزودن پرداخت'
|
|
width={420}
|
|
>
|
|
<div className='mt-6 space-y-4'>
|
|
<Select
|
|
label='روش پرداخت'
|
|
value={PaymentMethodEnum.Cash}
|
|
items={[{ value: PaymentMethodEnum.Cash, label: 'نقدی' }]}
|
|
disabled
|
|
/>
|
|
|
|
<Input
|
|
label='مبلغ پرداخت (تومان)'
|
|
type='number'
|
|
inputMode='numeric'
|
|
min={1}
|
|
seprator
|
|
value={amount}
|
|
onChange={(e) => {
|
|
setAmount(e.target.value)
|
|
setError('')
|
|
}}
|
|
/>
|
|
|
|
<Textarea
|
|
placeholder='توضیحات (اختیاری)'
|
|
value={description}
|
|
onChange={(e) => {
|
|
setDescription(e.target.value)
|
|
setError('')
|
|
}}
|
|
className='bg-transparent border border-gray-500 rounded-xl w-full p-2 min-h-[80px]'
|
|
/>
|
|
|
|
{error && <p className='text-xs text-red-500 text-center'>{error}</p>}
|
|
|
|
<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 AddPaymentModal
|