summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/cart/components/Cartheader.jsx354
-rw-r--r--src/lib/home/components/ServiceList.jsx4
-rw-r--r--src/lib/product/components/Product/ProductDesktopVariant.jsx19
-rw-r--r--src/lib/product/components/Product/ProductMobileVariant.jsx16
4 files changed, 251 insertions, 142 deletions
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index ddb77c1f..1c30bb13 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,105 +1,115 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { getCartApi } from '../api/CartApi'
-import currencyFormat from '@/core/utils/currencyFormat'
-import { createSlug } from '@/core/utils/slug'
-import useAuth from '@/core/hooks/useAuth'
-import { useRouter } from 'next/router'
-import odooApi from '@/core/api/odooApi'
-import { useProductCartContext } from '@/contexts/ProductCartContext'
-import Image from '@/core/components/elements/Image/Image'
-import whatsappUrl from '@/core/utils/whatsappUrl'
-import { AnimatePresence, motion } from 'framer-motion'
-import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
-const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
-const { default: Link } = require('next/link')
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getCartApi } from '../api/CartApi';
+import currencyFormat from '@/core/utils/currencyFormat';
+import { createSlug } from '@/core/utils/slug';
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
+import odooApi from '@/core/api/odooApi';
+import { useProductCartContext } from '@/contexts/ProductCartContext';
+import Image from '@/core/components/elements/Image/Image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { AnimatePresence, motion } from 'framer-motion';
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css';
+const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline');
+const { default: Link } = require('next/link');
const Cardheader = (cartCount) => {
-
- const router = useRouter()
- const [subTotal, setSubTotal] = useState(null)
- const [buttonLoading, SetButtonTerapkan] = useState(false)
- const itemLoading = [1, 2, 3]
- const auth = useAuth()
- const [countCart, setCountCart] = useState(null)
- const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
- useProductCartContext()
+ const router = useRouter();
+ const [subTotal, setSubTotal] = useState(null);
+ const [buttonLoading, SetButtonTerapkan] = useState(false);
+ const itemLoading = [1, 2, 3];
+ const auth = useAuth();
+ const [countCart, setCountCart] = useState(null);
+ const {
+ productCart,
+ setRefreshCart,
+ setProductCart,
+ refreshCart,
+ isLoading,
+ setIsloading,
+ } = useProductCartContext();
- const [isHovered, setIsHovered] = useState(false)
- const [isTop, setIsTop] = useState(true)
+ const [isHovered, setIsHovered] = useState(false);
+ const [isTop, setIsTop] = useState(true);
const products = useMemo(() => {
- return productCart?.products || []
- }, [productCart])
+ return productCart?.products || [];
+ }, [productCart]);
const handleMouseEnter = () => {
- setIsHovered(true)
- getCart()
- }
+ setIsHovered(true);
+ getCart();
+ };
const handleMouseLeave = () => {
- setIsHovered(false)
- }
+ setIsHovered(false);
+ };
const getCart = () => {
if (!productCart && auth) {
- refreshCartf()
+ refreshCartf();
}
- }
+ };
const refreshCartf = useCallback(async () => {
- setIsloading(true)
- let cart = await getCartApi()
- setProductCart(cart)
- setCountCart(cart?.productTotal)
- setIsloading(false)
- }, [setProductCart, setIsloading])
+ setIsloading(true);
+ let cart = await getCartApi();
+ setProductCart(cart);
+ setCountCart(cart?.products?.length);
+ setIsloading(false);
+ }, [setProductCart, setIsloading]);
useEffect(() => {
- if (!products) return
+ if (!products) return;
- let calculateTotalPriceBeforeTax = 0
- let calculateTotalTaxAmount = 0
- let calculateTotalDiscountAmount = 0
+ let calculateTotalPriceBeforeTax = 0;
+ let calculateTotalTaxAmount = 0;
+ let calculateTotalDiscountAmount = 0;
for (const product of products) {
- if (product.quantity == '') continue
+ if (product.quantity == '') continue;
- let priceBeforeTax = product.price.price / 1.11
- calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
- calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
+ let priceBeforeTax = product.price.price / 1.11;
+ calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
+ calculateTotalTaxAmount +=
+ (product.price.price - priceBeforeTax) * product.quantity;
calculateTotalDiscountAmount +=
- (product.price.price - product.price.priceDiscount) * product.quantity
+ (product.price.price - product.price.priceDiscount) * product.quantity;
}
let subTotal =
- calculateTotalPriceBeforeTax - calculateTotalDiscountAmount + calculateTotalTaxAmount
- setSubTotal(subTotal)
- }, [products])
+ calculateTotalPriceBeforeTax -
+ calculateTotalDiscountAmount +
+ calculateTotalTaxAmount;
+ setSubTotal(subTotal);
+ }, [products]);
useEffect(() => {
if (refreshCart) {
- refreshCartf()
+ refreshCartf();
}
- setRefreshCart(false)
- }, [refreshCart, refreshCartf, setRefreshCart])
+ setRefreshCart(false);
+ }, [refreshCart, refreshCartf, setRefreshCart]);
useEffect(() => {
- setCountCart(cartCount.cartCount)
- setRefreshCart(false)
- }, [cartCount])
+ setCountCart(cartCount.cartCount);
+ setRefreshCart(false);
+ }, [cartCount]);
useEffect(() => {
const handleScroll = () => {
- setIsTop(window.scrollY === 0)
- }
- window.addEventListener('scroll', handleScroll)
+ setIsTop(window.scrollY === 0);
+ };
+ window.addEventListener('scroll', handleScroll);
return () => {
- window.removeEventListener('scroll', handleScroll)
- }
- }, [])
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
const handleCheckout = async () => {
- SetButtonTerapkan(true)
- let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
- router.push('/shop/checkout')
- }
-
+ SetButtonTerapkan(true);
+ let checkoutAll = await odooApi(
+ 'POST',
+ `/api/v1/user/${auth.id}/cart/select-all`
+ );
+ router.push('/shop/checkout');
+ };
return (
<div className='relative group'>
@@ -152,8 +162,13 @@ const Cardheader = (cartCount) => {
className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
>
<div className='p-2 flex justify-between items-center'>
- <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
- <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+ <h5 className='text-base font-semibold leading-none'>
+ Keranjang Belanja
+ </h5>
+ <Link
+ href='/shop/cart'
+ class='text-sm font-medium text-red-600 underline'
+ >
Lihat Semua
</Link>
</div>
@@ -163,7 +178,10 @@ const Cardheader = (cartCount) => {
<div className='justify-center p-4'>
<p className='text-gray-500 text-center '>
Silahkan{' '}
- <Link href='/login' className='text-red-600 underline leading-6'>
+ <Link
+ href='/login'
+ className='text-red-600 underline leading-6'
+ >
Login
</Link>{' '}
Untuk Melihat Daftar Keranjang Belanja Anda
@@ -172,7 +190,11 @@ const Cardheader = (cartCount) => {
)}
{isLoading &&
itemLoading.map((item) => (
- <div key={item} role='status' className='max-w-sm animate-pulse'>
+ <div
+ key={item}
+ role='status'
+ className='max-w-sm animate-pulse'
+ >
<div className='flex items-center space-x-4 mb- 2'>
<div className='flex-shrink-0'>
<PhotoIcon className='h-16 w-16 text-gray-500' />
@@ -194,14 +216,17 @@ const Cardheader = (cartCount) => {
)}
{auth && products.length > 0 && !isLoading && (
<>
- <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+ <ul
+ role='list'
+ className='divide-y divide-gray-200 dark:divide-gray-700'
+ >
{products &&
products?.map((product, index) => (
<>
<li className='py-1 sm:py-2'>
<div className='flex items-center space-x-4'>
<div className='bagian gambar flex-shrink-0'>
- {product.cartType === 'promotion' && (
+ {product.cartType === 'promotion' && (
<Image
src={product.imageProgram[0]}
alt={product.name}
@@ -227,10 +252,10 @@ const Cardheader = (cartCount) => {
</div>
<div className='bagian tulisan dan harga flex-1 min-w-0'>
{product.cartType === 'promotion' && (
- <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
- {product.name}
- </p>
- )}
+ <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+ {product.name}
+ </p>
+ )}
{product.cartType === 'product' && (
<Link
href={createSlug(
@@ -252,27 +277,32 @@ const Cardheader = (cartCount) => {
{product?.price?.discountPercentage}%
</div>
<div className='text-gray_r-11 line-through text-caption-2'>
- {currencyFormat(product?.price?.price)}
+ {currencyFormat(
+ product?.price?.price
+ )}
</div>
</div>
)}
-
+
<div className='flex justify-between items-center'>
<div className='font-semibold text-sm text-red-600'>
{product?.price?.priceDiscount > 0 ? (
- currencyFormat(product?.price?.priceDiscount)
+ currencyFormat(
+ product?.price?.priceDiscount
+ )
) : (
<span className='text-gray_r-12/90 font-normal text-caption-1'>
<a
href={whatsappUrl('product', {
name: product.name,
- manufacture: product.manufacture?.name,
+ manufacture:
+ product.manufacture?.name,
url: createSlug(
'/shop/product/',
product.name,
product.id,
true
- )
+ ),
})}
className='text-danger-500 underline'
rel='noopener noreferrer'
@@ -286,56 +316,112 @@ const Cardheader = (cartCount) => {
</div>
</div>
</div>
- <div className="flex flex-col w-3/4">
- {product.products?.map((product) =>
- <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
- <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
- {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
- </Link>
-
- <div className="ml-4 w-full flex flex-col gap-y-1">
- <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
- {product.displayName}
- </Link>
-
- <div className='flex w-full'>
- <div className="flex flex-col">
- {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
- <div>
- <span className="text-gray-500 text-caption-1">Berat Barang: </span>
- <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
- </div>
- </div>
+ <div className='flex flex-col w-3/4'>
+ {product.products?.map((product) => (
+ <div
+ key={product.id}
+ className='md:ml-8 ml-4 mt-2 flex'
+ >
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product.parent.name,
+ product.parent.id.toString()
+ )}
+ className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
+ >
+ {product?.image && (
+ <Image
+ src={product.image}
+ alt={product.name}
+ width={40}
+ height={40}
+ className='w-full h-full object-fill'
+ />
+ )}
+ </Link>
+
+ <div className='ml-4 w-full flex flex-col gap-y-1'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product.parent.name,
+ product.parent.id.toString()
+ )}
+ className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
+ >
+ {product.displayName}
+ </Link>
+
+ <div className='flex w-full'>
+ <div className='flex flex-col'>
+ {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+ <div>
+ <span className='text-gray-500 text-caption-1'>
+ Berat Barang:{' '}
+ </span>
+ <span className='text-gray-500 text-caption-1'>
+ {product.packageWeight} Kg
+ </span>
</div>
</div>
-
</div>
+ </div>
+ </div>
+ ))}
+ {product.freeProducts?.map((product) => (
+ <div
+ key={product.id}
+ className='md:ml-8 ml-4 mt-2 flex'
+ >
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product.parent.name,
+ product.parent.id.toString()
)}
- {product.freeProducts?.map((product) =>
- <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
- <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
- {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+ className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '
+ >
+ {product?.image && (
+ <Image
+ src={product.image}
+ alt={product.name}
+ width={40}
+ height={40}
+ className='w-full h-full object-fill'
+ />
+ )}
+ </Link>
+
+ <div className='ml-4 w-full flex flex-col gap-y-1'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product.parent.name,
+ product.parent.id.toString()
+ )}
+ className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'
+ >
+ {product.displayName}
</Link>
-
- <div className="ml-4 w-full flex flex-col gap-y-1">
- <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
- {product.displayName}
- </Link>
-
- <div className='flex w-full'>
- <div className="flex flex-col">
- {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
- <div>
- <span className="text-gray-500 text-caption-1">Berat Barang: </span>
- <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
- </div>
- </div>
+
+ <div className='flex w-full'>
+ <div className='flex flex-col'>
+ {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+ <div>
+ <span className='text-gray-500 text-caption-1'>
+ Berat Barang:{' '}
+ </span>
+ <span className='text-gray-500 text-caption-1'>
+ {product.packageWeight} Kg
+ </span>
</div>
</div>
-
</div>
- )}
+ </div>
</div>
+ ))}
+ </div>
</li>
</>
))}
@@ -347,8 +433,12 @@ const Cardheader = (cartCount) => {
{auth && products.length > 0 && !isLoading && (
<>
<div className='mt-3'>
- <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
- <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+ <span className='text-gray-400 text-caption-2'>
+ Subtotal Sebelum PPN :{' '}
+ </span>
+ <span className='font-semibold text-red-600'>
+ {currencyFormat(subTotal)}
+ </span>
</div>
<div className='mt-5 mb-2'>
<button
@@ -357,7 +447,9 @@ const Cardheader = (cartCount) => {
onClick={handleCheckout}
disabled={buttonLoading}
>
- {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+ {buttonLoading
+ ? 'Loading...'
+ : 'Lanjutkan Ke Pembayaran'}
</button>
</div>
</>
@@ -368,7 +460,7 @@ const Cardheader = (cartCount) => {
)}
</AnimatePresence>
</div>
- )
-}
+ );
+};
-export default Cardheader
+export default Cardheader;
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index 5b16915d..b3cc8fe5 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -32,7 +32,7 @@ const ServiceList = () => {
</div>
<div className='w-full'>
<Link
- href='/tentang-kami'
+ href='/garansi-resmi'
className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
>
<div className=''>
@@ -57,7 +57,7 @@ const ServiceList = () => {
</div>
<div className='w-full '>
<Link
- href='/tentang-kami'
+ href='/pembayaran-tempo'
className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
>
<div className=''>
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index c181676c..e7a1fa4e 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -4,8 +4,9 @@ import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'react-hot-toast';
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist';
+import { RWebShare } from 'react-web-share';
import LazyLoad from 'react-lazy-load';
-
import { useProductCartContext } from '@/contexts/ProductCartContext';
import odooApi from '@/core/api/odooApi';
import Image from '@/core/components/elements/Image/Image';
@@ -20,11 +21,11 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
import { getAuth } from '~/libs/auth';
import ImageNext from 'next/image';
-import { RWebShare } from 'react-web-share';
import productSimilarApi from '../../api/productSimilarApi';
import ProductCard from '../ProductCard';
import ProductSimilar from '../ProductSimilar';
import ProductPromoSection from '~/modules/product-promo/components/Section';
+import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
@@ -38,6 +39,7 @@ const ProductDesktopVariant = ({
let auth = useAuth();
const { slug } = router.query;
const { srsltid } = router.query;
+ const [askAdminUrl, setAskAdminUrl, isApproval] = useState();
const [lowestPrice, setLowestPrice] = useState(null);
const [addCartAlert, setAddCartAlert] = useState(false);
@@ -229,6 +231,7 @@ const ProductDesktopVariant = ({
};
fetchData();
}, [product]);
+ console.log('product', product);
return (
<DesktopView>
@@ -533,7 +536,7 @@ const ProductDesktopVariant = ({
<div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
Produk Serupa
</div>
- <div className='h-full divide-y divide-gray_r-6 max-h-96'>
+ <div className='h-full divide-y divide-gray_r-6 max-h-[500px]'>
{productSimilarInBrand &&
productSimilarInBrand?.map((product) => (
<div className='py-2' key={product.id}>
@@ -550,8 +553,11 @@ const ProductDesktopVariant = ({
Kamu Mungkin Juga Suka
</div>
<LazyLoad>
- <ProductSimilar query={productSimilarQuery} />
+ <SimilarBottom product={product} />
</LazyLoad>
+ {/* <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad> */}
</div>
<BottomPopup
@@ -586,8 +592,11 @@ const ProductDesktopVariant = ({
Kamu Mungkin Juga Suka
</div>
<LazyLoad>
- <ProductSimilar query={productSimilarQuery} />
+ <SimilarBottom product={product} />
</LazyLoad>
+ {/* <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad> */}
</div>
</BottomPopup>
</div>
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index b00c2daa..b87bcbc8 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -17,7 +17,7 @@ import { gtagAddToCart } from '@/core/utils/googleTag';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { getAuth } from '~/libs/auth';
-
+import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
import ProductSimilar from '../ProductSimilar';
const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
@@ -197,7 +197,9 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
)}
</button>
</div>
- <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
+ <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
+ {activeVariant?.name}
+ </h1>
{activeVariant.isFlashSale &&
activeVariant?.price?.discountPercentage > 0 ? (
@@ -438,8 +440,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
<div className='p-4'>
<h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
<LazyLoad>
- <ProductSimilar query={productSimilarQuery} />
+ <SimilarBottom product={product} />
</LazyLoad>
+ {/* <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad> */}
</div>
<BottomPopup
@@ -472,8 +477,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
Kamu Mungkin Juga Suka
</div>
<LazyLoad>
- <ProductSimilar query={productSimilarQuery} />
+ <SimilarBottom product={product} />
</LazyLoad>
+ {/* <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad> */}
</div>
</BottomPopup>
</MobileView>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:42:26 +0000