Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

8 files changed, 24 insertions, 17 deletions

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 58bb2ad7..3bac3c66 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { CheckIcon, PlusIcon } from 'lucide-react'
-import { IPromotion } from '~/common/types/promotion'
+import { IPromotion } from '~/types/promotion'
 import { upsertUserCart } from '~/services/cart'
-import { getAuth } from '~/common/libs/auth'
+import { getAuth } from '~/libs/auth'
 import { Button, Spinner, useToast } from '@chakra-ui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index e894c143..59110098 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -6,11 +6,11 @@ import { Skeleton, Tooltip } from '@chakra-ui/react'
 import { motion } from "framer-motion"
 
 import { PROMO_CATEGORY } from "~/constants/promotion"
-import { getVariantById } from "~/services/variant"
+import { getVariantById } from "~/services/productVariant"
 
-import { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
-import formatCurrency from '~/common/libs/formatCurrency'
-import clsxm from '~/common/libs/clsxm'
+import { IProductVariantPromo, IPromotion } from '~/types/promotion'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
 
 import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
diff --git a/src-migrate/modules/product-promo/components/CardCountdown.tsx b/src-migrate/modules/product-promo/components/CardCountdown.tsx
index e398a390..b61ad115 100644
--- a/src-migrate/modules/product-promo/components/CardCountdown.tsx
+++ b/src-migrate/modules/product-promo/components/CardCountdown.tsx
@@ -6,8 +6,8 @@ import { ClockIcon } from 'lucide-react'
 import { Skeleton } from '@chakra-ui/react'
 import moment from 'moment'
 
-import clsxm from '~/common/libs/clsxm'
-import { IPromotion } from '~/common/types/promotion'
+import clsxm from '~/libs/clsxm'
+import { IPromotion } from '~/types/promotion'
 import { getPromotionProgram } from '~/services/promotionProgram'
 
 type Props = {
diff --git a/src-migrate/modules/product-promo/components/CategoryTab.tsx b/src-migrate/modules/product-promo/components/CategoryTab.tsx
index edc4aa92..c8e698c2 100644
--- a/src-migrate/modules/product-promo/components/CategoryTab.tsx
+++ b/src-migrate/modules/product-promo/components/CategoryTab.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import style from '../styles/category-tab.module.css'
 import { useModalStore } from '../stores/useModalStore'
-import clsxm from '~/common/libs/clsxm'
-import { ICategoryPromo } from '~/common/types/promotion'
+import clsxm from '~/libs/clsxm'
+import { ICategoryPromo } from '~/types/promotion'
 
 const TABS: ICategoryPromo[] = [
   { value: 'bundling', label: 'Bundling' },
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 15ca4878..8012c17e 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,9 +1,9 @@
 import style from '../styles/item.module.css'
 
 import React from 'react'
-import Image from 'next/image'
+import Image from '~/components/ui/image'
 
-import { IProductVariantPromo } from '~/common/types/promotion'
+import { IProductVariantPromo } from '~/types/promotion'
 
 type Props = {
   variant: IProductVariantPromo,
@@ -17,7 +17,7 @@ const ProductPromoItem = ({
   return (
     <div className={style.item}>
       <div className={style.image}>
-        <Image src={variant.image} alt={variant.display_name} width={120} height={120} quality={100} />
+        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
         <div className={style.quantity}>
           {variant.qty} pcs {isFree ? '(free)' : ''}
         </div>
diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx
index 598b7bbe..0de672c2 100644
--- a/src-migrate/modules/product-promo/components/Modal.tsx
+++ b/src-migrate/modules/product-promo/components/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Modal from '~/common/components/elements/Modal'
+import { Modal } from "~/components/ui/modal"
 import { useModalStore } from '../stores/useModalStore'
 import ProductPromoCategoryTab from './CategoryTab'
 import ProductPromoModalContent from './ModalContent'
diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
index 90cf79e7..ab5129f8 100644
--- a/src-migrate/modules/product-promo/components/ModalContent.tsx
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "react-query"
 import { Skeleton } from "@chakra-ui/react"
 
-import { getVariantPromoByCategory } from "~/services/variant"
+import { getVariantPromoByCategory } from "~/services/productVariant"
 
 import { useModalStore } from "../stores/useModalStore"
 import ProductPromoCard from "./Card"
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 47e1de29..b6753be7 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -5,9 +5,10 @@ import { useQuery } from 'react-query'
 import { Button, Skeleton } from '@chakra-ui/react'
 
 import ProductPromoCard from './Card'
-import { IPromotion } from '~/common/types/promotion'
+import { IPromotion } from '~/types/promotion'
 import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
+import clsxm from "~/libs/clsxm"
 
 type Props = {
   productId: number
@@ -36,7 +37,13 @@ const ProductPromoSection = ({ productId }: Props) => {
         </div>
       )}
 
-      <Skeleton isLoaded={promotionsQuery.isSuccess} className="flex gap-x-4 overflow-x-auto min-h-[340px] px-4 md:px-0">
+      <Skeleton
+        isLoaded={promotionsQuery.isSuccess}
+        className={clsxm(
+          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
+          "min-h-[340px]": promotions?.data && promotions?.data.length > 0
+        })}
+      >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
             <ProductPromoCard promotion={promotion} />