From bc8e76f00eaa74eb0cc51b79662a53ef34a3ed67 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 24 Mar 2023 17:05:47 +0700 Subject: - --- src/lib/product/api/productPriceApi.js | 8 ++++++++ src/lib/product/components/ProductCard.jsx | 12 ++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/lib/product/api/productPriceApi.js (limited to 'src/lib/product') diff --git a/src/lib/product/api/productPriceApi.js b/src/lib/product/api/productPriceApi.js new file mode 100644 index 00000000..94a68216 --- /dev/null +++ b/src/lib/product/api/productPriceApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const productPriceApi = async ({ id }) => { + const dataProductPrice = await odooApi('GET', `/api/v1/product/template/price/${id}`) + return dataProductPrice +} + +export default productPriceApi diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 3454d4fd..5710e9ea 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -2,8 +2,20 @@ 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' 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 (
-- cgit v1.2.3 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 --- .../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 +++ 4 files changed, 168 insertions(+), 89 deletions(-) create mode 100644 src/lib/product/hooks/useProductPrice.js (limited to 'src/lib/product') 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 -- cgit v1.2.3