diff options
Diffstat (limited to 'src')
23 files changed, 1015 insertions, 384 deletions
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index c4674344..1b62bf05 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -8,6 +8,7 @@ import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; import styles from './BasicLayout.module.css'; // Import modul CSS +import useDevice from '@/core/hooks/useDevice'; const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -23,6 +24,9 @@ const BasicLayout = ({ children }) => { const [highlight, setHighlight] = useState(false); const [buttonPosition, setButtonPosition] = useState(null); const [wobble, setWobble] = useState(false); + const [isProductPage, setIsProductPage] = useState(false); + + const { isDesktop, isMobile } = useDevice(); const router = useRouter(); const buttonRef = useRef(null); @@ -43,13 +47,16 @@ const BasicLayout = ({ children }) => { setUrlPath(router.asPath); } + if (router.pathname.includes('/shop/product/')) { + setIsProductPage(true); + } }, [product, router]); useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); if (event.clientY <= 0) { - setButtonPosition(rect) + setButtonPosition(rect); setHighlight(true); } else { setHighlight(false); @@ -92,13 +99,15 @@ const BasicLayout = ({ children }) => { return ( <> - {highlight && buttonPosition && ( + {highlight && buttonPosition && ( <div className={styles['overlay-highlight']} style={{ - '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`, + '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`, '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`, - '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px` + '--button-radius': `${ + Math.max(buttonPosition.width, buttonPosition.height) / 2 + }px`, }} onAnimationEnd={() => setHighlight(false)} /> @@ -106,11 +115,25 @@ const BasicLayout = ({ children }) => { <Navbar /> <AnimationLayout> {children} - <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> - <div className='flex flex-row items-center'> - <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'> - <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}> - Whatsapp + <div + className={`fixed ${ + isMobile && isProductPage ? 'bottom-40' : 'bottom-16' + } right-4 sm:bottom-14 sm:right-10 z-50`} + > + <div className='flex flex-row items-center'> + <a + href={whatsappUrl(templateWA, payloadWA, urlPath)} + className='flex flex-row items-center' + rel='noopener noreferrer' + target='_blank' + > + <span + className={`text-green-300 text-lg font-bold mr-4 ${ + wobble ? 'animate-wobble' : '' + }`} + onAnimationEnd={() => setWobble(false)} + > + {isDesktop && 'Whatsapp'} </span> </a> <a diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx index ddb77c1f..1c30bb13 100644 --- a/src/lib/cart/components/Cartheader.jsx +++ b/src/lib/cart/components/Cartheader.jsx @@ -1,105 +1,115 @@ -import { useCallback, useEffect, useMemo, useState } from 'react' -import { getCartApi } from '../api/CartApi' -import currencyFormat from '@/core/utils/currencyFormat' -import { createSlug } from '@/core/utils/slug' -import useAuth from '@/core/hooks/useAuth' -import { useRouter } from 'next/router' -import odooApi from '@/core/api/odooApi' -import { useProductCartContext } from '@/contexts/ProductCartContext' -import Image from '@/core/components/elements/Image/Image' -import whatsappUrl from '@/core/utils/whatsappUrl' -import { AnimatePresence, motion } from 'framer-motion' -import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css' -const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline') -const { default: Link } = require('next/link') +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { getCartApi } from '../api/CartApi'; +import currencyFormat from '@/core/utils/currencyFormat'; +import { createSlug } from '@/core/utils/slug'; +import useAuth from '@/core/hooks/useAuth'; +import { useRouter } from 'next/router'; +import odooApi from '@/core/api/odooApi'; +import { useProductCartContext } from '@/contexts/ProductCartContext'; +import Image from '@/core/components/elements/Image/Image'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import { AnimatePresence, motion } from 'framer-motion'; +import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'; +const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline'); +const { default: Link } = require('next/link'); const Cardheader = (cartCount) => { - - const router = useRouter() - const [subTotal, setSubTotal] = useState(null) - const [buttonLoading, SetButtonTerapkan] = useState(false) - const itemLoading = [1, 2, 3] - const auth = useAuth() - const [countCart, setCountCart] = useState(null) - const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = - useProductCartContext() + const router = useRouter(); + const [subTotal, setSubTotal] = useState(null); + const [buttonLoading, SetButtonTerapkan] = useState(false); + const itemLoading = [1, 2, 3]; + const auth = useAuth(); + const [countCart, setCountCart] = useState(null); + const { + productCart, + setRefreshCart, + setProductCart, + refreshCart, + isLoading, + setIsloading, + } = useProductCartContext(); - const [isHovered, setIsHovered] = useState(false) - const [isTop, setIsTop] = useState(true) + const [isHovered, setIsHovered] = useState(false); + const [isTop, setIsTop] = useState(true); const products = useMemo(() => { - return productCart?.products || [] - }, [productCart]) + return productCart?.products || []; + }, [productCart]); const handleMouseEnter = () => { - setIsHovered(true) - getCart() - } + setIsHovered(true); + getCart(); + }; const handleMouseLeave = () => { - setIsHovered(false) - } + setIsHovered(false); + }; const getCart = () => { if (!productCart && auth) { - refreshCartf() + refreshCartf(); } - } + }; const refreshCartf = useCallback(async () => { - setIsloading(true) - let cart = await getCartApi() - setProductCart(cart) - setCountCart(cart?.productTotal) - setIsloading(false) - }, [setProductCart, setIsloading]) + setIsloading(true); + let cart = await getCartApi(); + setProductCart(cart); + setCountCart(cart?.products?.length); + setIsloading(false); + }, [setProductCart, setIsloading]); useEffect(() => { - if (!products) return + if (!products) return; - let calculateTotalPriceBeforeTax = 0 - let calculateTotalTaxAmount = 0 - let calculateTotalDiscountAmount = 0 + let calculateTotalPriceBeforeTax = 0; + let calculateTotalTaxAmount = 0; + let calculateTotalDiscountAmount = 0; for (const product of products) { - if (product.quantity == '') continue + if (product.quantity == '') continue; - let priceBeforeTax = product.price.price / 1.11 - calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity - calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity + let priceBeforeTax = product.price.price / 1.11; + calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity; + calculateTotalTaxAmount += + (product.price.price - priceBeforeTax) * product.quantity; calculateTotalDiscountAmount += - (product.price.price - product.price.priceDiscount) * product.quantity + (product.price.price - product.price.priceDiscount) * product.quantity; } let subTotal = - calculateTotalPriceBeforeTax - calculateTotalDiscountAmount + calculateTotalTaxAmount - setSubTotal(subTotal) - }, [products]) + calculateTotalPriceBeforeTax - + calculateTotalDiscountAmount + + calculateTotalTaxAmount; + setSubTotal(subTotal); + }, [products]); useEffect(() => { if (refreshCart) { - refreshCartf() + refreshCartf(); } - setRefreshCart(false) - }, [refreshCart, refreshCartf, setRefreshCart]) + setRefreshCart(false); + }, [refreshCart, refreshCartf, setRefreshCart]); useEffect(() => { - setCountCart(cartCount.cartCount) - setRefreshCart(false) - }, [cartCount]) + setCountCart(cartCount.cartCount); + setRefreshCart(false); + }, [cartCount]); useEffect(() => { const handleScroll = () => { - setIsTop(window.scrollY === 0) - } - window.addEventListener('scroll', handleScroll) + setIsTop(window.scrollY === 0); + }; + window.addEventListener('scroll', handleScroll); return () => { - window.removeEventListener('scroll', handleScroll) - } - }, []) + window.removeEventListener('scroll', handleScroll); + }; + }, []); const handleCheckout = async () => { - SetButtonTerapkan(true) - let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`) - router.push('/shop/checkout') - } - + SetButtonTerapkan(true); + let checkoutAll = await odooApi( + 'POST', + `/api/v1/user/${auth.id}/cart/select-all` + ); + router.push('/shop/checkout'); + }; return ( <div className='relative group'> @@ -152,8 +162,13 @@ const Cardheader = (cartCount) => { 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'>Keranjang Belanja</h5> - <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'> + <h5 className='text-base font-semibold leading-none'> + Keranjang Belanja + </h5> + <Link + href='/shop/cart' + class='text-sm font-medium text-red-600 underline' + > Lihat Semua </Link> </div> @@ -163,7 +178,10 @@ const Cardheader = (cartCount) => { <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 Keranjang Belanja Anda @@ -172,7 +190,11 @@ const Cardheader = (cartCount) => { )} {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' /> @@ -194,14 +216,17 @@ const Cardheader = (cartCount) => { )} {auth && products.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' + > {products && products?.map((product, index) => ( <> <li className='py-1 sm:py-2'> <div className='flex items-center space-x-4'> <div className='bagian gambar flex-shrink-0'> - {product.cartType === 'promotion' && ( + {product.cartType === 'promotion' && ( <Image src={product.imageProgram[0]} alt={product.name} @@ -227,10 +252,10 @@ const Cardheader = (cartCount) => { </div> <div className='bagian tulisan dan harga flex-1 min-w-0'> {product.cartType === 'promotion' && ( - <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'> - {product.name} - </p> - )} + <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'> + {product.name} + </p> + )} {product.cartType === 'product' && ( <Link href={createSlug( @@ -252,27 +277,32 @@ const Cardheader = (cartCount) => { {product?.price?.discountPercentage}% </div> <div className='text-gray_r-11 line-through text-caption-2'> - {currencyFormat(product?.price?.price)} + {currencyFormat( + product?.price?.price + )} </div> </div> )} - + <div className='flex justify-between items-center'> <div className='font-semibold text-sm text-red-600'> {product?.price?.priceDiscount > 0 ? ( - currencyFormat(product?.price?.priceDiscount) + currencyFormat( + product?.price?.priceDiscount + ) ) : ( <span className='text-gray_r-12/90 font-normal text-caption-1'> <a href={whatsappUrl('product', { name: product.name, - manufacture: product.manufacture?.name, + manufacture: + product.manufacture?.name, url: createSlug( '/shop/product/', product.name, product.id, true - ) + ), })} className='text-danger-500 underline' rel='noopener noreferrer' @@ -286,56 +316,112 @@ const Cardheader = (cartCount) => { </div> </div> </div> - <div className="flex flex-col w-3/4"> - {product.products?.map((product) => - <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'> - <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '> - {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />} - </Link> - - <div className="ml-4 w-full flex flex-col gap-y-1"> - <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white"> - {product.displayName} - </Link> - - <div className='flex w-full'> - <div className="flex flex-col"> - {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} - <div> - <span className="text-gray-500 text-caption-1">Berat Barang: </span> - <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span> - </div> - </div> + <div className='flex flex-col w-3/4'> + {product.products?.map((product) => ( + <div + key={product.id} + className='md:ml-8 ml-4 mt-2 flex' + > + <Link + href={createSlug( + '/shop/product/', + product.parent.name, + product.parent.id.toString() + )} + className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded ' + > + {product?.image && ( + <Image + src={product.image} + alt={product.name} + width={40} + height={40} + className='w-full h-full object-fill' + /> + )} + </Link> + + <div className='ml-4 w-full flex flex-col gap-y-1'> + <Link + href={createSlug( + '/shop/product/', + product.parent.name, + product.parent.id.toString() + )} + className='text-caption-2 font-medium text-gray-900 truncate dark:text-white' + > + {product.displayName} + </Link> + + <div className='flex w-full'> + <div className='flex flex-col'> + {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} + <div> + <span className='text-gray-500 text-caption-1'> + Berat Barang:{' '} + </span> + <span className='text-gray-500 text-caption-1'> + {product.packageWeight} Kg + </span> </div> </div> - </div> + </div> + </div> + ))} + {product.freeProducts?.map((product) => ( + <div + key={product.id} + className='md:ml-8 ml-4 mt-2 flex' + > + <Link + href={createSlug( + '/shop/product/', + product.parent.name, + product.parent.id.toString() )} - {product.freeProducts?.map((product) => - <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'> - <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '> - {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />} + className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded ' + > + {product?.image && ( + <Image + src={product.image} + alt={product.name} + width={40} + height={40} + className='w-full h-full object-fill' + /> + )} + </Link> + + <div className='ml-4 w-full flex flex-col gap-y-1'> + <Link + href={createSlug( + '/shop/product/', + product.parent.name, + product.parent.id.toString() + )} + className='text-caption-2 font-medium text-gray-900 truncate dark:text-white' + > + {product.displayName} </Link> - - <div className="ml-4 w-full flex flex-col gap-y-1"> - <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white"> - {product.displayName} - </Link> - - <div className='flex w-full'> - <div className="flex flex-col"> - {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} - <div> - <span className="text-gray-500 text-caption-1">Berat Barang: </span> - <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span> - </div> - </div> + + <div className='flex w-full'> + <div className='flex flex-col'> + {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} + <div> + <span className='text-gray-500 text-caption-1'> + Berat Barang:{' '} + </span> + <span className='text-gray-500 text-caption-1'> + {product.packageWeight} Kg + </span> </div> </div> - </div> - )} + </div> </div> + ))} + </div> </li> </> ))} @@ -347,8 +433,12 @@ const Cardheader = (cartCount) => { {auth && products.length > 0 && !isLoading && ( <> <div className='mt-3'> - <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 @@ -357,7 +447,9 @@ const Cardheader = (cartCount) => { onClick={handleCheckout} disabled={buttonLoading} > - {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'} + {buttonLoading + ? 'Loading...' + : 'Lanjutkan Ke Pembayaran'} </button> </div> </> @@ -368,7 +460,7 @@ const Cardheader = (cartCount) => { )} </AnimatePresence> </div> - ) -} + ); +}; -export default Cardheader +export default Cardheader; diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index a1b0116a..e83e719c 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -67,7 +67,6 @@ const Checkout = () => { const getAddresses = async () => { const dataAddresses = await addressesApi(); - console.log('ini adalah adress',dataAddresses); setAddresses(dataAddresses); }; @@ -443,6 +442,7 @@ const Checkout = () => { const productOrder = products.map((product) => ({ product_id: product.id, quantity: product.quantity, + available_quantity: product?.availableQuantity, })); let data = { // partner_shipping_id: auth.partnerId, @@ -1665,7 +1665,7 @@ const SectionAddress = ({ address, label, url }) => ( ); const SectionValidation = ({ address }) => - address?.stateId == null && ( + address?.stateId == 0 && ( <BottomPopup active={true} title='Update Alamat'> <div className='leading-7 text-gray_r-12/80'> Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '} diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index 5b16915d..b3cc8fe5 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -32,7 +32,7 @@ const ServiceList = () => { </div> <div className='w-full'> <Link - href='/tentang-kami' + href='/garansi-resmi' className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg' > <div className=''> @@ -57,7 +57,7 @@ const ServiceList = () => { </div> <div className='w-full '> <Link - href='/tentang-kami' + href='/pembayaran-tempo' className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg' > <div className=''> diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 09b30a44..f4569574 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -1,12 +1,12 @@ - -import { Box, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Box, Button, Skeleton, Tooltip } from '@chakra-ui/react'; import { HeartIcon } from '@heroicons/react/24/outline'; -import { Info } from 'lucide-react'; +import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react'; import { useRouter } from 'next/router'; import { useCallback, useEffect, useRef, useState } from 'react'; import { toast } from 'react-hot-toast'; +import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist'; +import { RWebShare } from 'react-web-share'; import LazyLoad from 'react-lazy-load'; - import { useProductCartContext } from '@/contexts/ProductCartContext'; import odooApi from '@/core/api/odooApi'; import Image from '@/core/components/elements/Image/Image'; @@ -18,10 +18,16 @@ import { updateItemCart } from '@/core/utils/cart'; import currencyFormat from '@/core/utils/currencyFormat'; import { createSlug } from '@/core/utils/slug'; import whatsappUrl from '@/core/utils/whatsappUrl'; +import { getAuth } from '~/libs/auth'; +import ImageNext from 'next/image'; import productSimilarApi from '../../api/productSimilarApi'; import ProductCard from '../ProductCard'; import ProductSimilar from '../ProductSimilar'; +import ProductPromoSection from '~/modules/product-promo/components/Section'; +import SimilarBottom from '~/modules/product-detail/components/SimilarBottom'; + +const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST; const ProductDesktopVariant = ({ product, @@ -30,9 +36,10 @@ const ProductDesktopVariant = ({ isVariant, }) => { const router = useRouter(); - const auth = useAuth(); + let auth = useAuth(); const { slug } = router.query; - + const { srsltid } = router.query; + const [askAdminUrl, setAskAdminUrl, isApproval] = useState(); const [lowestPrice, setLowestPrice] = useState(null); const [addCartAlert, setAddCartAlert] = useState(false); @@ -40,11 +47,20 @@ const ProductDesktopVariant = ({ const { setRefreshCart } = useProductCartContext(); + const [quantityInput, setQuantityInput] = useState(1); + + const createdAskUrl = whatsappUrl({ + template: 'product', + payload: { + manufacture: product.manufacture.name, + productName: product.name, + url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, + }, + fallbackUrl: router.asPath, + }); + const getLowestPrice = useCallback(() => { const lowest = product.price; - /* const lowest = prices.reduce((lowest, price) => { - return price.priceDiscount < lowest.priceDiscount ? price : lowest - }, prices[0])*/ return lowest; }, [product]); @@ -74,10 +90,10 @@ const ProductDesktopVariant = ({ const handleAddToCart = (variant) => { if (!auth) { - router.push(`/login?next=/shop/product/${slug}`); + router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`); return; } - const quantity = variantQuantityRefs.current[product.id].value; + const quantity = quantityInput; if (!validQuantity(quantity)) return; updateItemCart({ productId: product.id, @@ -91,8 +107,34 @@ const ProductDesktopVariant = ({ setAddCartAlert(true); }; - const handleBuy = (variant) => { - const quantity = variantQuantityRefs.current[product.id].value; + const handleBuy = async (variant) => { + const quantity = variantQuantityRefs?.current[product.id]?.value; + let isLoggedIn = typeof auth === 'object'; + + if (!isLoggedIn) { + const currentUrl = encodeURIComponent(router.asPath); + await router.push(`/login?next=${currentUrl}`); + + // Tunggu login berhasil, misalnya dengan memantau perubahan status auth. + const authCheckInterval = setInterval(() => { + const newAuth = getAuth(); + if (typeof newAuth === 'object') { + isLoggedIn = true; + auth = newAuth; // Update nilai auth setelah login + clearInterval(authCheckInterval); + } + }, 500); // Periksa status login setiap 500ms + + await new Promise((resolve) => { + const checkLogin = setInterval(() => { + if (isLoggedIn) { + clearInterval(checkLogin); + resolve(null); + } + }, 500); + }); + } + if (!validQuantity(quantity)) return; updateItemCart({ @@ -105,6 +147,45 @@ const ProductDesktopVariant = ({ router.push(`/shop/checkout?source=buy`); }; + const handleButton = async (variant) => { + const quantity = quantityInput; + let isLoggedIn = typeof auth === 'object'; + + if (!isLoggedIn) { + const currentUrl = encodeURIComponent(router.asPath); + await router.push(`/login?next=${currentUrl}`); + + // Tunggu login berhasil, misalnya dengan memantau perubahan status auth. + const authCheckInterval = setInterval(() => { + const newAuth = getAuth(); + if (typeof newAuth === 'object') { + isLoggedIn = true; + auth = newAuth; // Update nilai auth setelah login + clearInterval(authCheckInterval); + } + }, 500); // Periksa status login setiap 500ms + + await new Promise((resolve) => { + const checkLogin = setInterval(() => { + if (isLoggedIn) { + clearInterval(checkLogin); + resolve(null); + } + }, 500); + }); + } + if (!validQuantity(quantity)) return; + + updateItemCart({ + productId: variant, + quantity, + programLineId: null, + selected: true, + source: 'buy', + }); + router.push('/shop/quotation?source=buy'); + }; + const variantSectionRef = useRef(null); const goToVariantSection = () => { if (variantSectionRef.current) { @@ -160,87 +241,39 @@ const ProductDesktopVariant = ({ <Image src={product.image + '?variant=True'} alt={product.name} - className='h-[430px] object-contain object-center w-full border border-gray_r-4' + className='w-full h-[350px]' /> </div> - <div className='w-7/12 px-4'> + <div className='w-7/12 px-6'> <h1 className='text-title-md leading-10 font-medium'> {product?.name} </h1> <div className='mt-10'> - <div className='flex p-3'> - <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div> - <div className='w-8/12'>SKU-{product.id}</div> - </div> <div className='flex p-3 bg-gray_r-4'> - <div className='w-4/12 text-gray_r-12/70'>Part Number</div> - <div className='w-8/12'>{product.code || '-'}</div> + <div className='w-4/12 text-gray_r-12/70'>Item Code</div> + <div className='w-8/12'>{product.code}</div> </div> - <div className='flex p-3'> + <div className='flex p-3 items-center '> <div className='w-4/12 text-gray_r-12/70'>Manufacture</div> <div className='w-8/12'> - {product.manufacture?.name ? ( - <Link - href={createSlug( - '/shop/brands/', - product.manufacture?.name, - product.manufacture?.id - )} - > - {product.manufacture?.name} - </Link> - ) : ( - <div>-</div> - )} - </div> - </div> - - <div className='flex p-3 items-center bg-gray_r-4'> - <div className='w-4/12 text-gray_r-12/70'> - Persiapan Barang - </div> - <div className='w-8/12'> - {!product?.sla && <Skeleton width='20%' height='16px' />} - {product?.sla && ( - <Tooltip - placement='top' - label={`Masa Persiapan Barang ${product?.sla?.slaDate}`} - > - <Box className='w-fit flex items-center gap-x-2'> - {product?.sla?.slaDate} - <Info size={16} /> - </Box> - </Tooltip> - )} + <Link + href={createSlug( + '/shop/brands/', + product.manufacture.name, + product.manufacture.id.toString() + )} + > + <Image + width={100} + src={product.manufacture.logo} + alt={product.manufacture.name} + /> + </Link> </div> </div> - <div className='flex p-3'> - <div className='w-4/12 text-gray_r-12/70'>Stock</div> - <div className='w-8/12'> - {!product?.sla && <Skeleton width='10%' height='16px' />} - {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>} - {product?.sla?.qty == 0 && ( - <a - href={whatsappUrl('product', { - name: product.name, - manufacture: product?.manufacture?.name, - url: createSlug( - '/shop/product/', - product.name, - product.id, - true - ), - })} - className='text-danger-500 font-medium' - > - Tanya Admin - </a> - )} - </div> - </div> - <div className='flex p-3 bg-gray_r-4'> + <div className='flex p-3 bg-gray_r-4 '> <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div> <div className='w-8/12'> {product?.weight > 0 && <span>{product?.weight} KG</span>} @@ -262,24 +295,55 @@ const ProductDesktopVariant = ({ )} </div> </div> + <div className='flex p-3 items-center '> + <div className='w-4/12 text-gray_r-12/70'>Terjual</div> + <div className='w-8/12'>-</div> + </div> + + <div className='flex p-3 items-center bg-gray_r-4 '> + <div className='w-4/12 text-gray_r-12/70'> + Persiapan Barang + </div> + <div className='w-8/12'> + {!product?.sla && <Skeleton width='20%' height='16px' />} + {product?.sla && ( + <Tooltip + placement='top' + label={`Masa Persiapan Barang ${product?.sla?.slaDate}`} + > + <Box className='w-fit flex items-center gap-x-2'> + {product?.sla?.slaDate} + <Info size={16} /> + </Box> + </Tooltip> + )} + </div> + </div> </div> </div> - <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'> - <h2 className='text-h-md md:text-h-lg font-medium'>Informasi Produk</h2> - <div className='h-4' /> - <div - className='leading-relaxed text-gray-700' - dangerouslySetInnerHTML={{ - __html: - !product.parent.description || product.parent.description == '<p><br></p>' - ? 'Belum ada deskripsi' - : product.parent.description, - }} - /> + <div className='p-4 md:p-6 w-full'> + <ProductPromoSection product={product} productId={product.id} /> + + <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'> + <h2 className='text-h-md md:text-h-lg font-medium'> + Informasi Produk + </h2> + <div className='h-4' /> + <div + className='leading-relaxed text-gray-700' + dangerouslySetInnerHTML={{ + __html: + !product.parent.description || + product.parent.description == '<p><br></p>' + ? 'Belum ada deskripsi' + : product.parent.description, + }} + /> + </div> </div> </div> - <div className='w-[25%]'> + <div className='w-[33%]'> {product?.isFlashsale > 0 && product?.price?.discountPercentage > 0 ? ( <> @@ -337,46 +401,143 @@ const ProductDesktopVariant = ({ )} </h3> )} - <div className='flex gap-x-3 mt-4'> - <input - type='number' - className='form-input w-16 py-2 text-center bg-gray_r-1' - ref={setVariantQuantityRef(product.id)} - defaultValue={1} - /> - <button - type='button' + <div className='flex justify-between items-center py-5 px-3'> + <div className='relative flex items-center'> + <button + type='button' + className='absolute left-0 px-2 py-1 h-full text-gray-500' + onClick={() => + setQuantityInput( + String(Math.max(1, Number(quantityInput) - 1)) + ) + } + > + - + </button> + <input + type='number' + id='quantity' + min={1} + value={quantityInput} + onChange={(e) => setQuantityInput(e.target.value)} + className=' w-24 h-10 text-center border border-gray-300 rounded focus:outline-none' + /> + <button + type='button' + className='absolute right-0 px-2 py-1 h-full text-gray-500' + onClick={() => + setQuantityInput(String(Number(quantityInput) + 1)) + } + > + + + </button> + </div> + <div> + <Skeleton + isLoaded={sla} + h='21px' + // w={16} + className={ + product?.sla?.qty < 10 ? 'text-red-600 font-medium' : '' + } + > + Stock : {product?.sla?.qty}{' '} + </Skeleton> + </div> + <div> + {product?.sla?.qty > 0 && ( + <Link href='/panduan-pick-up-service' className='group'> + <Image + src='/images/PICKUP-NOW.png' + className='group-hover:scale-105 transition-transform duration-200 w-28' + alt='pickup now' + /> + </Link> + )} + </div> + </div> + <div className='flex gap-x-3'> + <Button onClick={() => handleAddToCart(product.id)} - className='flex-1 py-2 btn-yellow' + className='w-full' + colorScheme='yellow' > Keranjang - </button> - <button - type='button' + </Button> + <Button onClick={() => handleBuy(product.id)} - className='flex-1 py-2 btn-solid-red' + className='w-full' + colorScheme='red' > Beli - </button> + </Button> </div> - <div className='flex mt-4'> - <button - className='flex items-center gap-x-1' - onClick={toggleWishlist} - > - {wishlist.data?.productTotal > 0 ? ( - <HeartIcon className='w-6 fill-danger-500 text-danger-500' /> - ) : ( - <HeartIcon className='w-6' /> - )} - Wishlist - </button> + <Button + onClick={() => handleButton(product.id)} + color={'red'} + colorScheme='white' + className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center' + > + <ImageNext + src='/images/writing.png' + alt='penawaran instan' + className='' + width={25} + height={25} + /> + Penawaran Harga Instan + </Button> + <div className='flex py-5'> + <div className='flex gap-x-5 items-center justify-center'> + <Button + as={Link} + href={createdAskUrl} + variant='link' + target='_blank' + colorScheme='gray' + leftIcon={<MessageCircleIcon size={18} />} + > + Ask Admin + </Button> + + <span>|</span> + + <button + className='flex items-center gap-x-1' + onClick={toggleWishlist} + > + {wishlist.data?.productTotal > 0 ? ( + <HeartIcon className='w-6 fill-danger-500 text-danger-500' /> + ) : ( + <HeartIcon className='w-6' /> + )} + Wishlist + </button> + + <span>|</span> + + <RWebShare + data={{ + text: 'Check out this product', + title: `${product.name} - Indoteknik.com`, + url: SELF_HOST + router.asPath, + }} + > + <Button + variant='link' + colorScheme='gray' + leftIcon={<Share2Icon size={18} />} + > + Share + </Button> + </RWebShare> + </div> </div> <div className='border border-gray_r-6 overflow-auto mt-4'> <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'> Produk Serupa </div> - <div className='h-full divide-y divide-gray_r-6 max-h-96'> + <div className='h-full divide-y divide-gray_r-6 max-h-[500px]'> {productSimilarInBrand && productSimilarInBrand?.map((product) => ( <div className='py-2' key={product.id}> @@ -393,8 +554,11 @@ const ProductDesktopVariant = ({ Kamu Mungkin Juga Suka </div> <LazyLoad> - <ProductSimilar query={productSimilarQuery} /> + <SimilarBottom product={product} /> </LazyLoad> + {/* <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> */} </div> <BottomPopup @@ -429,8 +593,11 @@ const ProductDesktopVariant = ({ Kamu Mungkin Juga Suka </div> <LazyLoad> - <ProductSimilar query={productSimilarQuery} /> + <SimilarBottom product={product} /> </LazyLoad> + {/* <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> */} </div> </BottomPopup> </div> diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index af9e52bb..b87bcbc8 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -1,10 +1,10 @@ -import { Skeleton } from '@chakra-ui/react'; +import { Button, Skeleton } from '@chakra-ui/react'; import { HeartIcon } from '@heroicons/react/24/outline'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { toast } from 'react-hot-toast'; import LazyLoad from 'react-lazy-load'; - +import ImageNext from 'next/image'; import odooApi from '@/core/api/odooApi'; import Divider from '@/core/components/elements/Divider/Divider'; import Image from '@/core/components/elements/Image/Image'; @@ -16,12 +16,15 @@ import currencyFormat from '@/core/utils/currencyFormat'; import { gtagAddToCart } from '@/core/utils/googleTag'; import { createSlug } from '@/core/utils/slug'; import whatsappUrl from '@/core/utils/whatsappUrl'; - +import { getAuth } from '~/libs/auth'; +import SimilarBottom from '~/modules/product-detail/components/SimilarBottom'; import ProductSimilar from '../ProductSimilar'; const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { const router = useRouter(); - + const { slug } = router.query; + const { srsltid } = router.query; + let auth = getAuth(); const [quantity, setQuantity] = useState('1'); const [selectedVariant, setSelectedVariant] = useState(product.id); const [informationTab, setInformationTab] = useState( @@ -73,11 +76,16 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { return isValid; }; - const handleClickCart = () => { + const handleClickCart = async () => { + if (!auth) { + router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`); + return; + } + if (!validAction()) return; gtagAddToCart(activeVariant, quantity); updateItemCart({ - productId: variant, + productId: product.id, quantity, programLineId: null, selected: true, @@ -86,7 +94,33 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { setAddCartAlert(true); }; - const handleClickBuy = () => { + const handleClickBuy = async () => { + let isLoggedIn = typeof auth === 'object'; + + if (!isLoggedIn) { + const currentUrl = encodeURIComponent(router.asPath); + await router.push(`/login?next=${currentUrl}`); + + // Tunggu login berhasil, misalnya dengan memantau perubahan status auth. + const authCheckInterval = setInterval(() => { + const newAuth = getAuth(); + if (typeof newAuth === 'object') { + isLoggedIn = true; + auth = newAuth; // Update nilai auth setelah login + clearInterval(authCheckInterval); + } + }, 500); // Periksa status login setiap 500ms + + await new Promise((resolve) => { + const checkLogin = setInterval(() => { + if (isLoggedIn) { + clearInterval(checkLogin); + resolve(null); + } + }, 500); + }); + } + if (!validAction()) return; updateItemCart({ @@ -99,6 +133,20 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { router.push(`/shop/checkout?source=buy`); }; + const handleButton = (variant) => { + const quantity = quantityInput; + if (!validQuantity(quantity)) return; + + updateItemCart({ + productId: variant, + quantity, + programLineId: null, + selected: true, + source: 'buy', + }); + router.push('/shop/quotation?source=buy'); + }; + const productSimilarQuery = [ product?.name, `fq=-product_id_i:${product.id}`, @@ -149,7 +197,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { )} </button> </div> - <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1> + <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'> + {activeVariant?.name} + </h1> {activeVariant.isFlashSale && activeVariant?.price?.discountPercentage > 0 ? ( @@ -236,6 +286,21 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { Beli </button> </div> + <Button + onClick={() => handleButton(product.id)} + color={'red'} + colorScheme='white' + className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center' + > + <ImageNext + src='/images/writing.png' + alt='penawaran instan' + className='' + width={25} + height={25} + /> + Penawaran Harga Instan + </Button> </div> <Divider /> @@ -375,8 +440,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { <div className='p-4'> <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2> <LazyLoad> - <ProductSimilar query={productSimilarQuery} /> + <SimilarBottom product={product} /> </LazyLoad> + {/* <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> */} </div> <BottomPopup @@ -409,8 +477,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { Kamu Mungkin Juga Suka </div> <LazyLoad> - <ProductSimilar query={productSimilarQuery} /> + <SimilarBottom product={product} /> </LazyLoad> + {/* <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> */} </div> </BottomPopup> </MobileView> diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx index cf0ad41f..5a2f63a5 100644 --- a/src/lib/quotation/components/Quotation.jsx +++ b/src/lib/quotation/components/Quotation.jsx @@ -39,9 +39,12 @@ const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi'); const Quotation = () => { const router = useRouter(); const auth = useAuth(); + const query = router.query.source ?? null; const { data: cartCheckout } = useQuery('cartCheckout', () => - getProductsCheckout() + getProductsCheckout({ + source: query, + }) ); const { setRefreshCart } = useProductCartContext(); diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx index 115bbd3a..20dbb013 100644 --- a/src/lib/shipment/components/Shipments.jsx +++ b/src/lib/shipment/components/Shipments.jsx @@ -1,62 +1,83 @@ -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import Menu from '@/lib/auth/components/Menu' -import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline' -import ImageNext from 'next/image' -import { useRouter } from 'next/router' -import { useQuery } from 'react-query' -import _, { forEach } from 'lodash-contrib' -import Spinner from '@/core/components/elements/Spinner/Spinner' -import Manifest from '@/lib/treckingAwb/component/Manifest' -import { useState } from 'react' -import Pagination from '@/core/components/elements/Pagination/Pagination' -import Link from 'next/link' -import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge' +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import Menu from '@/lib/auth/components/Menu'; +import { + EllipsisVerticalIcon, + MagnifyingGlassIcon, +} from '@heroicons/react/24/outline'; +import ImageNext from 'next/image'; +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; +import { useQuery } from 'react-query'; +import _, { forEach } from 'lodash-contrib'; +import Spinner from '@/core/components/elements/Spinner/Spinner'; +import Manifest from '@/lib/treckingAwb/component/Manifest'; +import { useState } from 'react'; +import Pagination from '@/core/components/elements/Pagination/Pagination'; +import Link from 'next/link'; +import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge'; -const { listShipments } = require('../api/listShipment') +const { listShipments } = require('../api/listShipment'); const Shipments = () => { - const router = useRouter() - const { q = '', page = 1 } = router.query - const [paramStatus, setParamStatus] = useState(null) - - const limit = 15 + const router = useRouter(); + const { q = '', page = 1, status = null } = router.query; + const [paramStatus, setParamStatus] = useState(status); + const limit = 15; const query = { q: q, status: paramStatus, offset: (page - 1) * limit, - limit - } - const [inputQuery, setInputQuery] = useState(q) - const queryString = _.toQuery(query) + limit, + }; + const [inputQuery, setInputQuery] = useState(q); + const queryString = _.toQuery(query); const { data: shipments } = useQuery('shipments' + queryString, () => listShipments({ query: queryString }) - ) - const [idAWB, setIdAWB] = useState(null) + ); + const [idAWB, setIdAWB] = useState(null); - const pageCount = Math.ceil(shipments?.pickingTotal / limit) - let pageQuery = _.omit(query, ['limit', 'offset', 'context']) - pageQuery = _.pickBy(pageQuery, _.identity) - pageQuery = _.toQuery(pageQuery) + const pageCount = Math.ceil(shipments?.pickingTotal / limit); + let pageQuery = _.omit(query, ['limit', 'offset', 'context']); + pageQuery = _.pickBy(pageQuery, _.identity); + pageQuery = _.toQuery(pageQuery); const closePopup = () => { - setIdAWB(null) - } + setIdAWB(null); + }; const handleSubmit = async (e) => { - e.preventDefault() - router.push(`${router.pathname}?q=${inputQuery}`) - } + e.preventDefault(); + router.push(`${router.pathname}?q=${inputQuery}`); + }; const filterStatus = async (status) => { if (status === paramStatus) { - setParamStatus(null) + setParamStatus(null); } else { - setParamStatus(status) + setParamStatus(status); } - } + }; + + useEffect(() => { + const resetQuery = () => { + const newQuery = { + status: paramStatus || undefined, + q: '', + page: 1, + }; + router.push({ + pathname: router.pathname, + query: newQuery, + }); + }; + + if (paramStatus !== status) { + resetQuery(); + } + }, [paramStatus]); return ( <> <MobileView> @@ -84,7 +105,10 @@ const Shipments = () => { </form> {shipments?.pickings.map((shipment) => ( - <div className='p-4 shadow border border-gray_r-3 rounded-md' key={shipment.id}> + <div + className='p-4 shadow border border-gray_r-3 rounded-md' + key={shipment.id} + > <div className='flex justify-between items-center mb-3'> <div className='text-caption-2 text-gray_r-11'> <p> @@ -93,7 +117,9 @@ const Shipments = () => { {shipment.carrierName || '-'} </span> </p> - <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p> + <p className='mt-2'> + No. Resi : {shipment.trackingNumber || '-'} + </p> </div> <div className='flex justify-between'> {shipment?.status === 'completed' && ( @@ -116,11 +142,17 @@ const Shipments = () => { <hr /> <div className='flex justify-between mt-2 items-center mb-5'> <div> - <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span> + <span className='text-caption-2 text-gray_r-11'> + No. Transaksi + </span> <Link href={`/my/transactions/${shipment.saleOrder.id}`}> - <h2 className='text-danger-500 mt-1 mb-2'>{shipment.saleOrder.name}</h2> + <h2 className='text-danger-500 mt-1 mb-2'> + {shipment.saleOrder.name} + </h2> </Link> - <span className='text-caption-2 text-gray_r-11'>{shipment.date}</span> + <span className='text-caption-2 text-gray_r-11'> + {shipment.date} + </span> </div> <div> <button @@ -136,7 +168,11 @@ const Shipments = () => { onClick={() => setIdAWB(shipment.id)} className='flex items-center mt-1 gap-x-1 min-w-full' > - <ImageNext src={`/images/BOX_DELIVERY_GREEN.svg`} width={20} height={20} /> + <ImageNext + src={`/images/BOX_DELIVERY_GREEN.svg`} + width={20} + height={20} + /> <p className='text-sm text-green-700 truncate'> {shipment.lastManifest.description} </p> @@ -148,7 +184,7 @@ const Shipments = () => { <Pagination pageCount={pageCount} currentPage={parseInt(page)} - url={router.pathname + pageQuery} + url={`${router.pathname}${pageQuery ? '?' + pageQuery : ''}`} className='mt-2 mb-2' /> </div> @@ -176,7 +212,8 @@ const Shipments = () => { <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' /> </svg> <div> - Lacak pengiriman untuk setiap transaksi anda semakin mudah di Indoteknik.com + Lacak pengiriman untuk setiap transaksi anda semakin mudah di + Indoteknik.com </div> </div> <div className='flex justify-between gap-x-5'> @@ -190,7 +227,9 @@ const Shipments = () => { </div> <div className='p-4 bg-white border border-gray_r-6 rounded'> <div className='flex mb-6 items-center justify-between'> - <h1 className='text-title-sm font-semibold'>Detail Pengiriman</h1> + <h1 className='text-title-sm font-semibold'> + Detail Pengiriman + </h1> <form className='flex gap-x-2' onSubmit={handleSubmit}> <input type='text' @@ -199,7 +238,10 @@ const Shipments = () => { value={inputQuery} onChange={(e) => setInputQuery(e.target.value)} /> - <button className='btn-light bg-transparent px-3' type='submit'> + <button + className='btn-light bg-transparent px-3' + type='submit' + > <MagnifyingGlassIcon className='w-6' /> </button> </form> @@ -254,7 +296,7 @@ const Shipments = () => { <Pagination pageCount={pageCount} currentPage={parseInt(page)} - url={router.pathname + pageQuery} + url={`${router.pathname}${pageQuery ? '?' + pageQuery : ''}`} className='mt-2 mb-2' /> </div> @@ -263,16 +305,16 @@ const Shipments = () => { <Manifest idAWB={idAWB} closePopup={closePopup} /> </DesktopView> </> - ) -} + ); +}; const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => { - const status = [`pending`, `shipment`, `completed`] + const status = [`pending`, `shipment`, `completed`]; return ( <> {status.map((value) => { - const statusData = getStatusLabel(device, value, shipments) + const statusData = getStatusLabel(device, value, shipments); if (device === 'desktop') { return ( <div @@ -282,13 +324,15 @@ const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => { }`} onClick={() => filterStatus(value)} > - <h2 className='mb-2 text-lg font-bold tracking-tight'>{statusData.label}</h2> + <h2 className='mb-2 text-lg font-bold tracking-tight'> + {statusData.label} + </h2> {statusData.image} <h1 className='text-xl font-bold'> {statusData.shipCount} <span className='text-sm'>Pesanan</span> </h1> </div> - ) + ); } else { return ( <div @@ -305,15 +349,15 @@ const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => { <span className='truncate'>{statusData.shipCount}</span> {'>'} </h1> </div> - ) + ); } })} </> - ) -} + ); +}; const getStatusLabel = (device, status, shipments) => { - let images = null + let images = null; switch (status) { case 'pending': if (device === 'desktop') { @@ -328,40 +372,48 @@ const getStatusLabel = (device, status, shipments) => { /> </div> </div> - ) + ); } else { images = ( <div> <ImageNext src='/images/BOX(1).svg' width={15} height={20} /> </div> - ) + ); } return { label: 'Pending', shipCount: shipments?.summary?.pendingCount, - image: images - } + image: images, + }; case 'shipment': if (device === 'desktop') { images = ( <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'> <div> - <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} /> + <ImageNext + src='/images/BOX_DELIVER_(1).svg' + width={30} + height={20} + /> </div> </div> - ) + ); } else { images = ( <div> - <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} /> + <ImageNext + src='/images/BOX_DELIVER_(1).svg' + width={18} + height={20} + /> </div> - ) + ); } return { label: 'Pengiriman', shipCount: shipments?.summary?.shipmentCount, - image: images - } + image: images, + }; case 'completed': if (device === 'desktop') { images = ( @@ -375,22 +427,22 @@ const getStatusLabel = (device, status, shipments) => { /> </div> </div> - ) + ); } else { images = ( <div> <ImageNext src='/images/open-box(1).svg' width={16} height={20} /> </div> - ) + ); } return { label: 'Pesanan Tiba', shipCount: shipments?.summary?.completedCount, - image: images - } + image: images, + }; default: - return 'Status Tidak Dikenal' + return 'Status Tidak Dikenal'; } -} +}; -export default Shipments +export default Shipments; diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 4d401037..d001c7f4 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -778,6 +778,10 @@ const Transaction = ({ id }) => { ? `| ${product?.attributes.join(', ')}` : ''} </div> + <div className='text-[10px] text-red-500 italic mt-2'> + {product.availableQuantity} barang ini bisa di + pickup maksimal pukul 16.00 + </div> </div> </td> {/* <td> @@ -879,7 +883,7 @@ const Transaction = ({ id }) => { </div> </div> </div> - )} + )} {transaction?.data?.productsRejectLine.length > 0 && ( <div className='text-h-sm font-semibold mt-10 mb-4'> diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx index 68cdf54f..08b7a97e 100644 --- a/src/lib/variant/components/VariantCard.jsx +++ b/src/lib/variant/components/VariantCard.jsx @@ -103,30 +103,42 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => { </div> </div> </div> - </div> <div className='w-8/12 flex flex-col'> - <p className='product-card__title wrap-line-ellipsis-2'>{product.parent.name}</p> + <p className='product-card__title wrap-line-ellipsis-2'> + {product.parent.name} + </p> <p className='text-caption-2 text-gray_r-11 mt-1'> {product.code || '-'} - {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} + {product.attributes.length > 0 + ? ` ・ ${product.attributes.join(', ')}` + : ''} </p> <p className='text-caption-2 text-gray_r-11 mt-1'> Berat Item : {product?.weight} Kg x {product?.quantity} Barang </p> + <p className='text-[10px] text-red-500 italic mt-2'> + {product.availableQuantity} barang ini bisa di pickup maksimal pukul + 16.00 + </p> <div className='flex flex-wrap gap-x-1 items-center mt-auto'> {product.hasFlashsale && ( <> <p className='text-caption-2 text-gray_r-11 line-through'> {currencyFormat(product.price.price)} </p> - <span className='badge-red'>{product.price.discountPercentage}%</span> + <span className='badge-red'> + {product.price.discountPercentage}% + </span> </> )} </div> <p className='text-caption-2 text-gray_r-11 mt-1'> {product.price.priceDiscount > 0 - ? currencyFormat(product.price.priceDiscount) + ' × ' + product.quantity + ' Barang' + ? currencyFormat(product.price.priceDiscount) + + ' × ' + + product.quantity + + ' Barang' : ''} </p> <p className='text-caption-2 text-gray_r-12 font-bold mt-2'> diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index bcb41dd6..f52aa5f7 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -85,7 +85,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( <SessionProvider session={session}> <ScrollToTop /> - + <AnimatePresence> {animateLoader && ( <motion.div diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 49a5fe69..ace281f7 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -88,7 +88,10 @@ export default async function handler(req, res) { 'price_tier1_v2_f:[1 TO *]', ]; - const fq_ = filterQueries.join('AND '); + if (fq && source != 'similar') { + filterQueries.push(fq); + } + const fq_ = filterQueries.join(' AND '); let offset = (page - 1) * limit; let parameter = [ @@ -106,7 +109,7 @@ export default async function handler(req, res) { : formattedQuery }`, `defType=edismax`, - 'qf=name_s description_clean_t category_name manufacture_name_s variants_code_t variants_name_t category_id_ids default_code_s', + 'qf=name_s description_clean_t category_name manufacture_name_s variants_code_t variants_name_t category_id_ids default_code_s manufacture_id_i category_id_i ', `start=${parseInt(offset)}`, `rows=${limit}`, `sort=${paramOrderBy}`, @@ -149,7 +152,7 @@ export default async function handler(req, res) { if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`); // Single fq in url params - if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`); + // if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`); // Multi fq in url params if (Array.isArray(fq)) parameter = parameter.concat( diff --git a/src/pages/api/shop/url-category_brand.js b/src/pages/api/shop/url-category_brand.js new file mode 100644 index 00000000..160aa166 --- /dev/null +++ b/src/pages/api/shop/url-category_brand.js @@ -0,0 +1,20 @@ +import axios from 'axios'; + +export default async function handler(req, res) { + const { url = '', page = 1, limit = 30 } = req.query; + + let offset = (page - 1) * limit; + + const params = [`q.op=AND`, `q=${url ? `"${url}"` : '*'}`, `indent=true`, `rows=${limit}`, `start=${offset}`]; + + try { + let result = await axios( + process.env.SOLR_HOST + + `/solr/url_category_brand/select?` + + params.join('&') + ); + res.status(200).json(result.data); + } catch (error) { + res.status(500).json({ error: 'Internal Server Error' }); + } +} diff --git a/src/pages/api/shop/variant-detail.js b/src/pages/api/shop/variant-detail.js index 08ce75b8..af3525b3 100644 --- a/src/pages/api/shop/variant-detail.js +++ b/src/pages/api/shop/variant-detail.js @@ -1,21 +1,28 @@ -import { productMappingSolr, variantsMappingSolr } from '@/utils/solrMapping' -import axios from 'axios' +import { productMappingSolr, variantsMappingSolr } from '@/utils/solrMapping'; +import axios from 'axios'; export default async function handler(req, res) { try { let productVariants = await axios( process.env.SOLR_HOST + `/solr/variants/select?q=id:${req.query.id}&q.op=OR&indent=true` - ) - let auth = req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth + ); + let template_id = productVariants.data.response.docs[0].template_id_i; + let auth = + req.query.auth === 'false' ? JSON.parse(req.query.auth) : req.query.auth; let productTemplate = await axios( - process.env.SOLR_HOST + `/solr/product/select?q=id:${req.query.id}&q.op=OR&indent=true` - ) - let result = variantsMappingSolr(productTemplate.data.response.docs, productVariants.data.response.docs, auth || false) - - res.status(200).json(result) + process.env.SOLR_HOST + + `/solr/product/select?q=id:${template_id}&q.op=OR&indent=true` + ); + let result = variantsMappingSolr( + productTemplate.data.response.docs, + productVariants.data.response.docs, + auth || false + ); + + res.status(200).json(result); } catch (error) { - console.error('Error fetching data from Solr:', error) - res.status(500).json({ error: 'Internal Server Error' }) + console.error('Error fetching data from Solr:', error); + res.status(500).json({ error: 'Internal Server Error' }); } -}
\ No newline at end of file +} diff --git a/src/pages/garansi-resmi.jsx b/src/pages/garansi-resmi.jsx new file mode 100644 index 00000000..7384a89d --- /dev/null +++ b/src/pages/garansi-resmi.jsx @@ -0,0 +1,13 @@ +import Seo from '@/core/components/Seo' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import IframeContent from '@/lib/iframe/components/IframeContent' + +export default function GaransiResmi() { + return ( + <BasicLayout> + <Seo title='Garansi Resmi - Indoteknik.com' /> + + <IframeContent url={`${process.env.NEXT_PUBLIC_ODOO_HOST}/content?url=garansi-resmi`} /> + </BasicLayout> + ) +} diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx index c126b290..19d7af41 100644 --- a/src/pages/my/address/[id]/edit.jsx +++ b/src/pages/my/address/[id]/edit.jsx @@ -46,6 +46,6 @@ export async function getServerSideProps(context) { subDistrict: '', business_name: '', }; - console.log('ini default',defaultValues); + // console.log('ini default',defaultValues); return { props: { id, defaultValues } }; } diff --git a/src/pages/pembayaran-tempo.jsx b/src/pages/pembayaran-tempo.jsx new file mode 100644 index 00000000..363e3099 --- /dev/null +++ b/src/pages/pembayaran-tempo.jsx @@ -0,0 +1,13 @@ +import Seo from '@/core/components/Seo' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import IframeContent from '@/lib/iframe/components/IframeContent' + +export default function PembnayaranTempo() { + return ( + <BasicLayout> + <Seo title='Pambayaran Tempo - Indoteknik.com' /> + + <IframeContent url={`${process.env.NEXT_PUBLIC_ODOO_HOST}/content?url=pembayaran-tempo`} /> + </BasicLayout> + ) +} diff --git a/src/pages/shop/find/[slug].jsx b/src/pages/shop/find/[slug].jsx new file mode 100644 index 00000000..268b1e56 --- /dev/null +++ b/src/pages/shop/find/[slug].jsx @@ -0,0 +1,69 @@ +import axios from 'axios'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import Seo from '@/core/components/Seo'; +import dynamic from 'next/dynamic'; +import { get } from 'lodash-contrib'; +import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'; +import { capitalizeEachWord } from '../../../utils/capializeFIrstWord'; + +const BasicLayout = dynamic(() => + import('@/core/components/layouts/BasicLayout') +); +const ProductSearch = dynamic(() => + import('@/lib/product/components/ProductSearch') +); + +const BASE_URL = 'https://indoteknik.com'; +export default function FindPage() { + const route = useRouter(); + const qSlug = route?.query?.slug || null; + const url = BASE_URL + route.asPath.split('?')[0]; + const [result, setResult] = useState(null); + const [query, setQuery] = useState(null); + + const __slug = qSlug ? getNameFromSlug(route?.query?.slug) +' '+ getIdFromSlug(route?.query?.slug) : ''; + const slug = capitalizeEachWord(__slug); + + const getUrls = async (url) => { + try { + let response = await axios( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/url-category_brand?url=${url}` + ); + let result = response?.data?.response?.docs[0] || null; + setResult(result); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + useEffect(() => { + getUrls(url); + }, []); + + useEffect(() => { + if (result) { + let fq = `category_parent_ids:${result.category_id_i} AND manufacture_id_i:${result.brand_id_i}`; + setQuery({ + fq: fq, + }); + } + }, [result]); + + return ( + <BasicLayout> + <Seo + title={`Beli ${slug} Original & Harga Terjangkau - indoteknik.com`} + description={`Beli ${slug} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`} + additionalMetaTags={[ + { + property: 'keywords', + content: `Beli ${slug}, harga ${slug}, ${slug} murah, toko ${slug}, ${slug} jakarta, ${slug} surabaya`, + + }, + ]} + /> + {query && <ProductSearch query={query} prefixUrl={`${route.asPath}`} />} + </BasicLayout> + ); +} diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx index 42f38774..2c0dd64b 100644 --- a/src/pages/shop/product/variant/[slug].jsx +++ b/src/pages/shop/product/variant/[slug].jsx @@ -32,16 +32,9 @@ export async function getServerSideProps(context) { tier ); let product = response.data; - // let product = await variantApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) if (product?.length == 1) { product = product[0]; - /* const regexHtmlTags = /(<([^>]+)>)/gi - const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g - product.description = product.description - .replace(regexHtmlTagsExceptP, ' ') - .replace(regexHtmlTags, ' ') - .trim()*/ } else { product = null; } diff --git a/src/pages/sitemap/categories-brand.xml.js b/src/pages/sitemap/categories-brand.xml.js new file mode 100644 index 00000000..b23363e9 --- /dev/null +++ b/src/pages/sitemap/categories-brand.xml.js @@ -0,0 +1,35 @@ +import productSearchApi from '@/lib/product/api/productSearchApi' +import { create } from 'xmlbuilder' +import _ from 'lodash-contrib' +import axios from 'axios' + +export async function getServerSideProps({ res }) { + const baseUrl = process.env.SELF_HOST + '/sitemap/categories-brand' + const limit = 500 + const categories = await axios( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/url-category_brand?limit=${limit}` + ) + const pageCount = Math.ceil(categories.data.response.numFound / limit) + const pages = Array.from({ length: pageCount }, (_, i) => i + 1) + const sitemapIndex = create('sitemapindex', { encoding: 'UTF-8' }).att( + 'xmlns', + 'http://www.sitemaps.org/schemas/sitemap/0.9' + ) + + const date = new Date() + pages.forEach((page) => { + const sitemap = sitemapIndex.ele('sitemap') + sitemap.ele('loc', `${baseUrl}/${page}.xml`) + sitemap.ele('lastmod', date.toISOString().slice(0, 10)) + }) + + res.setHeader('Content-Type', 'text/xml') + res.write(sitemapIndex.end()) + res.end() + + return { props: {} } +} + +export default function SitemapProducts() { + return null +} diff --git a/src/pages/sitemap/categories-brand/[page].js b/src/pages/sitemap/categories-brand/[page].js new file mode 100644 index 00000000..6b55e426 --- /dev/null +++ b/src/pages/sitemap/categories-brand/[page].js @@ -0,0 +1,43 @@ + +import productSearchApi from '@/lib/product/api/productSearchApi' +import { create } from 'xmlbuilder' +import _ from 'lodash-contrib' +import { createSlug } from '@/core/utils/slug' +import axios from 'axios' + +export async function getServerSideProps({ query, res }) { + const baseUrl = process.env.SELF_HOST + '/shop/product/' + const { page } = query + const limit = 500 + const categories = await axios( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/url-category_brand?limit=${limit}&page=${page.replace( + '.xml', + '' + )}` + ) + + const sitemap = create('urlset', { encoding: 'utf-8' }).att( + 'xmlns', + 'http://www.sitemaps.org/schemas/sitemap/0.9' + ) + + const date = new Date() + categories.data.response.docs.forEach((product) => { + const url = sitemap.ele('url') + const loc = product.url_s; + url.ele('loc', loc) + url.ele('lastmod', date.toISOString().slice(0, 10)) + url.ele('changefreq', 'daily') + url.ele('priority', '0.8') + }) + + res.setHeader('Content-Type', 'text/xml') + res.write(sitemap.end()) + res.end() + + return { props: {} } +} + +export default function SitemapProducts() { + return null +} diff --git a/src/utils/capializeFIrstWord.js b/src/utils/capializeFIrstWord.js new file mode 100644 index 00000000..b62d0c06 --- /dev/null +++ b/src/utils/capializeFIrstWord.js @@ -0,0 +1,9 @@ +export const capitalizeEachWord = (str) => { + return str + .split(' ') // Pisahkan string menjadi array kata-kata + .map((word) => // Ubah huruf pertama setiap kata menjadi besar + word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() + ) + .join(' '); // Gabungkan kembali menjadi string + }; +
\ No newline at end of file diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index f73e966a..f896a6a8 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -74,6 +74,7 @@ export const productMappingSolr = (products, pricelist) => { name: product.manufacture_name_s || '', imagePromotion1: product.image_promotion_1_s || '', imagePromotion2: product.image_promotion_2_s || '', + logo : product.x_logo_manufacture_s || '', }; } @@ -133,6 +134,7 @@ export const variantsMappingSolr = (parent, products, pricelist) => { productMapped.manufacture = { id: product.manufacture_id_i || '', name: product.manufacture_name_s || '', + logo : parent[0]?.x_logo_manufacture_s }; } productMapped.parent = { |