diff options
Diffstat (limited to 'src-migrate')
| -rw-r--r-- | src-migrate/modules/product-detail/components/Information.tsx | 75 | ||||
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 21 |
2 files changed, 51 insertions, 45 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index cc16fb6d..900225a5 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -38,15 +38,16 @@ type Props = { const Information = ({ product }: Props) => { const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail(); - const [inputValue, setInputValue] = useState<string | null>( - selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] - ); + const [inputValue, setInputValue] = useState<string>(''); const [disableFilter, setDisableFilter] = useState<boolean>(false); const inputRef = useRef<HTMLInputElement>(null); + // source of truth + // const variantOptions = product.variants; const [variantOptions, setVariantOptions] = useState<any[]>( product?.variants ); + const variantId = selectedVariant?.id; const { slaVariant, isLoading } = useVariant({ variantId }); @@ -83,25 +84,32 @@ const Information = ({ product }: Props) => { }, [product]); 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) { setSla(null); + return; } if (slaVariant) { setSla(slaVariant); } }, [slaVariant, isLoading, setSla]); + /* ====================== + * Handlers + * ====================== */ const handleOnChange = (vals: any) => { setDisableFilter(true); let code = vals.replace(/\s-\s.*$/, '').trim(); @@ -132,30 +140,32 @@ const Information = ({ product }: Props) => { return ( <div className={style['wrapper']}> - <div className='realtive mb-5'> + {/* ===== Variant Selector ===== */} + <div className='relative mb-5'> <label className='form-label mb-2 text-lg text-red-600'> Pilih Variant * :{' '} <span className='text-gray_r-9 text-sm'> - {product?.variants?.length} Variants - </span>{' '} + {product.variants.length} Variants + </span> </label> + <AutoComplete disableFilter={disableFilter} openOnFocus className='form-input' - onChange={(vals) => handleOnChange(vals)} + onChange={handleOnChange} > <InputGroup> <AutoCompleteInput ref={inputRef} - value={inputValue as string} - onChange={(e) => handleOnKeyUp(e)} + value={inputValue} + onChange={handleOnKeyUp} onFocus={() => setDisableFilter(true)} /> <InputRightElement className='mr-4'> <ChevronDownIcon - className='h-6 w-6 text-gray-500' - onClick={() => inputRef?.current?.focus()} + className='h-6 w-6 text-gray-500 cursor-pointer' + onClick={() => inputRef.current?.focus()} /> </InputRightElement> </InputGroup> @@ -167,41 +177,32 @@ const Information = ({ product }: Props) => { }) .map((option, cid) => ( <AutoCompleteItem - key={`option-${cid}`} - value={ - option.code + - (option?.attributes[0] ? ' - ' + option?.attributes[0] : '') - } + key={option.id} + value={String(option.id)} _selected={ option.id === selectedVariant?.id ? { bg: 'gray.300' } : undefined } - textTransform='capitalize' > - <div - key={cid} - className='flex gap-x-2 w-full justify-between px-3 items-center p-2' - > + <div className='flex gap-x-2 w-full justify-between px-3 items-center p-2'> <div className='text-small'> - {option.code + - (option?.attributes[0] - ? ' - ' + option?.attributes[0] - : '')} + {option.code} + {option.attributes?.[0] ? ` - ${option.attributes[0]}` : ''} </div> <div className={option?.price?.discount_percentage ? 'flex gap-x-4 items-center justify-between' : ''}> {option?.price?.discount_percentage > 0 && ( <> <div className='badge-solid-red text-xs'> - {Math.floor(option?.price?.discount_percentage)}% + {Math.floor(option.price.discount_percentage)}% </div> <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'> - {currencyFormat(option?.price?.price)} + {currencyFormat(option.price.price)} </div> </> )} <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'> - {currencyFormat(option?.price?.price_discount)} + {currencyFormat(option.price.price_discount)} </div> </div> </div> @@ -285,7 +286,7 @@ const Information = ({ product }: Props) => { <div className={style['row']} style={rowStyle}> <div className={style['label']} style={{ color: '#6b7280' }}>Berat Barang</div> <div className={style['value']}> - {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'} + {selectedVariant?.weight > 0 ? `${selectedVariant.weight} Kg` : '-'} </div> </div> diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 03089afa..b6db3f69 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -156,9 +156,19 @@ 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]); + // 1. LOGIC INISIALISASI VARIANT - // ========================================================================= useEffect(() => { if (typeof auth === 'object') { setIsApproval(auth?.feature?.soApproval); @@ -175,9 +185,8 @@ const ProductDetail = ({ product }: Props) => { }, [product, auth]); - // ========================================================================= + // 2. LOGIC FETCH DATA - // ========================================================================= useEffect(() => { const fetchMagentoData = async () => { const allVariantIds = product.variants.map(v => v.id); @@ -247,9 +256,7 @@ const ProductDetail = ({ product }: Props) => { }, [product.id]); - // ========================================================================= // HELPER 1: GROUPING DATA BY LABEL - // ========================================================================= const processMatrixData = (rawMatrix: any[]) => { const groups: any = {}; const result: any[] = []; @@ -283,9 +290,7 @@ const ProductDetail = ({ product }: Props) => { }; - // ========================================================================= // HELPER 2: RENDER SPEC VALUE - // ========================================================================= const renderSpecValue = (val: any) => { if (!val) return '-'; const strVal = String(val).trim(); |