summaryrefslogtreecommitdiff
path: root/src-migrate
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate')
-rw-r--r--src-migrate/components/ui/image.tsx2
-rw-r--r--src-migrate/libs/whatsappUrl.ts4
-rw-r--r--src-migrate/modules/product-detail/components/AddToWishlist.tsx2
-rw-r--r--src-migrate/modules/product-detail/components/Breadcrumb.tsx40
-rw-r--r--src-migrate/modules/product-detail/components/Image.tsx12
-rw-r--r--src-migrate/modules/product-detail/components/Information.tsx34
-rw-r--r--src-migrate/modules/product-detail/components/PriceAction.tsx10
-rw-r--r--src-migrate/modules/product-detail/components/ProductDetail.tsx68
-rw-r--r--src-migrate/modules/product-detail/components/VariantList.tsx10
-rw-r--r--src-migrate/pages/shop/product/[slug].tsx13
-rw-r--r--src-migrate/pages/shop/product/product.module.css0
-rw-r--r--src-migrate/services/product.ts8
-rw-r--r--src-migrate/types/auth.ts4
-rw-r--r--src-migrate/types/category.ts4
-rw-r--r--src-migrate/types/odoo.ts5
15 files changed, 135 insertions, 81 deletions
diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
index a91b2a9d..c7ed0b0e 100644
--- a/src-migrate/components/ui/image.tsx
+++ b/src-migrate/components/ui/image.tsx
@@ -26,7 +26,7 @@ const Image = (props: ImageProps) => {
>
<NextImage
className={clsxm(
- 'duration-700 ease-in-out',
+ 'duration-500 ease-in-out',
isLoading
? 'scale-[1.02] blur-xl grayscale'
: 'scale-100 blur-0 grayscale-0',
diff --git a/src-migrate/libs/whatsappUrl.ts b/src-migrate/libs/whatsappUrl.ts
index 02c36cef..66879585 100644
--- a/src-migrate/libs/whatsappUrl.ts
+++ b/src-migrate/libs/whatsappUrl.ts
@@ -26,7 +26,9 @@ export const whatsappUrl = ({
let greetingText = '';
if (needLogin && !auth) {
- return fallbackUrl ? `/login=next?${fallbackUrl}` : '/login';
+ return fallbackUrl
+ ? `/login?next=${encodeURIComponent(fallbackUrl)}`
+ : '/login';
}
let result = TEMPLATES[template].replace(
diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
index eab3c7be..fccbdcf5 100644
--- a/src-migrate/modules/product-detail/components/AddToWishlist.tsx
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -6,7 +6,7 @@ const AddToWishlist = () => {
return (
<Button
variant='link'
- className='!text-gray-500 !font-medium'
+ colorScheme='gray'
leftIcon={<HeartIcon size={18} />}
>
Wishlist
diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
new file mode 100644
index 00000000..0ee5b115
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react'
+import { useQuery } from 'react-query'
+import { getProductCategoryBreadcrumb } from '~/services/product'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
+
+type Props = {
+ id: number,
+ name: string
+}
+
+const Breadcrumb = ({ id, name }: Props) => {
+ const query = useQuery({
+ queryKey: ['product-category-breadcrumb'],
+ queryFn: () => getProductCategoryBreadcrumb(id)
+ })
+
+ const breadcrumbs = query.data || []
+
+ return (
+ <div className='line-clamp-3 md:line-clamp-1 leading-7'>
+ <Link href='/' className='text-danger-500'>Home</Link>
+ <span className='mx-2'>/</span>
+ {breadcrumbs.map((category, index) => (
+ <Fragment key={index}>
+ <Link
+ href={createSlug('/shop/category/', category.name, category.id.toString())}
+ className='text-danger-500'
+ >
+ {category.name}
+ </Link>
+ <span className='mx-2'>/</span>
+ </Fragment>
+ ))}
+ <span>{name}</span>
+ </div>
+ )
+}
+
+export default Breadcrumb \ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 361580ea..2c5e989b 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -11,14 +11,16 @@ type Props = {
const Image = ({ product }: Props) => {
return (
- <div className='h-[340px] border border-gray-200 rounded-lg p-2 relative'>
+ <div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'>
<ImageUI
src={product.image || '/images/noimage.jpeg'}
alt={product.name}
- width={512}
- height={512}
- className='object-contain object-center h-full'
- classNames={{ wrapper: 'h-full' }}
+ width={256}
+ height={256}
+ className='object-contain object-center h-full w-full'
+ classNames={{ wrapper: 'h-full w-full' }}
+ loading='eager'
+ priority
/>
<div className='absolute hidden md:block top-4 right-4'>
<Tooltip
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index fd0e0b3c..52eb6b88 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -9,6 +9,7 @@ import { IProductDetail } from '~/types/product'
import { IProductVariantSLA } from '~/types/productVariant'
import { createSlug } from '~/libs/slug'
import { getVariantSLA } from '~/services/productVariant'
+import { formatToShortText } from '~/libs/formatNumber'
const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))
@@ -31,10 +32,6 @@ const Information = ({ product }: Props) => {
<div className={style['label']}>SKU Number</div>
<div className={style['value']}>SKU-{product.id}</div>
</div>
- {/* <div className={style['row']}>
- <div className={style['label']}>Part Number</div>
- <div className={style['value']}>{product.code || '-'}</div>
- </div> */}
<div className={style['row']}>
<div className={style['label']}>Manufacture</div>
<div className={style['value']}>
@@ -48,35 +45,10 @@ const Information = ({ product }: Props) => {
) : '-'}
</div>
</div>
- {/* <div className={style['row']}>
- <div className={style['label']}>Preparation Time</div>
- <div className={style['value']}>
- {product.variant_total > 1 && 'Lihat Variant'}
- {product.variant_total === 1 && (
- <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '40px'} h='100%'>
- {sla?.sla_date}
- </Skeleton>
- )}
- </div>
- </div>
<div className={style['row']}>
- <div className={style['label']}>Stock</div>
- <div className={style['value']}>
- {product.variant_total > 1 && 'Lihat Variant'}
- {product.variant_total === 1 && (
- <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '10px'} h='100%'>
- {sla?.qty && sla.qty > 0 ? sla?.qty : '-'}
- </Skeleton>
- )}
- </div>
+ <div className={style['label']}>Terjual</div>
+ <div className={style['value']}>{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}</div>
</div>
- <div className={style['row']}>
- <div className={style['label']}>Weight</div>
- <div className={style['value']}>
- {product.variant_total > 1 && 'Lihat Variant'}
- {product.variant_total === 1 && (product.weight > 0 ? `${product.weight} kg` : '-')}
- </div>
- </div> */}
</div>
)
}
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index cfb596fa..dd211f6f 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -28,13 +28,6 @@ const PriceAction = ({ product }: Props) => {
return (
<div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'>
- {product.qty_sold > 0 && (
- <div className={style['secondary-text']}>
- {formatToShortText(product.qty_sold)} Terjual
- </div>
- )}
- <div className='h-2' />
-
{!!activePrice && activePrice.price > 0 && (
<>
<div className={style['main-price']}>
@@ -60,7 +53,8 @@ const PriceAction = ({ product }: Props) => {
<div className='h-4' />
<div className={style['action-wrapper']}>
- <input type='number' value={quantityInput} onChange={(e) => setQuantityInput(e.target.value)} className={style['quantity-input']} />
+ <label htmlFor="quantity" className='hidden'>Quantity</label>
+ <input type='number' id='quantity' value={quantityInput} onChange={(e) => setQuantityInput(e.target.value)} className={style['quantity-input']} />
<AddToCart variantId={activeVariantId} quantity={Number(quantityInput)} />
<AddToCart source='buy' variantId={activeVariantId} quantity={Number(quantityInput)} />
</div>
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 08ad7d51..93fa7118 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,28 +2,34 @@ import style from '../styles/product-detail.module.css'
import React, { useEffect } from 'react'
import Link from 'next/link'
-import { MessageCircleIcon } from 'lucide-react'
+import { useRouter } from 'next/router'
+
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
import { Button } from '@chakra-ui/react'
import { IProductDetail } from '~/types/product'
+import useDevice from '@/core/hooks/useDevice'
+import { whatsappUrl } from '~/libs/whatsappUrl'
+import { useProductDetail } from '../stores/useProductDetail'
+
+import { RWebShare } from 'react-web-share'
import ProductImage from './Image'
import Information from './Information'
import AddToWishlist from './AddToWishlist'
import VariantList from './VariantList'
import SimilarSide from './SimilarSide'
import SimilarBottom from './SimilarBottom'
-import useDevice from '@/core/hooks/useDevice'
import PriceAction from './PriceAction'
-import { whatsappUrl } from '~/libs/whatsappUrl'
-import { useRouter } from 'next/router'
-import { useProductDetail } from '../stores/useProductDetail'
import ProductPromoSection from '~/modules/product-promo/components/Section'
+import Breadcrumb from './Breadcrumb'
type Props = {
product: IProductDetail
}
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
const ProductDetail = ({ product }: Props) => {
const { isDesktop, isMobile } = useDevice()
const router = useRouter()
@@ -46,6 +52,9 @@ const ProductDetail = ({ product }: Props) => {
return (
<>
<div className='md:flex md:flex-wrap'>
+ <div className="w-full mb-4 md:mb-6 px-4 md:px-0">
+ <Breadcrumb id={product.id} name={product.name} />
+ </div>
<div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
<div className='md:flex md:flex-wrap'>
<div className="md:w-4/12">
@@ -63,18 +72,39 @@ const ProductDetail = ({ product }: Props) => {
<Information product={product} />
- <div className='h-4' />
+ <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 />
+
+ <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
- as={Link}
- href={askAdminUrl}
- variant='link'
- target='_blank'
- colorScheme='red'
- leftIcon={<MessageCircleIcon size={18} />}
- >
- Ask Admin
- </Button>
</div>
</div>
@@ -117,9 +147,7 @@ const ProductDetail = ({ product }: Props) => {
<div className="md:w-3/12">
<PriceAction product={product} />
- <AddToWishlist />
-
- <div className='h-8' />
+ <div className='h-6' />
<div className={style['heading']}>
Produk Serupa
@@ -131,7 +159,7 @@ const ProductDetail = ({ product }: Props) => {
</div>
)}
- <div className='md:w-full py-0 md:py-10 px-4 md:px-0'>
+ <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
<div className={style['heading']}>
Kamu Mungkin Juga Suka
</div>
diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index 96b7486b..e8c18921 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -22,10 +22,10 @@ const VariantList = ({ variants }: Props) => {
<div className={style['header']}>
<div className="w-2/12 sticky left-0 bg-gray-200">Part Number</div>
<div className="w-2/12">Variant</div>
- <div className="w-2/12">Stock</div>
+ <div className="w-1/12">Stock</div>
<div className="w-2/12">Masa Persiapan</div>
<div className="w-1/12">Berat</div>
- <div className="w-2/12">Harga</div>
+ <div className="w-3/12">Harga</div>
</div>
{variants.map((variant) => (
<LazyLoadComponent key={variant.id}>
@@ -49,8 +49,8 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
return (
<div className={style['row']}>
<div className='w-2/12 sticky left-0 bg-white md:bg-transparent'>{variant.code}</div>
- <div className='w-2/12'>{variant.attributes.join(', ')}</div>
- <div className='w-2/12'>
+ <div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div>
+ <div className='w-1/12'>
<Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
{sla?.qty !== undefined && (
<>
@@ -68,7 +68,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
<div className='w-1/12'>
{variant.weight > 0 ? `${variant.weight} Kg` : '-'}
</div>
- <div className='w-2/12'>
+ <div className='w-3/12'>
{variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
{variant.price.price === 0 && '-'}
</div>
diff --git a/src-migrate/pages/shop/product/[slug].tsx b/src-migrate/pages/shop/product/[slug].tsx
index 883532ed..733e10d9 100644
--- a/src-migrate/pages/shop/product/[slug].tsx
+++ b/src-migrate/pages/shop/product/[slug].tsx
@@ -1,5 +1,3 @@
-import style from './product.module.css'
-
import { GetServerSideProps, NextPage } from 'next'
import React from 'react'
import dynamic from 'next/dynamic'
@@ -10,6 +8,7 @@ import { getIdFromSlug } from '~/libs/slug'
import { IProductDetail } from '~/types/product'
import { Seo } from '~/components/seo'
+import { useRouter } from 'next/router'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'), { ssr: false })
const ProductDetail = dynamic(() => import('~/modules/product-detail'), { ssr: false })
@@ -36,14 +35,18 @@ export const getServerSideProps: GetServerSideProps<PageProps> = (async (context
}
})
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
const ProductDetailPage: NextPage<PageProps> = ({ product }) => {
+ const router = useRouter();
+
return (
<BasicLayout>
<Seo
title={`${product.name} - Indoteknik.com`}
description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
openGraph={{
- // url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
+ url: SELF_HOST + router.asPath,
images: [
{
url: product?.image,
@@ -60,10 +63,10 @@ const ProductDetailPage: NextPage<PageProps> = ({ product }) => {
content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`,
}
]}
- // canonical=''
+ canonical={SELF_HOST + router.asPath}
/>
- <div className='md:container pt-10'>
+ <div className='md:container pt-4 md:pt-6'>
<ProductDetail product={product} />
</div>
</BasicLayout>
diff --git a/src-migrate/pages/shop/product/product.module.css b/src-migrate/pages/shop/product/product.module.css
deleted file mode 100644
index e69de29b..00000000
--- a/src-migrate/pages/shop/product/product.module.css
+++ /dev/null
diff --git a/src-migrate/services/product.ts b/src-migrate/services/product.ts
index c9e93396..4ef027e1 100644
--- a/src-migrate/services/product.ts
+++ b/src-migrate/services/product.ts
@@ -1,5 +1,7 @@
import { IProduct, IProductDetail } from '~/types/product';
import snakeCase from 'snakecase-keys';
+import odooApi from '~/libs/odooApi';
+import { ICategoryBreadcrumb } from '~/types/category';
const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
@@ -57,3 +59,9 @@ export const getProductSimilar = async ({
.then((res) => res.json())
.then((res) => snakeCase(res.response));
};
+
+export const getProductCategoryBreadcrumb = async (
+ id: number
+): Promise<ICategoryBreadcrumb[]> => {
+ return await odooApi('GET', `/api/v1/product/${id}/category-breadcrumb`);
+};
diff --git a/src-migrate/types/auth.ts b/src-migrate/types/auth.ts
index 4f69bb96..02e3623d 100644
--- a/src-migrate/types/auth.ts
+++ b/src-migrate/types/auth.ts
@@ -1,5 +1,5 @@
import { registerSchema } from '~/validations/auth';
-import { OdooApiProps } from './odoo';
+import { OdooApiRes } from './odoo';
import { z } from 'zod';
export type AuthProps = {
@@ -17,7 +17,7 @@ export type AuthProps = {
token: string;
};
-export type AuthApiProps = OdooApiProps & { result: AuthProps };
+export type AuthApiProps = OdooApiRes<AuthProps>;
export type RegisterProps = z.infer<typeof registerSchema>;
diff --git a/src-migrate/types/category.ts b/src-migrate/types/category.ts
new file mode 100644
index 00000000..1037b5f9
--- /dev/null
+++ b/src-migrate/types/category.ts
@@ -0,0 +1,4 @@
+export interface ICategoryBreadcrumb {
+ id: number;
+ name: string;
+}
diff --git a/src-migrate/types/odoo.ts b/src-migrate/types/odoo.ts
index b34bc667..73a029e9 100644
--- a/src-migrate/types/odoo.ts
+++ b/src-migrate/types/odoo.ts
@@ -1,6 +1,7 @@
-export type OdooApiProps = {
+export interface OdooApiRes<T> {
status: {
code: number;
description: string;
};
-};
+ result: T;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:30:54 +0000