From 0de043b180c1529b2d57d900523eece703e543a2 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 31 Mar 2023 16:39:25 +0700 Subject: cart, product --- src/core/components/elements/Popup/BottomPopup.jsx | 2 +- src/lib/cart/components/Cart.jsx | 2 +- src/lib/cart/hooks/useCart.js | 10 +- .../product/components/Product/ProductDesktop.jsx | 74 ++++++++------- .../product/components/Product/ProductMobile.jsx | 101 +++++++-------------- src/lib/product/components/ProductCard.jsx | 99 ++++++-------------- src/pages/api/shop/search.js | 4 +- 7 files changed, 114 insertions(+), 178 deletions(-) (limited to 'src') diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index 5e9f68c7..4fd17ed0 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -53,7 +53,7 @@ const BottomPopup = ({ children, active = false, title, close }) => { animate={{ bottom: '50%', opacity: 1 }} exit={{ bottom: '45%', opacity: 0 }} transition={transition} - className='fixed left-1/2 -translate-x-1/2 w-2/5 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white' + className='fixed left-1/2 -translate-x-1/2 translate-y-1/2 w-2/5 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white' >
{title}
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index 8400857d..1131fed7 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -288,7 +288,7 @@ const Cart = () => {
-
+

Daftar Produk Belanja

diff --git a/src/lib/cart/hooks/useCart.js b/src/lib/cart/hooks/useCart.js index bc1ea7ea..b91c8d90 100644 --- a/src/lib/cart/hooks/useCart.js +++ b/src/lib/cart/hooks/useCart.js @@ -4,14 +4,12 @@ import _ from 'lodash' import CartApi from '../api/CartApi' const useCart = ({ enabled }) => { - const cart = getCart() - const variantIds = _.keys(cart).join(',') + const cartStorage = getCart() + const variantIds = _.keys(cartStorage).join(',') const fetchCart = async () => CartApi({ variantIds }) - const { data, isLoading } = useQuery('cart', fetchCart, { enabled }) + const cart = useQuery('cart', fetchCart, { enabled }) - return { - cart: { data, isLoading } - } + return { cart } } export default useCart diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index c7554242..e0d2a959 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -3,19 +3,32 @@ import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import currencyFormat from '@/core/utils/currencyFormat' import { HeartIcon } from '@heroicons/react/24/outline' -import { useRef, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import LazyLoad from 'react-lazy-load' import ProductSimilar from '../ProductSimilar' import { toast } from 'react-hot-toast' import { updateItemCart } from '@/core/utils/cart' -import useProductPrice from '../../hooks/useProductPrice' -import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton' import { useRouter } from 'next/router' import { createSlug } from '@/core/utils/slug' const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() - const { productPrice } = useProductPrice({ id: product.id }) + + const [lowestPrice, setLowestPrice] = useState(null) + + const getLowestPrice = useCallback(() => { + const prices = product.variants.map((variant) => variant.price) + const lowest = prices.reduce((lowest, price) => { + return price.priceDiscount < lowest.priceDiscount ? price : lowest + }, prices[0]) + return lowest + }, [product]) + + useEffect(() => { + const lowest = getLowestPrice() + setLowestPrice(lowest) + }, [getLowestPrice]) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const variantQuantityRefs = useRef([]) @@ -63,8 +76,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const productSimilarQuery = [ product?.name.replace(/[()/"&]/g, ''), - `fq=-product_id:${product.id}`, - `fq=-manufacture_id:${product.manufacture?.id || 0}` + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}` ].join('&') return ( @@ -125,33 +138,30 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
Harga mulai dari:
)} - {productPrice.isLoading && } - {productPrice.isFetched && ( - <> - {productPrice?.data?.discount > 0 && ( -
-
- {productPrice?.data?.discount}% -
-
- {currencyFormat(productPrice?.data?.priceExclude)} -
-
- )} -

- {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( - currencyFormat(productPrice?.data?.priceExcludeAfterDiscount) - ) : ( - - Hubungi kami untuk dapatkan harga terbaik,  - - klik disini - - - )} -

- + + {lowestPrice?.discountPercentage > 0 && ( +
+
+ {lowestPrice?.discountPercentage}% +
+
+ {currencyFormat(lowestPrice?.price)} +
+
)} +

+ {lowestPrice?.priceDiscount > 0 ? ( + currencyFormat(lowestPrice?.priceDiscount) + ) : ( + + Hubungi kami untuk dapatkan harga terbaik,  + + klik disini + + + )} +

+ -

{activeVariant?.name}

- {activeVariant.id && } - {product.variants?.length > 1 && !activeVariant.id && productPrice.isLoading && ( - +

{activeVariant?.name}

+ + {product.variants.length > 1 && activeVariant.price.priceDiscount > 0 && !selectedVariant && ( +
Harga mulai dari:
)} - {product.variants?.length > 1 && !activeVariant.id && productPrice.isFetched && ( - <> -
Harga mulai dari:
- {productPrice?.data?.discount > 0 && ( -
-
- {currencyFormat(productPrice?.data?.priceExclude)} -
-
{productPrice?.data?.discount}%
-
- )} -

- {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( - currencyFormat(productPrice?.data?.priceExcludeAfterDiscount) - ) : ( - - Hubungi kami untuk dapatkan harga terbaik,  - - klik disini - - - )} -

- + + {activeVariant?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(activeVariant?.price?.price)} +
+
{activeVariant?.price?.discountPercentage}%
+
)} +

+ {activeVariant?.price?.priceDiscount > 0 ? ( + currencyFormat(activeVariant?.price?.priceDiscount) + ) : ( + + Hubungi kami untuk dapatkan harga terbaik,  + + klik disini + + + )} +

@@ -268,37 +268,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { ) } -const VariantPrice = ({ id }) => { - const { variantPrice } = useVariantPrice({ id }) - - if (variantPrice.isLoading) return - - return ( - <> - {variantPrice?.data?.discount > 0 && ( -
-
- {currencyFormat(variantPrice?.data?.priceExclude)} -
-
{variantPrice?.data?.discount}%
-
- )} -

- {variantPrice?.data?.priceExcludeAfterDiscount > 0 ? ( - currencyFormat(variantPrice?.data?.priceExcludeAfterDiscount) - ) : ( - - Hubungi kami untuk dapatkan harga terbaik,  - - klik disini - - - )} -

- - ) -} - const informationTabOptions = [ { value: 'specification', label: 'Spesifikasi' }, { value: 'description', label: 'Deskripsi' }, diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index e48ab88a..df709394 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -2,9 +2,6 @@ import Image from '@/core/components/elements/Image/Image' import Link from '@/core/components/elements/Link/Link' import currencyFormat from '@/core/utils/currencyFormat' import { createSlug } from '@/core/utils/slug' -import useProductPrice from '../hooks/useProductPrice' -import { LazyLoadComponent } from 'react-lazy-load-image-component' -import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { if (variant == 'vertical') { @@ -48,9 +45,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { > {product?.name} - - - + {product?.lowestPrice.discountPercentage > 0 && ( +
+
+ {currencyFormat(product.lowestPrice.price)} +
+
{product?.lowestPrice.discountPercentage}%
+
+ )} + +
+ {product?.lowestPrice.priceDiscount > 0 ? ( + currencyFormat(product?.lowestPrice.priceDiscount) + ) : ( + Call for price + )} +
+ {product?.stockTotal > 0 && (
Ready Stock
@@ -106,83 +117,31 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {product?.name} - - - - {product?.stockTotal > 0 && ( -
-
Ready Stock
-
{product?.stockTotal > 5 ? '> 5' : '< 5'}
-
- )} -
- - ) - } -} - -const ProductCardPrice = ({ variant, id }) => { - const { productPrice } = useProductPrice({ id }) - - if (productPrice.isLoading) return - - if (variant == 'vertical') { - return ( - productPrice.isFetched && ( - <> - {productPrice?.data?.discount > 0 && ( + {product?.lowestPrice?.discountPercentage > 0 && (
-
- {currencyFormat( - productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude - )} +
{product?.lowestPrice?.discountPercentage}%
+
+ {currencyFormat(product?.lowestPrice?.price)}
-
{productPrice?.data?.discount}%
)}
- {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( - currencyFormat( - productPrice?.data?.priceDiscStartFrom || - productPrice?.data?.priceExcludeAfterDiscount - ) + {product?.lowestPrice?.priceDiscount > 0 ? ( + currencyFormat(product?.lowestPrice?.priceDiscount) ) : ( Call for price )}
- - ) - ) - } - if (variant == 'horizontal') { - return ( - productPrice.isFetched && ( - <> - {productPrice?.data?.discount > 0 && ( -
-
{productPrice?.data?.discount}%
-
- {currencyFormat( - productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude - )} -
+ {product?.stockTotal > 0 && ( +
+
Ready Stock
+
{product?.stockTotal > 5 ? '> 5' : '< 5'}
)} - -
- {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( - currencyFormat( - productPrice?.data?.priceDiscStartFrom || - productPrice?.data?.priceExcludeAfterDiscount - ) - ) : ( - Call for price - )} -
- - ) +
+
) } } diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index d6829f6e..e174b06f 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -10,8 +10,8 @@ const productResponseMap = (products) => { name: product.name_s || '', lowestPrice: { price: product.price_f || 0, - priceDiscount: product.discount_f || 0, - discountPercentage: product.price_discount_f || 0 + priceDiscount: product.price_discount_f || 0, + discountPercentage: product.discount_f || 0 }, variantTotal: product.variant_total_i || 0, stockTotal: product.stock_total_f || 0, -- cgit v1.2.3