summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/product/components/Product/ProductDesktopVariant.jsx66
-rw-r--r--src/lib/product/components/Product/ProductMobileVariant.jsx71
2 files changed, 123 insertions, 14 deletions
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 09b30a44..882673f4 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -6,6 +6,11 @@ import { useRouter } from 'next/router';
import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'react-hot-toast';
import LazyLoad from 'react-lazy-load';
+import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist'
+import { RWebShare } from 'react-web-share'
+// import Link from 'next/link'
import { useProductCartContext } from '@/contexts/ProductCartContext';
import odooApi from '@/core/api/odooApi';
@@ -18,11 +23,14 @@ import { updateItemCart } from '@/core/utils/cart';
import currencyFormat from '@/core/utils/currencyFormat';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
+import Breadcrumb from '../../../../../src-migrate/modules/product-detail/components/Breadcrumb';
import productSimilarApi from '../../api/productSimilarApi';
import ProductCard from '../ProductCard';
import ProductSimilar from '../ProductSimilar';
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
const ProductDesktopVariant = ({
product,
wishlist,
@@ -32,7 +40,7 @@ const ProductDesktopVariant = ({
const router = useRouter();
const auth = useAuth();
const { slug } = router.query;
-
+ const [ askAdminUrl, setAskAdminUrl ] = useState()
const [lowestPrice, setLowestPrice] = useState(null);
const [addCartAlert, setAddCartAlert] = useState(false);
@@ -53,6 +61,20 @@ const ProductDesktopVariant = ({
setLowestPrice(lowest);
}, [getLowestPrice]);
+ useEffect(() => {
+ const createdAskUrl = whatsappUrl({
+ template: 'product',
+ payload: {
+ manufacture: product.manufacture.name,
+ productName: product.name,
+ url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+ },
+ fallbackUrl: router.asPath
+ })
+
+ setAskAdminUrl(createdAskUrl)
+ }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
+
const [informationTab, setInformationTab] = useState(
informationTabOptions[0].value
);
@@ -154,6 +176,7 @@ const ProductDesktopVariant = ({
return (
<DesktopView>
<div className='container mx-auto pt-10'>
+ <Breadcrumb productId={product.id} productName={product.name} />
<div className='flex'>
<div className='w-full flex flex-wrap'>
<div className='w-5/12'>
@@ -263,9 +286,42 @@ const ProductDesktopVariant = ({
</div>
</div>
</div>
+ <div className='h-6' />
+ <div className="flex gap-x-5">
+ <Button
+ as={Link}
+ href={askAdminUrl}
+ variant='link'
+ target='_blank'
+ colorScheme='gray'
+ leftIcon={<MessageCircleIcon size={18} />}
+ >
+ Ask Admin
+ </Button>
+
+ <AddToWishlist productId={product.id} />
+
+ <RWebShare
+ data={{
+ text: 'Check out this product',
+ title: `${product.name} - Indoteknik.com`,
+ url: SELF_HOST + router.asPath
+ }}
+ >
+ <Button
+ variant='link'
+ colorScheme='gray'
+ leftIcon={<Share2Icon size={18} />}
+ >
+ Share
+ </Button>
+ </RWebShare>
+ </div>
</div>
+
- <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
+
+ <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl w-[99%]'>
<h2 className='text-h-md md:text-h-lg font-medium'>Informasi Produk</h2>
<div className='h-4' />
<div
@@ -279,7 +335,7 @@ const ProductDesktopVariant = ({
/>
</div>
</div>
- <div className='w-[25%]'>
+ <div className='w-[35%]'>
{product?.isFlashsale > 0 &&
product?.price?.discountPercentage > 0 ? (
<>
@@ -359,7 +415,7 @@ const ProductDesktopVariant = ({
Beli
</button>
</div>
- <div className='flex mt-4'>
+ {/* <div className='flex mt-4'>
<button
className='flex items-center gap-x-1'
onClick={toggleWishlist}
@@ -371,7 +427,7 @@ const ProductDesktopVariant = ({
)}
Wishlist
</button>
- </div>
+ </div> */}
<div className='border border-gray_r-6 overflow-auto mt-4'>
<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
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index af9e52bb..ce836d5b 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -16,9 +16,15 @@ import currencyFormat from '@/core/utils/currencyFormat';
import { gtagAddToCart } from '@/core/utils/googleTag';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
-
+import Breadcrumb from '../../../../../src-migrate/modules/product-detail/components/Breadcrumb';
+import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import AddToWishlist from '../../../../../src-migrate/modules/product-detail/components/AddToWishlist'
+import { RWebShare } from 'react-web-share'
import ProductSimilar from '../ProductSimilar';
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter();
@@ -28,7 +34,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
informationTabOptions[0].value
);
const [addCartAlert, setAddCartAlert] = useState(false);
-
+ const [ askAdminUrl, setAskAdminUrl ] = useState()
const [isLoadingSLA, setIsLoadingSLA] = useState(true);
const getLowestPrice = () => {
@@ -60,6 +66,20 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
}
}, [selectedVariant, product]);
+ useEffect(() => {
+ const createdAskUrl = whatsappUrl({
+ template: 'product',
+ payload: {
+ manufacture: product.manufacture.name,
+ productName: product.name,
+ url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+ },
+ fallbackUrl: router.asPath
+ })
+
+ setAskAdminUrl(createdAskUrl)
+ }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
+
const validAction = () => {
let isValid = true;
if (!selectedVariant) {
@@ -120,14 +140,17 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
return (
<MobileView>
+ <div className='p-4'>
+ <Breadcrumb id={product.id} name={product.name} />
+ </div>
<Image
src={product.image + '?variant=True'}
alt={product.name}
- className='h-72 object-contain object-center w-full border-b border-gray_r-4'
+ className='h-72 object-contain mt-4 object-center w-full border-b border-gray_r-4'
/>
<div className='p-4'>
- <div className='flex items-end mb-2'>
+ <div className='flex items-center mb-2'>
{product.manufacture?.name ? (
<Link
href={createSlug(
@@ -141,15 +164,45 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
) : (
<div>-</div>
)}
- <button type='button' className='ml-auto' onClick={toggleWishlist}>
+ <div className="ml-2 flex gap-x-5">
+ <Button
+ as={Link}
+ href={askAdminUrl}
+ variant='link'
+ target='_blank'
+ colorScheme='gray'
+ leftIcon={<MessageCircleIcon size={18} />}
+ >
+ Ask Admin
+ </Button>
+
+ <AddToWishlist productId={product.id} />
+
+ <RWebShare
+ data={{
+ text: 'Check out this product',
+ title: `${product.name} - Indoteknik.com`,
+ url: SELF_HOST + router.asPath
+ }}
+ >
+ <Button
+ variant='link'
+ colorScheme='gray'
+ leftIcon={<Share2Icon size={18} />}
+ >
+ Share
+ </Button>
+ </RWebShare>
+ </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>
+ </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 ? (
@@ -173,11 +226,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
</div>
</>
) : (
- <h3 className='text-danger-500 font-semibold mt-1'>
+ <h3 className='font-medium text-danger-500 text-title-md mt-1'>
{activeVariant?.price?.price > 0 ? (
<>
{currencyFormat(activeVariant?.price?.price)}
- <div className='text-gray_r-9 text-base font-normal mt-1'>
+ <div className='text-gray_r-9 text-base font-medium mt-1'>
Termasuk PPN:{' '}
{currencyFormat(
activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 05:50:53 +0000