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') 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 --- .../product-card/components/ProductCard.tsx | 176 +++++++++++---------- .../modules/product-detail/components/Image.tsx | 6 +- 2 files changed, 96 insertions(+), 86 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index 0febfadb..a439cdc8 100644 --- a/src-migrate/modules/product-card/components/ProductCard.tsx +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -1,95 +1,108 @@ -import style from '../styles/product-card.module.css' +import style from '../styles/product-card.module.css'; import ImageNext from 'next/image'; -import clsx from 'clsx' -import Link from 'next/link' -import React, { useEffect, useMemo, useState } from 'react' -import Image from '~/components/ui/image' -import useUtmSource from '~/hooks/useUtmSource' -import clsxm from '~/libs/clsxm' -import formatCurrency from '~/libs/formatCurrency' -import { formatToShortText } from '~/libs/formatNumber' -import { createSlug } from '~/libs/slug' -import { IProduct } from '~/types/product' - +import clsx from 'clsx'; +import Link from 'next/link'; +import React, { useEffect, useMemo, useState } from 'react'; +import Image from '~/components/ui/image'; +import useUtmSource from '~/hooks/useUtmSource'; +import clsxm from '~/libs/clsxm'; +import formatCurrency from '~/libs/formatCurrency'; +import { formatToShortText } from '~/libs/formatNumber'; +import { createSlug } from '~/libs/slug'; +import { IProduct } from '~/types/product'; +import useDevice from '@/core/hooks/useDevice'; type Props = { - product: IProduct - layout?: 'vertical' | 'horizontal' -} + product: IProduct; + layout?: 'vertical' | 'horizontal'; +}; const ProductCard = ({ product, layout = 'vertical' }: Props) => { - const utmSource = useUtmSource() - + const utmSource = useUtmSource(); + const { isDesktop, isMobile } = useDevice(); const URL = { - product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`, - manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()), - } + product: + createSlug('/shop/product/', product.name, product.id.toString()) + + `?utm_source=${utmSource}`, + manufacture: createSlug( + '/shop/brands/', + product.manufacture.name, + product.manufacture.id.toString() + ), + }; const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + 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]); return ( -
-
+
- -
- {product.name} -
-
- {product.isSni && ( - - )} -
-
- {product.isTkdn && ( - - )} +
+ {product.name} +
+
+ {product.isSni && ( + + )} +
+
+ {product.isTkdn && ( + + )} +
-
{product.variant_total > 1 && ( -
{product.variant_total} Varian
+
+ {product.variant_total} Varian +
)}
-
- +
+ {product.manufacture.name} @@ -113,17 +126,15 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
- Inc PPN: - Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))} + Inc PPN: Rp{' '} + {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
{product.stock_total > 0 && ( -
- Ready Stock -
+
Ready Stock
)} {product.qty_sold > 0 && (
@@ -131,14 +142,11 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
)}
-
- ) -} - -const classPrefix = ({ layout }: Props) => { + ); +}; -} +const classPrefix = ({ layout }: Props) => {}; -export default ProductCard \ No newline at end of file +export default ProductCard; 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 0d3c0cf6a00ef81bfdb944490e48f16af41fc029 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 13 Nov 2024 10:08:16 +0700 Subject: add radis --- src-migrate/modules/page-content/index.tsx | 33 ++++++++++++------------------ 1 file changed, 13 insertions(+), 20 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx index 3423ca8b..54ee0a04 100644 --- a/src-migrate/modules/page-content/index.tsx +++ b/src-migrate/modules/page-content/index.tsx @@ -10,28 +10,21 @@ type Props = { const PageContent = ({ path }: Props) => { const [localData, setData] = useState(); const [shouldFetch, setShouldFetch] = useState(false); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { - const localData = localStorage.getItem(`page-content:${path}`); - if (localData) { - setData(JSON.parse(localData)); - }else{ - setShouldFetch(true); - } - },[]) - - const { data, isLoading } = useQuery( - `page-content:${path}`, - async () => await getPageContent({ path }), { - enabled: shouldFetch, - onSuccess: (data) => { - if (data) { - localStorage.setItem(`page-content:${path}`, JSON.stringify(data)); - setData(data); - } - }, - } - ); + const fetchData = async () => { + setIsLoading(true); + const res = await fetch(`/api/page-content?path=${path}`); + const { data } = await res.json(); + if (data) { + setData(data); + } + setIsLoading(false); + }; + + fetchData(); + }, []); const parsedContent = useMemo(() => { if (!localData) return ''; -- 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') 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') 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