feat: ads + whatsapp

Mzem · Jan 27, 2025 · 2282704 · 2282704
1 parent 670b293
commit 2282704
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 65 deletions.
diff --git a/app/_components/ads/BottomAd.tsx b/app/_components/ads/BottomAd.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 
-const FeedAd = () => {
+const BottomAd = () => {
   useEffect(() => {
     // @ts-expect-error
     if (typeof window !== 'undefined' && window.adsbygoogle) {
@@ -27,4 +27,4 @@ const FeedAd = () => {
   )
 }
 
-export default FeedAd
+export default BottomAd
diff --git a/app/_components/ads/FeedAd2.tsx b/app/_components/ads/FeedAd2.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const FeedAd2 = () => {
+  useEffect(() => {
+    // @ts-expect-error
+    if (typeof window !== 'undefined' && window.adsbygoogle) {
+      try {
+        // @ts-expect-error
+        ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+      } catch (e) {
+        console.error('Adsbygoogle error:', e)
+      }
+    }
+  }, [])
+
+  return (
+    <ins
+      className='adsbygoogle'
+      style={{ display: 'block' }}
+      data-ad-format='fluid'
+      data-ad-layout-key='-fb+5w+4e-db+86'
+      data-ad-client='ca-pub-6991672787454088'
+      data-ad-slot='6944272202'
+    ></ins>
+  )
+}
+
+export default FeedAd2
diff --git a/app/_components/ads/ModalAd.tsx b/app/_components/ads/ModalAd.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const ModalAd = () => {
+  useEffect(() => {
+    // @ts-expect-error
+    if (typeof window !== 'undefined' && window.adsbygoogle) {
+      try {
+        // @ts-expect-error
+        ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+      } catch (e) {
+        console.error('Adsbygoogle error:', e)
+      }
+    }
+  }, [])
+
+  return (
+    <ins
+      className='adsbygoogle'
+      style={{ display: 'block' }}
+      data-ad-format='fluid'
+      data-ad-layout-key='-fb+5w+4e-db+86'
+      data-ad-client='ca-pub-6991672787454088'
+      data-ad-slot='1372816097'
+    ></ins>
+  )
+}
+
+export default ModalAd
diff --git a/app/_components/car-posts/CarPostModal.tsx b/app/_components/car-posts/CarPostModal.tsx
@@ -10,12 +10,7 @@ import { InfoCard } from '../InfoCard'
 import ShareButton from '../Share'
 import { Carousel } from '../Carousel'
 import { Linkify } from '../../Linkify'
-
-function whatsappPhone(merchantId: string, whatsapp: string): string {
-  if (merchantId === 'sscars') return '+21699775924'
-  if (merchantId === 'advent-auto') return '+21658529477'
-  return whatsapp
-}
+import ModalAd from '../ads/ModalAd'
 
 type PostModalProps = {
   postId: string
@@ -154,19 +149,9 @@ const CarPostModal: React.FC<PostModalProps> = ({
                 </a>
               </div>
             )}
-            {post.phone && (
+            {post.whatsapp && (
               <a
-                href={`https://wa.me/${whatsappPhone(
-                  post.merchant.id,
-                  post.whatsapp || post.phone
-                )
-                  .toString()
-                  .replace(
-                    '+',
-                    ''
-                  )}?text=Bonjour%2C%20cette%20annonce%20m%27int%C3%A9resse%20https%3A%2F%2Fautocentral.tn%2Fannonces%2F${
-                  post.id
-                }`}
+                href={`https://wa.me/${post.whatsapp}?text=Bonjour%2C%20cette%20annonce%20m%27int%C3%A9resse%20https%3A%2F%2Fautocentral.tn%2Fannonces%2F${post.id}`}
               >
                 <img
                   src='/whatsapp.svg'
@@ -455,6 +440,9 @@ const CarPostModal: React.FC<PostModalProps> = ({
           >
             <PostDetails />
           </div>
+          {/* <div className='rounded w-full mt-2 mx-auto'>
+            <ModalAd />
+          </div> */}
         </div>
       )}
       {isFull && <PostDetails />}
@@ -472,7 +460,7 @@ const CarPostModal: React.FC<PostModalProps> = ({
             model: post?.model,
             cylinder: post?.cylinder,
             title: post?.title,
-            gearbox: post?.gearbox,
+            // gearbox: post?.gearbox,
             fuel: post?.fuel
           }}
         />

diff --git a/app/_components/car-posts/CarPosts.tsx b/app/_components/car-posts/CarPosts.tsx
@@ -16,12 +16,13 @@ import {
   makesWithLogos,
   regionsSelect
 } from '../../types'
-import FeedAd from '../ads/BottomAd'
+import FeedAd from '../ads/FeedAd'
 import ColorSelector from '../ColorSelector'
 import { reactSelectFilterStyle } from '../customStyles'
 import MinMaxSelector from '../MinMaxSelector'
 import MultiSelectList from '../MultiSelector'
 import CarPostModal from './CarPostModal'
+import FeedAd2 from '../ads/FeedAd2'
 
 const API_PAGE_SIZE = 20
 
@@ -676,59 +677,85 @@ export default function CarPostsFeed({
             </div>
           </>
         )}
-        {!groupByMake && posts.map((post) => <PostCard post={post} />)}
-        {groupByMake &&
-          posts
-            .reduce(
-              (
-                acc: Array<{ make: string; posts: CarPostListItem[] }>,
-                post: CarPostListItem
-              ) => {
-                const existingMake = acc.find(
-                  (group) => group.make === post.make
-                )
+        {!groupByMake &&
+          posts.map((post, index) => (
+            <>
+              <PostCard post={post} />
+              {index === 5 && (
+                <div className='rounded w-full mt-2 mx-auto'>
+                  <FeedAd2 />
+                </div>
+              )}
+            </>
+          ))}
 
-                if (existingMake) {
-                  existingMake.posts.push(post)
-                } else {
-                  acc.push({
-                    make: post.make,
-                    posts: [post]
-                  })
-                }
+        {groupByMake && (
+          <>
+            <div className='rounded w-full mt-2 mx-auto'>
+              <FeedAd />
+            </div>
+            {posts
+              .reduce(
+                (
+                  acc: Array<{ make: string; posts: CarPostListItem[] }>,
+                  post: CarPostListItem
+                ) => {
+                  const existingMake = acc.find(
+                    (group) => group.make === post.make
+                  )
 
-                return acc
-              },
-              []
-            )
-            .map((postsByMake) => (
-              <div key={postsByMake.make}>
-                <div className='mt-6 flex space-x-1 lg:space-x-2 items-center'>
-                  {makesWithLogos.includes(fromNameToId(postsByMake.make)) && (
-                    <img
-                      src={`/car-makes/${fromNameToId(postsByMake.make)}.svg`}
-                      alt={postsByMake.make}
-                      className='h-8'
-                    />
-                  )}
-                  <h2>{postsByMake.make ?? ''}</h2>
-                </div>
+                  if (existingMake) {
+                    existingMake.posts.push(post)
+                  } else {
+                    acc.push({
+                      make: post.make,
+                      posts: [post]
+                    })
+                  }
 
-                {postsByMake.posts.map((post) => (
-                  <PostCard post={post} />
-                ))}
-              </div>
-            ))}
+                  return acc
+                },
+                []
+              )
+              .map((postsByMake) => (
+                <div key={postsByMake.make}>
+                  <div className='mt-6 flex space-x-1 lg:space-x-2 items-center'>
+                    {makesWithLogos.includes(
+                      fromNameToId(postsByMake.make)
+                    ) && (
+                      <img
+                        src={`/car-makes/${fromNameToId(postsByMake.make)}.svg`}
+                        alt={postsByMake.make}
+                        className='h-8'
+                      />
+                    )}
+                    <h2>{postsByMake.make ?? ''}</h2>
+                  </div>
+
+                  {postsByMake.posts.map((post) => (
+                    <PostCard post={post} />
+                  ))}
+                </div>
+              ))}
+          </>
+        )}
 
         {loadingPosts && (
           <button className='text-white bg-blackopac2 font-medium shadow-lg p-1 rounded-xl w-full text-center mt-10 text-lg lg:text-xl'>
             Chargement des annonces...
           </button>
         )}
         {!hasMore && !loadingPosts && (
-          <p className='text-center mt-12 text-lg lg:text-xl'>
-            {posts.length > 0 ? 'Fin des résultats.' : 'Aucun résultat.'}
-          </p>
+          <>
+            <p className='text-center mt-12 text-lg lg:text-xl'>
+              {posts.length > 0 ? 'Fin des résultats.' : 'Aucun résultat.'}
+            </p>
+            {posts.length === 0 && (
+              <div className='rounded w-full mt-2 mx-auto'>
+                <FeedAd2 />
+              </div>
+            )}
+          </>
         )}
         {hasMore && !loadingPosts && (
           <button