diff options
23 files changed, 485 insertions, 114 deletions
diff --git a/public/images/GAMBAR-BG-FLASH-SALE.jpg b/public/images/GAMBAR-BG-FLASH-SALE.jpg Binary files differnew file mode 100644 index 00000000..db26136a --- /dev/null +++ b/public/images/GAMBAR-BG-FLASH-SALE.jpg diff --git a/public/images/ICON_FLASH_SALE.svg b/public/images/ICON_FLASH_SALE.svg new file mode 100644 index 00000000..d6d90b18 --- /dev/null +++ b/public/images/ICON_FLASH_SALE.svg @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 230 230" style="enable-background:new 0 0 230 230;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#F0C83B;} + .st1{fill:#FEFEFE;} +</style> +<g> + <path class="st0" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5 + c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1 + c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/> + <path class="st0" d="M169.1,192.3c-1-1.2-0.9-1.7,0.3-2.6c2.4-1.9,4.9-3.8,7.1-5.9c26-25.7,34.9-56.6,26.6-92.1 + c-9.6-40.9-46.5-69.9-89.7-69.9c-4.8,0.1-11.4,0.7-17.8,2.2c-48.4,11-79.8,59.2-69.6,110c4.3,21.7,15.3,39.7,32.4,53.8 + c1.4,1.2,1.7,1.9,0.4,3.4c-4.4,5.4-8.7,11-13,16.4c-1.3,1.7-2.3,3.6-1.8,5.9c0.6,2.9,2.2,4.8,5.1,5.6c3.1,0.8,5.4-0.4,7.3-2.7 + c4.5-5.7,9.1-11.4,13.5-17.3c1.3-1.7,2.1-2,4-1c26.6,13.2,53.5,13.6,80.4,0.9c1.5-0.7,2.3-0.4,3.2,0.8c4.5,5.7,9.1,11.3,13.6,16.9 + c2.9,3.6,7.1,4.4,10.2,1.9c3.3-2.7,3.5-6.8,0.5-10.5C177.6,202.8,173.4,197.5,169.1,192.3z M121.8,194.1 + c-23.4,2-43.6-5.5-60.3-21.8c-13.5-13.1-21.2-29.4-23.3-48.2c-0.4-3.1-0.4-6.2-0.5-9.3c0.2-22.1,7.8-41.2,23.3-56.8 + c13-13.1,28.9-20.6,47.5-22.3c38.4-3.5,73.8,23.2,81.8,61.7c6.2,29.7-1.8,55.6-23.8,76.6C154.2,186,139.1,192.6,121.8,194.1z"/> + <path class="st0" d="M23.9,58.9c-5.3,0-8.4-5.5-5.8-10.3c4.6-8.4,10.6-15.8,17.6-22.3c6.2-5.7,12.9-10.6,20.3-14.6 + c4.6-2.5,9.6,0.1,10.3,5.1c0.4,2.9-1,5.4-4,7.1c-9.2,5.2-17.4,11.6-24.2,19.8c-3,3.6-5.6,7.3-7.9,11.4 + C28.8,57.5,26.8,58.9,23.9,58.9z"/> + <path class="st0" d="M169.9,10c1.2-0.2,2.4,0.3,3.6,1c15.6,8.4,28.4,19.8,37.7,35c1,1.7,1.9,3.4,1.6,5.5c-0.4,2.9-2.5,5.2-5.1,5.9 + c-2.9,0.7-5.9-0.3-7.4-2.9c-8.1-13.8-19.7-24-33.6-31.6c-3-1.6-4.2-4.8-3.3-7.8C164.1,12,166.6,10.1,169.9,10z"/> + <path class="st1" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5 + c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1 + c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/> + <path class="st0" d="M142.9,104.6c-14,17.9-27.7,35.4-41.4,52.9c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.3,4.2-20.6,6.4-30.9 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.4,0-17.1,0h-2.8c1.6-3.7,3.1-7.1,4.6-10.5 + c4.6-10.3,9.3-20.6,13.8-30.9c0.8-1.8,1.7-2.4,3.6-2.3c7.1,0.1,14.3,0.1,21.5,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.3-8.3,16.8-12.5,25.1 + c-1,2-0.6,2.4,1.5,2.3C128.2,104.6,135.2,104.6,142.9,104.6z"/> +</g> +</svg> diff --git a/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg b/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg new file mode 100644 index 00000000..2a8b40b8 --- /dev/null +++ b/public/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 199.8 213" style="enable-background:new 0 0 199.8 213;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#F0C83B;} + .st1{fill:#FEFEFE;} +</style> +<g> + <path class="st0" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6 + c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3 + c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/> + <path class="st0" d="M154.5,184.4c-1-1.2-0.9-1.7,0.3-2.6c2.4-1.9,4.9-3.8,7.2-5.9c26.2-25.9,35.2-57.1,26.8-92.9 + c-9.7-41.2-46.9-70.5-90.5-70.5c-4.8,0.1-11.5,0.7-17.9,2.2C31.5,25.8-0.1,74.4,10.2,125.6c4.3,21.9,15.4,40,32.7,54.3 + c1.4,1.2,1.7,1.9,0.4,3.4c-4.4,5.4-8.8,11.1-13.1,16.5c-1.3,1.7-2.3,3.6-1.8,5.9c0.6,2.9,2.2,4.8,5.1,5.6c3.1,0.8,5.4-0.4,7.4-2.7 + c4.5-5.7,9.2-11.5,13.6-17.4c1.3-1.7,2.1-2,4-1c26.8,13.3,53.9,13.7,81.1,0.9c1.5-0.7,2.3-0.4,3.2,0.8c4.5,5.7,9.2,11.4,13.7,17 + c2.9,3.6,7.2,4.4,10.3,1.9c3.3-2.7,3.5-6.9,0.5-10.6C163,195,158.8,189.7,154.5,184.4z M106.8,186.2c-23.6,2-44-5.5-60.8-22 + c-13.6-13.2-21.4-29.6-23.5-48.6c-0.4-3.1-0.4-6.3-0.5-9.4C22.2,84,29.8,64.7,45.5,49c13.1-13.2,29.1-20.8,47.9-22.5 + c38.7-3.5,74.4,23.4,82.5,62.2c6.3,29.9-1.8,56.1-24,77.2C139.4,178.1,124.2,184.7,106.8,186.2z"/> + <path class="st0" d="M8,49.9c-5.3,0-8.5-5.5-5.8-10.4C6.8,31.1,12.9,23.6,19.9,17c6.3-5.7,13-10.7,20.5-14.7 + c4.6-2.5,9.7,0.1,10.4,5.1c0.4,2.9-1,5.4-4,7.2c-9.3,5.2-17.5,11.7-24.4,20c-3,3.6-5.6,7.4-8,11.5C13,48.5,11,49.9,8,49.9z"/> + <path class="st0" d="M155.3,0.6c1.2-0.2,2.4,0.3,3.6,1c15.7,8.5,28.6,20,38,35.3c1,1.7,1.9,3.4,1.6,5.5c-0.4,2.9-2.5,5.2-5.1,5.9 + c-2.9,0.7-5.9-0.3-7.5-2.9c-8.2-13.9-19.9-24.2-33.9-31.9c-3-1.6-4.2-4.8-3.3-7.9C149.4,2.6,151.9,0.7,155.3,0.6z"/> + <path class="st1" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6 + c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3 + c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/> + <path class="st0" d="M128,96c-14.1,18-27.9,35.7-41.7,53.3c-0.2-0.1-0.4-0.2-0.6-0.3c2.1-10.4,4.2-20.8,6.5-31.2 + c0.4-1.9,0.8-3.8,1.3-5.7c0.4-1.5-0.1-1.9-1.6-1.9c-5.7,0.1-11.5,0-17.2,0h-2.8c1.6-3.7,3.1-7.2,4.6-10.6 + c4.6-10.4,9.4-20.8,13.9-31.2c0.8-1.8,1.7-2.4,3.6-2.3c7.2,0.1,14.4,0.1,21.7,0c2,0,2.4,0.2,1.4,2.2c-4.2,8.4-8.4,16.9-12.6,25.3 + c-1,2-0.6,2.4,1.5,2.3C113.2,96,120.3,96,128,96z"/> +</g> +</svg> diff --git a/src/components/skeleton/BannerSkeleton.jsx b/src/components/skeleton/BannerSkeleton.jsx index 7cb3952d..da86aef9 100644 --- a/src/components/skeleton/BannerSkeleton.jsx +++ b/src/components/skeleton/BannerSkeleton.jsx @@ -1,7 +1,6 @@ import useDevice from '@/core/hooks/useDevice' import classNames from 'classnames' import Skeleton from 'react-loading-skeleton' -import 'react-loading-skeleton/dist/skeleton.css' const HeroBannerSkeleton = () => { const { isDesktop, isMobile } = useDevice() diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx index 61503d17..e85a22cb 100644 --- a/src/core/components/elements/CountDown/CountDown2.jsx +++ b/src/core/components/elements/CountDown/CountDown2.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' const CountDown2 = ({ initialTime }) => { - const hours = Math.floor(initialTime / 3600) + /*const hours = Math.floor(initialTime / 3600) const minutes = Math.floor((initialTime % 3600) / 60) const seconds = initialTime % 60 @@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => { } }, 1000) return () => clearInterval(timer) + }, [timeLeft])*/ + + const days = Math.floor(initialTime / 86400) + const hours = Math.floor((initialTime % 86400) / 3600) + const minutes = Math.floor((initialTime % 3600) / 60) + const seconds = initialTime % 60 + + const [timeLeft, setTimeLeft] = useState({ + day: days, + hour: hours, + minute: minutes, + second: seconds + }) + + useEffect(() => { + const timer = setInterval(() => { + const totalSeconds = + timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second + const secondsLeft = totalSeconds - 1 + if (secondsLeft < 0) { + clearInterval(timer) + } else { + const days = Math.floor(secondsLeft / 86400) + const hours = Math.floor((secondsLeft % 86400) / 3600) + const minutes = Math.floor((secondsLeft % 3600) / 60) + const seconds = secondsLeft % 60 + setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds }) + } + }, 1000) + return () => clearInterval(timer) }, [timeLeft]) + return ( - <div className='flex justify-between gap-x-2'> + <div className='flex justify-between gap-x-2 mt-18'> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.hour.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.day.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Hari</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.minute.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.hour.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Jam</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.second.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.minute.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Menit</span> </div> </div> ) diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 1f5204cd..acd2d1ee 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -14,14 +14,17 @@ import { useEffect, useState } from 'react' import useAuth from '@/core/hooks/useAuth' import NavbarUserDropdown from './NavbarUserDropdown' import { getCountCart } from '@/core/utils/cart' -import TopBanner from './TopBanner' import whatsappUrl from '@/core/utils/whatsappUrl' import { useRouter } from 'next/router' import { getAuth } from '@/core/utils/auth' import { createSlug, getIdFromSlug } from '@/core/utils/slug' import productApi from '@/lib/product/api/productApi' +import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' const Search = dynamic(() => import('./Search')) +const TopBanner = dynamic(() => import('./TopBanner'), { + loading: () => <TopBannerSkeleton /> +}) const NavbarDesktop = () => { const [isOpenCategory, setIsOpenCategory] = useState(false) diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index 47a9c235..f4a8ab3a 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -64,21 +64,21 @@ const Search = () => { <MagnifyingGlassIcon className='w-6' /> </button> - {suggestions.length > 0 && ( - <> - <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'> - {suggestions.map((suggestion, index) => ( - <Link - href={`/shop/search?q=${suggestion.term}`} - key={index} - className='px-3 py-3 !text-gray_r-12 font-normal' - > - {suggestion.term} - </Link> - ))} - </div> - </> - )} + <div + className={`absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50 ${ + suggestions.length > 0 ? 'block' : 'hidden' + }`} + > + {suggestions.map((suggestion, index) => ( + <Link + href={`/shop/search?q=${suggestion.term}`} + key={index} + className='px-3 py-3 !text-gray_r-12 font-normal' + > + {suggestion.term} + </Link> + ))} + </div> </form> </> ) diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index 9efd0a8d..dca2e930 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -2,11 +2,16 @@ import odooApi from '@/core/api/odooApi' import { useQuery } from 'react-query' import Image from 'next/image' import Link from '../Link/Link' +import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' const TopBanner = () => { const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner') const topBanner = useQuery('topBanner', fetchTopBanner) + if (topBanner.isLoading) { + return <TopBannerSkeleton /> + } + return ( topBanner.isFetched && topBanner.data?.length > 0 && ( diff --git a/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx new file mode 100644 index 00000000..f7d2e748 --- /dev/null +++ b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx @@ -0,0 +1,19 @@ +import useDevice from '@/core/hooks/useDevice' +import classNames from 'classnames' +import Skeleton from 'react-loading-skeleton' + +const TopBannerSkeleton = () => { + const { isDesktop, isMobile } = useDevice() + + const deviceClassName = { + 'h-10': isDesktop, + 'h-2.5': isMobile + } + const combinedClassName = classNames(deviceClassName) + + return ( + <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' /> + ) +} + +export { TopBannerSkeleton } diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 073303fe..2e98eb61 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -37,7 +37,6 @@ const BasicLayout = ({ children }) => { const { slug } = router.query const getProduct = async () => { let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) - console.log('ini product', product) setPayloadWa({ name: product[0]?.name, manufacture: product[0]?.manufacture.name, @@ -46,7 +45,6 @@ const BasicLayout = ({ children }) => { } getProduct() setTemplateWA('product') - } }, []) return ( diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx index e4a4a25c..87545d8d 100644 --- a/src/lib/flashSale/components/FlashSale.jsx +++ b/src/lib/flashSale/components/FlashSale.jsx @@ -1,21 +1,28 @@ import { useEffect, useState } from 'react' import flashSaleApi from '../api/flashSaleApi' -import Image from '@/core/components/elements/Image/Image' +import Image from 'next/image' import CountDown from '@/core/components/elements/CountDown/CountDown' import productSearchApi from '@/lib/product/api/productSearchApi' import ProductSlider from '@/lib/product/components/ProductSlider' +import { FlashSaleSkeleton } from '../skeleton/FlashSaleSkeleton' const FlashSale = () => { const [flashSales, setFlashSales] = useState(null) + const [isLoading, setIsLoading] = useState(true) useEffect(() => { const loadFlashSales = async () => { const dataFlashSales = await flashSaleApi() setFlashSales(dataFlashSales) + setIsLoading(false) } loadFlashSales() }, []) + if (isLoading) { + return <FlashSaleSkeleton /> + } + return ( flashSales?.length > 0 && ( <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8'> @@ -30,11 +37,15 @@ const FlashSale = () => { <Image src={flashSale.banner} alt={flashSale.name} + width={1080} + height={192} className='w-full rounded mb-4 hidden sm:block' /> <Image src={flashSale.bannerMobile} alt={flashSale.name} + width={256} + height={48} className='w-full rounded mb-4 block sm:hidden' /> <FlashSaleProduct flashSaleId={flashSale.pricelistId} /> diff --git a/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx b/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx new file mode 100644 index 00000000..e9a200d9 --- /dev/null +++ b/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx @@ -0,0 +1,36 @@ +import useDevice from '@/core/hooks/useDevice' +import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton' +import Skeleton from 'react-loading-skeleton' + +const FlashSaleSkeleton = () => { + return ( + <div className='px-4 md:px-0'> + <TitleSkeleton /> + <div className='my-4'> + <BannerSkeleton /> + </div> + <PopularProductSkeleton /> + </div> + ) +} + +const TitleSkeleton = () => { + return ( + <div className='w-full md:w-[36%] flex gap-x-4'> + <Skeleton containerClassName='block w-1/2' height={24} /> + <div className='w-1/2 flex gap-x-1'> + <Skeleton height={40} containerClassName='w-full' /> + <Skeleton height={40} containerClassName='w-full' /> + <Skeleton height={40} containerClassName='w-full' /> + <Skeleton height={40} containerClassName='w-full' /> + </div> + </div> + ) +} + +const BannerSkeleton = () => { + const { isDesktop } = useDevice() + return <Skeleton duration={1.2} height={isDesktop ? 192 : 48} containerClassName='w-full' /> +} + +export { FlashSaleSkeleton, TitleSkeleton, BannerSkeleton } diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx index 00589342..bd783053 100644 --- a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx +++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx @@ -1,12 +1,16 @@ -import BrandSkeleton from '@/core/components/elements/Skeleton/BrandSkeleton' +import useDevice from '@/core/hooks/useDevice' +import Skeleton from 'react-loading-skeleton' -const PreferredBrandSkeleton = () => ( - <div className='grid grid-cols-4 gap-x-3'> - <BrandSkeleton /> - <BrandSkeleton /> - <BrandSkeleton /> - <BrandSkeleton /> - </div> -) +const PreferredBrandSkeleton = () => { + const { isDesktop } = useDevice() + + return ( + <div className='grid grid-cols-4 md:grid-cols-8 gap-x-3'> + {Array.from({ length: isDesktop ? 8 : 4 }, (_, index) => ( + <Skeleton count={1} height={isDesktop ? 84 : 56} key={index} /> + ))} + </div> + ) +} export default PreferredBrandSkeleton diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js index d62077eb..c1bccd59 100644 --- a/src/lib/product/api/productSimilarApi.js +++ b/src/lib/product/api/productSimilarApi.js @@ -1,9 +1,30 @@ +import odooApi from '@/core/api/odooApi' import axios from 'axios' +import productSearchApi from './productSearchApi' -const productSimilarApi = async ({ query }) => { +const productSimilarApi = async ({ query, source }) => { + let dataflashSale = null + const flashSale = await odooApi('GET', '/api/v1/flashsale/header') + if (flashSale && flashSale.length > 0) { + const dataFlash = await productSearchApi({ + query: `fq=flashsale_id_i:${flashSale[0].pricelistId}&fq=flashsale_price_f:[1 TO *]&limit=${ + source === 'bottom' ? '4' : '1' + }`, + operation: 'AND' + }) + if (source === 'bottom') { + dataflashSale = dataFlash.response.products.slice('2', '4') + } else { + dataflashSale = dataFlash.response.products + } + } const dataProductSimilar = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR` ) + dataProductSimilar.data.response.products = [ + ...dataflashSale, + ...dataProductSimilar.data.response.products, + ]; return dataProductSimilar.data.response } diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 372ad3ba..187ab3c9 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -18,6 +18,9 @@ import odooApi from '@/core/api/odooApi' import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' +import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' +import CountDown from '@/core/components/elements/CountDown/CountDown' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -33,6 +36,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [promotionType, setPromotionType] = useState(false) const [promotionActiveId, setPromotionActiveId] = useState(null) const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -47,6 +51,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { setLowestPrice(lowest) }, [getLowestPrice]) + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + setBackgorundFlashSale(get[0].image) + } + getBackgound() + }, []) + + console.log('ini set', backgorundFlashSale) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const variantQuantityRefs = useRef([]) @@ -57,7 +71,6 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { product.variants[variantIndex].quantity = element?.value } variantQuantityRefs.current[variantId] = element - } const validQuantity = (quantity) => { @@ -97,7 +110,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { router.push(`/login?next=/shop/product/${slug}`) return } - + const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return @@ -108,13 +121,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { } const handleQuantityChange = (variantId) => (event) => { - const { value } = event.target; - const variantIndex = product.variants.findIndex((variant) => variant.id === variantId); + const { value } = event.target + const variantIndex = product.variants.findIndex((variant) => variant.id === variantId) if (variantIndex !== -1) { - product.variants[variantIndex].quantity = parseInt(value, 10); // Pastikan untuk mengubah ke tipe number jika diperlukan + product.variants[variantIndex].quantity = parseInt(value, 10) // Pastikan untuk mengubah ke tipe number jika diperlukan // Lakukan sesuatu jika nilai quantity diubah } - }; + } const handleBuy = (variant) => { const quantity = variantQuantityRefs.current[variant].value @@ -152,7 +165,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { useEffect(() => { const loadProductSimilarInBrand = async () => { const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&') - const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery }) + const source = 'right' + const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery, source }) setProductSimilarInBrand(dataProductSimilar.products) } if (!productSimilarInBrand) loadProductSimilarInBrand() @@ -181,11 +195,52 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='flex'> <div className='w-full flex flex-wrap'> <div className='w-5/12'> - <Image - src={product.image} - alt={product.name} - className='h-[430px] object-contain object-center w-full border border-gray_r-4' - /> + <div className='relative mb-2'> + {product?.flashSale?.remainingTime > 0 && ( + <div className={`absolute bottom-0 w-full`}> + <div className='absolute bottom-0 w-full h-full'> + <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} /> + </div> + <div className='relative'> + <div className='flex gap-x-2 items-center p-2'> + <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '> + <span className='text-lg font-bold'> + {product.lowestPrice.discountPercentage}% + </span> + </div> + <div + className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`} + > + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={17} + height={10} + /> + <span className='text-white text-lg font-semibold'> + {product.flashSale.tag || 'FLASH SALE'} + </span> + </div> + <div> + <CountDown2 initialTime={product.flashSale.remainingTime} /> + </div> + </div> + </div> + </div> + )} + <Image + src={product.image} + alt={product.name} + className='h-[430px] object-contain object-center w-full border border-gray_r-4' + /> + </div> + <div> + <p className='text-justify text-xs leading-5'> + <span className='font-semibold '>Keterangan : </span>Gambar atau foto berperan + sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan + berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang + lebih baik perihal gambar di 021-2933 8828. + </p> + </div> </div> <div className='w-7/12 px-4'> @@ -385,6 +440,18 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='text-gray_r-11 line-through text-caption-1'> {currencyFormat(lowestPrice?.price)} </div> + {product.flashSale.remainingTime > 0 && ( + <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={15} + height={10} + /> + <span className='text-white text-xs font-semibold'> + {product.flashSale.tag || 'FLASH SALE'} + </span> + </div> + )} </div> )} <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 2edd1a5f..d25d0861 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -18,6 +18,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' import { Button, Spinner } from 'flowbite-react' +import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -30,6 +32,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const [isLoadingSLA, setIsLoadingSLA] = useState(true) const [promotionType, setPromotionType] = useState(false) const [promotionActiveId, setPromotionActiveId] = useState(null) + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) const getLowestPrice = () => { const prices = product.variants.map((variant) => variant.price) @@ -39,6 +42,16 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return lowest } + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + if (get.length > 0) { + setBackgorundFlashSale(get[0].image) + } + } + getBackgound() + }, []) + const [activeVariant, setActiveVariant] = useState({ id: null, code: product.code, @@ -69,11 +82,11 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { product.variants = variantData setIsLoadingSLA(false) - if(product.variants.length === 1){ + if (product.variants.length === 1) { setActiveVariant({ id: product.variants[0].id, code: product.variants[0].code, - name: product.variants[0].parent.name , + name: product.variants[0].parent.name, price: product.variants[0].price, stock: product.variants[0].stock, weight: product.variants[0].weight, @@ -143,7 +156,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { quantity, programLineId: promotionActiveId, selected: true, - source : 'buy' + source: 'buy' }) router.push(`/shop/checkout?source=buy`) } @@ -156,11 +169,48 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return ( <MobileView> - <Image - src={product.image} - alt={product.name} - className='h-72 object-contain object-center w-full border-b border-gray_r-4' - /> + <div className='relative'> + {product?.flashSale?.remainingTime > 0 && ( + <div className={`absolute bottom-0 w-full`}> + <div className='absolute bottom-0 w-full'> + <ImageNext + src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} + width={1000} + height={100} + /> + </div> + <div className='relative'> + <div className='flex gap-x-2 items-center p-2'> + <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '> + <span className='text-lg font-bold'> + {product.lowestPrice.discountPercentage}% + </span> + </div> + <div + className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`} + > + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={17} + height={10} + /> + <span className='text-white text-lg font-semibold'> + {product.flashSale.tag || 'FLASH SALE'} + </span> + </div> + <div> + <CountDown2 initialTime={product.flashSale.remainingTime} /> + </div> + </div> + </div> + </div> + )} + <Image + src={product.image} + alt={product.name} + className='h-72 object-contain object-center w-full border-b border-gray_r-4' + /> + </div> <div className='p-4'> <div className='flex items-end mb-2'> @@ -294,40 +344,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { <Spinner aria-label='Alternate spinner button example' /> <span className='pl-3'>Loading...</span> </Button> - ) : selectedVariant ? activeVariant?.sla?.slaDate != '-' ? ( - <button - type='button' - title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`} - className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${ - activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' - }`} - > - <div - className={`flex-1 text-sm ${ - activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : '' + ) : selectedVariant ? ( + activeVariant?.sla?.slaDate != '-' ? ( + <button + type='button' + title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`} + className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${ + activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' }`} > - {activeVariant?.sla?.slaDate} - </div> - <div className='flex-end'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - className={`w-7 h-7 text-sm ${ + <div + className={`flex-1 text-sm ${ activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : '' }`} > - <path - d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - </div> - </button> - ):('-') : ( + {activeVariant?.sla?.slaDate} + </div> + <div className='flex-end'> + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + className={`w-7 h-7 text-sm ${ + activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : '' + }`} + > + <path + d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' + stroke-linecap='round' + stroke-linejoin='round' + ></path> + </svg> + </div> + </button> + ) : ( + '-' + ) + ) : ( '-' )} </span> diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index a8964310..5b859905 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,18 +1,35 @@ +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import Image from '@/core/components/elements/Image/Image' import Link from '@/core/components/elements/Link/Link' import currencyFormat from '@/core/utils/currencyFormat' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' +import ImageNext from 'next/image' +import Product from './Product/Product' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import odooApi from '@/core/api/odooApi' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { + const router = useRouter() + + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) + const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, url: createSlug('/shop/product/', product.name, product.id, true) }) + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + setBackgorundFlashSale(get[0].image) + } + getBackgound() + }, []) if (variant == 'vertical') { return ( - <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'> + <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'> <Link href={createSlug('/shop/product/', product?.name, product?.id)} className='border-b border-gray_r-4 relative' @@ -22,6 +39,32 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { alt={product?.name} className='w-full object-contain object-center h-36 sm:h-48' /> + {router.pathname != '/' && product?.flashSale?.id > 0 && ( + <div className='absolute bottom-0 w-full grid'> + <div className='absolute bottom-0 w-full h-full'> + <ImageNext src='/images/GAMBAR-BG-FLASH-SALE.jpg' className='h-full' width={1000} height={100} /> + </div> + <div className='relative'> + <div className='flex gap-x-1 items-center p-2 justify-center'> + <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '> + <span className='text-sm font-bold text-black'> + {product?.lowestPrice.discountPercentage}% + </span> + </div> + <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={13} + height={5} + /> + <span className='text-white text-[11px] font-semibold'> + {product?.flashSale?.tag} + </span> + </div> + </div> + </div> + </div> + )} {product.variantTotal > 1 && ( <div className='absolute badge-gray bottom-1.5 left-1.5'> {product.variantTotal} Varian @@ -101,6 +144,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </Link> </div> <div className='w-8/12 p-2'> + {product.flashSale.id > 0 && ( + <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={15} + height={10} + /> + <span className='text-white text-xs font-semibold'>FLASH SALE</span> + </div> + )} {product?.manufacture?.name ? ( <Link href={createSlug( diff --git a/src/lib/product/components/ProductSimilar.jsx b/src/lib/product/components/ProductSimilar.jsx index 63a33089..1b82c2e5 100644 --- a/src/lib/product/components/ProductSimilar.jsx +++ b/src/lib/product/components/ProductSimilar.jsx @@ -3,7 +3,8 @@ import useProductSimilar from '../hooks/useProductSimilar' import ProductSlider from './ProductSlider' const ProductSimilar = ({ query }) => { - const { productSimilar } = useProductSimilar({ query }) + const source = "bottom" + const { productSimilar } = useProductSimilar({ query, source }) if (productSimilar.isLoading) { return <PopularProductSkeleton /> diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx index b511eea5..dedbd6ab 100644 --- a/src/lib/product/components/ProductSlider.jsx +++ b/src/lib/product/components/ProductSlider.jsx @@ -66,7 +66,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => </MobileView> <DesktopView> - <Swiper slidesPerView={5.6} spaceBetween={16} {...swiperProps}> + <Swiper slidesPerView={6.7} spaceBetween={16} {...swiperProps}> {swiperContent} </Swiper> </DesktopView> diff --git a/src/lib/product/hooks/useProductSimilar.js b/src/lib/product/hooks/useProductSimilar.js index d16e4c58..712d07ad 100644 --- a/src/lib/product/hooks/useProductSimilar.js +++ b/src/lib/product/hooks/useProductSimilar.js @@ -1,10 +1,9 @@ import productSimilarApi from '../api/productSimilarApi' import { useQuery } from 'react-query' -const useProductSimilar = ({ query }) => { - const fetchProductSimilar = async () => await productSimilarApi({ query }) +const useProductSimilar = ({ query, source }) => { + const fetchProductSimilar = async () => await productSimilarApi({ query, source }) const { data, isLoading } = useQuery(`productSimilar-${query}`, fetchProductSimilar) - return { productSimilar: { data, isLoading } } diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 4c4fed89..03147219 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,4 +1,5 @@ import '../styles/globals.css' +import 'react-loading-skeleton/dist/skeleton.css' import NextProgress from 'next-progress' import { useRouter, Router } from 'next/router' import { AnimatePresence, motion } from 'framer-motion' diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 937c6d4c..d465d94b 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -135,7 +135,8 @@ const productResponseMap = (products, pricelist) => { categories: [], flashSale: { id: product?.flashsale_id_i, - name: product?.product?.flashsale_name_s + name: product?.product?.flashsale_name_s, + tag : product?.flashsale_tag_s || 'FLASH SALE' } } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 12d2ab46..47a0a493 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -7,6 +7,8 @@ import DelayRender from '@/core/components/elements/DelayRender/DelayRender' import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton' import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton' import PromotinProgram from '@/lib/promotinProgram/components/HomePage' +import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton' +import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton' const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), { @@ -19,9 +21,13 @@ const PopularProduct = dynamic(() => import('@/components/ui/PopularProduct'), { loading: () => <PopularProductSkeleton /> }) -const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand')) +const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand'), { + loading: () => <PreferredBrandSkeleton /> +}) -const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale')) +const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'), { + loading: () => <FlashSaleSkeleton /> +}) const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection')) const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId')) const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews')) @@ -66,22 +72,12 @@ export default function Home() { </div> <div className='my-16 flex flex-col gap-y-16'> - <DelayRender renderAfter={400}> - <PreferredBrand /> - </DelayRender> - <DelayRender renderAfter={600}> - <FlashSale /> - </DelayRender> - <DelayRender renderAfter={600}> - <PromotinProgram /> - </DelayRender> - <DelayRender renderAfter={1000}> - <CategoryHomeId /> - <BannerSection /> - </DelayRender> - <DelayRender renderAfter={1200}> - <CustomerReviews /> - </DelayRender> + <PreferredBrand /> + <FlashSale /> + <PromotinProgram /> + <CategoryHomeId /> + <BannerSection /> + <CustomerReviews /> </div> </div> </DesktopView> @@ -98,8 +94,8 @@ export default function Home() { <FlashSale /> </DelayRender> <DelayRender renderAfter={600}> - <PromotinProgram /> - </DelayRender> + <PromotinProgram /> + </DelayRender> <DelayRender renderAfter={800}> <PopularProduct /> </DelayRender> |
