summaryrefslogtreecommitdiff
path: root/src-migrate/modules
diff options
context:
space:
mode:
authorIT Fixcomart <it@fixcomart.co.id>2024-08-08 10:10:56 +0000
committerIT Fixcomart <it@fixcomart.co.id>2024-08-08 10:10:56 +0000
commitc9090a89b775a1e3c2f1e707021e6375eb9f92e3 (patch)
tree85bb4be978ff65714e395a2a58772e098e67fd3f /src-migrate/modules
parentfecff2431477d08d166c34f116972aa090cf463f (diff)
parent616d8ffc973eba673069243ec8981b5234234fe5 (diff)
Merged in Feature/template-switch (pull request #227)
Feature/template switch
Diffstat (limited to 'src-migrate/modules')
-rw-r--r--src-migrate/modules/product-card/components/ProductCard.tsx150
-rw-r--r--src-migrate/modules/product-detail/components/ProductDetail.tsx2
-rw-r--r--src-migrate/modules/product-detail/components/SimilarBottom.tsx6
3 files changed, 137 insertions, 21 deletions
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 0febfadb..3e34d5c3 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -10,6 +10,10 @@ import formatCurrency from '~/libs/formatCurrency'
import { formatToShortText } from '~/libs/formatNumber'
import { createSlug } from '~/libs/slug'
import { IProduct } from '~/types/product'
+import { useRouter } from 'next/router';
+import currencyFormat from '@/core/utils/currencyFormat';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { sellingProductFormat } from '@/core/utils/formatValue';
type Props = {
product: IProduct
@@ -18,7 +22,14 @@ type Props = {
const ProductCard = ({ product, layout = 'vertical' }: Props) => {
const utmSource = useUtmSource()
-
+ const router = useRouter();
+
+ const id = product.id.toString ()
+ const callForPriceWhatsapp = whatsappUrl('product', {
+ name: product.name,
+ manufacture: product.manufacture?.name,
+ url: createSlug('/shop/product/', product.name, id, true),
+ });
const URL = {
product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
@@ -75,6 +86,42 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
</div>
</div>
</div>
+ {layout === 'vertical' && (
+ <div>
+ {router.pathname != '/' && product?.flash_sale.id > 0 && (
+ <div className='absolute left-0 bottom-0 w-full grid'>
+ <div className='absolute bottom-0 w-full h-full'>
+ <ImageNext
+ src='/images/BG-FLASH-SALE.jpg'
+ className='h-full'
+ width={1000}
+ height={100} alt={''} />
+ </div>
+ <div className='relative'>
+ <div className='flex gap-x-1 items-center p-2 justify-center'>
+ <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
+ <span className='text-sm font-bold text-black'>
+ {Math.floor(product?.lowest_price.discount_percentage ? product?.lowest_price.discount_percentage : product?.lowest_price.discountPercentage)}%
+ </span>
+ </div>
+ <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={13}
+ height={5} alt={''} />
+ <span className='text-white text-[9px] md:text-[10px] font-semibold'>
+ {product?.flash_sale?.tag != 'false' ||
+ product?.flash_sale?.tag
+ ? product?.flash_sale?.tag
+ : 'FLASH SALE'}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ )}
{product.variant_total > 1 && (
<div className={style['variant-badge']}>{product.variant_total} Varian</div>
@@ -86,6 +133,24 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
[style['content-v']]: layout === 'vertical',
[style['content-h']]: layout === 'horizontal',
})}>
+ {layout === 'horizontal' && (
+ <div>
+ {product.flash_sale.id > 0 && (
+ <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={15}
+ height={10} alt={''} />
+ <span className='text-white text-xs font-semibold'>
+ {' '}
+ {product?.flash_sale?.tag != 'false' || product?.flash_sale?.tag
+ ? product?.flash_sale?.tag
+ : 'FLASH SALE'}
+ </span>
+ </div>
+ )}
+ </div>
+ )}
<Link
href={URL.manufacture}
className={style['brand']}
@@ -105,32 +170,81 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
{product.name}
</Link>
<div className='h-1.5' />
-
- <div className={style['price']}>
+ {product?.flash_sale?.id > 0 ? (<div></div>) :
+ (
+ <div className={style['price']}>
Rp {formatCurrency(product.lowest_price.price)}
</div>
+ )
+ }
+
+
<div className='h-1.5' />
- <div className={style['price-inc']}>
- Inc PPN:
- Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
- </div>
+ {product?.flash_sale?.id > 0 &&
+ product?.lowest_price?.discountPercentage > 0 ? (
+ <>
+ {product?.lowest_price.discountPercentage > 0 && (
+ <div className='flex gap-x-1 mb-1 items-center'>
+ <div className='badge-solid-red'>
+ {Math.floor(product?.lowest_price.discount_percentage ? product?.lowest_price.discount_percentage : product?.lowest_price.discountPercentage)}%
+ </div>
+ <div className='text-gray_r-11 line-through text-caption-2'>
+ {currencyFormat(product?.lowest_price?.price)}
+ </div>
+ </div>
+ )}
- <div className='h-1' />
+ <div className='text-danger-500 font-semibold mb-2'>
+ {product?.lowest_price?.price_discount ? product?.lowest_price?.price_discount : product?.lowest_price?.priceDiscount > 0 ? (
+ currencyFormat(product?.lowest_price?.price_discount ? product?.lowest_price?.price_discount : product?.lowest_price?.priceDiscount)
+ ) : (
+ <a
+ rel='noopener noreferrer'
+ target='_blank'
+ href={callForPriceWhatsapp}
+ >
+ Call for Inquiry
+ </a>
+ )}
+ </div>
+ <div className='flex w-full items-center gap-x-1 '>
+ {product?.stockTotal > 0 && (
+ <div className='badge-solid-red'>Ready Stock</div>
+ )}
+ {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+ {product?.qtySold > 0 && (
+ <div className='text-gray_r-9 text-[11px]'>
+ {sellingProductFormat(product?.qtySold) + ' Terjual'}
+ </div>
+ )}
+ </div>
+ </>
+ ) : (
+ <div>
+ <div className={style['price-inc']}>
+ Inc PPN:
+ Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+ </div>
- <div className='flex items-center gap-x-2.5'>
- {product.stock_total > 0 && (
- <div className={style['ready-stock']}>
- Ready Stock
- </div>
- )}
- {product.qty_sold > 0 && (
- <div className={style['sold']}>
- {formatToShortText(product.qty_sold)} Terjual
+ <div className='h-1' />
+
+ <div className='flex items-center gap-x-2.5'>
+ {product.stock_total > 0 && (
+ <div className={style['ready-stock']}>
+ Ready Stock
+ </div>
+ )}
+ {product.qty_sold > 0 && (
+ <div className={style['sold']}>
+ {formatToShortText(product.qty_sold)} Terjual
+ </div>
+ )}
+ </div>
</div>
)}
- </div>
+
</div>
</div>
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index e4555913..6bd025af 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -178,7 +178,7 @@ const ProductDetail = ({ product }: Props) => {
<div className='h-6' />
<LazyLoadComponent>
- <SimilarBottom product={product} />
+ <SimilarBottom product={product} source={'bottom'}/>
</LazyLoadComponent>
</div>
diff --git a/src-migrate/modules/product-detail/components/SimilarBottom.tsx b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
index 40d4dd82..ab33f106 100644
--- a/src-migrate/modules/product-detail/components/SimilarBottom.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
@@ -5,12 +5,14 @@ import { IProductDetail } from '~/types/product'
type Props = {
product: IProductDetail
+ source: string
}
-const SimilarBottom = ({ product }: Props) => {
+const SimilarBottom = ({ product, source }: Props) => {
const productSimilar = useProductSimilar({
name: product.name,
- except: { productId: product.id }
+ except: { productId: product.id },
+ source: source
})
const products = productSimilar.data?.products || []