feat(dashboard): added details page for promotions + edit sliders (#6882)

* chore: added details page for promotions * chore: add edit rules, edit details and edit campaign pages * chore: change to type button * chore: connection for rules * chore: listing rule labels of multiple modules * chore: add badge summary list * chore: fix campaigns
2024-04-06 13:20:31 +02:00
parent 07fb058d96
commit 5e30b8cce6
60 changed files with 2803 additions and 153 deletions
@@ -0,0 +1,73 @@
+import { Badge, Tooltip, clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+type BadgeListSummaryProps = {
+  /**
+   * Number of initial items to display
+   * @default 2
+   */
+  n?: number
+  /**
+   * List of strings to display as abbreviated list
+   */
+  list: string[]
+  /**
+   * Is the summary displayed inline.
+   * Determines whether the center text is truncated if there is no space in the container
+   */
+  inline?: boolean
+
+  className?: string
+}
+
+export const BadgeListSummary = ({
+  list,
+  className,
+  inline,
+  n = 2,
+}: BadgeListSummaryProps) => {
+  const { t } = useTranslation()
+
+  const title = t("general.plusCount", {
+    count: list.length - n,
+  })
+
+  return (
+    <div
+      className={clx(
+        "ml-2 text-ui-fg-subtle txt-compact-small gap-x-2 overflow-hidden",
+        {
+          "inline-flex": inline,
+          flex: !inline,
+        },
+        className
+      )}
+    >
+      {list.slice(0, n).map((item) => {
+        return (
+          <Badge key={item} size="2xsmall">
+            {item}
+          </Badge>
+        )
+      })}
+
+      {list.length > n && (
+        <div className="whitespace-nowrap">
+          <Tooltip
+            content={
+              <ul>
+                {list.slice(n).map((c) => (
+                  <li key={c}>{c}</li>
+                ))}
+              </ul>
+            }
+          >
+            <Badge size="2xsmall" className="cursor-default whitespace-nowrap">
+              {title}
+            </Badge>
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1 @@
+export * from "./badge-list-summary"
@@ -1,4 +1,4 @@
-import { ExclamationCircle, MagnifyingGlass } from "@medusajs/icons"
+import { ExclamationCircle, MagnifyingGlass, PlusMini } from "@medusajs/icons"
 import { Button, Text, clx } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
@@ -32,21 +32,44 @@ export const NoResults = ({ title, message, className }: NoResultsProps) => {
  )
 }

-type NoRecordsProps = {
-  title?: string
-  message?: string
+type ActionProps = {
  action?: {
    to: string
    label: string
  }
-  className?: string
 }

+type NoRecordsProps = {
+  title?: string
+  message?: string
+  className?: string
+  buttonVariant?: string
+} & ActionProps
+
+const DefaultButton = ({ action }: ActionProps) =>
+  action && (
+    <Link to={action.to}>
+      <Button variant="secondary" size="small">
+        {action.label}
+      </Button>
+    </Link>
+  )
+
+const TransparentIconLeftButton = ({ action }: ActionProps) =>
+  action && (
+    <Link to={action.to}>
+      <Button variant="transparent" className="text-ui-fg-interactive">
+        <PlusMini /> {action.label}
+      </Button>
+    </Link>
+  )
+
 export const NoRecords = ({
  title,
  message,
  action,
  className,
+  buttonVariant = "default",
 }: NoRecordsProps) => {
  const { t } = useTranslation()

@@ -59,19 +82,19 @@ export const NoRecords = ({
    >
      <div className="flex flex-col items-center gap-y-2">
        <ExclamationCircle />
+
        <Text size="small" leading="compact" weight="plus">
          {title ?? t("general.noRecordsTitle")}
        </Text>
+
        <Text size="small" className="text-ui-fg-muted">
          {message ?? t("general.noRecordsMessage")}
        </Text>
      </div>
-      {action && (
-        <Link to={action.to}>
-          <Button variant="secondary" size="small">
-            {action.label}
-          </Button>
-        </Link>
+
+      {buttonVariant === "default" && <DefaultButton action={action} />}
+      {buttonVariant === "transparentIconLeft" && (
+        <TransparentIconLeftButton action={action} />
      )}
    </div>
  )