add merchants

Mzem · Nov 11, 2024 · 31f62f2 · 31f62f2
1 parent 109e7df
commit 31f62f2
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 97 deletions.
diff --git a/api/services/merchants.service.ts b/api/services/merchants.service.ts
@@ -7,12 +7,42 @@ export interface MerchantListItem {
   isShop: boolean
 }
 
-export async function getMerchants(): Promise<MerchantListItem[]> {
+export interface Merchant {
+  id: string
+  name: string
+  isShop: boolean
+  categories: string[]
+  avatar?: string
+  description?: string
+  phone?: string
+  insta?: string
+  fb?: string
+  website?: string
+  address?: string
+  gmapsLink?: string
+  regionName?: string
+  regionDetail?: string
+  urlTayara?: string
+  urlAutomobiletn?: string
+  count: number
+}
+
+export async function getMerchants(isShop: boolean): Promise<Merchant[]> {
   try {
-    const { content } = await apiGet<MerchantListItem[]>(`merchants`)
+    const { content } = await apiGet<Merchant[]>(`merchants?isShop=${isShop}`)
     return content
   } catch (e) {
     console.error('GET merchants error')
     throw e
   }
 }
+
+export async function getMerchant(id: string): Promise<Merchant> {
+  try {
+    const { content } = await apiGet<Merchant>(`merchants/${id}`)
+    return content
+  } catch (e) {
+    console.error('GET merchant error')
+    throw e
+  }
+}
diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 
@@ -88,33 +89,13 @@ export default function Header() {
               <img src='/gears.svg' className='h-5' />
               <p className='text-sm'>Fiches techniques</p>
             </button>
-            <button
-              className='cursor-not-allowed opacity-40 flex space-x-2 items-center hover:underline'
-              // onClick={() => {
-              //   router.push('/vendeurs')
-              // }}
+            <Link
+              className='flex space-x-2 items-center hover:underline'
+              href='/vendeurs'
             >
               <img src='/man.svg' className='h-5' />
               <p className='text-sm'>Vendeurs professionnels</p>
-            </button>
-            {/* <button
-              className='cursor-not-allowed opacity-40 flex space-x-2 items-center hover:underline'
-              // onClick={() => {
-              //   router.push('/recherche-matricule')
-              // }}
-            >
-              <img src='/search.svg' className='h-5' />
-              <p className='text-sm'>Recherche par matricule</p>
-            </button>
-            <button
-              className='cursor-not-allowed opacity-40 flex space-x-2 items-center hover:underline'
-              // onClick={() => {
-              //   router.push('/blog')
-              // }}
-            >
-              <img src='/race_flag.svg' className='h-5' />
-              <p className='text-sm'>Blog</p>
-            </button> */}
+            </Link>
           </nav>
         </header>
       </div>
@@ -145,36 +126,13 @@ export default function Header() {
             Fiches techniques
             <img src='/gears.svg' className='h-6 ml-2 mr-1' />
           </button>
-          <button
-            className='cursor-not-allowed opacity-40 w-full block px-4 py-2 hover:bg-whiteopac bg-whiteopac2 border-b border-whiteopac2 flex justify-end'
-            // onClick={() => {
-            //   setIsMenuOpen(false)
-            //   router.push('/vendeurs')
-            // }}
+          <Link
+            href='/vendeurs'
+            className='w-full block px-4 py-2 hover:bg-whiteopac bg-whiteopac2 border-b border-whiteopac2 flex justify-end'
           >
             Vendeurs professionnels
             <img src='/man.svg' className='h-6 ml-2 mr-1' />
-          </button>
-          {/* <button
-            className='cursor-not-allowed opacity-40 w-full block px-4 py-2 hover:bg-whiteopac border-b border-whiteopac flex justify-end'
-            // onClick={() => {
-            //   setIsMenuOpen(false)
-            //   router.push('/recherche-matricule')
-            // }}
-          >
-            Recherche par matricule
-            <img src='/search.svg' className='h-6 ml-2 mr-1' />
-          </button>
-          <button
-            className='cursor-not-allowed opacity-40 w-full block px-4 py-2 hover:bg-whiteopac bg-whiteopac2 border-b border-titan flex justify-end'
-            // onClick={() => {
-            //   setIsMenuOpen(false)
-            //   router.push('/blog')
-            // }}
-          >
-            Blog
-            <img src='/race_flag.svg' className='h-6 ml-2 mr-1' />
-          </button> */}
+          </Link>
         </div>
       )}
 

diff --git a/app/_components/ShopHeader.tsx b/app/_components/ShopHeader.tsx
@@ -3,12 +3,14 @@
 type ShopHeaderProps = {
   id: string
   name: string
-  phone: string
+  phone?: string
   phoneText?: 'RDV' | 'COMMAND'
   location?: string
   fb?: string
   insta?: string
   small?: boolean
+  hasLogo?: boolean
+  avatar?: string
 }
 
 function ShopHeader({
@@ -19,37 +21,43 @@ function ShopHeader({
   location,
   fb,
   insta,
-  small
+  small,
+  hasLogo,
+  avatar
 }: ShopHeaderProps) {
   return (
     <div className='flex flex-row flex-wrap mx-auto items-center justify-between text-black'>
       {/* Logo and Shop Name */}
       <div className='flex flex-row items-center space-x-8 lg:space-x-20'>
         <img
-          src={`/${id}/logo.jpg`}
+          src={`${
+            avatar ? avatar : hasLogo ? '/' + id + '/logo.jpg' : '/man.svg'
+          }`}
           className={`rounded-full object-cover border-2  ${
             small ? 'h-16 w-16 border-blackopac' : 'h-20 w-20  border-blackopac'
-          }`}
+          } ${!avatar && !hasLogo ? 'invert' : ''}`}
         />
         <p className='text-xl lg:text-3xl'>{name}</p>
       </div>
 
       {/* Contact Information */}
       <div className='mt-4 lg:mt-0 flex lg:flex-row items-center space-x-8 lg:space-x-16'>
-        <a
-          href={`tel:00216${phone.trim()}`}
-          className='flex flex-col items-center hover:underline'
-        >
-          <img src='/phone.svg' className='h-5' />
-          <p className='text-sm mt-1'>
-            {phoneText === 'RDV'
-              ? 'Prendre rendez-vous'
-              : phoneText === 'COMMAND'
-              ? 'Passer une commande'
-              : 'Appeler'}
-          </p>
-          <p className='text-sm font-bold'>{phone}</p>
-        </a>
+        {phone && (
+          <a
+            href={`tel:00216${phone.trim()}`}
+            className='flex flex-col items-center hover:underline'
+          >
+            <img src='/phone.svg' className='h-5' />
+            <p className='text-sm mt-1'>
+              {phoneText === 'RDV'
+                ? 'Prendre rendez-vous'
+                : phoneText === 'COMMAND'
+                ? 'Passer une commande'
+                : 'Appeler'}
+            </p>
+            <p className='text-sm font-bold'>{phone}</p>
+          </a>
+        )}
 
         {/* Location Link */}
         {location && (

diff --git a/app/_components/car-posts/CarPostModal.tsx b/app/_components/car-posts/CarPostModal.tsx
@@ -5,6 +5,7 @@ import { CarPost } from '../../../api/services/car-posts.service'
 import { dotNumber } from '../../helpers'
 import SpecList from '../car-specs/SpecList'
 import CarPostUpdateModal from './CarPostUpdateModal'
+import Link from 'next/link'
 
 const urlRegex = /(https?:\/\/[^\s]+)/g
 
@@ -228,15 +229,18 @@ const CarPostModal: React.FC<PostModalProps> = ({
         <>
           <div className='flex justify-center space-x-4 items-center mt-4 mb-4 text-sm lg:text-base'>
             {post.merchant && (
-              <button className='flex items-center space-x-1 p-2 lg:p-3 px-4 lg:px-8 rounded-xl font-semibold hover:bg-titan text-white bg-black bg-opacity-90 transition duration-300 ease-in-out'>
+              <Link
+                href={`/vendeurs/${post.merchant.id}`}
+                className='flex items-center space-x-1 p-2 lg:p-3 px-4 lg:px-8 rounded-xl font-semibold hover:bg-titan text-white bg-black bg-opacity-90 transition duration-300 ease-in-out'
+              >
                 <img src='/man.svg' alt='Vendeur' className='h-3 lg:h-4' />
                 <span className='truncate max-w-[8rem] lg:max-w-[20rem]'>
                   {post.merchant.name}
                 </span>
                 {post.merchant.isShop && (
                   <img src='/badge.svg' className='h-3 lg:h-4' />
                 )}
-              </button>
+              </Link>
             )}
             {post.phone && (
               <a href={`tel:${post.phone}`} className=''>
@@ -357,9 +361,11 @@ const CarPostModal: React.FC<PostModalProps> = ({
 
             <div className='shadow-lg rounded-lg mt-1 p-2 lg:p-6 lg:flex lg:justify-around'>
               <ul className='mt-1 text-sm lg:text-base'>
-                <li>
-                  <strong>Modèle :</strong> {post.make} {post.model}
-                </li>
+                {post.make !== 'Autres' && (
+                  <li>
+                    <strong>Modèle :</strong> {post.make} {post.model}
+                  </li>
+                )}
                 <li>
                   <strong>Année :</strong> {post.year}
                 </li>

diff --git a/app/_components/car-posts/CarPosts.tsx b/app/_components/car-posts/CarPosts.tsx
@@ -26,7 +26,11 @@ export default function CarPostsFeed({
   initialFilters?: GetCarPostsFilters
 }) {
   const pathname = usePathname() // Get path, e.g., "/annonces/123"
-  const id = pathname.split('/')[2] // Assuming "/annonces/[id]" structure
+  const pathnameSplit = pathname.split('/')
+  const id =
+    pathnameSplit[1] === 'annonces' && pathnameSplit[2]
+      ? pathnameSplit[2]
+      : undefined // Assuming "/annonces/[id]" structure
 
   // Posts display & pagination
   const [posts, setPosts] = useState<CarPostListItem[]>(initialPosts)
@@ -421,9 +425,9 @@ export default function CarPostsFeed({
                 )}
                 <span className='truncate max-w-[7.5rem] lg:max-w-full'>
                   {post.year ? post.year + ' ' : ''}
-                  {post.make} {post.model}
+                  {post.make !== 'Autres' ? post.make + ' ' + post.model : ''}
                 </span>
-                {post.km && (
+                {post.km !== undefined && post.km !== null && (
                   <span className='font-bold'>{dotNumber(post.km)} km</span>
                 )}
                 <span>

diff --git a/app/_components/car-specs/CarSpecs.tsx b/app/_components/car-specs/CarSpecs.tsx
@@ -112,7 +112,7 @@ const CarSpecs: React.FC<CarSpecsProps> = ({ carModel }) => {
       </div>
 
       <div className='mt-32'>
-        <h2 className='text-2xl font-semibold mb-6'>Notre garage partenaire</h2>
+        <h2 className='text-2xl font-semibold mb-6'>Nos partenaires</h2>
         <ShopHeader
           id='autotech'
           name='Autotech Reprogrammation Moteur'
@@ -122,6 +122,7 @@ const CarSpecs: React.FC<CarSpecsProps> = ({ carModel }) => {
           fb='https://www.facebook.com/autotechreprogrammation'
           insta='https://www.instagram.com/autotech_reprog'
           small={true}
+          hasLogo={true}
         />
       </div>
 

diff --git a/app/fiche-technique/page.tsx b/app/fiche-technique/page.tsx
@@ -1,24 +1,12 @@
 import { getCarMakes } from '../../api/services/car-makes.service'
 import CarMakes from '../_components/car-specs/CarMakes'
-import ShopHeader from '../_components/ShopHeader'
 
 export default async function Autotech() {
   const carMakes = await getCarMakes(true)
 
   return (
     <>
       <CarMakes carMakes={carMakes} />
-      {/* <div className='mt-24'>
-        <ShopHeader
-          id='autotech'
-          name='Autotech Reprogrammation Moteur'
-          phone='50 720 660'
-          phoneText='RDV'
-          location='https://www.google.com/maps/place/AutoTech+Reprogrammation+Moteur/@36.8799982,10.2991194,15z/data=!4m2!3m1!1s0x0:0x8e7d0ae9fd9aad0d?sa=X&ved=1t:2428&ictx=111'
-          fb='https://www.facebook.com/autotechreprogrammation'
-          insta='https://www.instagram.com/autotech_reprog'
-        />
-      </div> */}
     </>
   )
 }
diff --git a/app/helpers.ts b/app/helpers.ts
@@ -93,6 +93,8 @@ export function fromQueryParamsToGetCarPostsFilters(
 }
 
 export function dotNumber(nb?: number | null): string | undefined {
+  if (nb === 0) return nb.toString()
   if (!nb) return
-  if (nb >= 10000) return nb.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+  if (nb >= 10000) return nb.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+  return nb.toString()
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,10 +2,11 @@ import type { Metadata } from 'next'
 import { getCarPosts } from '../api/services/car-posts.service'
 import CarPostsFeed from './_components/car-posts/CarPosts'
 import { fromQueryParamsToGetCarPostsFilters } from './helpers'
+import { DateTime } from 'luxon'
 
 function getDailyCount(): number {
-  const now = new Date()
-  const hours = (now.getHours() + 2) % 24
+  const now = DateTime.local().toJSDate()
+  const hours = now.getHours()
   const minutes = now.getMinutes()
 
   // Calculate the progress of the day as a fraction (0 at midnight, 1 at 23:59)
@@ -48,8 +49,7 @@ export default async function Home({
     <>
       <div className='text-center text-base lg:text-2xl mt-9 lg:mt-20 text-black mb-7 lg:mb-16'>
         <p className='mx-2'>
-          Découvrez le premier moteur de recherche
-          <br className='lg:hidden' />
+          Découvrez le premier moteur de recherche <br className='lg:hidden' />
           de véhicules d'occasion en{' '}
           <span className='font-semibold text-vividred'>Tunisie</span>
         </p>

diff --git a/app/vendeurs/[merchantId]/page.tsx b/app/vendeurs/[merchantId]/page.tsx
@@ -0,0 +1,34 @@
+import { getCarPosts } from '../../../api/services/car-posts.service'
+import { getMerchant } from '../../../api/services/merchants.service'
+import CarPostsFeed from '../../_components/car-posts/CarPosts'
+import ShopHeader from '../../_components/ShopHeader'
+import { fromQueryParamsToGetCarPostsFilters } from '../../helpers'
+
+export default async function MerchantPage({
+  searchParams,
+  params
+}: {
+  searchParams: Record<string, string | string[] | undefined>
+  params: { merchantId: string }
+}) {
+  const merchant = await getMerchant(params.merchantId)
+  const filters = fromQueryParamsToGetCarPostsFilters(searchParams)
+  filters.merchantId = merchant.id
+  const posts = await getCarPosts(filters)
+
+  return (
+    <>
+      <ShopHeader
+        id={merchant.id}
+        name={merchant.name}
+        phone={merchant.phone}
+        location={merchant.gmapsLink}
+        fb={merchant.fb}
+        insta={merchant.insta}
+        avatar={merchant.avatar}
+      />
+      <div className='mb-8' />
+      <CarPostsFeed initialPosts={posts} initialFilters={filters} />
+    </>
+  )
+}