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