From c88d98f06a6301bad6dd6d2e58b4908d8562638c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 7 Jun 2024 17:08:09 +0700
Subject: <iman> add promotion program

---
 src/api/promoApi.js                          | 12 ++++++++
 src/lib/home/components/PromotionProgram.jsx | 31 +++++++++++++++++++
 src/lib/promo/components/Promocrumb.jsx      | 40 ++++++++++++++++++++++++
 src/pages/index.jsx                          |  7 +++++
 src/pages/shop/promo/[slug].jsx              | 46 ++++++++++++++++++++++++++++
 src/pages/shop/promo/index.jsx               |  0
 6 files changed, 136 insertions(+)
 create mode 100644 src/api/promoApi.js
 create mode 100644 src/lib/home/components/PromotionProgram.jsx
 create mode 100644 src/lib/promo/components/Promocrumb.jsx
 create mode 100644 src/pages/shop/promo/[slug].jsx
 create mode 100644 src/pages/shop/promo/index.jsx

(limited to 'src')

diff --git a/src/api/promoApi.js b/src/api/promoApi.js
new file mode 100644
index 00000000..a4acc768
--- /dev/null
+++ b/src/api/promoApi.js
@@ -0,0 +1,12 @@
+// src/api/promoApi.js
+import odooApi from '@/core/api/odooApi';
+
+export const fetchPromoItems = async (type) => {
+  try {
+    const response = await odooApi('GET', `/api/v1/program-line?type=${type}&limit=3`);
+    return response.map((item) => ({ value: item.id, label: item.name,  product: item.products ,price:item.price}));
+  } catch (error) {
+    console.error('Error fetching promo items:', error);
+    return [];
+  }
+};
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
new file mode 100644
index 00000000..461383a1
--- /dev/null
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -0,0 +1,31 @@
+import Link from '@/core/components/elements/Link/Link'
+import Image from 'next/image'
+import { bannerApi } from '@/api/bannerApi';
+
+const { useQuery } = require('react-query')
+
+const BannerSection = () => {
+  const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
+
+  return (
+    promotionProgram.data &&
+    promotionProgram.data?.length > 0 && (
+      <div className='grid grid-cols-3 sm:grid-cols-3 gap-4  rounded rounded-md'>
+        {promotionProgram.data?.map((banner) => (
+          <Link key={banner.id} href={banner.url}>
+            <Image
+              width={439}
+              height={150}
+              quality={100}
+              src={banner.image}
+              alt={banner.name}
+              className='h-auto  w-full rounded'
+            />
+          </Link>
+        ))}
+      </div>
+    )
+  )
+}
+
+export default BannerSection
diff --git a/src/lib/promo/components/Promocrumb.jsx b/src/lib/promo/components/Promocrumb.jsx
new file mode 100644
index 00000000..a96ec6b4
--- /dev/null
+++ b/src/lib/promo/components/Promocrumb.jsx
@@ -0,0 +1,40 @@
+import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
+import Link from 'next/link'
+import React from 'react'
+
+/**
+ * Renders a breadcrumb component with links to navigate through different pages.
+ *
+ * @param {Object} props - The props object containing the brand name.
+ * @param {string} props.brandName - The name of the brand to display in the breadcrumb.
+ * @return {JSX.Element} The rendered breadcrumb component.
+ */
+const Breadcrumb = ({ brandName }) => {
+  return (
+    <div className='container mx-auto py-4 md:py-6'>
+      <ChakraBreadcrumb>
+        <BreadcrumbItem>
+          <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+            Shop
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+
+        <BreadcrumbItem>
+          <BreadcrumbLink
+            as={Link}
+            href='/shop/promo'
+            className='!text-danger-500 whitespace-nowrap'
+          >
+            Promo
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+
+        <BreadcrumbItem isCurrentPage>
+          <BreadcrumbLink className='whitespace-nowrap'>{brandName}</BreadcrumbLink>
+        </BreadcrumbItem>
+      </ChakraBreadcrumb>
+    </div>
+  )
+}
+
+export default Breadcrumb
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index c097530c..ddc41cbe 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -41,6 +41,11 @@ const FlashSale = dynamic(
     loading: () => <FlashSaleSkeleton />,
   }
 );
+
+const ProgramPromotion = dynamic(() =>
+  import('@/lib/home/components/PromotionProgram')
+);
+
 const BannerSection = dynamic(() =>
   import('@/lib/home/components/BannerSection')
 );
@@ -103,6 +108,7 @@ export default function Home() {
               <PreferredBrand />
             </div>
             <FlashSale />
+           <ProgramPromotion/>
             <PromotinProgram />
             <CategoryHomeId />
             <BannerSection />
@@ -126,6 +132,7 @@ export default function Home() {
           </DelayRender>
           <DelayRender renderAfter={600}>
             <FlashSale />
+           <ProgramPromotion/>
           </DelayRender>
           <DelayRender renderAfter={600}>
             <PromotinProgram />
diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx
new file mode 100644
index 00000000..4211ceb8
--- /dev/null
+++ b/src/pages/shop/promo/[slug].jsx
@@ -0,0 +1,46 @@
+import dynamic from 'next/dynamic'
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
+import { useRouter } from 'next/router'
+import _ from 'lodash'
+import Seo from '@/core/components/Seo'
+import Promocrumb from '@/lib/promo/components/Promocrumb'
+import useBrand from '@/lib/brand/hooks/useBrand'
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
+const Brand = dynamic(() => import('@/lib/brand/components/Brand'))
+
+export default function BrandDetail() {
+  const router = useRouter()
+  const { slug = '' } = router.query
+    console.log("apa itu slug",slug)
+  const brandName = getNameFromSlug(slug)
+  const id = getIdFromSlug(slug)
+  const {brand} = useBrand({id})
+  return (
+    <BasicLayout>
+        {/* seakarang arahkan web untuk menampilkan daftar promo sesuai slug */}
+        
+      <Seo
+        title={`Promo ${slug} Terkini`}
+        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
+        
+      />
+
+      <Promocrumb brandName={slug} />
+
+        harusnya disini menampilkan barang promosimya {slug}
+
+
+      {/* <Brand brand={brand} />
+      {!_.isEmpty(router.query) && (
+        <ProductSearch
+          query={_.omit(router.query, 'slug')}
+          prefixUrl={`/shop/promo/${slug}`}
+          defaultBrand={getNameFromSlug(slug)}
+          brand={brand}
+        />
+      )} */}
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/shop/promo/index.jsx b/src/pages/shop/promo/index.jsx
new file mode 100644
index 00000000..e69de29b
-- 
cgit v1.2.3