From f1d9a308f61e67f4c896608e73ac8413f61fa8af Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 11 Oct 2023 10:22:11 +0700 Subject: Add breadcrumb on detail product, search, brand, category page --- src/lib/product/components/Product/Breadcrumb.jsx | 69 +++++++++++++++++++++ src/lib/product/components/Product/Product.jsx | 38 +++++------- .../product/components/Product/ProductDesktop.jsx | 71 +++++++++++----------- .../product/components/Product/ProductMobile.jsx | 2 + 4 files changed, 123 insertions(+), 57 deletions(-) create mode 100644 src/lib/product/components/Product/Breadcrumb.jsx (limited to 'src/lib/product/components/Product') diff --git a/src/lib/product/components/Product/Breadcrumb.jsx b/src/lib/product/components/Product/Breadcrumb.jsx new file mode 100644 index 00000000..0554dba5 --- /dev/null +++ b/src/lib/product/components/Product/Breadcrumb.jsx @@ -0,0 +1,69 @@ +import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import { + Breadcrumb as ChakraBreadcrumb, + BreadcrumbItem, + BreadcrumbLink, + Skeleton +} from '@chakra-ui/react' +import classNames from 'classnames' +import Link from 'next/link' +import { useQuery } from 'react-query' + +/** + * Renders a breadcrumb component based on the provided `productId`. + * + * @param {Object} props - The properties passed to the component. + * @param {number} props.productId - The ID of the product. + * @param {string} props.productName - The ID of the product. + * @return {ReactElement} The rendered breadcrumb component. + */ +const Breadcrumb = ({ productId, productName }) => { + const categories = useQuery( + `detail/categories/${productId}`, + async () => await odooApi('GET', `/api/v1/product/${productId}/category-breadcrumb`), + { + enabled: !!productId + } + ) + + return ( + + + + + Home + + + + {categories.data?.map((category) => ( + + + {category.name} + + + ))} + + + {productName} + + + + ) +} + +export default Breadcrumb diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx index 54490c26..6e983c2e 100644 --- a/src/lib/product/components/Product/Product.jsx +++ b/src/lib/product/components/Product/Product.jsx @@ -36,29 +36,21 @@ const Product = ({ product, isVariant = false }) => { } }, [product, isVariant]) - if (isVariant == true) { - return ( - <> - - - - ) - } else { - return ( - <> - - - - ) - } + return isVariant == true ? ( + <> + + + + ) : ( + <> + + + + ) } export default Product diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 47e98c1a..ceb0cad7 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -24,6 +24,7 @@ import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' import { Box, Skeleton, Tooltip } from '@chakra-ui/react' import { Info } from 'lucide-react' +import Breadcrumb from './Breadcrumb' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -199,47 +200,49 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { return (
+
- {product?.flashSale?.remainingTime > 0 && lowestPrice?.price.discountPercentage > 0 && ( -
-
- -
-
-
-
- - {Math.floor(product.lowestPrice.discountPercentage)}% - -
-
- - - {product?.flashSale?.tag != 'false' || product?.flashSale?.tag - ? product?.flashSale?.tag - : 'FLASH SALE'} - -
-
- + {product?.flashSale?.remainingTime > 0 && + lowestPrice?.price.discountPercentage > 0 && ( +
+
+ +
+
+
+
+ + {Math.floor(product.lowestPrice.discountPercentage)}% + +
+
+ + + {product?.flashSale?.tag != 'false' || product?.flashSale?.tag + ? product?.flashSale?.tag + : 'FLASH SALE'} + +
+
+ +
-
- )} + )} {product.name} { const router = useRouter() @@ -160,6 +161,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return ( +
{product?.flashSale?.remainingTime > 0 && activeVariant?.price.discountPercentage > 0 && (
-- cgit v1.2.3 From cff358b2a7bb310e2b65cba5d843e9ffdda0f699 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 11 Oct 2023 14:07:58 +0700 Subject: Fix description and brand banner skeleton --- src/lib/product/components/Product/ProductDesktop.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/product/components/Product') diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index ceb0cad7..855c9f75 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -393,7 +393,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { ))}
-
+
Date: Mon, 16 Oct 2023 11:16:33 +0700 Subject: Fix buy action before and after login --- .../product/components/Product/ProductDesktop.jsx | 44 ++++++++++++---------- .../product/components/Product/ProductMobile.jsx | 18 +++++++++ 2 files changed, 42 insertions(+), 20 deletions(-) (limited to 'src/lib/product/components/Product') diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 855c9f75..701750b2 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -90,38 +90,38 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { } const updateCart = (variantId, quantity, source) => { - let dataUpdate + let dataUpdate = { + productId: variantId, + quantity, + selected: true, + source: source === 'buy' ? 'buy' : null + } + if (product.variants.length > 1) { let variantIndex = product.variants.findIndex((varian) => varian.id == variantId) - dataUpdate = { - productId: variantId, - quantity, - programLineId: product.variants[variantIndex].programActive, - selected: true, - source: source === 'buy' ? 'buy' : null - } + dataUpdate['programLineId'] = product.variants[variantIndex].programActive } else { - dataUpdate = { - productId: variantId, - quantity, - programLineId: promotionActiveId, - selected: true, - source: source === 'buy' ? 'buy' : null - } + dataUpdate['programLineId'] = promotionActiveId } + updateItemCart(dataUpdate) } - const handleAddToCart = (variantId) => { - if (!auth) { - router.push(`/login?next=/shop/product/${slug}`) - return - } + const redirectToLogin = (action, variantId, quantity) => { + const nextURL = `/shop/product/${slug}?action=${action}&variantId=${variantId}&qty=${quantity}` + router.push(`/login?next=${encodeURIComponent(nextURL)}`) + return true + } + const handleAddToCart = (variantId) => { const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return + if (!auth) { + return redirectToLogin('add_to_cart', variantId, quantity) + } + let source = 'cart' updateCart(variantId, quantity, source) setRefreshCart(true) @@ -141,6 +141,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const quantity = variantQuantityRefs.current[variant].value if (!validQuantity(quantity)) return + if (!auth) { + return redirectToLogin('buy', variant, quantity) + } + let source = 'buy' updateCart(variant, quantity, source) router.push(`/shop/checkout?source=buy`) diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 402490f7..70ac1cbc 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -20,9 +20,12 @@ import odooApi from '@/core/api/odooApi' import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import Breadcrumb from './Breadcrumb' +import useAuth from '@/core/hooks/useAuth' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() + const auth = useAuth() + const { slug } = router.query const [quantity, setQuantity] = useState('1') const [selectedVariant, setSelectedVariant] = useState(null) @@ -128,9 +131,20 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return isValid } + const redirectToLogin = (action) => { + const nextURL = `/shop/product/${slug}?action=${action}&variantId=${activeVariant.id}&qty=${quantity}` + router.push(`/login?next=${encodeURIComponent(nextURL)}`) + return true + } + const handleClickCart = () => { if (!validAction()) return gtagAddToCart(activeVariant, quantity) + + if (!auth) { + return redirectToLogin('add_to_cart') + } + updateItemCart({ productId: activeVariant.id, quantity, @@ -143,6 +157,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const handleClickBuy = () => { if (!validAction()) return + if (!auth) { + return redirectToLogin('buy') + } + updateItemCart({ productId: activeVariant.id, quantity, -- cgit v1.2.3 From 6bd88bdb765c1ecc0518abeca77eca25bde2857b Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 17 Oct 2023 14:57:48 +0700 Subject: add lebel product terjual di product card dan product detail, bugfix queri solr untuk filter brand --- src/lib/product/components/Product/ProductDesktop.jsx | 9 +++++++-- src/lib/product/components/Product/ProductMobile.jsx | 11 ++++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) (limited to 'src/lib/product/components/Product') diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 701750b2..ab4943eb 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -25,6 +25,7 @@ import { useProductCartContext } from '@/contexts/ProductCartContext' import { Box, Skeleton, Tooltip } from '@chakra-ui/react' import { Info } from 'lucide-react' import Breadcrumb from './Breadcrumb' +import { sellingProductFormat } from '@/core/utils/formatValue' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -418,7 +419,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
-
+
{product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
Harga mulai dari:
)} @@ -447,7 +448,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { )}
)} */} - + {product?.qtySold > 0 && ( +
+ {sellingProductFormat(product?.qtySold) + ' Terjual'} +
+ )} {lowestPrice?.isFlashsale && lowestPrice?.price.discountPercentage > 0 ? ( <>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 70ac1cbc..ef2c0002 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -21,6 +21,7 @@ import ImageNext from 'next/image' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import Breadcrumb from './Breadcrumb' import useAuth from '@/core/hooks/useAuth' +import { sellingProductFormat } from '@/core/utils/formatValue' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -62,7 +63,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { price: getLowestPrice(), stock: product.stockTotal, weight: product.weight, - hasProgram: false + hasProgram: false, + qtySold: product.qtySold }) const variantOptions = product.variants?.map((variant) => { @@ -105,7 +107,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { stock: variant.stock, weight: variant.weight, hasProgram: variant.hasProgram, - isFlashsale: variant.isFlashsale + isFlashsale: variant.isFlashsale, + qtySold: variant.qtySold } setActiveVariant(newActiveVariant) @@ -245,7 +248,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {

{activeVariant?.name}

- + {product?.qtySold > 0 && ( +
{sellingProductFormat(activeVariant?.qtySold) + ' Terjual'}
+ )} {product.variants.length > 1 && activeVariant.price.priceDiscount > 0 && !selectedVariant && ( -- cgit v1.2.3