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 { toast } from 'react-toastify'
|
||||
import { clx } from '@/helpers/utils'
|
||||
import Button from '@/components/Button'
|
||||
import DefaulModal from '@/components/DefaulModal'
|
||||
import Input from '@/components/Input'
|
||||
import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
|
||||
import type { UserWithAddresses } from '@/pages/customers/types/Types'
|
||||
@@ -28,6 +30,7 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
||||
}) => {
|
||||
const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
|
||||
const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
|
||||
const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
|
||||
|
||||
const handleSearch = () => {
|
||||
const phone = formik.values.userPhone.trim()
|
||||
@@ -87,131 +90,159 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
|
||||
: ''
|
||||
|
||||
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='flex items-center gap-2'>
|
||||
<div
|
||||
className={clx(
|
||||
'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()
|
||||
}
|
||||
}}
|
||||
<>
|
||||
<div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div
|
||||
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',
|
||||
'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
|
||||
searchState === 'found' ? 'bg-green-50' : 'bg-[#EEF0F7]',
|
||||
)}
|
||||
>
|
||||
{isSearching ? (
|
||||
<span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
|
||||
{searchState === 'found' ? (
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
{phoneError && (
|
||||
<p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
className='w-fit px-4 h-10'
|
||||
onClick={() => setIsCustomerModalOpen(true)}
|
||||
>
|
||||
{searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
|
||||
</Button>
|
||||
</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>
|
||||
|
||||
<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