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 --- .../product-detail/components/Information.tsx | 126 ++++++++++++++++----- 1 file changed, 100 insertions(+), 26 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') 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; -- cgit v1.2.3 From f8133c76306d9f70e01ac510c74dcfabe7f79b37 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Mon, 26 Aug 2024 10:47:28 +0700 Subject: new product template --- .../product-detail/components/Information.tsx | 41 +++++++++++++++++----- 1 file changed, 32 insertions(+), 9 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') 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
-- 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 ++++++++++++++-------- 1 file changed, 26 insertions(+), 14 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') 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} + ) : ( '-' -- 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 +++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) (limited to 'src-migrate/modules/product-detail/components/Information.tsx') 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 (
-