From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src2/pages/shop/product/[slug].js | 305 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 305 insertions(+) create mode 100644 src2/pages/shop/product/[slug].js (limited to 'src2/pages/shop/product') diff --git a/src2/pages/shop/product/[slug].js b/src2/pages/shop/product/[slug].js new file mode 100644 index 00000000..61692c1c --- /dev/null +++ b/src2/pages/shop/product/[slug].js @@ -0,0 +1,305 @@ +import Link from "@/components/elements/Link" +import { useRouter } from "next/router" +import { useEffect, useState } from "react" +import Header from "@/components/layouts/Header" +import apiOdoo from "@/core/utils/apiOdoo" +import { createSlug, getIdFromSlug } from "@/core/utils/slug" +import currencyFormat from "@/core/utils/currencyFormat" +import Layout from "@/components/layouts/Layout" +import { createOrUpdateItemCart } from "@/core/utils/cart" +import toast from "react-hot-toast" +import Footer from "@/components/layouts/Footer" +import Image from "@/components/elements/Image" +import LineDivider from "@/components/elements/LineDivider" +import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid" +import { useAuth } from "@/core/utils/auth" +import { HeartIcon } from "@heroicons/react/24/outline" +import LazyLoad from "react-lazy-load" +import ProductSimilar from "@/components/products/ProductSimilar" + +export async function getServerSideProps( context ) { + const { slug } = context.query + let product = await apiOdoo('GET', '/api/v1/product/' + getIdFromSlug(slug)) + if (product?.length == 1) { + product = product[0] + product.description = product.description.replaceAll('

', '||p||') + product.description = product.description.replaceAll('

', '||/p||') + product.description = product.description.replace(/(<([^>]+)>)/gi, ' ') + product.description = product.description.replaceAll('||p||', '

') + product.description = product.description.replaceAll('||/p||', '

') + product.description = product.description.trim() + } + return { props: { product } } +} + +export default function ProductDetail({ product }) { + const [ auth ] = useAuth() + const router = useRouter() + const { slug } = router.query + const [selectedVariant, setSelectedVariant] = useState("") + const [quantity, setQuantity] = useState("1") + const [activeVariant, setActiveVariant] = useState({ + id: product.id, + code: product.code, + price: product.lowest_price, + stock: product.stock_total, + weight: product.weight, + attributes: '', + }) + + const [ isAddedToWishlist, setAddedToWishlist ] = useState(false) + const [ activeTab, setActiveTab ] = useState('specification') + + const addOrDeleteWishlist = async () => { + if (auth) { + await apiOdoo('POST', `/api/v1/user/${auth.id}/wishlist/create-or-delete`, { + product_id: product.id + }) + if (isAddedToWishlist) { + toast.success('Berhasil menghapus dari wishlist') + } else { + toast.success('Berhasil menambahkan ke wishlist') + } + setAddedToWishlist(!isAddedToWishlist) + } else { + toast.error('Login terlebih dahulu untuk melanjutkan') + router.push('/login') + } + } + + useEffect(() => { + if (auth) { + const checkWishlist = async () => { + const wishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist?product_id=${product.id}`) + setAddedToWishlist(wishlist.product_total > 0 ? true : false) + } + checkWishlist() + } + }, [ auth, product ]) + + useEffect(() => { + if (product.variants.length == 1) { + setSelectedVariant(product.variants[0].id) + } + }, [ product ]) + + useEffect(() => { + if (selectedVariant != '') { + let newActiveVariant = product.variants.filter((variant) => { + return variant.id == selectedVariant + }) + + if (newActiveVariant.length == 1) { + newActiveVariant = newActiveVariant[0] + setActiveVariant({ + id: newActiveVariant.id, + code: newActiveVariant.code, + price: newActiveVariant.price, + stock: newActiveVariant.stock, + weight: newActiveVariant.weight, + attributes: newActiveVariant.attributes.join(', '), + }) + } + } + }, [selectedVariant, product]) + + const onchangeVariant = (e) => { + setSelectedVariant(e.target.value) + } + + const onChangeQuantity = (e) => { + let inputValue = e.target.value + inputValue = parseInt(inputValue) + inputValue = Math.floor(inputValue) + setQuantity(inputValue) + } + + const addItemToCart = () => { + if (product.variant_total > 1 && !selectedVariant) { + toast.error('Pilih varian terlebih dahulu untuk menambahkan ke keranjang', { duration: 2000 }) + return false + } + + if (quantity > 0) { + toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 }) + createOrUpdateItemCart(activeVariant.id, parseInt(quantity)) + } else { + toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 }) + } + + return true + } + + const checkoutProduct = () => { + if (!auth) { + toast.error('Login terlebih dahulu untuk melanjutkan', { duration: 2000 }) + router.push('/login') + return + } + if (product.variant_total > 1 && !selectedVariant) { + toast.error('Pilih varian terlebih dahulu untuk melanjutkan pembelian', { duration: 2000 }) + return + } + if (quantity < 0) { + toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 }) + return + } + router.push(`/shop/checkout?product_id=${activeVariant.id}&qty=${quantity}`) + } + + const TabButton = ({ children, name }) => ( + + ) + + return ( + <> +
+ + {product.name} + +
+
+
+ + {product.manufacture.name ?? '-'} + +

{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}

+
+ +
+ + {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? ( +

Harga mulai dari:

+ ) : ''} + + {product.lowest_price.discount_percentage > 0 ? ( +
+

{currencyFormat(activeVariant.price.price)}

+ {activeVariant.price.discount_percentage}% +
+ ) : ''} + + {product.lowest_price.price > 0 ? ( +

{currencyFormat(activeVariant.price.price_discount)}

+ ) : ( +

Dapatkan harga terbaik, hubungi kami.

+ )} +
+ + + +
+
+ + +
+ + +
+ + + + +
+
+ + + +
+

Informasi Produk

+
+ Spesifikasi + Deskripsi + Info Penting +
+ +
+ +

{product.variant_total} Varian

+ + +

SKU-{activeVariant.id}

+ + +

{activeVariant.code}

+ + +
+ {activeVariant.stock > 0 ? (activeVariant.stock > 5 && ( + <> +
Ready Stock
+
{activeVariant.stock > 5 ? '> 5' : '< 5'}
+ + )) : '0'} +
+ + +

{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG

+ +
+ +
+
+ + + + + + + +