diff options
Diffstat (limited to 'src-migrate/modules')
4 files changed, 100 insertions, 47 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 075ff8d1..8655517d 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -1,32 +1,24 @@ -import style from '../styles/information.module.css'; import { AutoComplete, AutoCompleteInput, AutoCompleteItem, AutoCompleteList, } from '@choc-ui/chakra-autocomplete'; +import style from '../styles/information.module.css'; -import React, { useEffect, useState } from 'react'; import dynamic from 'next/dynamic'; import Link from 'next/link'; -import { useQuery } from 'react-query'; +import { useEffect, useRef, useState } from 'react'; -import { IProductDetail } from '~/types/product'; -import { IProductVariantSLA } from '~/types/productVariant'; +import currencyFormat from '@/core/utils/currencyFormat'; +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 { 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 { IProductDetail } from '~/types/product'; 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) @@ -43,7 +35,13 @@ const Information = ({ product }: Props) => { const [inputValue, setInputValue] = useState<string | null>( selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] ); - const variantOptions = product?.variants; + + const inputRef = useRef<HTMLInputElement>(null); + + const [variantOptions, setVariantOptions] = useState<any[]>( + product?.variants + ); + // let variantOptions = product?.variants; // const querySLA = useQuery<IProductVariantSLA>({ // queryKey: ['variant-sla', selectedVariant?.id], @@ -59,13 +57,29 @@ const Information = ({ product }: Props) => { useEffect(() => { getsla(); + setInputValue( + selectedVariant?.code + + (selectedVariant?.attributes[0] + ? ' - ' + selectedVariant?.attributes[0] + : '') + ); }, [selectedVariant]); const handleOnChange = (vals: any) => { let code = vals.split(' ')[0]; let variant = variantOptions.find((item) => item.code === code); setSelectedVariant(variant); - setInputValue(variant?.code + ' - ' + variant?.attributes[0]); + 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) => { @@ -88,11 +102,15 @@ const Information = ({ product }: Props) => { > <InputGroup> <AutoCompleteInput + ref={inputRef} value={inputValue as string} onChange={(e) => handleOnKeyUp(e)} /> <InputRightElement> - <ChevronDownIcon className='h-6 w-6 text-gray-500' /> + <ChevronDownIcon + className='h-6 w-6 text-gray-500' + onClick={() => inputRef?.current?.focus()} + /> </InputRightElement> </InputGroup> @@ -100,26 +118,47 @@ const Information = ({ product }: Props) => { {variantOptions.map((option, cid) => ( <AutoCompleteItem key={`option-${cid}`} - value={option.code + ' - ' + option.attributes[0]} + value={ + option.code + + (option?.attributes[0] ? ' - ' + option?.attributes[0] : '') + } + _selected={ + option.id === selectedVariant?.id + ? { + bg: 'gray.300', + } + : undefined + } textTransform='capitalize' > - <div className='flex gap-x-2 justify-between w-full'> + <div + key={cid} + 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.code + + (option?.attributes[0] + ? ' - ' + option?.attributes[0] + : '')} </div> - <div className='grid grid-cols-3 items-end justify-items-end'> + <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)}% </div> - <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'> + <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)} </div> </> )} - - <div className='text-danger-500 font-semibold mb-2'> + <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'> {currencyFormat(option?.price?.price_discount)} </div> </div> diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index a39877e9..3544fa26 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -1,13 +1,12 @@ import style from '../styles/price-action.module.css'; -import React, { useEffect } from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useEffect } from 'react'; import formatCurrency from '~/libs/formatCurrency'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; import AddToCart from './AddToCart'; -import Link from 'next/link'; -import { getAuth } from '~/libs/auth'; -import Image from 'next/image'; type Props = { product: IProductDetail; @@ -54,7 +53,7 @@ const PriceAction = ({ product }: Props) => { return ( <div - className='block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-4 z-10' + className='block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-2 z-10' id='price-section' > {!!activePrice && activePrice.price > 0 && ( @@ -97,20 +96,33 @@ const PriceAction = ({ product }: Props) => { <div className='h-4' /> <div className='flex gap-x-5 items-center'> - <div> - <label htmlFor='quantity' className='hidden'> - Quantity - </label> - <div className='flex items-center space-x-2'> - <input - type='number' - id='quantity' - value={quantityInput} - onChange={(e) => setQuantityInput(e.target.value)} - className={style['quantity-input']} - /> - </div> + <div className='relative flex items-center'> + <button + type='button' + className='absolute left-0 px-2 py-1 h-full text-gray-500' + onClick={() => + setQuantityInput(String(Math.max(1, Number(quantityInput) - 1))) + } + > + - + </button> + <input + type='number' + id='quantity' + min={1} + value={quantityInput} + onChange={(e) => setQuantityInput(e.target.value)} + className={style['quantity-input']} + /> + <button + type='button' + className='absolute right-0 px-2 py-1 h-full text-gray-500' + onClick={() => setQuantityInput(String(Number(quantityInput) + 1))} + > + + + </button> </div> + <div> <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}> {' '} diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 8e8df646..b036cc2d 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -10,6 +10,7 @@ import { LazyLoadComponent } from 'react-lazy-load-image-component'; import { RWebShare } from 'react-web-share'; import useDevice from '@/core/hooks/useDevice'; +import { getAuth } from '~/libs/auth'; import { whatsappUrl } from '~/libs/whatsappUrl'; import ProductPromoSection from '~/modules/product-promo/components/Section'; import { IProductDetail } from '~/types/product'; @@ -21,8 +22,6 @@ import Information from './Information'; import PriceAction from './PriceAction'; import SimilarBottom from './SimilarBottom'; import SimilarSide from './SimilarSide'; -import VariantList from './VariantList'; -import { getAuth } from '~/libs/auth'; import { gtagProductDetail } from '@/core/utils/googleTag'; 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 de69f5f1..cea50bff 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,10 @@ @apply flex gap-x-2.5; } .quantity-input { - @apply px-2 rounded text-center border border-gray-300 w-24 h-10 focus:outline-none; + @apply w-24 h-10 text-center border border-gray-300 rounded focus:outline-none; + /* Padding di kiri dan kanan untuk memberi ruang bagi tombol */ + padding-left: 2rem; + padding-right: 2rem; } .contact-us { |