src-migrate/modules/product-promo/components/ModalContent.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { useQuery } from "react-query"
import { Skeleton } from "@chakra-ui/react"
import { motion } from "framer-motion"

import { getVariantPromoByCategory } from "~/services/variant"

import { useModalStore } from "../stores/useModalStore"
import ProductPromoCard from "./Card"

const ProductPromoModalContent = () => {
  const { activeTab, variantId } = useModalStore()

  const promotionsQuery = useQuery(
    `variant-promo:${variantId}:${activeTab}`,
    async () => {
      if (!variantId) return

      return getVariantPromoByCategory(variantId, activeTab)
    },
  )

  const promotions = promotionsQuery.data

  return (
    <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[60vh] grid grid-cols-1'>
      {promotions?.data.map((promo) => (
        <ProductPromoCard key={promo.id} promotion={promo} />
      ))}
    </Skeleton>
  )
}

export default ProductPromoModalContent