From 7f5b0518474f702b68ca459e5cb531212504472d Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 3 Aug 2023 14:22:27 +0700 Subject: flash sale --- .../components/elements/CountDown/CountDown2.jsx | 48 ++++++++++++++++--- .../product/components/Product/ProductDesktop.jsx | 55 ++++++++++++++-------- src/lib/product/components/ProductCard.jsx | 54 +++++++++++++++------ src/pages/api/shop/search.js | 3 +- 4 files changed, 118 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx index 61503d17..5dafb790 100644 --- a/src/core/components/elements/CountDown/CountDown2.jsx +++ b/src/core/components/elements/CountDown/CountDown2.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' const CountDown2 = ({ initialTime }) => { - const hours = Math.floor(initialTime / 3600) + /*const hours = Math.floor(initialTime / 3600) const minutes = Math.floor((initialTime % 3600) / 60) const seconds = initialTime % 60 @@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => { } }, 1000) return () => clearInterval(timer) + }, [timeLeft])*/ + + const days = Math.floor(initialTime / 86400) + const hours = Math.floor((initialTime % 86400) / 3600) + const minutes = Math.floor((initialTime % 3600) / 60) + const seconds = initialTime % 60 + + const [timeLeft, setTimeLeft] = useState({ + day: days, + hour: hours, + minute: minutes, + second: seconds + }) + + useEffect(() => { + const timer = setInterval(() => { + const totalSeconds = + timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second + const secondsLeft = totalSeconds - 1 + if (secondsLeft < 0) { + clearInterval(timer) + } else { + const days = Math.floor(secondsLeft / 86400) + const hours = Math.floor((secondsLeft % 86400) / 3600) + const minutes = Math.floor((secondsLeft % 3600) / 60) + const seconds = secondsLeft % 60 + setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds }) + } + }, 1000) + return () => clearInterval(timer) }, [timeLeft]) + return (
- - {timeLeft.hour.toString().padStart(2, '0')} + + {timeLeft.day.toString().padStart(2, '0')} + Hari
- - {timeLeft.minute.toString().padStart(2, '0')} + + {timeLeft.hour.toString().padStart(2, '0')} + Jam
- - {timeLeft.second.toString().padStart(2, '0')} + + {timeLeft.minute.toString().padStart(2, '0')} + Menit
) diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index e13e2ab1..5cbe8a8a 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -19,6 +19,8 @@ import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' +import CountDown from '@/core/components/elements/CountDown/CountDown' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { console.log('ini product', products) @@ -173,27 +175,42 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
-
-
-
-
- 40% -
-
- - FLASH SALE +
+
+ {product?.flashSale?.remainingTime > 0 && ( +
+
+
+ {product.lowestPrice.discountPercentage}% +
+
+ + {product.flashSale.tag || 'FLASH SALE'} +
+
+ +
+
-
+ )} + {product.name} +
+
+

+ Keterangan : Gambar atau foto berperan + sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan + berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang + lebih baik perihal gambar di 021-2933 8828. +

- {product.name}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index c85a76e9..b38bb43c 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -1,11 +1,14 @@ +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import Image from '@/core/components/elements/Image/Image' import Link from '@/core/components/elements/Link/Link' import currencyFormat from '@/core/utils/currencyFormat' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' import ImageNext from 'next/image' +import Product from './Product/Product' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { + console.log('ini prodyct ', product) const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, url: createSlug('/shop/product/', product.name, product.id, true) @@ -23,6 +26,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { alt={product?.name} className='w-full object-contain object-center h-36 sm:h-48' /> + {product?.flashSale?.id > 0 && ( +
+
+
+ {product?.lowestPrice.discountPercentage}% +
+
+ + {product?.flashSale?.tag} +
+
+
+ )} {product.variantTotal > 1 && (
{product.variantTotal} Varian @@ -30,20 +50,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )}
- {product?.manufacture?.name ? ( - - {product.manufacture.name} - - ) : ( -
-
- )} + {product?.manufacture?.name ? ( + + {product.manufacture.name} + + ) : ( +
-
+ )} {
{product.flashSale.id > 0 && (
- + FLASH SALE
)} diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 937c6d4c..d465d94b 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -135,7 +135,8 @@ const productResponseMap = (products, pricelist) => { categories: [], flashSale: { id: product?.flashsale_id_i, - name: product?.product?.flashsale_name_s + name: product?.product?.flashsale_name_s, + tag : product?.flashsale_tag_s || 'FLASH SALE' } } -- cgit v1.2.3