From fa7c4c4645a90f23a59a84ea27e19dcde81ec159 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 3 Oct 2024 09:41:51 +0700 Subject: prodcut variant --- .../components/Product/ProductDesktopVariant.jsx | 146 +++++++++++++++------ 1 file changed, 103 insertions(+), 43 deletions(-) (limited to 'src/lib/product/components') diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 09b30a44..2f2caa56 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -1,7 +1,6 @@ - -import { Box, Skeleton, Tooltip } from '@chakra-ui/react'; +import { Box, Button, Skeleton, Tooltip } from '@chakra-ui/react'; import { HeartIcon } from '@heroicons/react/24/outline'; -import { Info } from 'lucide-react'; +import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react'; import { useRouter } from 'next/router'; import { useCallback, useEffect, useRef, useState } from 'react'; import { toast } from 'react-hot-toast'; @@ -22,6 +21,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'; import productSimilarApi from '../../api/productSimilarApi'; import ProductCard from '../ProductCard'; import ProductSimilar from '../ProductSimilar'; +import { RWebShare } from 'react-web-share'; const ProductDesktopVariant = ({ product, @@ -33,6 +33,8 @@ const ProductDesktopVariant = ({ const auth = useAuth(); const { slug } = router.query; + console.log('ini product variant', product); + const [lowestPrice, setLowestPrice] = useState(null); const [addCartAlert, setAddCartAlert] = useState(false); @@ -40,6 +42,8 @@ const ProductDesktopVariant = ({ const { setRefreshCart } = useProductCartContext(); + const [quantityInput, setQuantityInput] = useState(1); + const getLowestPrice = useCallback(() => { const lowest = product.price; /* const lowest = prices.reduce((lowest, price) => { @@ -160,24 +164,20 @@ const ProductDesktopVariant = ({ {product.name} -
+

{product?.name}

-
-
Nomor SKU
-
SKU-{product.id}
-
-
Part Number
-
{product.code || '-'}
+
Item Code
+
{product.code}
-
+
Manufacture
{product.manufacture?.name ? ( @@ -216,7 +216,7 @@ const ProductDesktopVariant = ({
-
+ {/*
Stock
{!product?.sla && } @@ -239,8 +239,9 @@ const ProductDesktopVariant = ({ )}
-
-
+
*/} + +
Berat Barang
{product?.weight > 0 && {product?.weight} KG} @@ -266,20 +267,23 @@ const ProductDesktopVariant = ({
-

Informasi Produk

+

+ Informasi Produk +


' + !product.parent.description || + product.parent.description == '


' ? 'Belum ada deskripsi' : product.parent.description, }} />
-
+
{product?.isFlashsale > 0 && product?.price?.discountPercentage > 0 ? ( <> @@ -338,39 +342,95 @@ const ProductDesktopVariant = ({ )}
- - + setQuantityInput(e.target.value)} + className=' w-24 h-10 text-center border border-gray-300 rounded focus:outline-none' + /> + +
+
+
+ - +
- +
+ + + | + + + + | + + + + +
-- cgit v1.2.3 From ca30c28dd0b19977eb771fc32ff5e520cdef1068 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 3 Oct 2024 16:47:37 +0700 Subject: product varian --- .../components/Product/ProductDesktopVariant.jsx | 185 +++++++++++---------- 1 file changed, 101 insertions(+), 84 deletions(-) (limited to 'src/lib/product/components') diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index 2f2caa56..55effdfb 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -18,10 +18,13 @@ import currencyFormat from '@/core/utils/currencyFormat'; import { createSlug } from '@/core/utils/slug'; import whatsappUrl from '@/core/utils/whatsappUrl'; +import { RWebShare } from 'react-web-share'; import productSimilarApi from '../../api/productSimilarApi'; import ProductCard from '../ProductCard'; import ProductSimilar from '../ProductSimilar'; -import { RWebShare } from 'react-web-share'; +import ProductPromoSection from '~/modules/product-promo/components/Section'; + +const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST; const ProductDesktopVariant = ({ product, @@ -44,11 +47,18 @@ const ProductDesktopVariant = ({ const [quantityInput, setQuantityInput] = useState(1); + const createdAskUrl = whatsappUrl({ + template: 'product', + payload: { + manufacture: product.manufacture.name, + productName: product.name, + url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, + }, + fallbackUrl: router.asPath, + }); + 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]); @@ -81,7 +91,7 @@ const ProductDesktopVariant = ({ router.push(`/login?next=/shop/product/${slug}`); return; } - const quantity = variantQuantityRefs.current[product.id].value; + const quantity = quantityInput; if (!validQuantity(quantity)) return; updateItemCart({ productId: product.id, @@ -96,7 +106,7 @@ const ProductDesktopVariant = ({ }; const handleBuy = (variant) => { - const quantity = variantQuantityRefs.current[product.id].value; + const quantity = quantityInput; if (!validQuantity(quantity)) return; updateItemCart({ @@ -177,71 +187,26 @@ const ProductDesktopVariant = ({
Item Code
{product.code}
-
+
Manufacture
- {product.manufacture?.name ? ( - - {product.manufacture?.name} - - ) : ( -
-
- )} -
-
- -
-
- Persiapan Barang -
-
- {!product?.sla && } - {product?.sla && ( - - - {product?.sla?.slaDate} - - - - )} + + {product.manufacture.name} +
- {/*
-
Stock
-
- {!product?.sla && } - {product?.sla?.qty > 0 && {product?.sla?.qty}} - {product?.sla?.qty == 0 && ( - - Tanya Admin - - )} -
-
*/} - -
+
Berat Barang
{product?.weight > 0 && {product?.weight} KG} @@ -263,24 +228,52 @@ const ProductDesktopVariant = ({ )}
+
+
Terjual
+
-
+
+ +
+
+ Persiapan Barang +
+
+ {!product?.sla && } + {product?.sla && ( + + + {product?.sla?.slaDate} + + + + )} +
+
-
-

- Informasi Produk -

-
-

' - ? 'Belum ada deskripsi' - : product.parent.description, - }} - /> +
+ + +
+

+ Informasi Produk +

+
+

' + ? 'Belum ada deskripsi' + : product.parent.description, + }} + /> +
@@ -341,7 +334,7 @@ const ProductDesktopVariant = ({ )} )} -
+
+
+ + {' '} + Stock : {product?.sla?.qty}{' '} + +
+
+ {product?.sla?.qty > 0 && ( + + pickup now + + )} +
-
+
-
+