summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/checkout/components/Checkout.jsx40
-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/Product/ProductMobileVariant.jsx154
-rw-r--r--src/lib/product/components/ProductCard.jsx15
-rw-r--r--src/lib/treckingAwb/component/Manifest.jsx124
12 files changed, 434 insertions, 446 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index e83e719c..6fb5cdb4 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -37,6 +37,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;
@@ -413,7 +425,12 @@ const Checkout = () => {
Math.round(parseInt(finalShippingAmt * 1.1) / 1000) * 1000;
const finalGT = GT < 0 ? 0 : GT;
setGrandTotal(finalGT);
- }, [biayaKirim, cartCheckout?.grandTotal, activeVoucher, activeVoucherShipping]);
+ }, [
+ biayaKirim,
+ cartCheckout?.grandTotal,
+ activeVoucher,
+ activeVoucherShipping,
+ ]);
const checkout = async () => {
const file = poFile.current.files[0];
@@ -484,6 +501,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(
@@ -501,7 +525,7 @@ const Checkout = () => {
}
}
- /* const midtrans = async () => {
+ /* const midtrans = async () => {
for (const product of products) deleteItemCart({ productId: product.id });
if (grandTotal > 0) {
const payment = await axios.post(
@@ -1193,7 +1217,11 @@ const Checkout = () => {
<div className='text-gray_r-11'>
Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p>
</div>
- <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
+ <div>
+ {currencyFormat(
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
</div>
{activeVoucherShipping && voucherShippingAmt && (
<div className='flex gap-x-2 justify-between'>
@@ -1494,7 +1522,11 @@ const Checkout = () => {
Biaya Kirim
<p className='text-xs mt-1'>{etdFix}</p>
</div>
- <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000) }</div>
+ <div>
+ {currencyFormat(
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
</div>
{activeVoucherShipping && voucherShippingAmt && (
<div className='flex gap-x-2 justify-between'>
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/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index b87bcbc8..de5c3f10 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -168,44 +168,14 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
return (
<MobileView>
- <Image
- src={product.image + '?variant=True'}
- alt={product.name}
- className='h-72 object-contain object-center w-full border-b border-gray_r-4'
- />
-
- <div className='p-4'>
- <div className='flex items-end mb-2'>
- {product.manufacture?.name ? (
- <Link
- href={createSlug(
- '/shop/brands/',
- product.manufacture?.name,
- product.manufacture?.id
- )}
- >
- {product.manufacture?.name}
- </Link>
- ) : (
- <div>-</div>
- )}
- <button type='button' className='ml-auto' onClick={toggleWishlist}>
- {wishlist.data?.productTotal > 0 ? (
- <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
- ) : (
- <HeartIcon className='w-6' />
- )}
- </button>
- </div>
- <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
- {activeVariant?.name}
- </h1>
-
+ <div
+ className={`px-4 block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-2 z-10 pb-6 pt-6 rounded-lg shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px] `}
+ >
{activeVariant.isFlashSale &&
activeVariant?.price?.discountPercentage > 0 ? (
<>
<div className='flex gap-x-1 items-center'>
- <div className='badge-solid-red'>
+ <div className='bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2'>
{activeVariant?.price?.discountPercentage}%
</div>
<div className='text-gray_r-11 line-through text-caption-1'>
@@ -223,7 +193,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
</div>
</>
) : (
- <h3 className='text-danger-500 font-semibold mt-1'>
+ <div className='text-danger-500 font-semibold mt-1 text-3xl'>
{activeVariant?.price?.price > 0 ? (
<>
{currencyFormat(activeVariant?.price?.price)}
@@ -253,54 +223,84 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
</a>
</span>
)}
- </h3>
+ </div>
)}
+ <div className=''>
+ <div className='mt-4 mb-2'>Jumlah</div>
+ <div className='flex gap-x-3'>
+ <div className='w-2/12'>
+ <input
+ name='quantity'
+ type='number'
+ className='form-input'
+ value={quantity}
+ onChange={(e) => setQuantity(e.target.value)}
+ />
+ </div>
+ <button
+ type='button'
+ className='btn-yellow flex-1'
+ onClick={handleClickCart}
+ >
+ Keranjang
+ </button>
+ <button
+ type='button'
+ className='btn-solid-red flex-1'
+ onClick={handleClickBuy}
+ >
+ Beli
+ </button>
+ </div>
+ <Button
+ onClick={() => handleButton(product.id)}
+ color={'red'}
+ colorScheme='white'
+ className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center'
+ >
+ <ImageNext
+ src='/images/writing.png'
+ alt='penawaran instan'
+ className=''
+ width={25}
+ height={25}
+ />
+ Penawaran Harga Instan
+ </Button>
+ </div>
</div>
-
- <Divider />
+ <Image
+ src={product.image + '?variant=True'}
+ alt={product.name}
+ className='h-72 object-contain object-center w-full border-b border-gray_r-4'
+ />
<div className='p-4'>
- <div className='mt-4 mb-2'>Jumlah</div>
- <div className='flex gap-x-3'>
- <div className='w-2/12'>
- <input
- name='quantity'
- type='number'
- className='form-input'
- value={quantity}
- onChange={(e) => setQuantity(e.target.value)}
- />
- </div>
- <button
- type='button'
- className='btn-yellow flex-1'
- onClick={handleClickCart}
- >
- Keranjang
- </button>
- <button
- type='button'
- className='btn-solid-red flex-1'
- onClick={handleClickBuy}
- >
- Beli
+ <div className='flex items-end mb-2'>
+ {product.manufacture?.name ? (
+ <Link
+ href={createSlug(
+ '/shop/brands/',
+ product.manufacture?.name,
+ product.manufacture?.id
+ )}
+ >
+ {product.manufacture?.name}
+ </Link>
+ ) : (
+ <div>-</div>
+ )}
+ <button type='button' className='ml-auto' onClick={toggleWishlist}>
+ {wishlist.data?.productTotal > 0 ? (
+ <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
+ ) : (
+ <HeartIcon className='w-6' />
+ )}
</button>
</div>
- <Button
- onClick={() => handleButton(product.id)}
- color={'red'}
- colorScheme='white'
- className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center'
- >
- <ImageNext
- src='/images/writing.png'
- alt='penawaran instan'
- className=''
- width={25}
- height={25}
- />
- Penawaran Harga Instan
- </Button>
+ <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
+ {activeVariant?.name}
+ </h1>
</div>
<Divider />
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>
) : (
diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx
index fbc95702..02d0bc7a 100644
--- a/src/lib/treckingAwb/component/Manifest.jsx
+++ b/src/lib/treckingAwb/component/Manifest.jsx
@@ -1,16 +1,16 @@
-import odooApi from '@/core/api/odooApi'
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { getAuth } from '@/core/utils/auth'
-import { useEffect, useState } from 'react'
-import { toast } from 'react-hot-toast'
-import ImageNext from 'next/image'
-import { list } from 'postcss'
+import odooApi from '@/core/api/odooApi';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner';
+import { getAuth } from '@/core/utils/auth';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import ImageNext from 'next/image';
+import { list } from 'postcss';
const Manifest = ({ idAWB, closePopup }) => {
- const [manifests, setManifests] = useState(null)
- const [isLoading, setIsLoading] = useState(false)
-
+ const [manifests, setManifests] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ console.log('manifests', manifests);
const formatCustomDate = (date) => {
const months = [
'Jan',
@@ -24,61 +24,60 @@ const Manifest = ({ idAWB, closePopup }) => {
'Sep',
'Oct',
'Nov',
- 'Dec'
- ]
+ 'Dec',
+ ];
- const parts = date.split(' ') // Pisahkan tanggal dan waktu
- const [datePart, timePart] = parts
- const [yyyy, mm, dd] = datePart.split('-')
- const [hh, min] = timePart.split(':')
+ const parts = date.split(' '); // Pisahkan tanggal dan waktu
+ const [datePart, timePart] = parts;
+ const [yyyy, mm, dd] = datePart.split('-');
+ const [hh, min] = timePart.split(':');
- const monthAbbreviation = months[parseInt(mm, 10) - 1]
+ const monthAbbreviation = months[parseInt(mm, 10) - 1];
- return `${dd} ${monthAbbreviation} ${hh}:${min}`
- }
+ return `${dd} ${monthAbbreviation} ${hh}:${min}`;
+ };
const getManifest = async () => {
- setIsLoading(true)
- const auth = getAuth()
- let list
- if(auth){
+ setIsLoading(true);
+ const auth = getAuth();
+ let list;
+ if (auth) {
list = await odooApi(
'GET',
`/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking`
- )
- }else{
- list = await odooApi(
- 'GET',
- `/api/v1/stock-picking/${idAWB}/tracking`
- )
+ );
+ } else {
+ list = await odooApi('GET', `/api/v1/stock-picking/${idAWB}/tracking`);
}
- setManifests(list)
- setIsLoading(false)
- }
+ setManifests(list);
+ setIsLoading(false);
+ };
useEffect(() => {
if (idAWB) {
- getManifest()
+ getManifest();
} else {
- setManifests(null)
+ setManifests(null);
}
- }, [idAWB])
+ }, [idAWB]);
- const [copied, setCopied] = useState(false)
+ const [copied, setCopied] = useState(false);
const handleCopyClick = () => {
- const textToCopy = manifests?.waybillNumber
- navigator.clipboard.writeText(textToCopy)
- setCopied(true)
- toast.success('No Resi Berhasil di Copy')
- setTimeout(() => setCopied(false), 2000) // Reset copied state after 2 seconds
- }
+ const textToCopy = manifests?.waybillNumber;
+ navigator.clipboard.writeText(textToCopy);
+ setCopied(true);
+ toast.success('No Resi Berhasil di Copy');
+ setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+ };
return (
<>
{isLoading && (
<BottomPopup active={true} close=''>
- <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+ <div className='leading-7 text-gray_r-12/80 flex justify-center'>
+ Mohon Tunggu
+ </div>
<div className='container flex justify-center my-4'>
<LogoSpinner width={48} height={48} />
</div>
@@ -111,11 +110,14 @@ const Manifest = ({ idAWB, closePopup }) => {
</div>
<div className=''>
<h1 className='text-body-1'>
- Estimasi tiba pada <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
+ Estimasi tiba pada{' '}
+ <span className='text-gray_r-11 text-sm'>({manifests?.eta})</span>
</h1>
<h1 className='text-sm mt-2 mb-3'>
Dikirim Menggunakan{' '}
- <span className='text-red-500 font-semibold'>{manifests?.deliveryOrder.carrier}</span>
+ <span className='text-red-500 font-semibold'>
+ {manifests?.deliveryOrder.carrier}
+ </span>
</h1>
{manifests?.waybillNumber && (
<div className='flex justify-between items-center'>
@@ -154,10 +156,16 @@ const Manifest = ({ idAWB, closePopup }) => {
{manifests.delivered == true && index == 0 ? (
<div
class={`absolute w-6 h-6 rounded-full mt-1.5 -left-3 border ${
- index == 0 ? 'bg-green-100 border-green-100' : 'bg-gray_r-7 border-white'
+ index == 0
+ ? 'bg-green-100 border-green-100'
+ : 'bg-gray_r-7 border-white'
}`}
>
- <ImageNext src='/images/open-box(1).svg' width={30} height={20} />
+ <ImageNext
+ src='/images/open-box(1).svg'
+ width={30}
+ height={20}
+ />
</div>
) : (
<div
@@ -167,7 +175,9 @@ const Manifest = ({ idAWB, closePopup }) => {
{manifests.delivered != true && (
<div
class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
- index == 0 ? 'bg-green-600 border-green-600' : 'bg-gray_r-7 border-white'
+ index == 0
+ ? 'bg-green-600 border-green-600'
+ : 'bg-gray_r-7 border-white'
} `}
/>
)}
@@ -176,9 +186,15 @@ const Manifest = ({ idAWB, closePopup }) => {
{formatCustomDate(manifest.datetime)}
</time>
{manifests.delivered == true && index == 0 && (
- <p class={`leading-6 font-semibold text-sm text-green-600 `}>Sudah Sampai</p>
+ <p
+ class={`leading-6 font-semibold text-sm text-green-600 `}
+ >
+ Sudah Sampai
+ </p>
)}
- <p class={`leading-6 text-[12px] text-gray_r-11`}>{manifest.description}</p>
+ <p class={`leading-6 text-[12px] text-gray_r-11`}>
+ {manifest.description}
+ </p>
</li>
</>
))}
@@ -187,7 +203,7 @@ const Manifest = ({ idAWB, closePopup }) => {
</BottomPopup>
)}
</>
- )
-}
+ );
+};
-export default Manifest
+export default Manifest;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:36:36 +0000