From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src/lib/product/components/Product.jsx | 276 +++++++++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 src/lib/product/components/Product.jsx (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx new file mode 100644 index 00000000..2a3624e7 --- /dev/null +++ b/src/lib/product/components/Product.jsx @@ -0,0 +1,276 @@ +import Badge from "@/core/components/elements/Badge/Badge" +import Divider from "@/core/components/elements/Divider/Divider" +import Image from "@/core/components/elements/Image/Image" +import Link from "@/core/components/elements/Link/Link" +import currencyFormat from "@/core/utils/currencyFormat" +import { useEffect, useState } from "react" +import Select from "react-select" +import ProductSimilar from "./ProductSimilar" +import LazyLoad from "react-lazy-load" +import { toast } from "react-hot-toast" +import { addItemCart } from "@/core/utils/cart" + +const informationTabOptions = [ + { value: 'specification', label: 'Spesifikasi' }, + { value: 'description', label: 'Deskripsi' }, + { value: 'important', label: 'Info Penting' }, +] + +const Product = ({ product }) => { + const [ quantity, setQuantity ] = useState('1') + const [ selectedVariant, setSelectedVariant ] = useState(null) + const [ informationTab, setInformationTab ] = useState(null) + + const [ activeVariant, setActiveVariant ] = useState({ + id: product.id, + code: product.code, + name: product.name, + price: product.lowestPrice, + stock: product.stockTotal, + weight: product.weight, + }) + + const variantOptions = product.variants?.map((variant) => ({ + value: variant.id, + label: + (variant.code ? `[${variant.code}] ` : '') + + + (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name) + })) + + useEffect(() => { + if (!selectedVariant && variantOptions.length == 1) { + setSelectedVariant(variantOptions[0]) + } + }, [selectedVariant, variantOptions]) + + useEffect(() => { + if (selectedVariant) { + const variant = product.variants.find(variant => variant.id == selectedVariant.value) + const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : '' + console.log(variant); + setActiveVariant({ + id: variant.id, + code: variant.code, + name: variant.parent.name + variantAttributes, + price: variant.price, + stock: variant.stock, + weight: variant.weight + }) + } + }, [selectedVariant, product]) + + useEffect(() => { + if (!informationTab) { + setInformationTab(informationTabOptions[0].value) + } + }, [informationTab]) + + const handleClickCart = () => { + if (!selectedVariant) { + toast.error('Pilih varian terlebih dahulu') + return + } + if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) { + toast.error('Jumlah barang minimal 1') + return + } + addItemCart({ + productId: activeVariant.id, + quantity + }) + toast.success('Berhasil menambahkan ke keranjang') + } + + return ( + <> + {product.name} + +
+ { product.manufacture?.name } +

+ {activeVariant?.name} +

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

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

+
+ + + +
+
+ + setQuantity(e.target.value)} + /> +
+ + +
+ + + + +
+

Informasi Produk

+
+ { informationTabOptions.map((option) => ( + setInformationTab(option.value)} + > + {option.label} + + )) } +
+ + + + {product?.variantTotal} Varian + + + SKU-{product?.id} + + + {activeVariant?.code || '-'} + + + { activeVariant?.stock > 0 && ( + +
Ready Stock
+
+ { activeVariant?.stock > 5 ? '> 5' : '< 5' } +
+ + ) } + { activeVariant?.stock == 0 && ( + + Tanya Stok + + ) } + + + { activeVariant?.weight > 0 && ( + { activeVariant?.weight } KG + ) } + { activeVariant?.weight == 0 && ( + + Tanya Berat + + ) } + + + + +
+ + + +
+

Kamu Mungkin Juga Suka

