diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-09-26 11:16:32 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-09-26 11:16:32 +0700 |
| commit | 9dc7af1641f06f3c7cffda102febe90c806ffee1 (patch) | |
| tree | e82bd0209247d5b85e7434e81bde8f2d9b525289 | |
| parent | 461d2786935c5c9b3cf627c44fc06fcd1c3e8075 (diff) | |
| parent | 1c56a76f979a6e433d70634b92b1887fb1f19509 (diff) | |
Merge branch 'new-release' into Feature/switch-account
27 files changed, 1388 insertions, 1036 deletions
diff --git a/package.json b/package.json index 28fbc5d8..a846749c 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" --config ./.prettierrc" }, "dependencies": { - "@chakra-ui/next-js": "^2.1.5", "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", @@ -26,7 +25,6 @@ "cookies-next": "^2.1.1", "flowbite": "^1.6.4", "framer-motion": "^7.10.3", - "http-proxy-middleware": "^3.0.0", "lodash-contrib": "^4.1200.1", "lucide-react": "^0.279.0", "midtrans-client": "^1.3.1", @@ -36,15 +34,12 @@ "next-progress": "^2.2.0", "next-pwa": "^5.6.0", "next-seo": "^5.15.0", - "node-fetch": "^3.3.2", "nodemailer": "^6.8.0", - "primereact": "^10.6.6", "react": "18.2.0", "react-dom": "18.2.0", "react-google-recaptcha": "^2.1.0", "react-hook-form": "^7.42.1", "react-hot-toast": "^2.4.0", - "react-infinite-scroll-component": "^6.1.0", "react-lazy-load": "^4.0.1", "react-lazy-load-image-component": "^1.5.5", "react-loading-skeleton": "^3.3.1", @@ -52,9 +47,7 @@ "react-query": "^3.39.3", "react-select": "^5.8.0", "react-web-share": "^2.0.2", - "sharp": "^0.33.2", "snakecase-keys": "^5.5.0", - "striptags": "^3.2.0", "swiper": "^8.4.4", "tw-merge": "^0.0.1-alpha.3", "usehooks-ts": "^2.9.1", @@ -65,9 +58,7 @@ "zustand": "^4.4.4" }, "devDependencies": { - "@svgr/webpack": "^6.5.0", "@tailwindcss/typography": "^0.5.9", - "@types/node": "^20.8.7", "@types/react": "^18.2.31", "@types/react-dom": "^18.2.14", "@types/react-google-recaptcha": "^2.1.7", diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx index 547b1957..af597641 100644 --- a/src-migrate/modules/page-content/index.tsx +++ b/src-migrate/modules/page-content/index.tsx @@ -1,44 +1,45 @@ -import { useMemo } from "react" -import { useQuery } from "react-query" -import { PageContentProps } from "~/types/pageContent" -import { getPageContent } from "~/services/pageContent" +import { useMemo } from 'react'; +import { useQuery } from 'react-query'; +import { PageContentProps } from '~/types/pageContent'; +import { getPageContent } from '~/services/pageContent'; type Props = { - path: string -} + path: string; +}; const PageContent = ({ path }: Props) => { - const { data, isLoading } = useQuery<PageContentProps>(`page-content:${path}`, async () => await getPageContent({ path })) + const { data, isLoading } = useQuery<PageContentProps>( + `page-content:${path}`, + async () => await getPageContent({ path }) + ); const parsedContent = useMemo<string>(() => { - if (!data) return '' + if (!data) return ''; return data.content.replaceAll( 'src="/web/image', `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image` - ) - }, [data]) + ); + }, [data]); + console.log('parsedContent', parsedContent); + if (isLoading) return <PageContentSkeleton />; - if (isLoading) return <PageContentSkeleton /> - - return ( - <div dangerouslySetInnerHTML={{ __html: parsedContent || '' }}></div> - ) -} + return <div dangerouslySetInnerHTML={{ __html: parsedContent || '' }}></div>; +}; const PageContentSkeleton = () => ( - <div className="animate-pulse grid gap-y-4"> - <div className="w-full h-10 bg-gray-300 rounded" /> - <div className="h-2" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-8/12 h-4 bg-gray-300 rounded" /> - <div className="h-2" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-1/2 h-4 bg-gray-300 rounded" /> + <div className='animate-pulse grid gap-y-4'> + <div className='w-full h-10 bg-gray-300 rounded' /> + <div className='h-2' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-8/12 h-4 bg-gray-300 rounded' /> + <div className='h-2' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-1/2 h-4 bg-gray-300 rounded' /> </div> -) +); -export default PageContent
\ No newline at end of file +export default PageContent; diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx index b396160f..4b345654 100644 --- a/src-migrate/modules/product-promo/components/Item.tsx +++ b/src-migrate/modules/product-promo/components/Item.tsx @@ -1,34 +1,35 @@ -import style from '../styles/item.module.css' +import style from '../styles/item.module.css'; -import { Tooltip } from '@chakra-ui/react' +import { Tooltip } from '@chakra-ui/react'; -import Image from '~/components/ui/image' -import { IProductVariantPromo } from '~/types/promotion' +import Image from '~/components/ui/image'; +import { IProductVariantPromo } from '~/types/promotion'; type Props = { - variant: IProductVariantPromo, - isFree?: boolean -} + variant: IProductVariantPromo; + isFree?: boolean; +}; -const ProductPromoItem = ({ - variant, - isFree = false -}: Props) => { +const ProductPromoItem = ({ variant, isFree = false }: Props) => { return ( <div className={style.item}> <div className={style.image}> - <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} /> + <Image + src={variant.image || '/images/noimage.jpeg'} + alt={variant.display_name} + width={120} + height={120} + quality={85} + /> <div className={style.quantity}> {variant.qty} pcs {isFree ? '(free)' : ''} </div> </div> <Tooltip label={variant.display_name} placement='top' fontSize='sm'> - <div className={style.name}> - {variant.name} - </div> + <div className={style.name}>{variant.name}</div> </Tooltip> </div> - ) -} + ); +}; -export default ProductPromoItem
\ No newline at end of file +export default ProductPromoItem; diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx index 97cbe0b7..7d0aad11 100644 --- a/src-migrate/modules/promo/components/Hero.tsx +++ b/src-migrate/modules/promo/components/Hero.tsx @@ -3,34 +3,34 @@ import 'swiper/css'; import Image from 'next/image'; import { useEffect, useMemo } from 'react'; import { useQuery } from 'react-query'; -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; import style from '../styles/hero.module.css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { Navigation, Pagination, Autoplay } from 'swiper'; +import { Navigation, Pagination, Autoplay } from 'swiper'; import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '@/core/components/views/DesktopView'; -import {bannerApi} from '../../../../src/api/bannerApi' +import { bannerApi } from '../../../../src/api/bannerApi'; interface IPromotionProgram { headlineBanner: string; descriptionBanner: string; - image: string ; + image: string; name: string; } const swiperBanner: SwiperProps = { - modules:[Navigation, Pagination, Autoplay], + modules: [Navigation, Pagination, Autoplay], autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, loop: true, className: 'h-[400px] w-full', slidesPerView: 1, spaceBetween: 10, - pagination:true, -} + pagination: true, +}; const swiperBannerMob = { autoplay: { delay: 6000, @@ -43,7 +43,10 @@ const swiperBannerMob = { }; const Hero = () => { - const heroBanner = useQuery('allPromo', bannerApi({ type: 'banner-semua-promo' })); + const heroBanner = useQuery( + 'allPromo', + bannerApi({ type: 'banner-semua-promo' }) + ); const banners: IPromotionProgram[] = useMemo( () => heroBanner?.data || [], @@ -54,52 +57,60 @@ const Hero = () => { ...swiperBannerMob, pagination: { dynamicBullets: false, clickable: true }, }; - + return ( <> <DesktopView> <div className={style['wrapper']}> - <Swiper {...swiperBanner}> - {banners?.map((banner, index) => ( - <SwiperSlide key={index} className='flex flex-row'> - <div className={style['desc-section']}> - <div className={style['title']}>{banner?.headlineBanner? banner?.headlineBanner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div> - <div className='h-4' /> - <div className={style['subtitle']}>{banner?.descriptionBanner? banner?.descriptionBanner : "Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!"}</div> + <Swiper {...swiperBanner}> + {banners?.map((banner, index) => ( + <SwiperSlide key={index} className='flex flex-row'> + <div className={style['desc-section']}> + <div className={style['title']}> + {banner?.headlineBanner + ? banner?.headlineBanner + : 'Pasti Hemat & Untung Selama Belanja di Indoteknik.com!'} </div> - <div className={style['banner-section']}> - <Image - src={banner.image} - alt={banner.name} - width={666} - height={450} - quality={90} - className='w-full h-full object-fit object-center rounded-2xl' /> + <div className='h-4' /> + <div className={style['subtitle']}> + {banner?.descriptionBanner + ? banner?.descriptionBanner + : 'Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!'} </div> - </SwiperSlide> - ))} - </Swiper> - </div> - </DesktopView> - <MobileView> - <Swiper {...swiperBannerMobile}> - {banners?.map((banner, index) => ( - <SwiperSlide key={index}> - <Image - width={439} - height={150} - quality={100} - src={banner?.image} - alt={banner?.name} - className='w-full h-full object-cover object-center rounded-2xl' - /> + </div> + <div className={style['banner-section']}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + quality={85} + className='w-full h-full object-fit object-center rounded-2xl' + /> + </div> </SwiperSlide> ))} </Swiper> - + </div> + </DesktopView> + <MobileView> + <Swiper {...swiperBannerMobile}> + {banners?.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + width={439} + height={150} + quality={85} + src={banner?.image} + alt={banner?.name} + className='w-full h-full object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> </MobileView> </> - ) -} + ); +}; -export default Hero
\ No newline at end of file +export default Hero; diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx index 33839944..43e4eedf 100644 --- a/src-migrate/modules/promo/components/PromotinProgram.jsx +++ b/src-migrate/modules/promo/components/PromotinProgram.jsx @@ -1,9 +1,7 @@ import React from 'react'; import Image from 'next/image'; -import { InfoIcon } from "lucide-react"; -import MobileView from '../../../../src/core/components/views/MobileView'; -import DesktopView from '@/core/components/views/DesktopView'; -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { InfoIcon } from 'lucide-react'; +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import useDevice from '@/core/hooks/useDevice'; @@ -11,9 +9,12 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { const { isMobile } = useDevice(); return ( <> - <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div> + <h1 className='text-h-sm md:text-h-lg font-semibold py-4'> + {' '} + Serba Serbi Promo + </h1> <div className='px-4 sm:px-0'> - {/* <div className='w-full h-full '> + {/* <div className='w-full h-full '> <div onClick={() => onSelectPromo('Diskon')} className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} @@ -39,93 +40,147 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { </div> </div> </div> */} - - <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Bundling')} - className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/silat.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div > - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}> - Pilihan bundling barang kombinasi Silat. - </p> + + <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Bundling')} + className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Bundling' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/silat.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start'> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Bundling' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Silat + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={`text-xs md:text-sm ${ + selectedPromo === 'Bundling' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Pilihan bundling barang kombinasi Silat. + </p> </div> </div> - </SwiperSlide> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Loading')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/barong.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div> - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}> - Beli banyak barang/partai barang borong. - </p> + </div> + </SwiperSlide> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Loading')} + className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Loading' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/barong.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start'> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Loading' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Barong + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={`text-xs md:text-sm ${ + selectedPromo === 'Loading' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Beli banyak barang/partai barang borong. + </p> </div> </div> - </SwiperSlide> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Merchandise')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/angklung.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div > - <div className='flex w-full flex-row items-center justify-start '> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={` m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}> - Gratis barang promosi/merchandise menang langsung. - </p> + </div> + </SwiperSlide> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Merchandise')} + className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Merchandise' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/angklung.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start '> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Merchandise' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Angklung + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={` m1 text-xs md:text-sm ${ + selectedPromo === 'Merchandise' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Gratis barang promosi/merchandise menang langsung. + </p> </div> </div> - </SwiperSlide> - </Swiper> + </div> + </SwiperSlide> + </Swiper> </div> </> ); diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 510fe746..034d13e9 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -55,15 +55,18 @@ const VoucherComponent = () => { slidesPerView: isMobile ? 1.2 : 3.2, spaceBetween: 2, }; - - const dataVouchers = useMemo(() => voucherQuery?.data || [], [voucherQuery?.data]); - const vouchers = auth?.id? listVouchers : dataVouchers; + const dataVouchers = useMemo( + () => voucherQuery?.data || [], + [voucherQuery?.data] + ); + const vouchers = auth?.id ? listVouchers : dataVouchers; const copyText = (text: string) => { if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(text) + navigator.clipboard + .writeText(text) .then(() => { toast({ title: 'Salin ke papan klip', @@ -72,7 +75,7 @@ const VoucherComponent = () => { duration: 3000, isClosable: true, position: 'top', - }) + }); }) .catch(() => { fallbackCopyTextToClipboard(text); @@ -80,10 +83,10 @@ const VoucherComponent = () => { } else { fallbackCopyTextToClipboard(text); } - } + }; const fallbackCopyTextToClipboard = (text: string) => { - const textArea = document.createElement("textarea"); + const textArea = document.createElement('textarea'); textArea.value = text; // Tambahkan style untuk menyembunyikan textArea secara visual textArea.style.position = 'fixed'; @@ -108,23 +111,26 @@ const VoucherComponent = () => { duration: 3000, isClosable: true, position: 'top', - }) + }); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); - } + }; return ( <> - <div className={style['title']}>Pakai Voucher Belanja</div> + <h1 className={style['title']}>Pakai Voucher Belanja</h1> <div className='h-6' /> {voucherQuery?.isLoading && ( <div className='grid grid-cols-3 gap-x-4 animate-pulse'> {Array.from({ length: 3 }).map((_, index) => ( - <div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' /> + <div + key={index} + className='w-full h-[160px] bg-gray-200 rounded-xl' + /> ))} </div> )} @@ -134,17 +140,36 @@ const VoucherComponent = () => { {vouchers?.map((voucher) => ( <SwiperSlide key={voucher.id} className='pb-2'> <div className={style['voucher-card']}> - <Image src={voucher?.image} alt={voucher?.name} width={128} height={128} className={style['voucher-image']} /> + <Image + src={voucher?.image} + alt={voucher?.name} + width={128} + height={128} + className={style['voucher-image']} + /> <div className={style['voucher-content']}> - <div className={style['voucher-title']}>{voucher?.name}</div> - <div className={style['voucher-desc']}>{voucher?.description}</div> + <div className={style['voucher-title']}> + {voucher?.name} + </div> + <div className={style['voucher-desc']}> + {voucher?.description} + </div> <div className={style['voucher-bottom']}> <div> - <div className={style['voucher-code-desc']}>Kode Promo</div> - <div className={style['voucher-code']}>{voucher?.code}</div> + <div className={style['voucher-code-desc']}> + Kode Promo + </div> + <div className={style['voucher-code']}> + {voucher?.code} + </div> </div> - <button className={style['voucher-copy']} onClick={() => copyText(voucher?.code)}>Salin</button> + <button + className={style['voucher-copy']} + onClick={() => copyText(voucher?.code)} + > + Salin + </button> </div> </div> </div> @@ -154,7 +179,7 @@ const VoucherComponent = () => { </div> )} </> - ) -} + ); +}; -export default VoucherComponent +export default VoucherComponent; diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 88a2f0b0..6185179f 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -325,7 +325,7 @@ const form: React.FC<FormProps> = ({ className='w-full h-full ' width={800} height={800} - quality={100} + quality={85} /> </div> </BottomPopup> diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx index 4768f62d..c5386c91 100644 --- a/src-migrate/pages/shop/cart/index.tsx +++ b/src-migrate/pages/shop/cart/index.tsx @@ -14,10 +14,10 @@ import clsxm from '~/libs/clsxm'; import useDevice from '@/core/hooks/useDevice'; import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile'; import Image from '~/components/ui/image'; -import { CartItem } from '~/types/cart' -import { deleteUserCart ,upsertUserCart } from '~/services/cart' +import { CartItem } from '~/types/cart'; +import { deleteUserCart, upsertUserCart } from '~/services/cart'; import { Trash2Icon } from 'lucide-react'; -import { useProductCartContext } from '@/contexts/ProductCartContext' +import { useProductCartContext } from '@/contexts/ProductCartContext'; const CartPage = () => { const router = useRouter(); @@ -26,11 +26,11 @@ const CartPage = () => { const [isSelectedAll, setIsSelectedAll] = useState(false); const [isButtonChek, setIsButtonChek] = useState(false); const [buttonSelectNow, setButtonSelectNow] = useState(true); - const [isLoad, setIsLoad] = useState<boolean>(false) - const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false) + const [isLoad, setIsLoad] = useState<boolean>(false); + const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false); const { loadCart, cart, summary, updateCartItem } = useCartStore(); const useDivvice = useDevice(); - const { setRefreshCart } = useProductCartContext() + const { setRefreshCart } = useProductCartContext(); const [isTop, setIsTop] = useState(true); const [hasChanged, setHasChanged] = useState(false); const prevCartRef = useRef<CartItem[] | null>(null); @@ -64,18 +64,19 @@ const CartPage = () => { const hasSelectedChanged = () => { if (prevCartRef.current && cart) { const prevCart = prevCartRef.current; - return cart.products.some((item, index) => - prevCart[index] && prevCart[index].selected !== item.selected + return cart.products.some( + (item, index) => + prevCart[index] && prevCart[index].selected !== item.selected ); } return false; }; if (hasSelectedChanged()) { - setHasChanged(true) + setHasChanged(true); // Perform necessary actions here if selection has changed - }else{ - setHasChanged(false) + } else { + setHasChanged(false); } prevCartRef.current = cart ? [...cart.products] : null; @@ -83,35 +84,38 @@ const CartPage = () => { const hasSelectedPromo = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.cart_type === 'promotion' && item.selected); + return cart.products.some( + (item) => item.cart_type === 'promotion' && item.selected + ); }, [cart]); const hasSelected = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.selected); + return cart.products.some((item) => item.selected); }, [cart]); const hasSelectNoPrice = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.selected && item.price.price_discount === 0); + return cart.products.some( + (item) => item.selected && item.price.price_discount === 0 + ); }, [cart]); const hasSelectedAll = useMemo(() => { if (!cart || !Array.isArray(cart.products)) return false; - return cart.products.every(item => item.selected); + return cart.products.every((item) => item.selected); }, [cart]); - useEffect(() => { const updateCartItems = async () => { if (typeof auth === 'object' && cart) { - const upsertPromises = cart.products.map(item => + const upsertPromises = cart.products.map((item) => upsertUserCart({ userId: auth.id, type: item.cart_type, id: item.id, qty: item.quantity, - selected: item.selected + selected: item.selected, }) ); try { @@ -128,7 +132,7 @@ const CartPage = () => { const handleCheckout = () => { router.push('/shop/checkout'); - } + }; const handleQuotation = () => { if (hasSelectedPromo || !hasSelected) { @@ -136,54 +140,53 @@ const CartPage = () => { } else { router.push('/shop/quotation'); } - } + }; const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => { - - if (cart) { const updatedCart = { ...cart, - products: cart.products.map(item => ({ + products: cart.products.map((item) => ({ ...item, - selected: !hasSelectedAll - })) + selected: !hasSelectedAll, + })), }; - - updateCartItem(updatedCart); - if(hasSelectedAll){ + + updateCartItem(updatedCart); + if (hasSelectedAll) { setIsSelectedAll(false); - }else{ + } else { setIsSelectedAll(true); } } }; - const handleDelete = async () => { if (typeof auth !== 'object' || !cart) return; - setIsLoadDelete(true) + setIsLoadDelete(true); for (const item of cart.products) { - if(item.selected === true){ - await deleteUserCart(auth.id, [item.cart_id]) - await loadCart(auth.id) + if (item.selected === true) { + await deleteUserCart(auth.id, [item.cart_id]); + await loadCart(auth.id); } } - setIsLoadDelete(false) - setRefreshCart(true) - } + setIsLoadDelete(false); + setRefreshCart(true); + }; return ( <> - <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`}> - <div className={`${style['title']}`}>Keranjang Belanja</div> + <div + className={`${ + isTop ? 'border-b-[0px]' : 'border-b-[1px]' + } sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`} + > + <h1 className={`${style['title']}`}>Keranjang Belanja</h1> <div className='h-2' /> <div className={`flex items-center object-center justify-between `}> <div className='flex items-center object-center'> - {isLoad && ( - <Spinner className='my-auto' size='sm' /> - )} + {isLoad && <Spinner className='my-auto' size='sm' />} {!isLoad && ( <Checkbox borderColor='gray.600' @@ -193,34 +196,31 @@ const CartPage = () => { onChange={handleChange} /> )} - <p className='p-2 text-caption-2'> - {hasSelectedAll ? "Uncheck all" : "Select all"} - </p> + <p className='p-2 text-caption-2'> + {hasSelectedAll ? 'Uncheck all' : 'Select all'} + </p> + </div> + <div className='delate all flex items-center object-center'> + <Tooltip + label={clsxm({ + 'Tidak ada item yang dipilih': !hasSelected, + })} + > + <Button + bg='#fadede' + variant='outline' + colorScheme='red' + w='full' + isDisabled={!hasSelected} + onClick={handleDelete} + > + {isLoadDelete && <Spinner size='xs' />} + {!isLoadDelete && <Trash2Icon size={16} />} + <p className='text-sm ml-2'>Hapus Barang</p> + </Button> + </Tooltip> </div> - <div className='delate all flex items-center object-center'> - <Tooltip - label={clsxm({ - 'Tidak ada item yang dipilih': !hasSelected, - })} - > - <Button - bg='#fadede' - variant='outline' - colorScheme='red' - w='full' - isDisabled={!hasSelected} - onClick={handleDelete} - > - {isLoadDelete && <Spinner size='xs' />} - {!isLoadDelete && <Trash2Icon size={16} />} - <p className='text-sm ml-2'> - Hapus Barang - </p> - </Button> - </Tooltip> - </div> </div> - </div> <div className={style['content']}> @@ -274,7 +274,13 @@ const CartPage = () => { <CartSummary {...summary} isLoaded={!!cart} /> )} - <div className={isStepApproval ? style['summary-buttons-step-approval'] : style['summary-buttons']}> + <div + className={ + isStepApproval + ? style['summary-buttons-step-approval'] + : style['summary-buttons'] + } + > <Tooltip label={ hasSelectedPromo && @@ -315,4 +321,4 @@ const CartPage = () => { ); }; -export default CartPage;
\ No newline at end of file +export default CartPage; diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 16bccbd5..e9abe657 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -1,8 +1,16 @@ -import { useRouter } from 'next/router' -import Link from '../Link/Link' -import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { getCart, getCountCart } from '@/core/utils/cart' +import { useRouter } from 'next/router'; +import Link from '../Link/Link'; +import { + HomeIcon, + Bars3Icon, + ShoppingCartIcon, + ChevronLeftIcon, +} from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { getCart, getCountCart } from '@/core/utils/cart'; +import useTransactions from '@/lib/transaction/hooks/useTransactions'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; +import useAuth from '@/core/hooks/useAuth'; /** * The AppBar component is a navigation component used to display a header or toolbar @@ -13,26 +21,31 @@ import { getCart, getCountCart } from '@/core/utils/cart' * @returns {JSX.Element} - Rendered AppBar component. */ const AppBar = ({ title }) => { - const router = useRouter() - - const [cartCount, setCartCount] = useState(0) - + const router = useRouter(); + const auth = useAuth(); + const { cart } = useCartStore(); + const query = { + context: 'quotation', + site: auth?.webRole === null && auth?.site ? auth.site : null, + }; + const [cartCount, setCartCount] = useState(0); + const { transactions } = useTransactions({ query }); useEffect(() => { const handleCartChange = () => { const cart = async () => { - const listCart = await getCountCart() - setCartCount(listCart) - } - cart() - } - handleCartChange() + const listCart = await getCountCart(); + setCartCount(listCart); + }; + cart(); + }; + handleCartChange(); - window.addEventListener('localStorageChange', handleCartChange) + window.addEventListener('localStorageChange', handleCartChange); return () => { - window.removeEventListener('localStorageChange', handleCartChange) - } - }, []) + window.removeEventListener('localStorageChange', handleCartChange); + }; + }, [transactions.data, cart]); return ( <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'> @@ -46,9 +59,11 @@ const AppBar = ({ title }) => { <Link href='/shop/cart' className='py-4 px-2'> <div className='relative'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> - <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> - {cartCount} - </span> + {cartCount > 0 && ( + <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> + {cartCount} + </span> + )} </div> </Link> <Link href='/' className='py-4 px-2'> @@ -59,7 +74,7 @@ const AppBar = ({ title }) => { </Link> </div> </nav> - ) -} + ); +}; -export default AppBar +export default AppBar; diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 8f024d86..4688b15b 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -175,7 +175,7 @@ const CustomerGuide = () => ( <div> <div className={headerClassName}>Bantuan & Panduan</div> <ul className='flex flex-col gap-y-3'> - <li > + <li> <InternalItemLink href='/metode-pembayaran'> Metode Pembayaran </InternalItemLink> @@ -395,7 +395,7 @@ const Payments = () => ( alt='Metode Pembayaran - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> @@ -409,7 +409,7 @@ const Shippings = () => ( alt='Jasa Pengiriman - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> @@ -423,7 +423,7 @@ const Secures = () => ( alt='Keamanan Belanja - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 2a51c41f..eebfbcd5 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -5,7 +5,7 @@ import { createSlug } from '@/core/utils/slug'; import whatsappUrl from '@/core/utils/whatsappUrl'; import IndoteknikLogo from '@/images/logo.png'; import Cardheader from '@/lib/cart/components/Cartheader'; -import Quotationheader from "../../../../../src/lib/quotation/components/Quotationheader.jsx" +import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx'; import Category from '@/lib/category/components/Category'; import { useProductCartContext } from '@/contexts/ProductCartContext'; import { @@ -30,7 +30,7 @@ import { MenuList, useDisclosure, } from '@chakra-ui/react'; -import style from "./style/NavbarDesktop.module.css"; +import style from './style/NavbarDesktop.module.css'; import useTransactions from '@/lib/transaction/hooks/useTransactions'; import { useCartStore } from '~/modules/cart/stores/useCartStore'; @@ -43,7 +43,7 @@ const NavbarDesktop = () => { const [cartCount, setCartCount] = useState(0); const [quotationCount, setQuotationCount] = useState(0); - const [pendingTransactions, setPendingTransactions] = useState([]) + const [pendingTransactions, setPendingTransactions] = useState([]); const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); @@ -52,13 +52,12 @@ const NavbarDesktop = () => { const { product } = useProductContext(); const { isOpen, onOpen, onClose } = useDisclosure(); - + const query = { context: 'quotation', - site: - (auth?.webRole === null && auth?.site ? auth.site : null), + site: auth?.webRole === null && auth?.site ? auth.site : null, }; - + const { transactions } = useTransactions({ query }); const data = transactions?.data?.saleOrders.filter( (transaction) => transaction.status === 'draft' @@ -107,8 +106,7 @@ const NavbarDesktop = () => { useEffect(() => { setPendingTransactions(data); }, [transactions.data]); - - + useEffect(() => { if (router.pathname === '/shop/product/[slug]') { setPayloadWa({ @@ -117,11 +115,11 @@ const NavbarDesktop = () => { url: createSlug('/shop/product/', product?.name, product?.id, true), }); setTemplateWA('product'); - + setUrlPath(router.asPath); } }, [product, router]); - + useEffect(() => { const handleCartChange = () => { const cart = async () => { @@ -130,10 +128,10 @@ const NavbarDesktop = () => { }; cart(); }; - handleCartChange(); - + handleCartChange(); + window.addEventListener('localStorageChange', handleCartChange); - + return () => { window.removeEventListener('localStorageChange', handleCartChange); }; @@ -154,7 +152,7 @@ const NavbarDesktop = () => { window.removeEventListener('localStorageChange', handleQuotationChange); }; }, [pendingTransactions]); - + return ( <DesktopView> <TopBanner onLoad={handleTopBannerLoad} /> @@ -174,7 +172,7 @@ const NavbarDesktop = () => { > <div className='flex gap-x-1'> <div>Fitur Layanan </div> - <ChevronDownIcon className='w-5'/> + <ChevronDownIcon className='w-5' /> </div> </MenuButton> <MenuList @@ -217,7 +215,10 @@ const NavbarDesktop = () => { <Search /> </div> <div className='flex gap-x-4 items-center'> - <Quotationheader quotationCount={quotationCount} data={pendingTransactions} /> + <Quotationheader + quotationCount={quotationCount} + data={pendingTransactions} + /> <Cardheader cartCount={cartCount} /> @@ -271,29 +272,30 @@ const NavbarDesktop = () => { </div> </div> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> - - <Link - href="/shop/promo" + <Link + href='/shop/promo' className={`${ router.asPath === '/shop/promo' && 'bg-gray_r-3' } flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position - target="_blank" - rel="noreferrer" + target='_blank' + rel='noreferrer' > - {showPopup && ( - <div className='w-full h-full relative justify-end items-start'> + {showPopup && ( + <div className='w-full h-full relative justify-end items-start'> <Image - src='/images/penawaran-terbatas.jpg' - alt='penawaran terbatas' - width={1440} - height={160} - quality={100} - // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`} - className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`} - /> + src='/images/penawaran-terbatas.jpg' + alt='penawaran terbatas' + width={1440} + height={160} + quality={100} + // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`} + className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`} + /> </div> - )} - <span className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</span> + )} + <span className='absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'> + Semua Promo + </span> </Link> {/* {showPopup && router.pathname === '/' && ( <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}> @@ -302,17 +304,18 @@ const NavbarDesktop = () => { </p> </div> )} */} - <Link href='/shop/brands' - className={`${ + className={`${ router.asPath === '/shop/brands' && 'bg-gray_r-3' } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`} target='_blank' rel='noreferrer' > - <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</span> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Semua Brand + </span> </Link> <Link href='/shop/search?orderBy=stock' @@ -323,7 +326,9 @@ const NavbarDesktop = () => { target='_blank' rel='noreferrer' > - <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</span> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Ready Stock + </span> </Link> <Link href='https://blog.indoteknik.com/' @@ -331,7 +336,9 @@ const NavbarDesktop = () => { target='_blank' rel='noreferrer noopener' > - <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</span> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Blog Indoteknik + </span> </Link> {/* <Link href='/video' diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx index 2d78d956..ebd41a67 100644 --- a/src/lib/brand/components/BrandCard.jsx +++ b/src/lib/brand/components/BrandCard.jsx @@ -1,10 +1,10 @@ -import Image from '~/components/ui/image' -import Link from '@/core/components/elements/Link/Link' -import useDevice from '@/core/hooks/useDevice' -import { createSlug } from '@/core/utils/slug' +import NextImage from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; +import useDevice from '@/core/hooks/useDevice'; +import { createSlug } from '@/core/utils/slug'; const BrandCard = ({ brand }) => { - const { isMobile } = useDevice() + const { isMobile } = useDevice(); return ( <Link href={createSlug('/shop/brands/', brand.name, brand.id)} @@ -13,21 +13,25 @@ const BrandCard = ({ brand }) => { }`} > {brand.logo && ( - <Image + <NextImage src={brand.logo} alt={brand.name} - width={50} - height={50} + width={500} + height={500} + quality={85} className='h-full w-[122px] object-contain object-center' /> )} {!brand.logo && ( - <span className='text-center' style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}> + <span + className='text-center' + style={{ fontSize: `${16 - brand.name.length * 0.5}px` }} + > {brand.name} </span> )} </Link> - ) -} + ); +}; -export default BrandCard +export default BrandCard; diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js index 0aeb2aac..2ff4fdfc 100644 --- a/src/lib/home/api/categoryManagementApi.js +++ b/src/lib/home/api/categoryManagementApi.js @@ -1,40 +1,44 @@ export const fetchCategoryManagementSolr = async () => { - let sort ='sort=sequence_i asc'; - try { - const response = await fetch(`/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20`); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const data = await response.json(); - const promotions = await map(data.response.docs); - return promotions; - } catch (error) { - console.error("Error fetching promotion data:", error); - return []; + let sort = 'sort=sequence_i asc'; + try { + const response = await fetch( + `/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20` + ); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + const promotions = await map(data.response.docs); + return promotions; + } catch (error) { + console.error('Error fetching promotion data:', error); + return []; + } +}; + +const map = async (promotions) => { + return promotions.map((promotion) => { + let parsedCategories = promotion.categories.map((category) => { + // Parse string JSON utama + let parsedCategory = JSON.parse(category); + + // Parse setiap elemen di child_frontend_id_i jika ada + if (parsedCategory.child_frontend_id_i) { + parsedCategory.child_frontend_id_i = + parsedCategory.child_frontend_id_i.map((child) => JSON.parse(child)); } + + return parsedCategory; + }); + let productMapped = { + id: promotion.id, + name: promotion.name_s, + image: promotion.image_s, + sequence: promotion.sequence_i, + numFound: promotion.numFound_i, + categories: parsedCategories, + category_id: promotion.category_id_i, }; - - const map = async (promotions) => { - return promotions.map((promotion) =>{ - let parsedCategories = promotion.categories.map(category => { - // Parse string JSON utama - let parsedCategory = JSON.parse(category); - - // Parse setiap elemen di child_frontend_id_i jika ada - if (parsedCategory.child_frontend_id_i) { - parsedCategory.child_frontend_id_i = parsedCategory.child_frontend_id_i.map(child => JSON.parse(child)); - } - - return parsedCategory; - }); - let productMapped = { - id: promotion.id, - name: promotion.name_s, - image: promotion.image_s, - sequence: promotion.sequence_i, - numFound: promotion.numFound_i, - categories: parsedCategories - }; - return productMapped; - }) - };
\ No newline at end of file + return productMapped; + }); +}; diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx index 2010503d..f83c36fc 100644 --- a/src/lib/home/components/BannerSection.jsx +++ b/src/lib/home/components/BannerSection.jsx @@ -1,12 +1,12 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; -const { useQuery } = require('react-query') -const { default: bannerSectionApi } = require('../api/bannerSectionApi') +const { useQuery } = require('react-query'); +const { default: bannerSectionApi } = require('../api/bannerSectionApi'); const BannerSection = () => { - const fetchBannerSection = async () => await bannerSectionApi() - const bannerSection = useQuery('bannerSection', fetchBannerSection) + const fetchBannerSection = async () => await bannerSectionApi(); + const bannerSection = useQuery('bannerSection', fetchBannerSection); return ( bannerSection.data && @@ -17,7 +17,7 @@ const BannerSection = () => { <Image width={1024} height={512} - quality={100} + quality={85} src={banner.image} alt={banner.name} className='h-auto w-full rounded' @@ -26,7 +26,7 @@ const BannerSection = () => { ))} </div> ) - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index ca104ada..49a9a93f 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,46 +1,44 @@ import React, { useEffect, useState, useCallback } from 'react'; -import {fetchCategoryManagementSolr} from '../api/categoryManagementApi' +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; import NextImage from 'next/image'; -import Link from "next/link"; +import Link from 'next/link'; import { createSlug } from '@/core/utils/slug'; -import odooApi from '@/core/api/odooApi'; import { Skeleton } from '@chakra-ui/react'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { Navigation, Pagination, Autoplay } from 'swiper'; +import { Pagination } from 'swiper'; const CategoryDynamic = () => { - - const [categoryManagement, setCategoryManagement] = useState([]) - const [isLoading, setIsLoading] = useState(false) + const [categoryManagement, setCategoryManagement] = useState([]); + const [isLoading, setIsLoading] = useState(false); const loadBrand = useCallback(async () => { - setIsLoading(true) + setIsLoading(true); const items = await fetchCategoryManagementSolr(); - - setIsLoading(false) - setCategoryManagement(items) - }, []) + + setIsLoading(false); + setCategoryManagement(items); + }, []); useEffect(() => { - loadBrand() - }, [loadBrand]) - + loadBrand(); + }, [loadBrand]); + // const [categoryData, setCategoryData] = useState({}); // const [subCategoryData, setSubCategoryData] = useState({}); - + // useEffect(() => { // const fetchCategoryData = async () => { // if (categoryManagement && categoryManagement.data) { // const updatedCategoryData = {}; // const updatedSubCategoryData = {}; - + // for (const category of categoryManagement.data) { // const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`); - + // updatedCategoryData[category.categoryIdI] = countLevel1?.numFound; - + // for (const subCategory of countLevel1?.children) { // updatedSubCategoryData[subCategory.id] = subCategory?.numFound; // } @@ -55,34 +53,45 @@ const CategoryDynamic = () => { // }, [categoryManagement.isLoading]); const swiperBanner = { - modules: [Pagination, ], - classNames:'mySwiper', + modules: [Pagination], + classNames: 'mySwiper', slidesPerView: 3, - spaceBetween:10, + spaceBetween: 10, pagination: { dynamicBullets: true, clickable: true, - } + }, }; - + return ( <div> - {categoryManagement && categoryManagement?.map((category) => { + {categoryManagement && + categoryManagement?.map((category) => { // const countLevel1 = categoryData[category.categoryIdI] || 0; return ( <Skeleton key={category.id} isLoaded={!isLoading}> <div key={category.id}> <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'> - <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'> + {category.name} + </h1> {/* <Skeleton isLoaded={countLevel1 != 0}> <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p> </Skeleton> */} - <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link> + <Link + href={createSlug( + '/shop/category/', + category?.name, + category?.category_id + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> </div> - + {/* Swiper for SubCategories */} - <Swiper {...swiperBanner} - > + <Swiper {...swiperBanner}> {category.categories.map((subCategory) => { // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; @@ -92,39 +101,69 @@ const CategoryDynamic = () => { <div className='p-3'> <div className='flex flex-row border rounded mb-2 justify-start items-center'> <NextImage - src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"} + src={ + subCategory.image + ? subCategory.image + : '/images/noimage.jpeg' + } alt={subCategory.name} width={90} height={30} className='object-fit p-4' /> <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'> - <div className='font-semibold text-lg mr-2'>{subCategory?.name}</div> + <h2 className='font-semibold text-lg mr-2'> + {subCategory?.name} + </h2> {/* <Skeleton isLoaded={countLevel2 != 0}> <p className={`text-gray_r-10 text-sm`}> {countLevel2} Produk tersedia </p> </Skeleton> */} - <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.id_level_2)} className="!text-red-500 font-semibold">Lihat Semua</Link> + <Link + href={createSlug( + '/shop/category/', + subCategory?.name, + subCategory?.id_level_2 + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> </div> </div> <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'> - {subCategory.child_frontend_id_i.map((childCategory) => ( - <div key={childCategory.id} className=''> - <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.id_level_3)} className="flex flex-row gap-2 border rounded group hover:border-red-500"> - <NextImage - src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"} - alt={childCategory.name} - className='p-2 ml-1' - width={40} - height={40} - /> - <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'> - <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div> - </div> - </Link> - </div> - ))} + {subCategory.child_frontend_id_i.map( + (childCategory) => ( + <div key={childCategory.id} className=''> + <Link + href={createSlug( + '/shop/category/', + childCategory?.name, + childCategory?.id_level_3 + )} + className='flex flex-row gap-2 border rounded group hover:border-red-500' + > + <NextImage + src={ + childCategory.image + ? childCategory.image + : '/images/noimage.jpeg' + } + alt={childCategory.name} + className='p-2 ml-1' + width={40} + height={40} + /> + <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'> + <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'> + {childCategory.name} + </h3> + </div> + </Link> + </div> + ) + )} </div> </div> </div> diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index 1061f3e4..4a8f13cf 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -1,38 +1,41 @@ import React, { useEffect, useState, useCallback } from 'react'; import NextImage from 'next/image'; -import Link from "next/link"; +import Link from 'next/link'; import { createSlug } from '@/core/utils/slug'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; -import {fetchCategoryManagementSolr} from '../api/categoryManagementApi' +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; const CategoryDynamicMobile = () => { const [selectedCategory, setSelectedCategory] = useState({}); - const [categoryManagement, setCategoryManagement] = useState([]) - const [isLoading, setIsLoading] = useState(false) + const [categoryManagement, setCategoryManagement] = useState([]); + const [isLoading, setIsLoading] = useState(false); const loadBrand = useCallback(async () => { - setIsLoading(true) + setIsLoading(true); const items = await fetchCategoryManagementSolr(); - - setIsLoading(false) - setCategoryManagement(items) - }, []) + + setIsLoading(false); + setCategoryManagement(items); + }, []); useEffect(() => { - loadBrand() - }, [loadBrand]) + loadBrand(); + }, [loadBrand]); useEffect(() => { const loadPromo = async () => { try { if (categoryManagement?.length > 0) { - const initialSelections = categoryManagement.reduce((acc, category) => { - if (category.categories.length > 0) { - acc[category.id] = category.categories[0].id_level_2; - } - return acc; - }, {}); + const initialSelections = categoryManagement.reduce( + (acc, category) => { + if (category.categories.length > 0) { + acc[category.id] = category.categories[0].id_level_2; + } + return acc; + }, + {} + ); setSelectedCategory(initialSelections); } } catch (loadError) { @@ -44,69 +47,102 @@ const CategoryDynamicMobile = () => { }, [categoryManagement]); const handleCategoryLevel2Click = (categoryIdI, idLevel2) => { - setSelectedCategory(prev => ({ + setSelectedCategory((prev) => ({ ...prev, - [categoryIdI]: idLevel2 + [categoryIdI]: idLevel2, })); }; - + return ( <div className='p-4'> - {categoryManagement && categoryManagement?.map((category) => ( - <div key={category.id}> - <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'> - <div className='font-semibold sm:text-h-sm mr-2'>{category?.name}</div> - <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link> - </div> - <Swiper slidesPerView={2.3} spaceBetween={10}> - {category.categories.map((index) => ( - <SwiperSlide key={index.id}> - <div - onClick={() => handleCategoryLevel2Click(category.id, index?.id_level_2)} - className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div className='p-1 flex justify-start items-center'> - <div className='flex flex-row justify-center items-center'> - <NextImage - src={index.image ? index.image : "/images/noimage.jpeg"} - alt={index.name} - width={30} - height={30} - className='' - /> - <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'> - <div className='font-semibold text-[10px] line-clamp-1'>{index?.name}</div> - </div> - </div> - </div> - </div> - </SwiperSlide> - ))} - </Swiper> - <div className='p-3 mt-2 border'> - <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'> + {categoryManagement && + categoryManagement?.map((category) => ( + <div key={category.id}> + <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'> + <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'> + {category.name} + </h1> + <Link + href={createSlug( + '/shop/category/', + category?.name, + category?.category_id + )} + className='!text-red-500 font-semibold text-sm' + > + Lihat Semua + </Link> + </div> + <Swiper slidesPerView={2.3} spaceBetween={10}> {category.categories.map((index) => ( - selectedCategory[category.id] === index?.id_level_2 && index?.child_frontend_id_i.map((x) => ( - <div key={x.id}> - <Link href={createSlug('/shop/category/', x?.name, x?.id_level_3)} className="flex flex-row gap-1 border rounded group hover:border-red-500"> - <NextImage - src={x.image ? x.image : "/images/noimage.jpeg"} - alt={x.name} - width={40} - height={40} - className='p-2' - /> - <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'> - <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x?.name}</div> + <SwiperSlide key={index.id}> + <div + onClick={() => + handleCategoryLevel2Click(category.id, index?.id_level_2) + } + className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${ + selectedCategory[category.id] === index?.id_level_2 + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div className='p-1 flex justify-start items-center'> + <div className='flex flex-row justify-center items-center'> + <NextImage + src={ + index.image ? index.image : '/images/noimage.jpeg' + } + alt={index.name} + width={30} + height={30} + className='' + /> + <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'> + <h2 className='font-semibold text-[10px] line-clamp-1'> + {index?.name} + </h2> + </div> </div> - </Link> + </div> </div> - )) + </SwiperSlide> ))} + </Swiper> + <div className='p-3 mt-2 border'> + <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'> + {category.categories.map( + (index) => + selectedCategory[category.id] === index?.id_level_2 && + index?.child_frontend_id_i.map((x) => ( + <div key={x.id}> + <Link + href={createSlug( + '/shop/category/', + x?.name, + x?.id_level_3 + )} + className='flex flex-row gap-1 border rounded group hover:border-red-500' + > + <NextImage + src={x.image ? x.image : '/images/noimage.jpeg'} + alt={x.name} + width={40} + height={40} + className='p-2' + /> + <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'> + <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'> + {x?.name} + </h3> + </div> + </Link> + </div> + )) + )} + </div> </div> </div> - </div> - ))} + ))} </div> ); }; diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx index 71428e27..9f436dac 100644 --- a/src/lib/home/components/CategoryHomeId.jsx +++ b/src/lib/home/components/CategoryHomeId.jsx @@ -1,13 +1,15 @@ -import { LazyLoadComponent } from 'react-lazy-load-image-component' -import useCategoryHomeId from '../hooks/useCategoryHomeId' -import CategoryHome from './CategoryHome' +import { LazyLoadComponent } from 'react-lazy-load-image-component'; +import useCategoryHomeId from '../hooks/useCategoryHomeId'; +import CategoryHome from './CategoryHome'; const CategoryHomeId = () => { - const { categoryHomeIds } = useCategoryHomeId() + const { categoryHomeIds } = useCategoryHomeId(); return ( <div> - <div className='font-semibold sm:text-h-lg mb-6 px-4 sm:px-0'>Kategori Pilihan</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mb-6 px-4 sm:px-0'> + Kategori Pilihan + </h1> <div className='flex flex-col gap-y-10'> {categoryHomeIds.data?.map((id) => ( <LazyLoadComponent key={id}> @@ -16,7 +18,7 @@ const CategoryHomeId = () => { ))} </div> </div> - ) -} + ); +}; -export default CategoryHomeId +export default CategoryHomeId; diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 6dbf771e..2e5ca721 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -1,123 +1,168 @@ -import Image from 'next/image' -import useCategoryHome from '../hooks/useCategoryHome' -import Link from '@/core/components/elements/Link/Link' -import { createSlug } from '@/core/utils/slug' +import Image from 'next/image'; +import useCategoryHome from '../hooks/useCategoryHome'; +import Link from '@/core/components/elements/Link/Link'; +import { createSlug } from '@/core/utils/slug'; import { useEffect, useState } from 'react'; import { bannerApi } from '../../../api/bannerApi'; -const { useQuery } = require('react-query') +const { useQuery } = require('react-query'); import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; import useCategoryPilihan from '../hooks/useCategoryPilihan'; -import useDevice from '@/core/hooks/useDevice' +import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; const CategoryPilihan = ({ id, categories }) => { - const { isDesktop, isMobile } = useDevice() - const { categoryPilihan } = useCategoryPilihan(); - const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); - return ( - categoryPilihan.length > 0 && ( - <section> - {isDesktop && ( - <div> - <div className='flex flex-row items-center mb-4'> - <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div> - <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> - </div> - {heroBanner.data && - heroBanner.data?.length > 0 && ( - <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'> - <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> - <Image - width={1260} - height={170} - quality={100} - src={heroBanner.data[0].image} - alt={heroBanner.data[0].name} - className='h-full object-cover w-full' - /> - </Link> - </div> - )} - <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 "> - {categoryPilihan?.data?.map((category) => ( - <div key={category.id} className="KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group"> - <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '> - <div className="group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible"> - <div className=' h-36 flex justify-end items-end'> - <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} /> - </div> - <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2> - </div> - </div> - <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> - <Link - href={createSlug('/shop/lob/', category?.industries, category?.id)} - className='category-mega-box__parent text-white rounded-lg' - > - Lihat semua - </Link> - </div> - </div> - ))} + const { isDesktop, isMobile } = useDevice(); + const { categoryPilihan } = useCategoryPilihan(); + const heroBanner = useQuery( + 'categoryPilihan', + bannerApi({ type: 'banner-category-list' }) + ); + return ( + categoryPilihan.length > 0 && ( + <section> + {isDesktop && ( + <div> + <div className='flex flex-row items-center mb-4'> + <div className='font-semibold sm:text-h-lg mr-2'> + LOB Kategori Pilihan + </div> + <p className='text-gray_r-10 text-sm'> + 200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia! + </p> + </div> + {heroBanner.data && heroBanner.data?.length > 0 && ( + <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'> + <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> + <Image + width={1260} + height={170} + quality={85} + src={heroBanner.data[0].image} + alt={heroBanner.data[0].name} + className='h-full object-cover w-full' + /> + </Link> + </div> + )} + <div className='group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 '> + {categoryPilihan?.data?.map((category) => ( + <div + key={category.id} + className='KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group' + > + <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '> + <div className='group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible'> + <div className=' h-36 flex justify-end items-end'> + <Image + className='group-hover:scale-105 transition-transform duration-300 ' + src={ + category?.image + ? category?.image + : '/images/noimage.jpeg' + } + width={120} + height={120} + alt={category?.name} + /> + </div> + <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center'> + {category?.industries} + </h2> </div> + </div> + <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> + <Link + href={createSlug( + '/shop/lob/', + category?.industries, + category?.id + )} + className='category-mega-box__parent text-white rounded-lg' + > + Lihat semua + </Link> + </div> </div> - )} - {isMobile && ( - <div className='p-4'> - <div className='flex flex-row items-center mb-4'> - <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div> - {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */} + ))} + </div> + </div> + )} + {isMobile && ( + <div className='p-4'> + <div className='flex flex-row items-center mb-4'> + <div className='font-semibold sm:text-h-md mr-2'> + LOB Kategori Pilihan + </div> + {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */} + </div> + <div className='flex'> + {heroBanner.data && heroBanner.data?.length > 0 && ( + <div className=' object-fill '> + <Link + key={heroBanner.data[0].id} + href={heroBanner.data[0].url} + > + <Image + width={439} + height={150} + quality={85} + src={heroBanner.data[0].image} + alt={heroBanner.data[0].name} + className='object-cover' + /> + </Link> + </div> + )} + </div> + <Swiper slidesPerView={2.1} spaceBetween={10}> + {categoryPilihan?.data?.map((category) => ( + <SwiperSlide key={category.id}> + <div + key={category.id} + className='KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group' + > + <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '> + <div className='group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible'> + <div className=' h-36 flex justify-end items-end'> + <Image + className='group-hover:scale-105 transition-transform duration-300 ' + src={ + category?.image + ? category?.image + : '/images/noimage.jpeg' + } + width={120} + height={120} + alt={category?.name} + /> + </div> + <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center'> + {category?.industries} + </h2> + </div> </div> - <div className='flex'> - {heroBanner.data && - heroBanner.data?.length > 0 && ( - <div className=' object-fill '> - <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> - <Image - width={439} - height={150} - quality={100} - src={heroBanner.data[0].image} - alt={heroBanner.data[0].name} - className='object-cover' - /> - </Link> - </div> - )} + <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> + <Link + href={createSlug( + '/shop/lob/', + category?.industries, + category?.id + )} + className='category-mega-box__parent text-white rounded-lg' + > + Lihat semua + </Link> </div> - <Swiper slidesPerView={2.1} spaceBetween={10}> - {categoryPilihan?.data?.map((category) => ( - <SwiperSlide key={category.id}> - <div key={category.id} className="KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group"> - <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '> - <div className="group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible"> - <div className=' h-36 flex justify-end items-end'> - <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'} width={120} height={120} alt={category?.name} /> - </div> - <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2> - </div> - </div> - <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> - <Link - href={createSlug('/shop/lob/', category?.industries, category?.id)} - className='category-mega-box__parent text-white rounded-lg' - > - Lihat semua - </Link> - </div> - </div> - </SwiperSlide> - ))} - - </Swiper> - - </div> - )} - </section> - - ) - ) -} + </div> + </SwiperSlide> + ))} + </Swiper> + </div> + )} + </section> + ) + ); +}; -export default CategoryPilihan +export default CategoryPilihan; diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index ae8d5d6f..ae06bd4d 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -1,13 +1,16 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; import { bannerApi } from '@/api/bannerApi'; -import useDevice from '@/core/hooks/useDevice' +import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; -import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; -const { useQuery } = require('react-query') +import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; +const { useQuery } = require('react-query'); const BannerSection = () => { - const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); - const { isMobile, isDesktop } = useDevice() + const promotionProgram = useQuery( + 'promotionProgram', + bannerApi({ type: 'banner-promotion' }) + ); + const { isMobile, isDesktop } = useDevice(); if (promotionProgram.isLoading) { return <BannerPromoSkeleton />; @@ -16,60 +19,65 @@ const BannerSection = () => { return ( <div className='px-4 sm:px-0'> <div className='flex justify-between items-center mb-4 '> - <h1 className='font-semibold text-[14px] sm:text-h-lg'> <Link href='/shop/promo' className='!text-black font-semibold' >Promo Tersedia</Link></h1> + <h1 className='font-semibold text-[14px] sm:text-h-lg'> + {' '} + <Link href='/shop/promo' className='!text-black font-semibold'> + Promo Tersedia + </Link> + </h1> {isDesktop && ( <Link href='/shop/promo' className='!text-red-500 font-semibold'> - Lihat Semua - </Link> + Lihat Semua + </Link> )} {isMobile && ( - <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'> - Lihat Semua - </Link> - )} - </div> - {isDesktop && (promotionProgram.data && - promotionProgram.data?.length > 0 && ( - <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 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 hover:scale-105 transition duration-500 ease-in-out' - /> + <Link + href='/shop/promo' + className='!text-red-500 font-semibold sm:text-h-sm' + > + Lihat Semua </Link> - ))} + )} </div> - - ))} + {isDesktop && + promotionProgram.data && + promotionProgram.data?.length > 0 && ( + <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'> + {promotionProgram.data?.map((banner) => ( + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={85} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' + /> + </Link> + ))} + </div> + )} -{isMobile && ( - - <Swiper slidesPerView={1.1} spaceBetween={8} freeMode> - {promotionProgram.data?.map((banner) => ( - <SwiperSlide key={banner.id}> - <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> - </SwiperSlide> - ))} - </Swiper> - - )} + {isMobile && ( + <Swiper slidesPerView={1.1} spaceBetween={8} freeMode> + {promotionProgram.data?.map((banner) => ( + <SwiperSlide key={banner.id}> + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={85} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded ' + /> + </Link> + </SwiperSlide> + ))} + </Swiper> + )} </div> - - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index b8799d7d..5b16915d 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -1,5 +1,5 @@ -import Image from 'next/image' -import Link from '@/core/components/elements/Link/Link' +import Image from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; const ServiceList = () => { return ( @@ -14,14 +14,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/ONE-STOP-SOLUTIONS.svg' alt='' className='h-20 w-20 rounded' /> </div> <div className=''> - <h1 className='text-gray-900 font-semibold text-base'>One Stop Solution</h1> + <h1 className='text-gray-900 font-semibold text-base'> + One Stop Solution + </h1> <p className='text-xs md:text-sm text-gray-500'> Temukan Solusi Lengkap Anda dalam Satu Tempat. </p> @@ -37,14 +39,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/WARRANTY.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Garansi Resmi</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Garansi Resmi + </h1> <p className='text-xs md:text-sm text-gray-500'> Garansi Keaslian Barang dan Jaminan Purna Jual. </p> @@ -60,14 +64,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/DUE-PAYMENT.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Pembayaran Tempo</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Pembayaran Tempo + </h1> <p className='text-xs md:text-sm text-gray-500'> Lebih mudah mengatur pembelian dengan pembayaran tempo. </p> @@ -83,14 +89,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/TAX.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Faktur Pajak</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Faktur Pajak + </h1> <p className='text-xs md:text-sm text-gray-500'> Dapat Faktur pajak untuk setiap transaksi dengan indoteknik.com </p> @@ -99,7 +107,7 @@ const ServiceList = () => { </div> </div> </div> - ) -} + ); +}; -export default ServiceList +export default ServiceList; diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 22ce0533..d3b50302 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -17,12 +17,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const [discount, setDiscount] = useState(0); let voucherPastiHemat = 0; - - if (product?.voucherPastiHemat ? product?.voucherPastiHemat.length : voucherPastiHemat > 0) { - const stringVoucher = product?.voucherPastiHemat[0]; - const validJsonString = stringVoucher.replace(/'/g, '"'); - voucherPastiHemat = JSON.parse(validJsonString); - } + voucherPastiHemat = product?.newVoucherPastiHemat[0]; const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, @@ -48,18 +43,18 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const hitungDiscountVoucher = () => { let countDiscount = 0; - if (voucherPastiHemat.discount_type === 'percentage') { + if (voucherPastiHemat.discountType === 'percentage') { countDiscount = product?.lowestPrice.priceDiscount * - (voucherPastiHemat.discount_amount / 100); + (voucherPastiHemat.discountAmount / 100); if ( - voucherPastiHemat.max_discount > 0 && - countDiscount > voucherPastiHemat.max_discount + voucherPastiHemat.maxDiscount > 0 && + countDiscount > voucherPastiHemat.maxDiscount ) { - countDiscount = voucherPastiHemat.max_discount; + countDiscount = voucherPastiHemat.maxDiscount; } } else { - countDiscount = voucherPastiHemat.discount_amount; + countDiscount = voucherPastiHemat.discountAmount; } setDiscount(countDiscount); @@ -147,20 +142,24 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </Link> <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'> <div className='flex justify-between '> - {product?.manufacture?.name ? ( - <Link href={URL.manufacture} className='mb-1 mt-1'> - {product.manufacture.name} - </Link> - ) : ( - <div>-</div> - )} - {product?.isInBu && ( - <Link href='/panduan-pick-up-service' className='group'> - <Image src='/images/PICKUP-NOW.png' className='group-hover:scale-105 transition-transform duration-200' alt='pickup now' width={90} height={12} /> - </Link> - - - )} + {product?.manufacture?.name ? ( + <Link href={URL.manufacture} className='mb-1 mt-1'> + {product.manufacture.name} + </Link> + ) : ( + <div>-</div> + )} + {product?.isInBu && ( + <Link href='/panduan-pick-up-service' className='group'> + <Image + src='/images/PICKUP-NOW.png' + className='group-hover:scale-105 transition-transform duration-200' + alt='pickup now' + width={90} + height={12} + /> + </Link> + )} </div> <Link href={URL.product} @@ -301,11 +300,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </div> )} {product?.manufacture?.name ? ( - <div className='flex justify-between'> + <div className='flex justify-between'> <Link href={URL.manufacture} className='mb-1'> - {product.manufacture.name} - </Link> - {/* {product?.is_in_bu && ( + {product.manufacture.name} + </Link> + {/* {product?.is_in_bu && ( <div className='bg-red-500 rounded'> <span className='p-[6px] text-xs text-white'> Click & Pickup diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 1edc31c9..26114acf 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -28,7 +28,7 @@ import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; import CategorySection from './CategorySection'; import LobSectionCategory from './LobSectionCategory'; -import { getIdFromSlug } from '@/core/utils/slug' +import { getIdFromSlug } from '@/core/utils/slug'; import { data } from 'autoprefixer'; const ProductSearch = ({ @@ -45,35 +45,40 @@ const ProductSearch = ({ const [orderBy, setOrderBy] = useState(router.query?.orderBy); const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); - const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) - const [dataCategoriesLob, setDataCategoriesLob] = useState([]) - const categoryId = getIdFromSlug(prefixUrl) - const [data, setData] = useState([]) + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]); + const [dataCategoriesLob, setDataCategoriesLob] = useState([]); + const categoryId = getIdFromSlug(prefixUrl); + const [data, setData] = useState([]); const [dataLob, setDataLob] = useState([]); if (defaultBrand) query.brand = defaultBrand.toLowerCase(); - const dataIdCategories = [] + const dataIdCategories = []; useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadProduct = async () => { - const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); + const getCategoriesId = await odooApi( + 'GET', + `/api/v1/category/numFound?parent_id=${categoryId}` + ); if (getCategoriesId) { setDataCategoriesProduct(getCategoriesId); } }; loadProduct(); - }else if(prefixUrl.includes('lob')){ + } else if (prefixUrl.includes('lob')) { const loadProduct = async () => { - const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`); - + const lobData = await odooApi( + 'GET', + `/api/v1/lob_homepage/${categoryId}/category_id` + ); + if (lobData) { setDataLob(lobData); } }; loadProduct(); - } }, [categoryId]); - + const collectIds = (category) => { const ids = []; function recurse(cat) { @@ -88,45 +93,40 @@ const ProductSearch = ({ return ids; }; useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const ids = collectIds(dataCategoriesProduct); const newQuery = { fq: `category_id_ids:(${ids.join(' OR ')})`, - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - category : router.query.category? router.query.category : '', - priceFrom : router.query.priceFrom? router.query.priceFrom : '', - priceTo : router.query.priceTo? router.query.priceTo : '', - limit : router.query.limit? router.query.limit : '', - orderBy : router.query.orderBy? router.query.orderBy : '' + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + category: router.query.category ? router.query.category : '', + priceFrom: router.query.priceFrom ? router.query.priceFrom : '', + priceTo: router.query.priceTo ? router.query.priceTo : '', + limit: router.query.limit ? router.query.limit : '', + orderBy: router.query.orderBy ? router.query.orderBy : '', }; setFinalQuery(newQuery); - } else if (prefixUrl.includes('lob')){ - + } else if (prefixUrl.includes('lob')) { const fetchCategoryData = async () => { if (dataLob[0]?.categoryIds) { - for (const cate of dataLob[0].categoryIds) { - - dataIdCategories.push(cate.childId) + dataIdCategories.push(cate.childId); } - - + const mergedArray = dataIdCategories.flat(); - + const newQuery = { fq: `category_id_ids:(${mergedArray.join(' OR ')})`, - category : router.query.category? router.query.category : '', - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - priceFrom : router.query.priceFrom? router.query.priceFrom : '', - priceTo : router.query.priceTo? router.query.priceTo : '', - limit : router.query.limit? router.query.limit : '', - orderBy : router.query.orderBy? router.query.orderBy : '' + category: router.query.category ? router.query.category : '', + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + priceFrom: router.query.priceFrom ? router.query.priceFrom : '', + priceTo: router.query.priceTo ? router.query.priceTo : '', + limit: router.query.limit ? router.query.limit : '', + orderBy: router.query.orderBy ? router.query.orderBy : '', }; - + setFinalQuery(newQuery); - } }; fetchCategoryData(); @@ -139,7 +139,7 @@ const ProductSearch = ({ } else { setQueryFinal({ ...query, q, limit, orderBy }); } - }, [prefixUrl,dataCategoriesProduct, query, finalQuery]); + }, [prefixUrl, dataCategoriesProduct, query, finalQuery]); const { productSearch } = useProductSearch({ query: queryFinal, @@ -162,7 +162,7 @@ const ProductSearch = ({ const [categoryValues, setCategory] = useState( router.query?.category?.split(',') || router.query?.category?.split(',') ); - + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); @@ -170,8 +170,8 @@ const ProductSearch = ({ const productStart = productSearch.data?.responseHeader.params.start; const productRows = limit; const productFound = productSearch.data?.response.numFound; - const [dataCategories, setDataCategories] = useState([]) - + const [dataCategories, setDataCategories] = useState([]); + useEffect(() => { if (productFound == 0 && query.q && !spellings) { searchSpellApi({ query: query.q }).then((response) => { @@ -201,7 +201,7 @@ const ProductSearch = ({ }); } }, [productFound, query, spellings]); - let id = [] + let id = []; useEffect(() => { const checkIfBrand = async () => { const brand = await axios( @@ -218,21 +218,21 @@ const ProductSearch = ({ checkIfBrand(); } }, [q]); - + useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadCategories = async () => { - const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) - if(getCategories){ - setDataCategories(getCategories) - } - } - loadCategories() + const getCategories = await odooApi( + 'GET', + `/api/v1/category/child?parent_id=${categoryId}` + ); + if (getCategories) { + setDataCategories(getCategories); + } + }; + loadCategories(); } - }, []) - - - + }, []); const brands = []; for ( @@ -248,7 +248,6 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } - const categories = []; for ( @@ -263,7 +262,6 @@ const ProductSearch = ({ categories.push({ name, qty }); } } - const orderOptions = [ { value: '', label: 'Pilih Filter' }, @@ -382,7 +380,6 @@ const ProductSearch = ({ const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - console.log('is spelling', spellings); return ( <> <MobileView> @@ -443,8 +440,8 @@ const ProductSearch = ({ SpellingComponent )} </div> - <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {productFound > 0 && ( <div className='flex items-center gap-x-2 mb-5 justify-between'> @@ -536,8 +533,8 @@ const ProductSearch = ({ </div> <div className='w-9/12 pl-6'> - <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {bannerPromotionHeader && bannerPromotionHeader?.image && ( <div className='mb-3'> <Image diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx index 0ad042de..cf0ad41f 100644 --- a/src/lib/quotation/components/Quotation.jsx +++ b/src/lib/quotation/components/Quotation.jsx @@ -39,12 +39,12 @@ const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi'); const Quotation = () => { const router = useRouter(); const auth = useAuth(); - + const { data: cartCheckout } = useQuery('cartCheckout', () => getProductsCheckout() -); + ); -const { setRefreshCart } = useProductCartContext(); + const { setRefreshCart } = useProductCartContext(); const SELF_PICKUP_ID = 32; const [products, setProducts] = useState(null); @@ -69,18 +69,18 @@ const { setRefreshCart } = useProductCartContext(); const [selectedExpedisiService, setselectedExpedisiService] = useState(null); const [etd, setEtd] = useState(null); const [etdFix, setEtdFix] = useState(null); - + const [isApproval, setIsApproval] = useState(false); - + const expedisiValidation = useRef(null); - + const [selectedAddress, setSelectedAddress] = useState({ shipping: null, invoicing: null, }); - + const [addresses, setAddresses] = useState(null); - + const [note_websiteText, setselectedNote_websiteText] = useState(''); useEffect(() => { @@ -99,6 +99,9 @@ const { setRefreshCart } = useProductCartContext(); if (!addresses) return; const matchAddress = (key) => { + if (key === 'invoicing') { + key = 'invoice'; + } const addressToMatch = getItemAddress(key); const foundAddress = addresses.filter( (address) => address.id == addressToMatch @@ -271,7 +274,7 @@ const { setRefreshCart } = useProductCartContext(); toast.error('Maaf, Note wajib dimasukkan.'); return; } - + setIsLoading(true); const productOrder = products.map((product) => ({ product_id: product.id, @@ -286,11 +289,10 @@ const { setRefreshCart } = useProductCartContext(); carrier_id: selectedCarrierId, estimated_arrival_days: splitDuration(etd), delivery_service_type: selectedExpedisiService, - note_website : note_websiteText, + note_website: note_websiteText, }; - + const isSuccess = await checkoutApi({ data }); - ; setIsLoading(false); if (isSuccess?.id) { for (const product of products) deleteItemCart({ productId: product.id }); @@ -298,7 +300,7 @@ const { setRefreshCart } = useProductCartContext(); setRefreshCart(true); return; } - + toast.error('Gagal melakukan transaksi, terjadi kesalahan internal'); }; @@ -455,25 +457,26 @@ const { setRefreshCart } = useProductCartContext(); </Link>{' '} yang berlaku </p> - <hr className='my-4 border-gray_r-6' /> - - <div className='flex gap-x-2 justify-start mb-4'> - <div className=''>Note</div> - {isApproval && ( - <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div> - )} - </div> - <div className='text-caption-2 text-gray_r-11'> - <textarea - rows="4" - cols="50" - className={`w-full p-1 rounded border border-gray_r-6`} - onChange={(e) => setselectedNote_websiteText(e.target.value)} - /> - </div> + <hr className='my-4 border-gray_r-6' /> + + <div className='flex gap-x-2 justify-start mb-4'> + <div className=''>Note</div> + {isApproval && ( + <div className='text-caption-1 text-red-500 items-center flex'> + *harus diisi + </div> + )} + </div> + <div className='text-caption-2 text-gray_r-11'> + <textarea + rows='4' + cols='50' + className={`w-full p-1 rounded border border-gray_r-6`} + onChange={(e) => setselectedNote_websiteText(e.target.value)} + /> + </div> </div> - - + <Divider /> <div className='flex gap-x-3 p-4'> @@ -606,27 +609,31 @@ const { setRefreshCart } = useProductCartContext(); yang berlaku </p> - <div> - <hr className='my-4 border-gray_r-6' /> - - <div className='flex gap-x-1 flex-col mb-4'> - <div className='flex flex-row gap-x-1'> - <div className=''>Note</div> - {isApproval && ( - <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div> - )} - </div> - <div className='text-caption-2 text-gray_r-11'> - <textarea - rows="4" - cols="50" - className={`w-full p-1 rounded border border-gray_r-6`} - onChange={(e) => setselectedNote_websiteText(e.target.value)} - /> - </div> + <div> + <hr className='my-4 border-gray_r-6' /> + + <div className='flex gap-x-1 flex-col mb-4'> + <div className='flex flex-row gap-x-1'> + <div className=''>Note</div> + {isApproval && ( + <div className='text-caption-1 text-red-500 items-center flex'> + *harus diisi + </div> + )} + </div> + <div className='text-caption-2 text-gray_r-11'> + <textarea + rows='4' + cols='50' + className={`w-full p-1 rounded border border-gray_r-6`} + onChange={(e) => + setselectedNote_websiteText(e.target.value) + } + /> </div> </div> - + </div> + <hr className='my-4 border-gray_r-6' /> <button diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx index 4529c977..d94a55de 100644 --- a/src/lib/quotation/components/Quotationheader.jsx +++ b/src/lib/quotation/components/Quotationheader.jsx @@ -19,14 +19,22 @@ const Quotationheader = (quotationCount) => { context: 'quotation', site: auth?.webRole === null && auth?.site ? auth.site : null, }; - + const router = useRouter(); const [subTotal, setSubTotal] = useState(null); const [buttonLoading, SetButtonTerapkan] = useState(false); const itemLoading = [1, 2, 3]; const [countQuotation, setCountQuotation] = useState(null); - const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation } = - useProductCartContext(); + const { + productCart, + setProductCart, + refreshCart, + setRefreshCart, + isLoading, + setIsloading, + productQuotation, + setProductQuotation, + } = useProductCartContext(); const [isHovered, setIsHovered] = useState(false); const [isTop, setIsTop] = useState(true); @@ -53,30 +61,36 @@ const Quotationheader = (quotationCount) => { const refreshCartf = useCallback(async () => { setIsloading(true); - let pendingTransactions = transactions?.data?.saleOrders.filter(transaction => transaction.status === 'draft'); + let pendingTransactions = transactions?.data?.saleOrders.filter( + (transaction) => transaction.status === 'draft' + ); setProductQuotation(pendingTransactions); - setCountQuotation(pendingTransactions?.length ? pendingTransactions?.length : pendingTransactions?.length); + setCountQuotation( + pendingTransactions?.length + ? pendingTransactions?.length + : pendingTransactions?.length + ); setIsloading(false); }, [setProductQuotation, setIsloading]); useEffect(() => { - if (!qotation) return + if (!qotation) return; - let calculateTotalDiscountAmount = 0 + let calculateTotalDiscountAmount = 0; for (const product of qotation) { - // if (qotation.quantity == '') continue - calculateTotalDiscountAmount += product.amountUntaxed + // if (qotation.quantity == '') continue + calculateTotalDiscountAmount += product.amountUntaxed; } - let subTotal = calculateTotalDiscountAmount - setSubTotal(subTotal) - }, [qotation]) + let subTotal = calculateTotalDiscountAmount; + setSubTotal(subTotal); + }, [qotation]); useEffect(() => { if (refreshCart) { refreshCartf(); } setRefreshCart(false); - }, [ refreshCartf, setRefreshCart]); + }, [refreshCartf, setRefreshCart]); useEffect(() => { setCountQuotation(quotationCount.quotationCount); @@ -95,7 +109,10 @@ const Quotationheader = (quotationCount) => { const handleCheckout = async () => { SetButtonTerapkan(true); - let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`); + let checkoutAll = await odooApi( + 'POST', + `/api/v1/user/${auth.id}/cart/select-all` + ); router.push('/my/quotations'); }; @@ -150,7 +167,9 @@ const Quotationheader = (quotationCount) => { className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden' > <div className='p-2 flex justify-between items-center'> - <h5 className='text-base font-semibold leading-none'>Daftar Quotation</h5> + <h5 className='text-base font-semibold leading-none'> + Daftar Quotation + </h5> </div> <hr className='mt-3 mb-3 border border-gray-100' /> <div className='flow-root max-h-[250px] overflow-y-auto'> @@ -158,7 +177,10 @@ const Quotationheader = (quotationCount) => { <div className='justify-center p-4'> <p className='text-gray-500 text-center '> Silahkan{' '} - <Link href='/login' className='text-red-600 underline leading-6'> + <Link + href='/login' + className='text-red-600 underline leading-6' + > Login </Link>{' '} Untuk Melihat Daftar Quotation Anda @@ -167,7 +189,11 @@ const Quotationheader = (quotationCount) => { )} {isLoading && itemLoading.map((item) => ( - <div key={item} role='status' className='max-w-sm animate-pulse'> + <div + key={item} + role='status' + className='max-w-sm animate-pulse' + > <div className='flex items-center space-x-4 mb- 2'> <div className='flex-shrink-0'> <PhotoIcon className='h-16 w-16 text-gray-500' /> @@ -189,43 +215,70 @@ const Quotationheader = (quotationCount) => { )} {auth && qotation.length > 0 && !isLoading && ( <> - <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'> + <ul + role='list' + className='divide-y divide-gray-200 dark:divide-gray-700' + > {qotation && qotation?.map((product, index) => ( <> <li className='py-1 sm:py-2'> <div className='flex justify-between border p-2 flex-col gap-y-2 hover:border-red-500'> - <Link + <Link href={`/my/quotations/${product?.id}`} - className='hover:border-red-500' - > + className='hover:border-red-500' + > <div className='flex justify-between mb-2'> <div className='flex flex-row items-center'> - <p className='tanggal text-xs opacity-80 mr-[2px]'>Sales : </p> - <p className='tanggal text-xs text-red-500 font-semibold'>{product.sales}</p> + <p className='tanggal text-xs opacity-80 mr-[2px]'> + Sales :{' '} + </p> + <p className='tanggal text-xs text-red-500 font-semibold'> + {product.sales} + </p> </div> <div className='flex flex-row items-center'> - <p className='text-xs opacity-80 mr-[2px]'>Status :</p> - <p className='badge-red h-fit text-xs whitespace-nowrap'>Pending Quotation</p> + <p className='text-xs opacity-80 mr-[2px]'> + Status : + </p> + <p className='badge-red h-fit text-xs whitespace-nowrap'> + Pending Quotation + </p> </div> </div> <div className='flex justify-between mb-2'> <div className='flex flex-col items-start'> - <p className=' text-xs opacity-80 mr-[2px]'>No. Transaksi</p> - <p className=' text-sm text-red-500 font-semibold'> {product.name}</p> + <p className=' text-xs opacity-80 mr-[2px]'> + No. Transaksi + </p> + <p className=' text-sm text-red-500 font-semibold'> + {' '} + {product.name} + </p> </div> <div className='flex flex-col items-end'> - <p className='text-xs opacity-80 mr-[2px]'>No. Purchase Order</p> - <p className='font-semibold text-sm text-red-500'> {product.purchaseOrderName ? product.purchaseOrderName : '-'}</p> + <p className='text-xs opacity-80 mr-[2px]'> + No. Purchase Order + </p> + <p className='font-semibold text-sm text-red-500'> + {' '} + {product.purchaseOrderName + ? product.purchaseOrderName + : '-'} + </p> </div> </div> {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */} <hr className='mt-3 mb-3 border border-gray-100' /> <div className='bagian bawah flex justify-between mt-2'> - <p className='font-semibold text-sm'>Total</p> - <p className='font-semibold text-sm'>{currencyFormat(product.amountUntaxed)}</p> + <p className='font-semibold text-sm'> + Total + </p> + <p className='font-semibold text-sm'> + {currencyFormat(product.amountUntaxed)} + </p> </div> - </Link> + </Link> </div> </li> </> @@ -238,8 +291,12 @@ const Quotationheader = (quotationCount) => { {auth && qotation.length > 0 && !isLoading && ( <> <div className='mt-3 ml-1'> - <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span> - <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span> + <span className='text-gray-400 text-caption-2'> + Subtotal Sebelum PPN :{' '} + </span> + <span className='font-semibold text-red-600'> + {currencyFormat(subTotal)} + </span> </div> <div className='mt-5 mb-2'> <button diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx index 7cad52fb..a6e697f0 100644 --- a/src/lib/review/components/CustomerReviews.jsx +++ b/src/lib/review/components/CustomerReviews.jsx @@ -1,18 +1,23 @@ -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import Image from 'next/image' -import { Swiper, SwiperSlide } from 'swiper/react' -import { Autoplay } from 'swiper' +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import Image from 'next/image'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay } from 'swiper'; -const { useQuery } = require('react-query') -const { getCustomerReviews } = require('../api/customerReviewsApi') +const { useQuery } = require('react-query'); +const { getCustomerReviews } = require('../api/customerReviewsApi'); const CustomerReviews = () => { - const { data: customerReviews } = useQuery('customerReviews', getCustomerReviews) + const { data: customerReviews } = useQuery( + 'customerReviews', + getCustomerReviews + ); return ( <div className='px-4 sm:px-0'> - <div className='font-semibold sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mb-4'> + Ulasan Konsumen Kami + </h1> <DesktopView> <Swiper slidesPerView={3.2} spaceBetween={16} {...swiperProps}> @@ -36,17 +41,17 @@ const CustomerReviews = () => { </Swiper> </MobileView> </div> - ) -} + ); +}; const swiperProps = { autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, loop: true, - modules: [Autoplay] -} + modules: [Autoplay], +}; const Card = ({ customerReview }) => ( <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'> @@ -67,6 +72,6 @@ const Card = ({ customerReview }) => ( dangerouslySetInnerHTML={{ __html: customerReview.ulasan }} /> </div> -) +); -export default CustomerReviews +export default CustomerReviews; diff --git a/src/lib/tracking-order/component/TrackingOrder.jsx b/src/lib/tracking-order/component/TrackingOrder.jsx index 394979c1..8a7b2579 100644 --- a/src/lib/tracking-order/component/TrackingOrder.jsx +++ b/src/lib/tracking-order/component/TrackingOrder.jsx @@ -1,139 +1,161 @@ -import { yupResolver } from '@hookform/resolvers/yup' -import React, { useEffect, useState } from 'react' -import { useForm } from 'react-hook-form' -import * as Yup from 'yup' -import Manifest from '@/lib/treckingAwb/component/Manifest' -import { trackingOrder } from '../api/trackingOrder' -import { useQuery } from 'react-query' +import { yupResolver } from '@hookform/resolvers/yup'; +import React, { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import * as Yup from 'yup'; +import Manifest from '@/lib/treckingAwb/component/Manifest'; +import { trackingOrder } from '../api/trackingOrder'; +import { useQuery } from 'react-query'; import { Spinner } from '@chakra-ui/react'; import { Search } from 'lucide-react'; -import whatsappUrl from '@/core/utils/whatsappUrl'; -import Link from 'next/link' +import Link from 'next/link'; const TrackingOrder = () => { - const [idAWB, setIdAWB] = useState(null) - const [inputQuery, setInputQuery] = useState(null) - const [buttonClick, setButtonClick] = useState(false) - const [apiError, setApiError] = useState(null) // State to store API error message - - const closePopup = () => { - setIdAWB(null) - setButtonClick(false) - setInputQuery(null) - setApiError(null) // Reset error message on close - } - - const { - register, - handleSubmit, - formState: { errors }, - control, - reset - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues - }) - - const query = { - email: inputQuery?.email, - so: inputQuery?.id - } - - const { data: tracking, isLoading, isError, error } = useQuery( - ['tracking', query], - () => trackingOrder({ query: query }), - { - enabled: !!query.email && !!query.so, - onSuccess: (data) => { - if (buttonClick) { - if (data?.code === 403 || data?.code === 400 || data?.code === 404) { - setApiError(data?.description); - } else if (data?.pickings?.length > 0) { - setIdAWB(data.pickings[0]?.id); - } else { - setApiError('No pickings data available'); - } - setButtonClick(false); - setInputQuery(null); - } - }, + const [idAWB, setIdAWB] = useState(null); + const [inputQuery, setInputQuery] = useState(null); + const [buttonClick, setButtonClick] = useState(false); + const [apiError, setApiError] = useState(null); // State to store API error message + + const closePopup = () => { + setIdAWB(null); + setButtonClick(false); + setInputQuery(null); + setApiError(null); // Reset error message on close + }; + + const { + register, + handleSubmit, + formState: { errors }, + control, + reset, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); + + const query = { + email: inputQuery?.email, + so: inputQuery?.id, + }; + + const { + data: tracking, + isLoading, + isError, + error, + } = useQuery(['tracking', query], () => trackingOrder({ query: query }), { + enabled: !!query.email && !!query.so, + onSuccess: (data) => { + if (buttonClick) { + if (data?.code === 403 || data?.code === 400 || data?.code === 404) { + setApiError(data?.description); + } else if (data?.pickings?.length > 0) { + setIdAWB(data.pickings[0]?.id); + } else { + setApiError('No pickings data available'); } - ); + setButtonClick(false); + setInputQuery(null); + } + }, + }); - const onSubmitHandler = async (values) => { - setInputQuery(values) - setButtonClick(true) - } + const onSubmitHandler = async (values) => { + setInputQuery(values); + setButtonClick(true); + }; - return ( - <div className='container mx-auto flex py-10 flex-col'> - <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Tracking Order</h1> - <div className='flex justify-start items-start'> - <span className='text-base w-full'> - {`Untuk melacak pesanan Anda, masukkan Nomor Transaksi di kotak bawah ini dan masukkan Email login anda lalu tekan tombol "Lacak". Nomor Transaksi ini dapat Anda lihat dalam menu `} - <Link href='/my/transactions' className='text-red-500'> - Daftar Transaksi - </Link> - {`. Jika mengalami kesulitan `} - <Link href='https://wa.me/6281717181922' target='_blank' rel='noreferrer' className='text-red-500'> - hubungi kami - </Link> - {`.`} - </span> + return ( + <div className='container mx-auto flex py-10 flex-col'> + <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'> + Tracking Order + </h1> + <div className='flex justify-start items-start'> + <p className='text-base w-full'> + {`Untuk melacak pesanan Anda, masukkan Nomor Transaksi di kotak bawah ini dan masukkan Email login anda lalu tekan tombol "Lacak". Nomor Transaksi ini dapat Anda lihat dalam menu `} + <Link href='/my/transactions' className='text-red-500'> + Daftar Transaksi + </Link> + {`. Jika mengalami kesulitan `} + <Link + href='https://wa.me/6281717181922' + target='_blank' + rel='noreferrer' + className='text-red-500' + > + hubungi kami + </Link> + {`.`} + </p> + </div> + <div> + <form + onSubmit={handleSubmit(onSubmitHandler)} + className='flex mt-4 flex-row w-full ' + > + <div className='w-[90%] grid grid-cols-2 gap-4'> + <div className='flex flex-col '> + <label className='form-label mb-2'>ID Pesanan*</label> + <input + {...register('id')} + placeholder='dapat dilihat pada email konfirmasi anda' + type='text' + className='form-input mb-2' + aria-invalid={errors.id?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.id?.message} + </div> </div> - <div> - <form onSubmit={handleSubmit(onSubmitHandler)} className='flex mt-4 flex-row w-full '> - <div className='w-[90%] grid grid-cols-2 gap-4'> - <div className='flex flex-col '> - <label className='form-label mb-2'>ID Pesanan*</label> - <input - {...register('id')} - placeholder='dapat dilihat pada email konfirmasi anda' - type='text' - className='form-input mb-2' - aria-invalid={errors.id?.message} - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.id?.message}</div> - </div> - <div className='flex flex-col '> - <label className='form-label mb-2'>Email Penagihan*</label> - <input - {...register('email')} - placeholder='Email yang anda gunakan saat pembayaran' - type='text' - className='form-input' - aria-invalid={errors.email?.message} - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div> - </div> - </div> - <div className={` ${errors.id?.message ? 'mt-2' : 'mt-5'} flex items-center ml-4`}> - <button - type='submit' - className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center' - > - {isLoading && <Spinner size='xs' className='mr-2'/>} - {!isLoading && <Search size={16} strokeWidth={1} className='mr-2'/>} - <p>Lacak</p> - </button> - </div> - </form> - {/* Display the API error message */} - {apiError && <div className='text-danger-500 mt-4'>{apiError}</div>} - <Manifest idAWB={idAWB} closePopup={closePopup} /> + <div className='flex flex-col '> + <label className='form-label mb-2'>Email Penagihan*</label> + <input + {...register('email')} + placeholder='Email yang anda gunakan saat pembayaran' + type='text' + className='form-input' + aria-invalid={errors.email?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </div> </div> - </div> - ) -} + </div> + <div + className={` ${ + errors.id?.message ? 'mt-2' : 'mt-5' + } flex items-center ml-4`} + > + <button + type='submit' + className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center' + > + {isLoading && <Spinner size='xs' className='mr-2' />} + {!isLoading && ( + <Search size={16} strokeWidth={1} className='mr-2' /> + )} + <p>Lacak</p> + </button> + </div> + </form> + {/* Display the API error message */} + {apiError && <div className='text-danger-500 mt-4'>{apiError}</div>} + <Manifest idAWB={idAWB} closePopup={closePopup} /> + </div> + </div> + ); +}; const validationSchema = Yup.object().shape({ - email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), - id: Yup.string().required('Harus di-isi'), -}) + email: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + id: Yup.string().required('Harus di-isi'), +}); const defaultValues = { - email: '', - id: '' -} + email: '', + id: '', +}; -export default TrackingOrder +export default TrackingOrder; diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index 0d50b99b..f73e966a 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -1,5 +1,5 @@ export const promoMappingSolr = (promotions) => { - return promotions.map((promotion) =>{ + return promotions.map((promotion) => { let productMapped = { id: promotion.id, program_id: promotion.program_id_i, @@ -16,14 +16,13 @@ export const promoMappingSolr = (promotions) => { total_qty: promotion.total_qty_i, products: JSON.parse(promotion.products_s) || '', product_id: promotion.product_ids[0], - qty_sold_f:promotion.total_qty_sold_f, - free_products: JSON.parse(promotion.free_products_s) + qty_sold_f: promotion.total_qty_sold_f, + free_products: JSON.parse(promotion.free_products_s), }; return productMapped; - }) + }); }; - export const productMappingSolr = (products, pricelist) => { return products.map((product) => { let price = product.price_tier1_v2_f || 0; @@ -62,10 +61,11 @@ export const productMappingSolr = (products, pricelist) => { tag: product?.flashsale_tag_s || 'FLASH SALE', }, qtySold: product?.qty_sold_f || 0, - isTkdn:product?.tkdn_b || false, - isSni:product?.sni_b || false, - is_in_bu:product?.is_in_bu_b || false, - voucherPastiHemat:product?.voucher_pastihemat || [] + isTkdn: product?.tkdn_b || false, + isSni: product?.sni_b || false, + newVoucherPastiHemat: [], + is_in_bu: product?.is_in_bu_b || false, + voucherPastiHemat: product?.voucher_pastihemat || [], }; if (product.manufacture_id_i && product.manufacture_name_s) { @@ -83,6 +83,14 @@ export const productMappingSolr = (products, pricelist) => { name: product.category_name_s || '', }, ]; + productMapped.newVoucherPastiHemat = [ + { + min_purchase: product.voucher_min_purchase_f || 0, + discount_type: product.voucher_discount_type_s || '', + discount_amount: product.voucher_discount_amount_f || 0, + max_discount: product.voucher_max_discount_f || 0, + }, + ]; return productMapped; }); }; @@ -149,4 +157,3 @@ const flashsaleTime = (endDate) => { isFlashSale: flashsaleEndDate > currentTime, }; }; - |