From 948914e88fa6849ec3be1cd88113dc7febeda577 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 22 Aug 2024 14:16:57 +0700 Subject: update template detail product --- package.json | 3 +- .../product-detail/components/Information.tsx | 126 ++++++++++--- .../product-detail/components/PriceAction.tsx | 45 +++-- .../product-detail/components/ProductDetail.tsx | 194 +++++++++++---------- .../product-detail/stores/useProductDetail.ts | 12 ++ src/pages/_app.jsx | 2 +- 6 files changed, 242 insertions(+), 140 deletions(-) diff --git a/package.json b/package.json index 28fbc5d8..98d4077c 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@chakra-ui/next-js": "^2.1.5", "@chakra-ui/react": "^2.8.1", + "@choc-ui/chakra-autocomplete": "^5.6.2", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@heroicons/react": "^2.0.13", @@ -25,7 +26,7 @@ "clsx": "^2.0.0", "cookies-next": "^2.1.1", "flowbite": "^1.6.4", - "framer-motion": "^7.10.3", + "framer-motion": "^11.3.28", "http-proxy-middleware": "^3.0.0", "lodash-contrib": "^4.1200.1", "lucide-react": "^0.279.0", diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 75ae3c41..5d70e534 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -1,56 +1,130 @@ -import style from '../styles/information.module.css' +import style from '../styles/information.module.css'; +import { + AutoComplete, + AutoCompleteInput, + AutoCompleteItem, + AutoCompleteList, +} from '@choc-ui/chakra-autocomplete'; -import React from 'react' -import dynamic from 'next/dynamic' -import Link from 'next/link' -import { useQuery } from 'react-query' +import React, { useEffect, useState } from 'react'; +import dynamic from 'next/dynamic'; +import Link from 'next/link'; +import { useQuery } from 'react-query'; -import { IProductDetail } from '~/types/product' -import { IProductVariantSLA } from '~/types/productVariant' -import { createSlug } from '~/libs/slug' -import { getVariantSLA } from '~/services/productVariant' -import { formatToShortText } from '~/libs/formatNumber' +import { IProductDetail } from '~/types/product'; +import { IProductVariantSLA } from '~/types/productVariant'; +import { createSlug } from '~/libs/slug'; +import { getVariantSLA } from '~/services/productVariant'; +import { formatToShortText } from '~/libs/formatNumber'; +import currencyFormat from '@/core/utils/currencyFormat'; +import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react'; +import { CheckIcon, ChevronDownIcon, FingerPrintIcon } from '@heroicons/react/24/outline'; +import { useProductDetail } from '../stores/useProductDetail'; -const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton)) +const Skeleton = dynamic(() => + import('@chakra-ui/react').then((mod) => mod.Skeleton) +); type Props = { - product: IProductDetail -} + product: IProductDetail; +}; const Information = ({ product }: Props) => { + const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail() + const variantOptions = product?.variants; + const querySLA = useQuery({ - queryKey: ['variant-sla', product.variants[0]?.id], - queryFn: () => getVariantSLA(product.variants[0].id), - enabled: product.variant_total === 1 - }) + queryKey: ['variant-sla', selectedVariant?.id], + queryFn: () => getVariantSLA(selectedVariant?.id), + enabled: selectedVariant?.id === 1, + }); + const sla = querySLA?.data; + + useEffect(() => { + setSla(querySLA?.data); + }, [selectedVariant]); - const sla = querySLA?.data + const handleOnChange = (vals: any) => { + let code = vals.split(" ")[0]; + let variant = variantOptions.find((item) => item.code === code); + setSelectedVariant(variant); + } return (
+
+ + handleOnChange(vals)}> + + + + + + + + + {variantOptions.map((option, cid) => ( + +
+
+ {option.code + ' - ' + option.attributes[0]} +
+
+
+ {Math.floor(option?.price?.discount_percentage)}% +
+
+ {currencyFormat(option?.price?.price)} +
+
+ {currencyFormat(option?.price?.price_discount)} +
+
+
+ + ))} + + +
-
SKU Number
-
SKU-{product.id}
+
Item Code
+
{selectedVariant?.code}
Manufacture
{!!product.manufacture.name ? ( {product.manufacture.name} - ) : '-'} + ) : ( + '-' + )}
Terjual
-
{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
+
+ {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'} +
+
+
+
Persiapan Barang
+
{sla?.sla_date}
- ) -} + ); +}; -export default Information \ No newline at end of file +export default Information; diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 81271f6e..405eb12b 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -22,23 +22,22 @@ const PriceAction = ({ product }: Props) => { askAdminUrl, isApproval, setIsApproval, + selectedVariant, + sla, } = useProductDetail(); useEffect(() => { - setActive(product.variants[0]) - if(product.variants.length > 2 && product.variants[0].price.price === 0){ - const variants = product.variants + setActive(selectedVariant); + if (product.variants.length > 2 && product.variants[0].price.price === 0) { + const variants = product.variants; for (let i = 0; i < variants.length; i++) { - if(variants[i].price.price > 0){ - setActive(variants[i]) + if (variants[i].price.price > 0) { + setActive(variants[i]); break; } } } - - }, [product, setActive]); - - + }, [product, setActive, selectedVariant]); return (
{ )} +
+
+
+ + setQuantityInput(e.target.value)} + className={style['quantity-input']} + /> +
+
+ Stock : {sla?.qty} +
+
- - setQuantityInput(e.target.value)} - className={style['quantity-input']} - /> { - const { isDesktop, isMobile } = useDevice() - const router = useRouter() - const auth = getAuth() - const { setAskAdminUrl, askAdminUrl, activeVariantId, setIsApproval, isApproval } = useProductDetail() + const { isDesktop, isMobile } = useDevice(); + const router = useRouter(); + const auth = getAuth(); + const { + setAskAdminUrl, + askAdminUrl, + activeVariantId, + setIsApproval, + isApproval, + setSelectedVariant, + } = useProductDetail(); useEffect(() => { gtagProductDetail(product); - },[product]) + }, [product]); useEffect(() => { const createdAskUrl = whatsappUrl({ @@ -48,76 +55,43 @@ const ProductDetail = ({ product }: Props) => { payload: { manufacture: product.manufacture.name, productName: product.name, - url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath + url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, }, - fallbackUrl: router.asPath - }) + fallbackUrl: router.asPath, + }); - setAskAdminUrl(createdAskUrl) - }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]) + setAskAdminUrl(createdAskUrl); + }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]); useEffect(() => { if (typeof auth === 'object') { setIsApproval(auth?.feature?.soApproval); } + setSelectedVariant(product?.variants[0]) }, []); return ( <>
-
+
-
+
-

- {product.name} -

+

{product.name}

- -
- - - - - - - -
-
@@ -129,7 +103,9 @@ const ProductDetail = ({ product }: Props) => { )}
- {!!activeVariantId && !isApproval && } + {!!activeVariantId && !isApproval && ( + + )}

