From 517dce1136351f57e68e08f632635ac0a1ab6bff Mon Sep 17 00:00:00 2001 From: Mqdd Date: Mon, 15 Dec 2025 13:10:42 +0700 Subject: fix bug select variant --- .../product-detail/components/Information.tsx | 145 ++++++++++----------- .../product-detail/components/ProductDetail.tsx | 12 ++ 2 files changed, 78 insertions(+), 79 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index a7a58cbc..813b6bf5 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -11,12 +11,11 @@ import Link from 'next/link'; import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react'; +import { InputGroup, InputRightElement } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; -import { getVariantSLA } from '~/services/productVariant'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import useVariant from '../hook/useVariant'; @@ -30,67 +29,57 @@ type Props = { }; const Information = ({ product }: Props) => { - const { selectedVariant, setSelectedVariant, setSla, setActive, sla } = + const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); - const [inputValue, setInputValue] = useState( - selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] - ); + const [inputValue, setInputValue] = useState(''); const [disableFilter, setDisableFilter] = useState(false); const inputRef = useRef(null); - const [variantOptions, setVariantOptions] = useState( - product?.variants - ); + // source of truth + const variantOptions = product.variants; + const variantId = selectedVariant?.id; const { slaVariant, isLoading } = useVariant({ variantId }); - // let variantOptions = product?.variants; - - // const querySLA = useQuery({ - // queryKey: ['variant-sla', selectedVariant?.id], - // queryFn: () => getVariantSLA(selectedVariant?.id), - // enabled: !!selectedVariant?.id, - // }); - // const sla = querySLA?.data; - + /* ====================== + * Sync input text + * ====================== */ useEffect(() => { - if (selectedVariant) { - setInputValue( - selectedVariant?.code + - (selectedVariant?.attributes[0] - ? ' - ' + selectedVariant?.attributes[0] - : '') - ); - } + if (!selectedVariant) return; + + setInputValue( + selectedVariant.code + + (selectedVariant.attributes?.[0] + ? ` - ${selectedVariant.attributes[0]}` + : '') + ); }, [selectedVariant]); + /* ====================== + * Sync SLA + * ====================== */ useEffect(() => { - if (isLoading){ + if (isLoading) { setSla(null); + return; } if (slaVariant) { setSla(slaVariant); } - }, [slaVariant, isLoading]); - + }, [slaVariant, isLoading, setSla]); - const handleOnChange = (vals: any) => { + /* ====================== + * Handlers + * ====================== */ + const handleOnChange = (value: string) => { setDisableFilter(true); - let code = vals.replace(/\s-\s.*$/, '').trim(); - let variant = variantOptions.find((item) => item.code === code); + + const variant = variantOptions.find((item) => String(item.id) === value); + + if (!variant) return; + setSelectedVariant(variant); - setInputValue( - variant?.code + - (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '') - ); - if (variant) { - const filteredOptions = product?.variants.filter( - (item) => item !== variant - ); - const newOptions = [variant, ...filteredOptions]; - setVariantOptions(newOptions); - } }; const handleOnKeyUp = (e: any) => { @@ -100,80 +89,72 @@ const Information = ({ product }: Props) => { return (
-
+ {/* ===== Variant Selector ===== */} +
+ handleOnChange(vals)} + onChange={handleOnChange} > handleOnKeyUp(e)} + value={inputValue} + onChange={handleOnKeyUp} onFocus={() => setDisableFilter(true)} /> inputRef?.current?.focus()} + className='h-6 w-6 text-gray-500 cursor-pointer' + onClick={() => inputRef.current?.focus()} /> - {variantOptions.map((option, cid) => ( + {variantOptions.map((option) => ( -
+
- {option.code + - (option?.attributes[0] - ? ' - ' + option?.attributes[0] - : '')} + {option.code} + {option.attributes?.[0] ? ` - ${option.attributes[0]}` : ''}
+
- {option?.price?.discount_percentage > 0 && ( + {option.price?.discount_percentage > 0 && ( <>
- {Math.floor(option?.price?.discount_percentage)}% + {Math.floor(option.price.discount_percentage)}%
- {currencyFormat(option?.price?.price)} + {currencyFormat(option.price.price)}
)}
- {currencyFormat(option?.price?.price_discount)} + {currencyFormat(option.price.price_discount)}
@@ -183,10 +164,12 @@ const Information = ({ product }: Props) => {
+ {/* ===== Info Rows ===== */}
Item Code
{selectedVariant?.code}
+
Manufacture
@@ -198,7 +181,7 @@ const Information = ({ product }: Props) => { product.manufacture.id.toString() )} > - {product?.manufacture.logo ? ( + {product.manufacture.logo ? ( { )}
+
Berat Barang
- {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'} + {selectedVariant?.weight > 0 ? `${selectedVariant.weight} Kg` : '-'}
+
Terjual
{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
+
Persiapan Barang
- {isLoading && ( + {isLoading ? (
+ ) : ( +
{sla?.sla_date}
)} - {!isLoading &&
{sla?.sla_date}
}
); diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 085bbb1c..129ca8de 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -83,6 +83,18 @@ const ProductDetail = ({ product }: Props) => { setAskAdminUrl(createdAskUrl); }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]); + // useEffect(() => { + // if (!product?.variants?.length) return; + + // setIsApproval(auth?.feature?.soApproval); + + // setSelectedVariant((prev: any) => { + // if (prev) return prev; + + // return product.variants[0]; + // }); + // }, [product?.id]); + useEffect(() => { if (typeof auth === 'object') { setIsApproval(auth?.feature?.soApproval); -- cgit v1.2.3