From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 src-migrate/components/ui/image.tsx                |  2 +-
 src-migrate/libs/whatsappUrl.ts                    |  4 +-
 .../product-detail/components/AddToWishlist.tsx    |  2 +-
 .../product-detail/components/Breadcrumb.tsx       | 40 +++++++++++++
 .../modules/product-detail/components/Image.tsx    | 12 ++--
 .../product-detail/components/Information.tsx      | 34 +----------
 .../product-detail/components/PriceAction.tsx      | 10 +---
 .../product-detail/components/ProductDetail.tsx    | 68 +++++++++++++++-------
 .../product-detail/components/VariantList.tsx      | 10 ++--
 src-migrate/pages/shop/product/[slug].tsx          | 13 +++--
 src-migrate/pages/shop/product/product.module.css  |  0
 src-migrate/services/product.ts                    |  8 +++
 src-migrate/types/auth.ts                          |  4 +-
 src-migrate/types/category.ts                      |  4 ++
 src-migrate/types/odoo.ts                          |  5 +-
 15 files changed, 135 insertions(+), 81 deletions(-)
 create mode 100644 src-migrate/modules/product-detail/components/Breadcrumb.tsx
 delete mode 100644 src-migrate/pages/shop/product/product.module.css
 create mode 100644 src-migrate/types/category.ts

(limited to 'src-migrate')

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
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;
+}
-- 
cgit v1.2.3