user option and added in modal

src/pages/orders/components/CreateOrderCustomerSection.tsx

@@ -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,17 +90,14 @@ 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 justify-between gap-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' ? 'bg-green-50' : 'bg-[#EEF0F7]',
                             )}
                         >
                             {searchState === 'found' ? (
@@ -109,7 +109,12 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
                             )}
                         </div>
                         <div>
-                        <div className='text-sm font-light'>اطلاعات مشتری</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}
@@ -120,19 +125,33 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
                                     مشتری جدید
                                 </div>
                             )}
+                            {searchState === 'idle' && (
+                                <div className='text-[11px] text-description mt-0.5'>
+                                    برای این سفارش وارد کردن اطلاعات مشتری الزامی نیست
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <Button
+                        type='button'
+                        className='w-fit px-4 h-10'
+                        onClick={() => setIsCustomerModalOpen(true)}
+                    >
+                        {searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
+                    </Button>
                 </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>
-                )}
+            <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'>
@@ -211,7 +230,19 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
                             }
                         />
                     </div>
+
+                    <div className='mt-5 flex justify-end'>
+                        <Button
+                            type='button'
+                            className='w-fit px-6'
+                            onClick={() => setIsCustomerModalOpen(false)}
+                        >
+                            تایید
+                        </Button>
                     </div>
+                </div>
+            </DefaulModal>
+        </>
     )
 }