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,26 @@
+type CellProps = {
+  code: string
+}
+
+type HeaderProps = {
+  text: string
+}
+
+export const CodeCell = ({ code }: CellProps) => {
+  return (
+    <div className="flex h-full w-full items-center gap-x-3 overflow-hidden">
+      {/* // TODO: border color inversion*/}
+      <span className="bg-ui-tag-neutral-bg truncate rounded-md border border-neutral-200 p-1 text-xs">
+        {code}
+      </span>
+    </div>
+  )
+}
+
+export const CodeHeader = ({ text }: HeaderProps) => {
+  return (
+    <div className=" flex h-full w-full items-center ">
+      <span>{text}</span>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./code-cell"
@@ -0,0 +1 @@
+export * from "./text-cell"
@@ -0,0 +1,23 @@
+type CellProps = {
+  text?: string | number
+}
+
+type HeaderProps = {
+  text: string
+}
+
+export const TextCell = ({ text }: CellProps) => {
+  return (
+    <div className="flex h-full w-full items-center gap-x-3 overflow-hidden">
+      <span className="truncate">{text}</span>
+    </div>
+  )
+}
+
+export const TextHeader = ({ text }: HeaderProps) => {
+  return (
+    <div className=" flex h-full w-full items-center">
+      <span>{text}</span>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./status-cell"
@@ -0,0 +1,28 @@
+import { PromotionDTO } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
+import {
+  getPromotionStatus,
+  PromotionStatus,
+} from "../../../../../lib/promotions"
+import { StatusCell as StatusCell_ } from "../../common/status-cell"
+
+type PromotionCellProps = {
+  promotion: PromotionDTO
+}
+type StatusColors = "grey" | "orange" | "green" | "red"
+type StatusMap = Record<string, [StatusColors, string]>
+
+export const StatusCell = ({ promotion }: PromotionCellProps) => {
+  const { t } = useTranslation()
+
+  const statusMap: StatusMap = {
+    [PromotionStatus.DISABLED]: ["grey", t("statuses.disabled")],
+    [PromotionStatus.ACTIVE]: ["green", t("statuses.active")],
+    [PromotionStatus.SCHEDULED]: ["orange", t("statuses.scheduled")],
+    [PromotionStatus.EXPIRED]: ["red", t("statuses.expired")],
+  }
+
+  const [color, text] = statusMap[getPromotionStatus(promotion)]
+
+  return <StatusCell_ color={color}>{text}</StatusCell_>
+}