From bbc333053b2cb963f8a16cecb4d7f15a0111daf2 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 22 Jun 2023 11:02:53 +0700 Subject: page variant --- .../components/Product/ProductDesktopVariant.jsx | 348 +++++++++++++++++++++ 1 file changed, 348 insertions(+) create mode 100644 src/lib/product/components/Product/ProductDesktopVariant.jsx (limited to 'src/lib/product/components/Product/ProductDesktopVariant.jsx') diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx new file mode 100644 index 00000000..a98985c9 --- /dev/null +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -0,0 +1,348 @@ +import Image from '@/core/components/elements/Image/Image' +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 { 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 { useRouter } from 'next/router' +import { createSlug } from '@/core/utils/slug' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import ProductCard from '../ProductCard' +import productSimilarApi from '../../api/productSimilarApi' +import whatsappUrl from '@/core/utils/whatsappUrl' + +const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => { + const router = useRouter() + + const [lowestPrice, setLowestPrice] = useState(null) + + const [addCartAlert, setAddCartAlert] = useState(false) + + const getLowestPrice = useCallback(() => { + const lowest = product.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([]) + + const setVariantQuantityRef = (variantId) => (element) => { + variantQuantityRefs.current[variantId] = element + } + + const validQuantity = (quantity) => { + let isValid = true + if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) { + toast.error('Jumlah barang minimal 1') + isValid = false + } + return isValid + } + + const handleAddToCart = (variant) => { + const quantity = variantQuantityRefs.current[variant].value + if (!validQuantity(quantity)) return + updateItemCart({ + productId: variant, + quantity, + selected: true + }) + setAddCartAlert(true) + } + + const handleBuy = (variant) => { + const quantity = variantQuantityRefs.current[variant].value + if (!validQuantity(quantity)) return + router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`) + } + + const variantSectionRef = useRef(null) + const goToVariantSection = () => { + if (variantSectionRef.current) { + const position = variantSectionRef.current.getBoundingClientRect() + window.scrollTo({ + top: position.top - 120 + window.pageYOffset, + behavior: 'smooth' + }) + } + } + + const productSimilarQuery = [ + product?.name, + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}` + ].join('&') + + const [productSimilarInBrand, setProductSimilarInBrand] = useState(null) + + useEffect(() => { + const loadProductSimilarInBrand = async () => { + const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&') + const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery }) + setProductSimilarInBrand(dataProductSimilar.products) + } + if (!productSimilarInBrand) loadProductSimilarInBrand() + }, [product, productSimilarInBrand]) + + return ( + +
+
+
+
+ {product.name} +
+ +
+

{product?.name}

+
+
+
Nomor SKU
+
SKU-{product.id}
+
+
+
Part Number
+
{product.code || '-'}
+
+
+
Manufacture
+
+ {product.manufacture?.name ? ( + + {product.manufacture?.name} + + ) : ( +
-
+ )} +
+
+
+
Berat Barang
+
+ {product?.weight > 0 && {product?.weight} KG} + {product?.weight == 0 && ( + + Tanya Berat + + )} +
+
+
+
+ + {/*
+
+
Informasi Produk
+
+ {informationTabOptions.map((option) => ( + setInformationTab(option.value)} + > + {option.label} + + ))} +
+
+
+ + + + + + Belum ada informasi. + +
+
+
+
*/} +
+ +
+ {lowestPrice?.discountPercentage > 0 && ( +
+
+ {lowestPrice?.discountPercentage}% +
+
+ {currencyFormat(lowestPrice?.price * 1.11)} +
+
+ )} +

+ {currencyFormat(lowestPrice?.priceDiscount)} +

+

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

+ +
+ + + +
+ +
+ +
+ +
+
+ Produk Serupa +
+
+ {productSimilarInBrand && + productSimilarInBrand?.map((product) => ( +
+ +
+ ))} +
+
+
+
+ +
+
Kamu Mungkin Juga Suka
+ + + +
+ + setAddCartAlert(false)} + > +
+
+ {product.name} +
+
{product.name}
+
+ + Lihat Keranjang + +
+
+ +
+
Kamu Mungkin Juga Suka
+ + + +
+ +
+ + ) +} + +const informationTabOptions = [ + { value: 'description', label: 'Deskripsi' }, + { value: 'information', label: 'Info Penting' } +] + +const TabButton = ({ children, active, ...props }) => { + const activeClassName = active + ? 'text-danger-500 underline underline-offset-4' + : 'text-gray_r-12/80' + return ( + + ) +} + +const TabContent = ({ children, active, className = '', ...props }) => ( +
+ {children} +
+) + +export default ProductDesktopVariant -- cgit v1.2.3