+ + + +
+ + ) +} + +const TabButton = ({ children, active, ...props }) => { + const activeClassName = active ? 'text-red_r-11 border-b border-red_r-11' : 'text-gray_r-11' + return ( + + ) +} + +const TabContent = ({ children, active, className, ...props }) => ( +
+ { children } +
+) + +const SpecificationContent = ({ children, label }) => ( +
+ { label } + { children } +
+) + +export default Product \ No newline at end of file -- cgit v1.2.3 From 69f55de26319e570ce0a8c4dbe8a29cb0d0b51c5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 18 Feb 2023 22:03:55 +0700 Subject: optimization --- src/lib/product/components/Product.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 2a3624e7..299cdc77 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -87,7 +87,7 @@ const Product = ({ product }) => { {product.name}
-- cgit v1.2.3 From 75767ed41d28947429f3dbef9c7e128ebc552e64 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 18 Feb 2023 22:18:46 +0700 Subject: change animation --- src/lib/product/components/Product.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 299cdc77..396eba5f 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -48,7 +48,7 @@ const Product = ({ product }) => { if (selectedVariant) { const variant = product.variants.find(variant => variant.id == selectedVariant.value) const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : '' - console.log(variant); + setActiveVariant({ id: variant.id, code: variant.code, -- cgit v1.2.3 From d22df6bd30b8ed4bcfa938dcbbedc5fc376c2304 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 10:49:35 +0700 Subject: cart refactor --- src/lib/product/components/Product.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 396eba5f..39d29d4d 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -8,7 +8,7 @@ import Select from "react-select" import ProductSimilar from "./ProductSimilar" import LazyLoad from "react-lazy-load" import { toast } from "react-hot-toast" -import { addItemCart } from "@/core/utils/cart" +import { updateItemCart } from "@/core/utils/cart" const informationTabOptions = [ { value: 'specification', label: 'Spesifikasi' }, @@ -75,7 +75,7 @@ const Product = ({ product }) => { toast.error('Jumlah barang minimal 1') return } - addItemCart({ + updateItemCart({ productId: activeVariant.id, quantity }) @@ -98,7 +98,7 @@ const Product = ({ product }) => { { activeVariant?.price?.discountPercentage > 0 && (
- {currencyFormat(activeVariant?.price?.priceDiscount)} + {currencyFormat(activeVariant?.price?.price)}
{activeVariant?.price?.discountPercentage}% @@ -106,7 +106,7 @@ const Product = ({ product }) => {
) }

- { activeVariant?.price?.price > 0 ? currencyFormat(activeVariant?.price?.price) : ( + { activeVariant?.price?.priceDiscount > 0 ? currencyFormat(activeVariant?.price?.priceDiscount) : ( Hubungi kami untuk dapatkan harga terbaik,  klik disini -- cgit v1.2.3 From 525166e62b793b351d1a6be2421c0a33b22f7b7b Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 11:35:25 +0700 Subject: cart refactor --- src/lib/product/components/Product.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 39d29d4d..92f4e37d 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -245,7 +245,7 @@ const Product = ({ product }) => { } const TabButton = ({ children, active, ...props }) => { - const activeClassName = active ? 'text-red_r-11 border-b border-red_r-11' : 'text-gray_r-11' + const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11' return ( -

@@ -164,78 +157,70 @@ const Product = ({ product }) => { -
-

Informasi Produk

-
- { informationTabOptions.map((option) => ( - +

Informasi Produk

+
+ {informationTabOptions.map((option) => ( + setInformationTab(option.value)} > {option.label} - )) } + ))}
- - + {product?.variantTotal} Varian - + SKU-{product?.id} - + {activeVariant?.code || '-'} - - - { activeVariant?.stock > 0 && ( - -
Ready Stock
-
- { activeVariant?.stock > 5 ? '> 5' : '< 5' } -
+ + + {activeVariant?.stock > 0 && ( + +
Ready Stock
+
{activeVariant?.stock > 5 ? '> 5' : '< 5'}
 - ) } - { activeVariant?.stock == 0 && ( - + )} + {activeVariant?.stock == 0 && ( + Tanya Stok - ) } - - - { activeVariant?.weight > 0 && ( - { activeVariant?.weight } KG - ) } - { activeVariant?.weight == 0 && ( - + )} + + + {activeVariant?.weight > 0 && {activeVariant?.weight} KG} + {activeVariant?.weight == 0 && ( + Tanya Berat - ) } - + )} +
-
-

Kamu Mungkin Juga Suka

+
+

Kamu Mungkin Juga Suka

@@ -247,30 +232,23 @@ const Product = ({ product }) => { const TabButton = ({ children, active, ...props }) => { const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11' return ( - ) } const TabContent = ({ children, active, className, ...props }) => ( -
- { children } +
+ {children}
) const SpecificationContent = ({ children, label }) => ( -
- { label } - { children } +
+ {label} + {children}
) -export default Product \ No newline at end of file +export default Product -- cgit v1.2.3 From 8cfb615556e67408d7afb6d9694b2407447085ff Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 23:34:50 +0700 Subject: fix --- src/lib/product/components/Product.jsx | 81 +++++++++++++++++++++++++++++----- 1 file changed, 71 insertions(+), 10 deletions(-) (limited to 'src/lib/product/components/Product.jsx') diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 2181c38e..9e33316c 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -9,6 +9,11 @@ import ProductSimilar from './ProductSimilar' import LazyLoad from 'react-lazy-load' import { toast } from 'react-hot-toast' import { updateItemCart } from '@/core/utils/cart' +import useWishlist from '@/lib/wishlist/hooks/useWishlist' +import { HeartIcon } from '@heroicons/react/24/outline' +import useAuth from '@/core/hooks/useAuth' +import { useRouter } from 'next/router' +import createOrDeleteWishlistApi from '@/lib/wishlist/api/createOrDeleteWishlistApi' const informationTabOptions = [ { value: 'specification', label: 'Spesifikasi' }, @@ -17,6 +22,9 @@ const informationTabOptions = [ ] const Product = ({ product }) => { + const auth = useAuth() + const router = useRouter() + const { wishlist } = useWishlist({ productId: product?.id }) const [quantity, setQuantity] = useState('1') const [selectedVariant, setSelectedVariant] = useState(null) const [informationTab, setInformationTab] = useState(null) @@ -82,6 +90,21 @@ const Product = ({ product }) => { toast.success('Berhasil menambahkan ke keranjang') } + const toggleWishlist = async () => { + if (!auth) { + router.push('/login') + return + } + const data = { product_id: product.id } + await createOrDeleteWishlistApi({ data }) + if (wishlist.data.productTotal > 0) { + toast.success('Berhasil menghapus dari wishlist') + } else { + toast.success('Berhasil menambahkan ke wishlist') + } + wishlist.refetch() + } + return ( <> { />
- - {product.manufacture?.name} - +
+ {product.manufacture?.name ? ( + {product.manufacture?.name} + ) : ( +
-
+ )} + +

{activeVariant?.name}

{activeVariant?.price?.discountPercentage > 0 && (
@@ -109,7 +147,10 @@ const Product = ({ product }) => { ) : ( Hubungi kami untuk dapatkan harga terbaik,  - + klik disini @@ -146,10 +187,17 @@ const Product = ({ product }) => { onChange={(e) => setQuantity(e.target.value)} />
- -
@@ -193,7 +241,10 @@ const Product = ({ product }) => { )} {activeVariant?.stock == 0 && ( - + Tanya Stok )} @@ -201,7 +252,10 @@ const Product = ({ product }) => { {activeVariant?.weight > 0 && {activeVariant?.weight} KG} {activeVariant?.weight == 0 && ( - + Tanya Berat )} @@ -232,14 +286,21 @@ const Product = ({ product }) => { const TabButton = ({ children, active, ...props }) => { const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11' return ( - ) } const TabContent = ({ children, active, className, ...props }) => ( -
+
{children}
) -- cgit v1.2.3