summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/checkout/components/Checkout.jsx19
-rw-r--r--src/lib/flashSale/components/FlashSale.jsx2
-rw-r--r--src/lib/flashSale/components/FlashSaleNonDisplay.jsx2
-rw-r--r--src/lib/home/components/BannerSection.jsx38
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx247
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx63
-rw-r--r--src/lib/home/components/PreferredBrand.jsx81
-rw-r--r--src/lib/home/components/PromotionProgram.jsx96
-rw-r--r--src/lib/product/components/Product/ProductDesktopVariant.jsx18
-rw-r--r--src/lib/product/components/ProductCard.jsx15
10 files changed, 270 insertions, 311 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 4dd715d7..33cfaa87 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -40,6 +40,18 @@ const SELF_PICKUP_ID = 32;
const { checkoutApi } = require('../api/checkoutApi');
const { getProductsCheckout } = require('../api/checkoutApi');
+function convertToInternational(number) {
+ if (typeof number !== 'string') {
+ throw new Error("Input harus berupa string");
+ }
+
+ if (number.startsWith('08')) {
+ return '+62' + number.slice(2);
+ }
+
+ return number;
+}
+
const Checkout = () => {
const router = useRouter();
const query = router.query.source ?? null;
@@ -454,6 +466,13 @@ const Checkout = () => {
transaction_id: isCheckouted.id,
});
+ gtag('set', 'user_data', {
+ email: auth.email,
+ phone_number: convertToInternational(auth.mobile) ?? convertToInternational(auth.phone),
+ });
+
+ gtag('config', 'AW-954540379', { ' allow_enhanced_conversions':true } ) ;
+
for (const product of products) deleteItemCart({ productId: product.id });
if (grandTotal > 0) {
const payment = await axios.post(
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 89c46de4..8be1d7a6 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -69,7 +69,7 @@ const FlashSaleProduct = ({ flashSaleId }) => {
useEffect(() => {
const loadProducts = async () => {
const dataProducts = await productSearchApi({
- query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500&orderBy=flashsale-price-asc`,
+ query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=500&orderBy=flashsale-price-asc&source=similar`,
operation: 'AND',
});
setProducts(dataProducts.response);
diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
index c91de2be..4b420fac 100644
--- a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
+++ b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
@@ -56,7 +56,7 @@ const FlashSaleProduct = ({ flashSaleId }) => {
useEffect(() => {
const loadProducts = async () => {
const dataProducts = await productSearchApi({
- query: `fq=-flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=25&orderBy=flashsale-discount-desc`,
+ query: `fq=-flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=25&orderBy=flashsale-discount-desc&source=similar`,
operation: 'AND',
});
setProducts(dataProducts.response);
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 60d38f8f..303b5c4b 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -11,27 +11,33 @@ const BannerSection = () => {
const [shouldFetch, setShouldFetch] = useState(false);
useEffect(() => {
- const localData = localStorage.getItem('Homepage_bannerSection');
- if (localData) {
- setData(JSON.parse(localData));
- }else{
- setShouldFetch(true);
- }
- }, []);
-
- // const fetchBannerSection = async () => await bannerSectionApi();
- const getBannerSection = useQuery('bannerSection', bannerApi({ type: 'home-banner' }), {
- enabled: shouldFetch,
- onSuccess: (data) => {
+ const fetchCategoryData = async () => {
+ const res = await fetch('/api/banner-section');
+ const { data } = await res.json();
if (data) {
- localStorage.setItem('Homepage_bannerSection', JSON.stringify(data));
setData(data);
}
- },
- });
+ };
- const bannerSection = data;
+ fetchCategoryData();
+ }, []);
+ // const fetchBannerSection = async () => await bannerSectionApi();
+ const getBannerSection = useQuery(
+ 'bannerSection',
+ bannerApi({ type: 'home-banner' }),
+ {
+ enabled: shouldFetch,
+ onSuccess: (data) => {
+ if (data) {
+ localStorage.setItem('Homepage_bannerSection', JSON.stringify(data));
+ setData(data);
+ }
+ },
+ }
+ );
+
+ const bannerSection = data;
return (
bannerSection &&
bannerSection?.length > 0 && (
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index e62575f7..cc4f42b7 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,81 +1,33 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import {
- fetchCategoryManagementSolr,
- fetchCategoryManagementVersion,
-} from '../api/categoryManagementApi';
+import React, { useEffect, useState } from 'react';
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import { Skeleton } from '@chakra-ui/react';
import NextImage from 'next/image';
import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
-import { Skeleton } from '@chakra-ui/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';
-const saveToLocalStorage = (key, data, version) => {
- const now = new Date();
- const item = {
- value: data,
- version: version,
- lastFetchedTime: now.getTime(),
- };
- localStorage.setItem(key, JSON.stringify(item));
-};
-
-const getFromLocalStorage = (key) => {
- const itemStr = localStorage.getItem(key);
- if (!itemStr) return null;
-
- const item = JSON.parse(itemStr);
- return item;
-};
-
-const getElapsedTime = (lastFetchedTime) => {
- const now = new Date();
- return now.getTime() - lastFetchedTime;
-};
-
const CategoryDynamic = () => {
const [categoryManagement, setCategoryManagement] = useState([]);
- const [isLoading, setIsLoading] = useState(false);
-
- const loadBrand = useCallback(async () => {
- const cachedData = getFromLocalStorage('homepage_categoryDynamic');
-
- if (cachedData) {
- // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
- const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
-
- if (elapsedTime < 24 * 60 * 60 * 1000) {
- setCategoryManagement(cachedData.value);
- return;
- }
- }
+ const [isLoading, setIsLoading] = useState(true);
- const latestVersion = await fetchCategoryManagementVersion();
- if (cachedData && cachedData.version === latestVersion) {
- // perbarui waktu
- saveToLocalStorage(
- 'homepage_categoryDynamic',
- cachedData.value,
- latestVersion
- );
- setCategoryManagement(cachedData.value);
- } else {
+ useEffect(() => {
+ const fetchCategoryData = async () => {
setIsLoading(true);
- const items = await fetchCategoryManagementSolr();
+ const res = await fetch('/api/category-management');
+ const { data } = await res.json();
+ if (data) {
+ setCategoryManagement(data);
+ }
setIsLoading(false);
+ };
- saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
- setCategoryManagement(items);
- }
+ fetchCategoryData();
}, []);
- useEffect(() => {
- loadBrand();
- }, [loadBrand]);
-
const swiperBanner = {
modules: [Pagination],
classNames: 'mySwiper',
@@ -90,104 +42,99 @@ const CategoryDynamic = () => {
return (
<div>
{categoryManagement &&
- categoryManagement?.map((category) => {
- return (
- <Skeleton key={category.id} isLoaded={!isLoading}>
- <div key={category.id}>
- <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
- <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
- {category.name}
- </h1>
- <Link
- href={createSlug(
- '/shop/category/',
- category?.name,
- category?.category_id
- )}
- className='!text-red-500 font-semibold'
- >
- Lihat Semua
- </Link>
- </div>
+ categoryManagement.map((category) => (
+ <Skeleton key={category.id} isLoaded={!isLoading}>
+ <div key={category.id}>
+ <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+ {category.name}
+ </h1>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ category?.name,
+ category?.category_id
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
+ </div>
- {/* Swiper for SubCategories */}
- <Swiper {...swiperBanner}>
- {category.categories.map((subCategory) => {
- return (
- <SwiperSlide key={subCategory.id}>
- <div className='border rounded justify-start items-start '>
- <div className='p-3'>
- <div className='flex flex-row border rounded mb-2 justify-start items-center'>
- <NextImage
- src={
- subCategory.image
- ? subCategory.image
- : '/images/noimage.jpeg'
- }
- alt={subCategory.name}
- width={90}
- height={30}
- className='object-fit p-4'
- />
- <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
- <h2 className='font-semibold text-lg mr-2'>
- {subCategory?.name}
- </h2>
+ <Swiper {...swiperBanner}>
+ {category?.categories?.map((subCategory) => (
+ <SwiperSlide key={subCategory.id}>
+ <div className='border rounded justify-start items-start '>
+ <div className='p-3'>
+ <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+ <NextImage
+ src={
+ subCategory.image
+ ? subCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={subCategory.name}
+ width={90}
+ height={30}
+ className='object-fit p-4'
+ />
+ <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+ <h2 className='font-semibold text-lg mr-2'>
+ {subCategory?.name}
+ </h2>
+ <Link
+ href={createSlug(
+ '/shop/category/',
+ subCategory?.name,
+ subCategory?.id_level_2
+ )}
+ className='!text-red-500 font-semibold'
+ >
+ Lihat Semua
+ </Link>
+ </div>
+ </div>
+ <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
+ {subCategory.child_frontend_id_i.map(
+ (childCategory) => (
+ <div key={childCategory.id} className=''>
<Link
href={createSlug(
'/shop/category/',
- subCategory?.name,
- subCategory?.id_level_2
+ childCategory?.name,
+ childCategory?.id_level_3
)}
- className='!text-red-500 font-semibold'
+ className='flex flex-row gap-2 border rounded group hover:border-red-500'
>
- Lihat Semua
+ <NextImage
+ src={
+ childCategory.image
+ ? childCategory.image
+ : '/images/noimage.jpeg'
+ }
+ alt={childCategory.name}
+ className='p-2 ml-1'
+ width={40}
+ height={40}
+ />
+ <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+ <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+ {childCategory.name}
+ </h3>
+ </div>
</Link>
</div>
- </div>
- <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
- {subCategory.child_frontend_id_i.map(
- (childCategory) => (
- <div key={childCategory.id} className=''>
- <Link
- href={createSlug(
- '/shop/category/',
- childCategory?.name,
- childCategory?.id_level_3
- )}
- className='flex flex-row gap-2 border rounded group hover:border-red-500'
- >
- <NextImage
- src={
- childCategory.image
- ? childCategory.image
- : '/images/noimage.jpeg'
- }
- alt={childCategory.name}
- className='p-2 ml-1'
- width={40}
- height={40}
- />
- <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
- <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
- {childCategory.name}
- </h3>
- </div>
- </Link>
- </div>
- )
- )}
- </div>
- </div>
+ )
+ )}
</div>
- </SwiperSlide>
- );
- })}
- </Swiper>
- </div>
- </Skeleton>
- );
- })}
+ </div>
+ </div>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ </div>
+ </Skeleton>
+ ))}
</div>
);
};
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 55654b0e..67ae6f5f 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -9,71 +9,26 @@ import {
fetchCategoryManagementVersion,
} from '../api/categoryManagementApi';
-const saveToLocalStorage = (key, data, version) => {
- const now = new Date();
- const item = {
- value: data,
- version: version,
- lastFetchedTime: now.getTime(),
- };
- localStorage.setItem(key, JSON.stringify(item));
-};
-
-const getFromLocalStorage = (key) => {
- const itemStr = localStorage.getItem(key);
- if (!itemStr) return null;
-
- const item = JSON.parse(itemStr);
- return item;
-};
-
-const getElapsedTime = (lastFetchedTime) => {
- const now = new Date();
- return now.getTime() - lastFetchedTime;
-};
-
const CategoryDynamicMobile = () => {
const [selectedCategory, setSelectedCategory] = useState({});
const [categoryManagement, setCategoryManagement] = useState([]);
const [isLoading, setIsLoading] = useState(false);
- const loadCategoryManagement = useCallback(async () => {
- const cachedData = getFromLocalStorage('homepage_categoryDynamic');
-
- if (cachedData) {
- // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
- const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
-
- if (elapsedTime < 24 * 60 * 60 * 1000) {
- setCategoryManagement(cachedData.value);
- return;
- }
- }
-
- const latestVersion = await fetchCategoryManagementVersion();
- if (cachedData && cachedData.version === latestVersion) {
- // perbarui waktu
- saveToLocalStorage(
- 'homepage_categoryDynamic',
- cachedData.value,
- latestVersion
- );
- setCategoryManagement(cachedData.value);
- } else {
+ useEffect(() => {
+ const fetchCategoryData = async () => {
setIsLoading(true);
- const items = await fetchCategoryManagementSolr();
+ const res = await fetch('/api/category-management');
+ const { data } = await res.json();
+ if (data) {
+ setCategoryManagement(data);
+ }
setIsLoading(false);
+ };
- saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
- setCategoryManagement(items);
- }
+ fetchCategoryData();
}, []);
useEffect(() => {
- loadCategoryManagement();
- }, [loadCategoryManagement]);
-
- useEffect(() => {
if (categoryManagement?.length > 0) {
const initialSelections = categoryManagement.reduce((acc, category) => {
if (category.categories.length > 0) {
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index eefced60..b7a30503 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -1,49 +1,50 @@
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Navigation, Pagination, Autoplay } from 'swiper';
-import { useCallback, useEffect, useState } from 'react'
-import usePreferredBrand from '../hooks/usePreferredBrand'
-import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
-import BrandCard from '@/lib/brand/components/BrandCard'
-import useDevice from '@/core/hooks/useDevice'
-import Link from '@/core/components/elements/Link/Link'
-import axios from 'axios'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper';
+import { useCallback, useEffect, useState } from 'react';
+import usePreferredBrand from '../hooks/usePreferredBrand';
+import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton';
+import BrandCard from '@/lib/brand/components/BrandCard';
+import useDevice from '@/core/hooks/useDevice';
+import Link from '@/core/components/elements/Link/Link';
+import axios from 'axios';
const PreferredBrand = () => {
- let query = ''
- let params = 'prioritas'
- const [isLoading, setIsLoading] = useState(true)
- const [startWith, setStartWith] = useState(null)
- const [manufactures, setManufactures] = useState([])
+ let query = '';
+ let params = 'prioritas';
+ const [isLoading, setIsLoading] = useState(true);
+ const [startWith, setStartWith] = useState(null);
+ const [manufactures, setManufactures] = useState([]);
const loadBrand = useCallback(async () => {
- setIsLoading(true)
- const name = startWith ? `${startWith}*` : ''
- const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?rows=20`)
-
- setIsLoading(false)
- setManufactures((manufactures) => [...result.data])
- }, [startWith])
+ setIsLoading(true);
+ const name = startWith ? `${startWith}*` : '';
+ const result = await axios(
+ `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/preferredBrand?rows=20`
+ );
+ setIsLoading(false);
+ setManufactures((manufactures) => [...result.data]);
+ }, [startWith]);
const toggleStartWith = (alphabet) => {
- setManufactures([])
+ setManufactures([]);
if (alphabet == startWith) {
- setStartWith(null)
- return
+ setStartWith(null);
+ return;
}
- setStartWith(alphabet)
- }
+ setStartWith(alphabet);
+ };
useEffect(() => {
- loadBrand()
- }, [])
+ loadBrand();
+ }, []);
// const { preferredBrands } = usePreferredBrand(query)
- const { isMobile, isDesktop } = useDevice()
+ const { isMobile, isDesktop } = useDevice();
const swiperBanner = {
- modules:[Navigation, Pagination, Autoplay],
+ modules: [Navigation, Pagination, Autoplay],
autoplay: {
delay: 4000,
- disableOnInteraction: false
+ disableOnInteraction: false,
},
loop: true,
className: 'h-[70px] md:h-[100px] w-full',
@@ -53,13 +54,17 @@ const PreferredBrand = () => {
dynamicBullets: true,
dynamicMainBullets: isMobile ? 6 : 8,
clickable: true,
- }
- }
- const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : []
+ },
+ };
+ const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : [];
return (
<div className='px-4 sm:px-0'>
<div className='flex justify-between items-center mb-4'>
- <h1 className='font-semibold text-[14px] sm:text-h-lg'><Link href='/shop/brands' className='!text-black font-semibold'>Brand Pilihan</Link></h1>
+ <h1 className='font-semibold text-[14px] sm:text-h-lg'>
+ <Link href='/shop/brands' className='!text-black font-semibold'>
+ Brand Pilihan
+ </Link>
+ </h1>
{isDesktop && (
<Link href='/shop/brands' className='!text-red-500 font-semibold'>
Lihat Semua
@@ -79,7 +84,7 @@ const PreferredBrand = () => {
)}
</div>
</div>
- )
-}
+ );
+};
-export default PreferredBrand \ No newline at end of file
+export default PreferredBrand;
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 7433e7f0..562fa138 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -10,32 +10,50 @@ const BannerSection = () => {
const { isMobile, isDesktop } = useDevice();
const [data, setData] = useState(null);
const [shouldFetch, setShouldFetch] = useState(false);
-
useEffect(() => {
- const localData = localStorage.getItem('Homepage_promotionProgram');
- if (localData) {
- setData(JSON.parse(localData));
- }else{
- setShouldFetch(true);
- }
- },[])
-
- const getPromotionProgram = useQuery(
- 'promotionProgram',
- bannerApi({ type: 'banner-promotion' }),{
- enabled: shouldFetch,
- onSuccess: (data) => {
- if (data) {
- localStorage.setItem('Homepage_promotionProgram', JSON.stringify(data));
- setData(data);
- }
+ const fetchData = async () => {
+ const res = await fetch(`/api/hero-banner?type=banner-promotion`);
+ const { data } = await res.json();
+ if (data) {
+ setData(data);
}
- }
- );
+ };
+
+ fetchData();
+ }, []);
+
+ // useEffect(() => {
+ // const localData = localStorage.getItem('Homepage_promotionProgram');
+ // if (localData) {
+ // setData(JSON.parse(localData));
+ // } else {
+ // setShouldFetch(true);
+ // }
+ // }, []);
- const promotionProgram = data
+ // const getPromotionProgram = useQuery(
+ // 'promotionProgram',
+ // bannerApi({ type: 'banner-promotion' }),
+ // {
+ // enabled: shouldFetch,
+ // onSuccess: (data) => {
+ // if (data) {
+ // localStorage.setItem(
+ // 'Homepage_promotionProgram',
+ // JSON.stringify(data)
+ // );
+ // setData(data);
+ // }
+ // },
+ // }
+ // );
- if (getPromotionProgram?.isLoading && !data) {
+ const promotionProgram = data;
+
+ // if (getPromotionProgram?.isLoading && !data) {
+ // return <BannerPromoSkeleton />;
+ // }
+ if (!data) {
return <BannerPromoSkeleton />;
}
@@ -62,24 +80,22 @@ const BannerSection = () => {
</Link>
)}
</div>
- {isDesktop &&
- promotionProgram &&
- promotionProgram?.length > 0 && (
- <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
- {promotionProgram?.map((banner) => (
- <Link key={banner.id} href={banner.url}>
- <Image
- width={439}
- height={150}
- quality={85}
- src={banner.image}
- alt={banner.name}
- className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
- />
- </Link>
- ))}
- </div>
- )}
+ {isDesktop && promotionProgram && promotionProgram?.length > 0 && (
+ <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
+ {promotionProgram?.map((banner) => (
+ <Link key={banner.id} href={banner.url}>
+ <Image
+ width={439}
+ height={150}
+ quality={85}
+ src={banner.image}
+ alt={banner.name}
+ className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+ />
+ </Link>
+ ))}
+ </div>
+ )}
{isMobile && (
<Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index f4569574..5dfd452b 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -264,11 +264,17 @@ const ProductDesktopVariant = ({
product.manufacture.id.toString()
)}
>
- <Image
- width={100}
- src={product.manufacture.logo}
- alt={product.manufacture.name}
- />
+ {product?.manufacture.logo ? (
+ <Image
+ width={100}
+ src={product.manufacture.logo}
+ alt={product.manufacture.name}
+ />
+ ) : (
+ <p className='font-bold text-red-500'>
+ {product.manufacture.name}
+ </p>
+ )}
</Link>
</div>
</div>
@@ -434,7 +440,7 @@ const ProductDesktopVariant = ({
</div>
<div>
<Skeleton
- isLoaded={sla}
+ isLoaded={!isLoadingSLA}
h='21px'
// w={16}
className={
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index d3b50302..3e6a6913 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -10,12 +10,13 @@ import { sellingProductFormat } from '@/core/utils/formatValue';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import useUtmSource from '~/hooks/useUtmSource';
+import useDevice from '@/core/hooks/useDevice';
const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
const router = useRouter();
const utmSource = useUtmSource();
const [discount, setDiscount] = useState(0);
-
+ const { isDesktop, isMobile } = useDevice();
let voucherPastiHemat = 0;
voucherPastiHemat = product?.newVoucherPastiHemat[0];
@@ -26,9 +27,13 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
});
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]);
const URL = {
product:
@@ -143,7 +148,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
<div className='flex justify-between '>
{product?.manufacture?.name ? (
- <Link href={URL.manufacture} className='mb-1 mt-1'>
+ <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
{product.manufacture.name}
</Link>
) : (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:16:08 +0000