diff options
| -rw-r--r-- | src-migrate/modules/footer-banner/index.tsx | 29 | ||||
| -rw-r--r-- | src-migrate/modules/side-banner/index.tsx | 29 | ||||
| -rw-r--r-- | src-migrate/services/banner.ts | 11 | ||||
| -rw-r--r-- | src-migrate/types/banner.ts | 8 | ||||
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 8 |
5 files changed, 85 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; +} diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ee4ec2de..08b64c13 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -24,6 +24,9 @@ import ProductFilter from './ProductFilter'; import ProductFilterDesktop from './ProductFilterDesktop'; import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'; +import SideBanner from '~/modules/side-banner'; +import FooterBanner from '~/modules/footer-banner'; + const ProductSearch = ({ query, prefixUrl, @@ -401,6 +404,10 @@ const ProductSearch = ({ prefixUrl={prefixUrl} defaultBrand={defaultBrand} /> + + <div className='h-6' /> + + <SideBanner /> </div> <div className='w-9/12 pl-6'> {bannerPromotionHeader && bannerPromotionHeader?.image && ( @@ -552,6 +559,7 @@ const ProductSearch = ({ /> </div> )} + <FooterBanner /> </div> </div> </DesktopView> |