From 273f79e0e75cab92a5072819c03b38762b0cff03 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 7 Nov 2024 08:35:30 +0700 Subject: update mobile type --- .../modules/product-detail/components/Image.tsx | 116 ++++++++++----------- 1 file changed, 58 insertions(+), 58 deletions(-) (limited to 'src-migrate/modules/product-detail') diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 30ca0d34..29710df8 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -1,22 +1,22 @@ import style from '../styles/image.module.css'; import ImageNext from 'next/image'; -import React, { useEffect, useMemo, useState } from 'react' -import { InfoIcon } from 'lucide-react' -import { Tooltip } from '@chakra-ui/react' +import React, { useEffect, useMemo, useState } from 'react'; +import { InfoIcon } from 'lucide-react'; +import { Tooltip } from '@chakra-ui/react'; -import { IProductDetail } from '~/types/product' -import ImageUI from '~/components/ui/image' +import { IProductDetail } from '~/types/product'; +import ImageUI from '~/components/ui/image'; import moment from 'moment'; - +import useDevice from '@/core/hooks/useDevice'; type Props = { - product: IProductDetail -} + product: IProductDetail; +}; const Image = ({ product }: Props) => { - const flashSale = product.flash_sale + const flashSale = product.flash_sale; const [count, setCount] = useState(flashSale?.remaining_time || 0); - + const { isDesktop, isMobile } = useDevice(); useEffect(() => { let interval: NodeJS.Timeout; @@ -34,59 +34,58 @@ const Image = ({ product }: Props) => { }; }, [flashSale?.remaining_time]); - const duration = moment.duration(count, 'seconds') - + const duration = moment.duration(count, 'seconds'); + console.log('product', product); const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + if (isMobile && product.image_mobile) { + return product.image_mobile + '?ratio=square'; + } + }, [product.image, product.image_mobile]); return (
{/*
*/} - -
-
- {product.isSni && ( - - )} -
-
- {product.isTkdn && ( - - )} -
-
- {/*
*/} - - + +
+
+ {product.isSni && ( + + )} +
+
+ {product.isTkdn && ( + + )} +
+
+ {/*
*/}
-
+
@@ -94,7 +93,7 @@ const Image = ({ product }: Props) => { {flashSale.remaining_time > 0 && (
-
+
{
-
{Math.floor(product.lowest_price.discount_percentage)}%
+
+ {Math.floor(product.lowest_price.discount_percentage)}% +
{ {duration.seconds().toString().padStart(2, '0')}
-
)}
- ) -} + ); +}; -export default Image \ No newline at end of file +export default Image; -- cgit v1.2.3 From 982a18543beefdd33f20c294b06b7a1a87103b2f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 7 Nov 2024 09:16:51 +0700 Subject: update mobile image --- src-migrate/modules/product-detail/components/Image.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-detail') diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 29710df8..96ae2027 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -35,10 +35,12 @@ const Image = ({ product }: Props) => { }, [flashSale?.remaining_time]); const duration = moment.duration(count, 'seconds'); - console.log('product', product); const image = useMemo(() => { - if (isMobile && product.image_mobile) { + if (!isDesktop && product.image_mobile) { return product.image_mobile + '?ratio=square'; + } else { + if (product.image) return product.image + '?ratio=square'; + return '/images/noimage.jpeg'; } }, [product.image, product.image_mobile]); -- cgit v1.2.3 From baa029e404f499f7e09b9d9a152bd8c676411684 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 13 Nov 2024 15:23:59 +0700 Subject: fix bug select variant --- .../modules/product-detail/components/Information.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/product-detail') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index ec606423..d500ff6e 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; import { InputGroup, InputRightElement } from '@chakra-ui/react'; -import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; @@ -35,7 +35,7 @@ const Information = ({ product }: Props) => { const [inputValue, setInputValue] = useState( selectedVariant?.code + ' - ' + selectedVariant?.attributes[0] ); - + const [disableFilter, setDisableFilter] = useState(false); const inputRef = useRef(null); const [variantOptions, setVariantOptions] = useState( @@ -85,6 +85,7 @@ const Information = ({ product }: Props) => { }; const handleOnKeyUp = (e: any) => { + setDisableFilter(false); setInputValue(e.target.value); }; @@ -98,6 +99,7 @@ const Information = ({ product }: Props) => { {' '} handleOnChange(vals)} @@ -108,7 +110,11 @@ const Information = ({ product }: Props) => { value={inputValue as string} onChange={(e) => handleOnKeyUp(e)} /> - + + setDisableFilter(true)} + /> inputRef?.current?.focus()} -- cgit v1.2.3 From c18b82d1cc4342cc99f384da9b1236b25815e2d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 13 Nov 2024 15:30:23 +0700 Subject: fix bug --- src-migrate/modules/product-detail/components/Information.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'src-migrate/modules/product-detail') diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index d500ff6e..b9f4be91 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; import { InputGroup, InputRightElement } from '@chakra-ui/react'; -import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/outline'; +import { ChevronDownIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; import { createSlug } from '~/libs/slug'; @@ -68,6 +68,7 @@ const Information = ({ product }: Props) => { }, [selectedVariant]); const handleOnChange = (vals: any) => { + setDisableFilter(true); let code = vals.replace(/\s-\s.*$/, '').trim(); let variant = variantOptions.find((item) => item.code === code); setSelectedVariant(variant); @@ -109,12 +110,9 @@ const Information = ({ product }: Props) => { ref={inputRef} value={inputValue as string} onChange={(e) => handleOnKeyUp(e)} + onFocus={() => setDisableFilter(true)} /> - setDisableFilter(true)} - /> inputRef?.current?.focus()} -- cgit v1.2.3