feat(medusa-react,medusa,types,dashboard): added empty state + table for promotions list page (#6827)

what: - adds empty state for promotions list page - lists all promotions with pagination <img width="1663" alt="Screenshot 2024-03-26 at 14 19 27" src="https://github.com/medusajs/medusa/assets/5105988/ed0d5c65-d003-40f5-b899-540970d892f5"> <img width="1664" alt="Screenshot 2024-03-27 at 20 46 17" src="https://github.com/medusajs/medusa/assets/5105988/4aa40f09-fe3f-4f34-af7a-f5c183254c76">
2024-03-29 11:22:42 +00:00
parent 6113af0a66
commit 0c0b425de7
33 changed files with 542 additions and 11 deletions
@@ -0,0 +1,55 @@
+import { PromotionDTO } from "@medusajs/types"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import {
+  CodeCell,
+  CodeHeader,
+} from "../../../components/table/table-cells/common/code-cell"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import { StatusCell } from "../../../components/table/table-cells/promotion/status-cell"
+
+const columnHelper = createColumnHelper<PromotionDTO>()
+
+export const usePromotionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "code",
+        header: () => <CodeHeader text={t("fields.code")} />,
+        cell: ({ row }) => <CodeCell code={row.original.code!} />,
+      }),
+
+      columnHelper.display({
+        id: "campaign",
+        header: () => <TextHeader text={t("promotions.fields.campaign")} />,
+        cell: ({ row }) => <TextCell text={row.original.campaign?.name} />,
+      }),
+
+      columnHelper.display({
+        id: "method",
+        header: () => <TextHeader text={t("promotions.fields.method")} />,
+        cell: ({ row }) => {
+          const text = row.original.is_automatic
+            ? "Automatic"
+            : "Promotion Code"
+
+          return <TextCell text={text} />
+        },
+      }),
+
+      columnHelper.display({
+        id: "status",
+        header: () => <TextHeader text={t("fields.status")} />,
+        cell: ({ row }) => <StatusCell promotion={row.original} />,
+      }),
+    ],
+    []
+  ) as ColumnDef<PromotionDTO>[]
+}
@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const usePromotionTableFilters = () => {
+  const { t } = useTranslation()
+
+  let filters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at", type: "date" },
+    { label: t("fields.updatedAt"), key: "updated_at", type: "date" },
+  ]
+
+  return filters
+}
@@ -0,0 +1,32 @@
+import { AdminGetPromotionsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../use-query-params"
+
+type UsePromotionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const usePromotionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UsePromotionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, created_at, updated_at } = queryObject
+
+  const searchParams: AdminGetPromotionsParams = {
+    limit: pageSize,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    offset: offset ? Number(offset) : 0,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}