From 1f20fafef46b4eecaf0dd1b91592f3214e8144d3 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 25 Mar 2023 12:24:03 +0700 Subject: variant and product price --- .../components/elements/Skeleton/PriceSkeleton.jsx | 9 ++ .../product/components/Product/ProductDesktop.jsx | 79 +++++++++------ .../product/components/Product/ProductMobile.jsx | 54 ++++++---- src/lib/product/components/ProductCard.jsx | 111 +++++++++++++-------- src/lib/product/hooks/useProductPrice.js | 13 +++ src/lib/variant/api/variantPriceApi.js | 8 ++ src/lib/variant/hooks/useVariantPrice.js | 13 +++ 7 files changed, 198 insertions(+), 89 deletions(-) create mode 100644 src/core/components/elements/Skeleton/PriceSkeleton.jsx create mode 100644 src/lib/product/hooks/useProductPrice.js create mode 100644 src/lib/variant/api/variantPriceApi.js create mode 100644 src/lib/variant/hooks/useVariantPrice.js diff --git a/src/core/components/elements/Skeleton/PriceSkeleton.jsx b/src/core/components/elements/Skeleton/PriceSkeleton.jsx new file mode 100644 index 00000000..0dc4c70f --- /dev/null +++ b/src/core/components/elements/Skeleton/PriceSkeleton.jsx @@ -0,0 +1,9 @@ +const PriceSkeleton = () => ( +
+
+
+ Loading... +
+) + +export default PriceSkeleton diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 98b40400..663d5a74 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -8,8 +8,12 @@ import LazyLoad from 'react-lazy-load' import ProductSimilar from '../ProductSimilar' import { toast } from 'react-hot-toast' import { updateItemCart } from '@/core/utils/cart' +import useVariantPrice from '@/lib/variant/hooks/useVariantPrice' +import useProductPrice from '../../hooks/useProductPrice' +import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton' const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { + const { productPrice } = useProductPrice({ id: product.id }) const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const variantQuantityRefs = useRef([]) @@ -104,28 +108,33 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
Harga mulai dari:
)} - {product?.lowestPrice.discountPercentage > 0 && ( -
-
- {product?.lowestPrice.discountPercentage}% -
-
- {currencyFormat(product?.lowestPrice.price)} -
-
+ {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 + + + )} +

+ )} -

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

{activeVariant?.name}

- {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 - - - )} -

+ @@ -249,6 +232,37 @@ 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 5710e9ea..e48ab88a 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -2,20 +2,11 @@ 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 { useEffect, useState } from 'react' -import productPriceApi from '../api/productPriceApi' +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' }) => { - const [price, setPrice] = useState(null) - - useEffect(() => { - const loadPrice = async () => { - const dataPrice = await productPriceApi({ id: product.id }) - // console.log(dataPrice) - } - loadPrice() - }) - if (variant == 'vertical') { return (
@@ -57,22 +48,9 @@ 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
@@ -128,30 +106,83 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {product?.name} - {product?.lowestPrice?.discountPercentage > 0 && ( + + + + {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}%
-
- {currencyFormat(product?.lowestPrice?.price)} +
+ {currencyFormat( + productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude + )}
+
{productPrice?.data?.discount}%
)}
- {product?.lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(product?.lowestPrice?.priceDiscount) + {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( + currencyFormat( + productPrice?.data?.priceDiscStartFrom || + productPrice?.data?.priceExcludeAfterDiscount + ) ) : ( Call for price )}
- {product?.stockTotal > 0 && ( -
-
Ready Stock
-
{product?.stockTotal > 5 ? '> 5' : '< 5'}
+ + ) + ) + } + + if (variant == 'horizontal') { + return ( + productPrice.isFetched && ( + <> + {productPrice?.data?.discount > 0 && ( +
+
{productPrice?.data?.discount}%
+
+ {currencyFormat( + productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude + )} +
)} -
-
+ +
+ {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( + currencyFormat( + productPrice?.data?.priceDiscStartFrom || + productPrice?.data?.priceExcludeAfterDiscount + ) + ) : ( + Call for price + )} +
+ + ) ) } } diff --git a/src/lib/product/hooks/useProductPrice.js b/src/lib/product/hooks/useProductPrice.js new file mode 100644 index 00000000..f8ef62b8 --- /dev/null +++ b/src/lib/product/hooks/useProductPrice.js @@ -0,0 +1,13 @@ +import { useQuery } from 'react-query' +import productPriceApi from '../api/productPriceApi' + +const useProductPrice = ({ id }) => { + const fetchProductPrice = async () => await productPriceApi({ id }) + const productPrice = useQuery(`productPrice-${id}`, fetchProductPrice, { + refetchOnWindowFocus: false + }) + + return { productPrice } +} + +export default useProductPrice diff --git a/src/lib/variant/api/variantPriceApi.js b/src/lib/variant/api/variantPriceApi.js new file mode 100644 index 00000000..8621ca78 --- /dev/null +++ b/src/lib/variant/api/variantPriceApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const variantPriceApi = async ({ id }) => { + const dataVariantPrice = await odooApi('GET', `/api/v1/product/product/price/${id}`) + return dataVariantPrice +} + +export default variantPriceApi diff --git a/src/lib/variant/hooks/useVariantPrice.js b/src/lib/variant/hooks/useVariantPrice.js new file mode 100644 index 00000000..d00eb810 --- /dev/null +++ b/src/lib/variant/hooks/useVariantPrice.js @@ -0,0 +1,13 @@ +import { useQuery } from 'react-query' +import variantPriceApi from '../api/variantPriceApi' + +const useVariantPrice = ({ id }) => { + const fetchVariantPrice = async () => await variantPriceApi({ id }) + const variantPrice = useQuery(`variantPrice-${id}`, fetchVariantPrice, { + refetchOnWindowFocus: false + }) + + return { variantPrice } +} + +export default useVariantPrice -- cgit v1.2.3