user option and added in modal
This commit is contained in:
hamid zarghami
@@ -3,6 +3,8 @@ import { Profile, SearchNormal, TickCircle, UserAdd } from 'iconsax-react'
|
|||||||
import type { FormikProps } from 'formik'
|
import type { FormikProps } from 'formik'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { clx } from '@/helpers/utils'
|
import { clx } from '@/helpers/utils'
|
||||||
|
import Button from '@/components/Button'
|
||||||
|
import DefaulModal from '@/components/DefaulModal'
|
||||||
import Input from '@/components/Input'
|
import Input from '@/components/Input'
|
||||||
import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
|
import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
|
||||||
import type { UserWithAddresses } from '@/pages/customers/types/Types'
|
import type { UserWithAddresses } from '@/pages/customers/types/Types'
|
||||||
@@ -28,6 +30,7 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
|
const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
|
||||||
const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
|
const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
|
||||||
|
const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
|
||||||
|
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
const phone = formik.values.userPhone.trim()
|
const phone = formik.values.userPhone.trim()
|
||||||
@@ -87,131 +90,159 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
|||||||
: ''
|
: ''
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
|
<>
|
||||||
<div className='flex items-center justify-between gap-3 mb-3'>
|
<div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center justify-between gap-3'>
|
||||||
<div
|
<div className='flex items-center gap-2'>
|
||||||
className={clx(
|
<div
|
||||||
'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
|
|
||||||
searchState === 'found'
|
|
||||||
? 'bg-green-50'
|
|
||||||
: searchState === 'not_found'
|
|
||||||
? 'bg-[#EEF0F7]'
|
|
||||||
: 'bg-[#EEF0F7]',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{searchState === 'found' ? (
|
|
||||||
<TickCircle size={18} color='#16A34A' />
|
|
||||||
) : searchState === 'not_found' ? (
|
|
||||||
<UserAdd size={18} color='#8C90A3' />
|
|
||||||
) : (
|
|
||||||
<Profile size={18} color='#8C90A3' />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className='text-sm font-light'>اطلاعات مشتری</div>
|
|
||||||
{searchState === 'found' && customerName && (
|
|
||||||
<div className='text-[11px] text-green-600 mt-0.5'>
|
|
||||||
{customerName}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{searchState === 'not_found' && (
|
|
||||||
<div className='text-[11px] text-description mt-0.5'>
|
|
||||||
مشتری جدید
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{searchState === 'found' && (
|
|
||||||
<span className='text-[11px] text-green-600 bg-green-50 rounded-full px-3 py-1 flex-shrink-0'>
|
|
||||||
مشتری یافت شد
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{searchState === 'idle' && (
|
|
||||||
<span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-3 py-1 flex-shrink-0 hidden sm:inline'>
|
|
||||||
ابتدا شماره را جستجو کنید
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
|
|
||||||
<div className='w-full'>
|
|
||||||
<label className='text-xs text-description'>شماره تلفن</label>
|
|
||||||
<div className='flex mt-1'>
|
|
||||||
<input
|
|
||||||
name='userPhone'
|
|
||||||
placeholder='۰۹۱۲۱۲۳۴۵۶۷'
|
|
||||||
value={formik.values.userPhone}
|
|
||||||
onChange={handlePhoneChange}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault()
|
|
||||||
handleSearch()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className={clx(
|
className={clx(
|
||||||
'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white',
|
'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
|
||||||
'rounded-r-xl border-l-0 focus:outline-none',
|
searchState === 'found' ? 'bg-green-50' : 'bg-[#EEF0F7]',
|
||||||
phoneError && 'border-red-400',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type='button'
|
|
||||||
disabled={isSearching}
|
|
||||||
onClick={handleSearch}
|
|
||||||
className={clx(
|
|
||||||
'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
|
|
||||||
'bg-primary text-white text-xs rounded-l-xl',
|
|
||||||
'hover:opacity-90 transition-opacity disabled:opacity-60',
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isSearching ? (
|
{searchState === 'found' ? (
|
||||||
<span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
|
<TickCircle size={18} color='#16A34A' />
|
||||||
|
) : searchState === 'not_found' ? (
|
||||||
|
<UserAdd size={18} color='#8C90A3' />
|
||||||
) : (
|
) : (
|
||||||
<SearchNormal size={16} color='#fff' />
|
<Profile size={18} color='#8C90A3' />
|
||||||
)}
|
)}
|
||||||
<span className='hidden sm:inline'>جستجو</span>
|
</div>
|
||||||
</button>
|
<div>
|
||||||
|
<div className='text-sm font-light flex items-center gap-2'>
|
||||||
|
اطلاعات مشتری
|
||||||
|
<span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-2 py-0.5'>
|
||||||
|
اختیاری
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{searchState === 'found' && customerName && (
|
||||||
|
<div className='text-[11px] text-green-600 mt-0.5'>
|
||||||
|
{customerName}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{searchState === 'not_found' && (
|
||||||
|
<div className='text-[11px] text-description mt-0.5'>
|
||||||
|
مشتری جدید
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{searchState === 'idle' && (
|
||||||
|
<div className='text-[11px] text-description mt-0.5'>
|
||||||
|
برای این سفارش وارد کردن اطلاعات مشتری الزامی نیست
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{phoneError && (
|
<Button
|
||||||
<p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
|
type='button'
|
||||||
)}
|
className='w-fit px-4 h-10'
|
||||||
|
onClick={() => setIsCustomerModalOpen(true)}
|
||||||
|
>
|
||||||
|
{searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Input
|
|
||||||
label='نام'
|
|
||||||
name='firstName'
|
|
||||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
|
|
||||||
value={formik.values.firstName}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
readOnly={isCustomerLocked}
|
|
||||||
disabled={isNameDisabled}
|
|
||||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
|
||||||
error_text={
|
|
||||||
formik.touched.firstName && formik.errors.firstName
|
|
||||||
? formik.errors.firstName
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
label='نام خانوادگی'
|
|
||||||
name='lastName'
|
|
||||||
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
|
|
||||||
value={formik.values.lastName}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
readOnly={isCustomerLocked}
|
|
||||||
disabled={isNameDisabled}
|
|
||||||
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
|
||||||
error_text={
|
|
||||||
formik.touched.lastName && formik.errors.lastName
|
|
||||||
? formik.errors.lastName
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<DefaulModal
|
||||||
|
open={isCustomerModalOpen}
|
||||||
|
close={() => setIsCustomerModalOpen(false)}
|
||||||
|
isHeader={true}
|
||||||
|
title_header='اطلاعات مشتری'
|
||||||
|
width={700}
|
||||||
|
>
|
||||||
|
<div className='p-2'>
|
||||||
|
<div className='text-xs text-description mb-4'>
|
||||||
|
اطلاعات مشتری اختیاری است و در صورت نیاز میتوانید ثبت کنید.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
|
||||||
|
<div className='w-full'>
|
||||||
|
<label className='text-xs text-description'>شماره تلفن</label>
|
||||||
|
<div className='flex mt-1'>
|
||||||
|
<input
|
||||||
|
name='userPhone'
|
||||||
|
placeholder='۰۹۱۲۱۲۳۴۵۶۷'
|
||||||
|
value={formik.values.userPhone}
|
||||||
|
onChange={handlePhoneChange}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault()
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={clx(
|
||||||
|
'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white',
|
||||||
|
'rounded-r-xl border-l-0 focus:outline-none',
|
||||||
|
phoneError && 'border-red-400',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
disabled={isSearching}
|
||||||
|
onClick={handleSearch}
|
||||||
|
className={clx(
|
||||||
|
'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
|
||||||
|
'bg-primary text-white text-xs rounded-l-xl',
|
||||||
|
'hover:opacity-90 transition-opacity disabled:opacity-60',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isSearching ? (
|
||||||
|
<span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
|
||||||
|
) : (
|
||||||
|
<SearchNormal size={16} color='#fff' />
|
||||||
|
)}
|
||||||
|
<span className='hidden sm:inline'>جستجو</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{phoneError && (
|
||||||
|
<p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label='نام'
|
||||||
|
name='firstName'
|
||||||
|
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
|
||||||
|
value={formik.values.firstName}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
readOnly={isCustomerLocked}
|
||||||
|
disabled={isNameDisabled}
|
||||||
|
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||||
|
error_text={
|
||||||
|
formik.touched.firstName && formik.errors.firstName
|
||||||
|
? formik.errors.firstName
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label='نام خانوادگی'
|
||||||
|
name='lastName'
|
||||||
|
placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
|
||||||
|
value={formik.values.lastName}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
readOnly={isCustomerLocked}
|
||||||
|
disabled={isNameDisabled}
|
||||||
|
className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
|
||||||
|
error_text={
|
||||||
|
formik.touched.lastName && formik.errors.lastName
|
||||||
|
? formik.errors.lastName
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mt-5 flex justify-end'>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
className='w-fit px-6'
|
||||||
|
onClick={() => setIsCustomerModalOpen(false)}
|
||||||
|
>
|
||||||
|
تایید
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DefaulModal>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user