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)
+        }}
+      />
     </>
   )
 }

frontend/app/page.tsx

@@ -4,7 +4,6 @@ import AddressSelector from '@/components/AddressSelector'
 import SearchCard from '@/app/(urls)/search/components/SearchCard'
 import FAQ from '@/components/FAQ'
 import { routes } from '@/app/constants'
-import Button from '@/components/ui/Button'
 import News from '@/components/News'
 import { getFAQs } from '@/lib/main/fetchFAQ'
 import { getNews } from '@/lib/main/fetchNews'
@@ -71,7 +70,6 @@ export default async function Home() {
         </div>
       </div>
 
-      {/* первые пять серч карточек -- бекенд??? */}
       <div className="mx-auto w-full max-w-[1250px]">
         <div className="grid w-full grid-cols-1 gap-4">
           {Array.isArray(latestRoutes) && latestRoutes.length > 0 ? (
@@ -81,10 +79,12 @@ export default async function Home() {
           )}
         </div>
         <div className="flex justify-center py-4">
-          <Button
-            text="Разместить объявление"
+          <Link
+            href="/account/create-as-sender"
             className="bg-orange rounded-lg px-6 py-3 text-xl font-semibold text-white"
-          />
+          >
+            Разместить объявление
+          </Link>
         </div>
       </div>
 
@@ -154,10 +154,12 @@ export default async function Home() {
           </div>
         </div>
         <div className="flex justify-center pt-8 sm:pt-10">
-          <Button
-            text="Отправить посылку"
+          <Link
+            href="/account/create-as-sender"
             className="bg-orange hover:bg-orange/80 rounded-lg px-8 py-2.5 text-base text-white sm:px-12 sm:py-3 sm:text-lg"
-          />
+          >
+            Отправить посылку
+          </Link>
         </div>
       </div>