Update promotion program feature

1 files changed, 33 insertions, 0 deletions

diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
new file mode 100644
index 00000000..45995af6
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -0,0 +1,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
\ No newline at end of file