Add side and bottom banner on search

4 files changed, 77 insertions, 0 deletions

diff --git a/src-migrate/modules/footer-banner/index.tsx b/src-migrate/modules/footer-banner/index.tsx
new file mode 100644
index 00000000..7db1363c
--- /dev/null
+++ b/src-migrate/modules/footer-banner/index.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link"
+import { useQuery } from "react-query"
+import Image from "~/components/ui/image"
+import { getBanner } from "~/services/banner"
+
+const FooterBanner = () => {
+  const fetchFooterBanner = useQuery({
+    queryKey: 'footerBanner',
+    queryFn: () => getBanner({ type: 'bottom-search-promotion' })
+  })
+
+  const banner = fetchFooterBanner?.data?.[0] || false
+
+  return banner && (
+    <>
+      {banner.url && (
+        <Link href={banner.url}>
+          <Image src={banner.image} alt={banner.name} width={924} height={150} className='object-cover object-center rounded-lg' />
+        </Link>
+      )}
+
+      {!banner.url && (
+        <Image src={banner.image} alt={banner.name} width={924} height={150} className='object-cover object-center rounded-lg' />
+      )}
+    </>
+  )
+}
+
+export default FooterBanner
\ No newline at end of file
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
new file mode 100644
index 00000000..be52c554
--- /dev/null
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link"
+import { useQuery } from "react-query"
+import Image from "~/components/ui/image"
+import { getBanner } from "~/services/banner"
+
+const SideBanner = () => {
+  const fetchSideBanner = useQuery({
+    queryKey: 'sideBanner',
+    queryFn: () => getBanner({ type: 'side-banner-search' })
+  })
+
+  const banner = fetchSideBanner?.data?.[0] || false
+
+  return banner && (
+    <>
+      {banner.url && (
+        <Link href={banner.url}>
+          <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
+        </Link>
+      )}
+
+      {!banner.url && (
+        <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
+      )}
+    </>
+  )
+}
+
+export default SideBanner
\ 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..1b46ba06
--- /dev/null
+++ b/src-migrate/services/banner.ts
@@ -0,0 +1,11 @@
+import odooApi from '~/libs/odooApi';
+import { IBanner } from '~/types/banner';
+
+export const getBanner = async ({
+  type,
+}: {
+  type: string;
+}): Promise<IBanner[]> => {
+  const searchParams = new URLSearchParams({ type });
+  return await odooApi('GET', `/api/v1/banner?${searchParams.toString()}`);
+};
diff --git a/src-migrate/types/banner.ts b/src-migrate/types/banner.ts
new file mode 100644
index 00000000..dbccc378
--- /dev/null
+++ b/src-migrate/types/banner.ts
@@ -0,0 +1,8 @@
+export interface IBanner {
+  background_color: string | false;
+  group_by_week: number | false;
+  image: string;
+  name: string;
+  sequence: number;
+  url: string;
+}