Add all promo page

9 files changed, 181 insertions, 9 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
new file mode 100644
index 00000000..63524509
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,55 @@
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import style from '../styles/hero.module.css';
+import 'swiper/css'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+import { getBanner } from '~/services/banner';
+
+const swiperBanner: SwiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  // modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1.1,
+  spaceBetween: 10
+}
+
+const Hero = () => {
+  const bannerQuery = useQuery({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'all-promo' })
+  })
+
+  const banners = bannerQuery.data || []
+
+  return (
+    <div className={style['wrapper']}>
+      <div className={style['desc-section']}>
+        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
+        <div className='h-4' />
+        <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
+      </div>
+
+      <div className={style['banner-section']}>
+        <Swiper {...swiperBanner}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-full h-full object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
new file mode 100644
index 00000000..11742f9a
--- /dev/null
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -0,0 +1,11 @@
+import style from '../styles/voucher.module.css'
+
+const Voucher = () => {
+  return (
+    <>
+      <div className={style['title']}>Pakai Voucher Belanja</div>
+    </>
+  )
+}
+
+export default Voucher
\ No newline at end of file
diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
new file mode 100644
index 00000000..70d725be
--- /dev/null
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+    @apply bg-warning-100/50 rounded-xl w-full h-[460px] flex;
+}
+
+.desc-section {
+    @apply w-full md:w-5/12 
+        flex flex-col 
+        md:justify-center 
+        p-6 md:pl-10;
+}
+
+.title {
+    @apply text-title-sm md:text-title-lg 
+        leading-[30px] md:leading-[42px]
+        font-semibold;
+}
+
+.subtitle {
+    @apply text-body-2 leading-7 text-gray-700;
+}
+
+.banner-section {
+    @apply md:w-7/12
+        flex flex-col
+        md:justify-center
+        md:pr-10;
+}
diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
new file mode 100644
index 00000000..22a3a0ac
--- /dev/null
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -0,0 +1,3 @@
+.title {
+    @apply text-h-sm md:text-h-lg font-semibold;
+}
diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx
new file mode 100644
index 00000000..df2e9dcb
--- /dev/null
+++ b/src-migrate/pages/shop/promo/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Hero from '~/modules/promo/components/Hero'
+import Voucher from '~/modules/promo/components/Voucher'
+
+const PromoPage = () => {
+  return (
+    <>
+      <Hero />
+
+      <div className='h-10' />
+
+      <Voucher />
+    </>
+  )
+}
+
+export default PromoPage
\ No newline at end of file
diff --git a/src-migrate/services/banner.ts b/src-migrate/services/banner.ts
new file mode 100644
index 00000000..cb7b19cc
--- /dev/null
+++ b/src-migrate/services/banner.ts
@@ -0,0 +1,13 @@
+import odooApi from '~/libs/odooApi';
+import { IBanner } from '~/types/banner';
+
+type GetBannerProps = {
+  type: string;
+};
+
+export const getBanner = async (params: GetBannerProps): Promise<IBanner[]> => {
+  const url = `/api/v1/banner`;
+  const searchParams = new URLSearchParams(params);
+
+  return await odooApi('GET', `${url}?${searchParams}`);
+};
diff --git a/src-migrate/types/banner.ts b/src-migrate/types/banner.ts
new file mode 100644
index 00000000..e1604ad4
--- /dev/null
+++ b/src-migrate/types/banner.ts
@@ -0,0 +1,8 @@
+export interface IBanner {
+  image: string;
+  name: string;
+  sequence: number;
+  url: string | false;
+  group_by_week: number | false;
+  background_color: string | false;
+}
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 9bcd4df2..2605acbb 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -168,6 +168,14 @@ const NavbarDesktop = () => {
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
               <Link
+                href='/shop/promo'
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                target='_blank'
+                rel='noreferrer'
+              >
+                Semua Promo
+              </Link>
+              <Link
                 href='/shop/brands'
                 className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
                 target='_blank'
@@ -189,15 +197,7 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                Blog Indoteknik
-              </Link>
-              <Link
-                href='/video'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
-                target='_blank'
-                rel='noreferrer'
-              >
-                Indoteknik TV
+                Blog
               </Link>
             </div>
 
diff --git a/src/pages/shop/promo/index.jsx b/src/pages/shop/promo/index.jsx
new file mode 100644
index 00000000..0d831c21
--- /dev/null
+++ b/src/pages/shop/promo/index.jsx
@@ -0,0 +1,38 @@
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+import Link from 'next/link';
+import Promo from '~/pages/shop/promo';
+
+import React from 'react';
+
+const PromoPage = () => {
+  return (
+    <BasicLayout>
+      <div className='container mx-auto py-4 md:py-6 pb-0'>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <BreadcrumbLink
+              as={Link}
+              href='/'
+              className='!text-danger-500 whitespace-nowrap'
+            >
+              Home
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem isCurrentPage>
+            <BreadcrumbLink className='whitespace-nowrap'>
+              Semua Promo
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+
+        <div className='h-10' />
+
+        <Promo />
+      </div>
+    </BasicLayout>
+  );
+};
+
+export default PromoPage;