ui popup lead

frontend/app/(urls)/search/components/SearchCard.tsx

@@ -1,8 +1,13 @@
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
 import Image from 'next/image'
 import Button from '@/components/ui/Button'
 import { SearchCardProps } from '@/app/types'
 import noPhoto from '../../../../public/images/noPhoto.png'
+import LeadPopup from '@/components/popups/LeadPopup'
+import useUserStore from '@/app/store/userStore'
+import { useRouter } from 'next/navigation'
 
 const formatDateTime = (dateTimeString: string): string => {
   const date = new Date(dateTimeString)
@@ -41,6 +46,18 @@ const SearchCard = ({
   country_from_icon,
   country_to_icon,
 }: SearchCardProps) => {
+  const [isLeadPopupOpen, setIsLeadPopupOpen] = useState(false)
+  const { isAuthenticated } = useUserStore()
+  const router = useRouter()
+
+  const handleLeadClick = () => {
+    if (!isAuthenticated) {
+      router.push('/login')
+      return
+    }
+    setIsLeadPopupOpen(true)
+  }
+
   const getUserRequestStyles = () => {
     if (owner_type === 'customer') {
       return 'text-[#065bff]'
@@ -88,6 +105,7 @@ const SearchCard = ({
             <Button
               text="Откликнуться"
               className="bg-orange hover:bg-orange/80 cursor-pointer px-10 py-3 text-base font-semibold text-white transition-colors"
+              onClick={handleLeadClick}
             />
           </div>
 
@@ -204,7 +222,7 @@ const SearchCard = ({
           <div className="flex items-center justify-between">
             <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>{userRequest}</div>
             <div className="text-sm font-semibold">
-              Тип посылки: <span className="text-orange">{formatted_cargo_type}</span>
+              <span className="text-orange">{formatted_cargo_type}</span>
             </div>
           </div>
           <div className="mt-5 mb-2 flex flex-row items-center justify-between gap-3">
@@ -243,7 +261,7 @@ const SearchCard = ({
             <div className="flex flex-1 flex-col justify-between">
               <div className="-mt-[14px] flex items-center">
                 <Image
-                  src={`/images/flags/${from_country_name.toLowerCase()}.png`}
+                  src={country_to_icon}
                   width={26}
                   height={13}
                   alt={from_country_name.substring(0, 3)}
@@ -267,8 +285,8 @@ const SearchCard = ({
                     className="h-[15px] w-[15px] object-contain"
                   />
                 </div>
-                <div className="my-2 h-[2px] w-[165px] bg-gray-200" />
-                <div className="text-sm">Дата доставки: {formatted_arrival}</div>
+                <div className="my-2 h-[2px] w-[228px] bg-gray-200" />
+                <div className="text-sm">Дата доставки: {formatDateTime(formatted_arrival)}</div>
               </div>
 
               <div className="-mb-[14px] flex flex-col">
@@ -280,7 +298,7 @@ const SearchCard = ({
 
                 <div className="flex items-center">
                   <Image
-                    src={`/images/flags/${to_country_name.toLowerCase()}.png`}
+                    src={country_to_icon}
                     width={26}
                     height={13}
                     alt={to_country_name.substring(0, 3)}
@@ -301,8 +319,24 @@ const SearchCard = ({
               <span className="text-sm font-semibold">{formatDateTime(formatted_arrival)}</span>
             </div>
           )}
+          <div className="mt-8">
+            <Button
+              text="Откликнуться"
+              className="bg-orange hover:bg-orange/80 w-full cursor-pointer py-3 text-base font-semibold text-white transition-colors"
+              onClick={handleLeadClick}
+            />
+          </div>
         </div>
       </div>
+
+      <LeadPopup
+        id={id}
+        isOpen={isLeadPopupOpen}
+        onClose={() => setIsLeadPopupOpen(false)}
+        onSuccess={() => {
+          setIsLeadPopupOpen(false)
+        }}
+      />
     </>
   )
 }