@@ -142,27 +118,61 @@ const ProductDetail = ({ product }: Props) => {
-

- Informasi Produk -

+

Informasi Produk


' ? 'Belum ada deskripsi' : product.description }} + dangerouslySetInnerHTML={{ + __html: + !product.description || product.description == '


' + ? 'Belum ada deskripsi' + : product.description, + }} />
{isDesktop && ( -
+
+
+ + + | + + + + | + + + + +
- -
- Produk Serupa -
+
Produk Serupa
@@ -171,9 +181,7 @@ const ProductDetail = ({ product }: Props) => { )}
-
- Kamu Mungkin Juga Suka -
+
Kamu Mungkin Juga Suka
@@ -185,7 +193,7 @@ const ProductDetail = ({ product }: Props) => {
- ) -} + ); +}; -export default ProductDetail \ No newline at end of file +export default ProductDetail; diff --git a/src-migrate/modules/product-detail/stores/useProductDetail.ts b/src-migrate/modules/product-detail/stores/useProductDetail.ts index eb409930..dee6b342 100644 --- a/src-migrate/modules/product-detail/stores/useProductDetail.ts +++ b/src-migrate/modules/product-detail/stores/useProductDetail.ts @@ -7,6 +7,8 @@ type State = { quantityInput: string; askAdminUrl: string; isApproval : boolean; + selectedVariant : any; + sla : any; }; type Action = { @@ -14,6 +16,8 @@ type Action = { setQuantityInput: (value: string) => void; setAskAdminUrl: (url: string) => void; setIsApproval : (value : boolean) => void; + setSelectedVariant : (value : any) => void; + setSla : (value : any) => void; }; export const useProductDetail = create((set, get) => ({ @@ -22,6 +26,8 @@ export const useProductDetail = create((set, get) => ({ quantityInput: '1', askAdminUrl: '', isApproval : false, + selectedVariant: null, + sla : null, setActive: (variant) => { set({ activeVariantId: variant?.id, activePrice: variant?.price }); }, @@ -33,5 +39,11 @@ export const useProductDetail = create((set, get) => ({ }, setIsApproval : (value : boolean) => { set({ isApproval : value }) + }, + setSelectedVariant : (value : any) => { + set({ selectedVariant : value }) + }, + setSla : (value : any ) => { + set({ sla : value }) } })); diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index bcb41dd6..f52aa5f7 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -85,7 +85,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( - + {animateLoader && ( Date: Mon, 26 Aug 2024 10:47:28 +0700 Subject: new product template --- .../product-detail/components/Information.tsx | 41 +++++++++++++++++----- .../product-detail/components/PriceAction.tsx | 33 ++++++++++++----- .../product-detail/components/ProductDetail.tsx | 4 +-- .../product-detail/styles/price-action.module.css | 2 +- src-migrate/types/product.ts | 1 + 5 files changed, 61 insertions(+), 20 deletions(-) diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 5d70e534..c7f21d62 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -18,7 +18,11 @@ import { getVariantSLA } from '~/services/productVariant'; import { formatToShortText } from '~/libs/formatNumber'; import currencyFormat from '@/core/utils/currencyFormat'; import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react'; -import { CheckIcon, ChevronDownIcon, FingerPrintIcon } from '@heroicons/react/24/outline'; +import { + CheckIcon, + ChevronDownIcon, + FingerPrintIcon, +} from '@heroicons/react/24/outline'; import { useProductDetail } from '../stores/useProductDetail'; const Skeleton = dynamic(() => @@ -30,39 +34,52 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail() + const { selectedVariant, setSelectedVariant, setSla, setActive } = + useProductDetail(); const variantOptions = product?.variants; const querySLA = useQuery({ queryKey: ['variant-sla', selectedVariant?.id], queryFn: () => getVariantSLA(selectedVariant?.id), - enabled: selectedVariant?.id === 1, + refetchOnWindowFocus: false, }); const sla = querySLA?.data; + console.log('sla', querySLA, selectedVariant); useEffect(() => { setSla(querySLA?.data); }, [selectedVariant]); const handleOnChange = (vals: any) => { - let code = vals.split(" ")[0]; + let code = vals.split(' ')[0]; let variant = variantOptions.find((item) => item.code === code); setSelectedVariant(variant); - } + }; return (
- - handleOnChange(vals)}> + + handleOnChange(vals)} + > - + - + {variantOptions.map((option, cid) => ( { )}
+
+
Berat Barang
+
+ {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'} +
+
Terjual
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 405eb12b..b46afac9 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -39,6 +39,18 @@ const PriceAction = ({ product }: Props) => { } }, [product, setActive, selectedVariant]); + let voucherPastiHemat = 0; + + if ( + product?.voucher_pasti_hemat + ? product?.voucher_pasti_hemat.length + : voucherPastiHemat > 0 + ) { + const stringVoucher = product?.voucher_pasti_hemat[0]; + const validJsonString = stringVoucher.replace(/'/g, '"'); + voucherPastiHemat = JSON.parse(validJsonString); + } + return (
{ - setQuantityInput(e.target.value)} - className={style['quantity-input']} - /> +
+ setQuantityInput(e.target.value)} + className={style['quantity-input']} + /> +
- Stock : {sla?.qty} + + {' '} + Stock : {sla?.qty}{' '} +
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 0997466c..c19c288a 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -107,13 +107,13 @@ const ProductDetail = ({ product }: Props) => { )} -
+ {/*

Variant ({product.variant_total})

-
+
*/}
diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css index 651de958..de69f5f1 100644 --- a/src-migrate/modules/product-detail/styles/price-action.module.css +++ b/src-migrate/modules/product-detail/styles/price-action.module.css @@ -8,7 +8,7 @@ @apply flex gap-x-2.5; } .quantity-input { - @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none; + @apply px-2 rounded text-center border border-gray-300 w-24 h-10 focus:outline-none; } .contact-us { diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts index 681cdc8e..927a0ca3 100644 --- a/src-migrate/types/product.ts +++ b/src-migrate/types/product.ts @@ -31,6 +31,7 @@ export interface IProduct { id: number; name: string; }; + voucher_pasti_hemat : any; } export interface IProductDetail extends IProduct { -- cgit v1.2.3 From 914729a0d6ba9a9dd32d308954642439fa88c1d2 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Mon, 9 Sep 2024 13:37:36 +0700 Subject: add manufacture logd --- .../product-detail/components/Information.tsx | 40 ++++++++++++++-------- src-migrate/types/product.ts | 1 + src/utils/solrMapping.js | 3 +- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index c7f21d62..5df81dae 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -24,6 +24,7 @@ import { FingerPrintIcon, } from '@heroicons/react/24/outline'; import { useProductDetail } from '../stores/useProductDetail'; +import Image from 'next/image'; const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton) @@ -34,20 +35,24 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, setActive } = + const { selectedVariant, setSelectedVariant, setSla, setActive, sla } = useProductDetail(); const variantOptions = product?.variants; - const querySLA = useQuery({ - queryKey: ['variant-sla', selectedVariant?.id], - queryFn: () => getVariantSLA(selectedVariant?.id), - refetchOnWindowFocus: false, - }); - const sla = querySLA?.data; - console.log('sla', querySLA, selectedVariant); + // const querySLA = useQuery({ + // queryKey: ['variant-sla', selectedVariant?.id], + // queryFn: () => getVariantSLA(selectedVariant?.id), + // enabled: !!selectedVariant?.id, + // }); + // const sla = querySLA?.data; + + const getsla = async () => { + const querySLA = await getVariantSLA(selectedVariant?.id); + setSla(querySLA); + }; useEffect(() => { - setSla(querySLA?.data); + getsla(); }, [selectedVariant]); const handleOnChange = (vals: any) => { @@ -71,15 +76,17 @@ const Information = ({ product }: Props) => { onChange={(vals) => handleOnChange(vals)} > - + } + /> - + {variantOptions.map((option, cid) => ( {
+
Item Code
{selectedVariant?.code}
@@ -121,9 +129,13 @@ const Information = ({ product }: Props) => { product.manufacture.name, product.manufacture.id.toString() )} - className='text-danger-500 hover:underline' > - {product.manufacture.name} + ) : ( '-' diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts index 3854f304..fb9c888c 100644 --- a/src-migrate/types/product.ts +++ b/src-migrate/types/product.ts @@ -31,6 +31,7 @@ export interface IProduct { manufacture: { id: number; name: string; + logo: string; }; voucher_pasti_hemat : any; } diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index 0d50b99b..1618c40a 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -65,7 +65,7 @@ export const productMappingSolr = (products, pricelist) => { isTkdn:product?.tkdn_b || false, isSni:product?.sni_b || false, is_in_bu:product?.is_in_bu_b || false, - voucherPastiHemat:product?.voucher_pastihemat || [] + voucherPastiHemat:product?.voucher_pastihemat || [], }; if (product.manufacture_id_i && product.manufacture_name_s) { @@ -74,6 +74,7 @@ export const productMappingSolr = (products, pricelist) => { name: product.manufacture_name_s || '', imagePromotion1: product.image_promotion_1_s || '', imagePromotion2: product.image_promotion_2_s || '', + logo : product.x_logo_manufacture_s || '', }; } -- cgit v1.2.3 From 1475593324319d1faf377f2d00a22a4b3caa3faa Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 12 Sep 2024 15:08:21 +0700 Subject: price action --- .../product-detail/components/Information.tsx | 40 +++++++++++++++------- .../product-detail/components/PriceAction.tsx | 18 ++++++++-- .../product-detail/components/ProductDetail.tsx | 2 +- src/core/components/layouts/BasicLayout.jsx | 33 +++++++++++++----- 4 files changed, 69 insertions(+), 24 deletions(-) diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 5df81dae..075ff8d1 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -25,6 +25,8 @@ import { } from '@heroicons/react/24/outline'; import { useProductDetail } from '../stores/useProductDetail'; import Image from 'next/image'; +import useDevice from '@/core/hooks/useDevice'; +import { optimizedAppearDataAttribute } from 'framer-motion'; const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton) @@ -37,6 +39,10 @@ type Props = { const Information = ({ product }: Props) => { const { selectedVariant, setSelectedVariant, setSla, setActive, sla } = useProductDetail(); + + const [inputValue, setInputValue] = useState( + selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] + ); const variantOptions = product?.variants; // const querySLA = useQuery({ @@ -59,12 +65,17 @@ const Information = ({ product }: Props) => { let code = vals.split(' ')[0]; let variant = variantOptions.find((item) => item.code === code); setSelectedVariant(variant); + setInputValue(variant?.code + ' - ' + variant?.attributes[0]); + }; + + const handleOnKeyUp = (e: any) => { + setInputValue(e.target.value); }; return (
-

)}
- - + 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 --- src-migrate/pages/shop/cart/index.tsx | 10 +- .../components/Product/ProductDesktopVariant.jsx | 185 +++++++++++---------- src/pages/api/shop/variant-detail.js | 2 +- src/pages/shop/product/variant/[slug].jsx | 7 - src/utils/solrMapping.js | 1 + 5 files changed, 109 insertions(+), 96 deletions(-) diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx index c5386c91..70a28073 100644 --- a/src-migrate/pages/shop/cart/index.tsx +++ b/src-migrate/pages/shop/cart/index.tsx @@ -35,6 +35,8 @@ const CartPage = () => { const [hasChanged, setHasChanged] = useState(false); const prevCartRef = useRef(null); + console.log('ini cart', cart); + useEffect(() => { const handleScroll = () => { setIsTop(window.scrollY < 200); @@ -84,19 +86,19 @@ const CartPage = () => { const hasSelectedPromo = useMemo(() => { if (!cart) return false; - return cart.products.some( + return cart?.products?.some( (item) => item.cart_type === 'promotion' && item.selected ); }, [cart]); const hasSelected = useMemo(() => { if (!cart) return false; - return cart.products.some((item) => item.selected); + return cart?.products?.some((item) => item.selected); }, [cart]); const hasSelectNoPrice = useMemo(() => { if (!cart) return false; - return cart.products.some( + return cart?.products?.some( (item) => item.selected && item.price.price_discount === 0 ); }, [cart]); @@ -230,7 +232,7 @@ const CartPage = () => {
- {cart?.products.map((item) => ( + {cart?.products?.map((item) => ( ))} 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} +
- {/* */} - -
+
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 + + )} +
-
+
-
+