@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/menu.mjs

@@ -0,0 +1,740 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import Link from "./link";
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
+import { useQuery } from "@tanstack/react-query";
+import { formatCurrency } from "@drawbridge/drawbridge-utils";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { menuEndpoint } from "@drawbridge/drawbridge-utils/oauth";
+import { formatUserName, isAdmin } from "../shared/lib/helpers";
+import Badge from "../shared/badge";
+import Empty from "../shared/empty";
+import Avatar from "./avatar";
+import Indicator from "../shared/indicator";
+import ListResource from "./list-resource";
+import Lock from "../icons/lock";
+import Loader from "../icons/loader";
+import ArrowRight from "../icons/arrow-right";
+import ProviderResource from "./provider-resource";
+import WrapperAI from "./wrapper-ai";
+import Button from "../shared/button";
+const MenuItem = ({
+  active,
+  badge,
+  child,
+  children,
+  disabled,
+  element: Element = Link,
+  error,
+  locked,
+  onClick = () => {
+  },
+  title,
+  ...rest
+}) => {
+  const hasChildren = (children == null ? void 0 : children.length) > 0;
+  const isActive = active || hasChildren && children.some((c) => c.active);
+  const classes = {
+    row: [
+      "flex items-center justify-between transform duration-300 text-left py-1 px-2 rounded",
+      child ? "w-auto ml-3" : "w-full",
+      isActive ? child ? "" : "bg-gray-dark" : "hover:bg-gray-dark/50",
+      // A Button fades itself from its own disabled prop.
+      disabled && Element !== "button" && "disabled"
+    ],
+    text: [
+      "flex items-center space-x-2 w-full",
+      isActive ? child ? "text-white/50" : "text-white" : "text-white"
+    ]
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...{
+          className: classes.text.filter(Boolean).join(" ")
+        },
+        children: /* @__PURE__ */ jsx("span", { children: title })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...{
+          className: "flex items-center justify-center min-w-5 space-x-2 shrink-0"
+        },
+        children: [
+          badge && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              ...{
+                size: "small",
+                type: (badge == null ? void 0 : badge.type) || "primary"
+              },
+              children: badge == null ? void 0 : badge.text
+            }
+          ),
+          error && /* @__PURE__ */ jsx(
+            Indicator,
+            {
+              ...{
+                className: "w-2 h-2",
+                type: "warning"
+              }
+            }
+          ),
+          locked && /* @__PURE__ */ jsx(
+            Lock,
+            {
+              ...{
+                className: "shrink-0 w-4 h-4 text-gray disabled"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    Element === "button" ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...{
+          disabled,
+          inline: Boolean(child),
+          onClick,
+          variant: "link",
+          ...rest
+        },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: classes.row.filter(Boolean).join(" ")
+            },
+            children: content
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      Element,
+      {
+        ...{
+          className: classes.row.filter(Boolean).join(" "),
+          onClick,
+          ...rest
+        },
+        children: content
+      }
+    ),
+    hasChildren && isActive && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "mb-4"
+        },
+        children: children.map((props, key) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            ...{
+              ...props,
+              child: true
+            }
+          },
+          key
+        ))
+      }
+    )
+  ] });
+};
+const Menu = ({
+  guide,
+  menu = [],
+  onClick,
+  path
+}) => {
+  if (!(menu == null ? void 0 : menu.length)) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "p-6 space-y-4",
+        ...guide && {
+          "data-guide": guide
+        }
+      },
+      children: menu.map((group, key) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: "space-y-1 pb-2"
+          },
+          children: [
+            group.title && /* @__PURE__ */ jsx(
+              "p",
+              {
+                ...{
+                  className: "px-2 pb-1 text-xs text-white/40 uppercase tracking-wider"
+                },
+                children: group.title
+              }
+            ),
+            group.items.map(({ key: itemKey, exact, ...item }, index) => {
+              const active = !item.href ? false : exact ? path === item.href : path === item.href || path.startsWith(item.href + "/");
+              return /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  ...{
+                    ...item,
+                    ...!item.href && {
+                      element: "div"
+                    },
+                    active,
+                    onClick
+                  }
+                },
+                itemKey || index
+              );
+            })
+          ]
+        },
+        key
+      ))
+    }
+  );
+};
+const classNameLoader = "h-full p-6 text-white";
+const menuError = (query) => {
+  var _a;
+  return /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...{
+        className: "text-white/60"
+      },
+      children: ((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.message) || "Unable to load menu"
+    }
+  ) });
+};
+const MenuOrganization = ({
+  onClick,
+  organization,
+  path
+}) => /* @__PURE__ */ jsx(
+  ProviderResource,
+  {
+    ...{
+      classNameLoader,
+      endpoint: menuEndpoint("organization", organization),
+      error: menuError,
+      loader: true,
+      queryKey: ["menu", "organization", organization]
+    },
+    children: (query) => /* @__PURE__ */ jsx(
+      Menu,
+      {
+        ...{
+          guide: "menu-organization",
+          menu: query == null ? void 0 : query.data,
+          onClick,
+          path
+        }
+      }
+    )
+  }
+);
+const MenuCampaign = ({
+  campaign,
+  onClick,
+  organization,
+  path
+}) => /* @__PURE__ */ jsx(
+  ProviderResource,
+  {
+    ...{
+      classNameLoader,
+      endpoint: menuEndpoint("campaign", organization, campaign),
+      error: menuError,
+      loader: true,
+      queryKey: ["menu", "campaign", organization, campaign]
+    },
+    children: (query) => /* @__PURE__ */ jsx(
+      Menu,
+      {
+        ...{
+          menu: query == null ? void 0 : query.data,
+          onClick,
+          path
+        }
+      }
+    )
+  }
+);
+const MenuAdmin = ({
+  onClick,
+  path
+}) => /* @__PURE__ */ jsx(
+  ProviderResource,
+  {
+    ...{
+      classNameLoader,
+      endpoint: menuEndpoint("admin"),
+      error: menuError,
+      loader: true,
+      queryKey: ["menu", "admin"]
+    },
+    children: (query) => /* @__PURE__ */ jsx(
+      Menu,
+      {
+        ...{
+          menu: query == null ? void 0 : query.data,
+          onClick,
+          path
+        }
+      }
+    )
+  }
+);
+const MenuAccount = ({
+  onClick,
+  path
+}) => /* @__PURE__ */ jsx(
+  ProviderResource,
+  {
+    ...{
+      classNameLoader,
+      endpoint: menuEndpoint("account"),
+      error: menuError,
+      loader: true,
+      queryKey: ["menu", "account"]
+    },
+    children: (query) => /* @__PURE__ */ jsx(
+      Menu,
+      {
+        ...{
+          menu: query == null ? void 0 : query.data,
+          onClick,
+          path
+        }
+      }
+    )
+  }
+);
+const MenuApp = ({
+  onClick,
+  path
+}) => {
+  const links = [
+    {
+      active: Boolean(["/organizations"].includes(path)),
+      href: "/organizations",
+      title: "My organizations"
+    },
+    {
+      active: Boolean(["/shared"].includes(path)),
+      href: "/shared",
+      title: "Shared with me"
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "p-6 space-y-1"
+      },
+      children: links.map((props, key) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          ...{
+            ...props,
+            onClick
+          }
+        },
+        key
+      ))
+    }
+  );
+};
+const PROCESS_TYPE_LABELS = {
+  ai: "AI",
+  encode: "Encode",
+  poster: "Poster",
+  resize: "Resize",
+  contacts: "Contacts"
+};
+const MenuAccountProcessButton = ({
+  modal
+}) => {
+  var _a;
+  const { data } = useQuery({
+    queryKey: ["account", "process", "count"],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/account/process",
+        params: {
+          limit: 1,
+          skip: 0,
+          sort: { createdAt: -1 }
+        }
+      });
+      return result;
+    },
+    staleTime: 3e4
+  });
+  const count = Number(((_a = data == null ? void 0 : data.pageInfo) == null ? void 0 : _a.total) || 0);
+  if (!count) return null;
+  const list = /* @__PURE__ */ jsx(
+    ListResource,
+    {
+      ...{
+        endpoint: "/account/process",
+        model: "process",
+        render: (item) => {
+          var _a2;
+          const subtitle = [((_a2 = item.ref) == null ? void 0 : _a2.collection) && item.ref.collection, item.type && PROCESS_TYPE_LABELS[item.type]].filter(Boolean).join(": ").toLocaleUpperCase();
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              ...{
+                element: Link,
+                href: (item == null ? void 0 : item.link) || "#",
+                onClick: modal.close,
+                variant: "link"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    ...{
+                      // Fills the row, so the loader sits at its end.
+                      className: "flex-1 min-w-0 text-left"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          ...{
+                            className: "block text-xs text-gray-dark truncate"
+                          },
+                          children: subtitle
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          ...{
+                            className: "truncate"
+                          },
+                          children: (item == null ? void 0 : item.title) || "Untitled"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Loader,
+                  {
+                    ...{
+                      className: "w-4 h-4 shrink-0 text-gray-dark"
+                    }
+                  }
+                )
+              ]
+            }
+          );
+        },
+        searchKeys: ["title"]
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        onClick: () => modal.open({
+          message: list,
+          title: "Processing"
+        }),
+        variant: "link"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...{
+            className: "flex items-center justify-between w-full space-x-3 text-left text-sm text-white border-t border-gray-dark px-6 py-3"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Processing ",
+              count,
+              " item",
+              count === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Loader,
+              {
+                ...{
+                  className: "w-4 h-4 shrink-0"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const MenuAccountDropdown = ({
+  account,
+  balance,
+  actions,
+  guide,
+  modal,
+  onClick
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const inbox = Number(((_b = (_a = account == null ? void 0 : account.data) == null ? void 0 : _a.totals) == null ? void 0 : _b.inbox) || 0);
+  const items = [
+    {
+      ...inbox && {
+        badge: {
+          text: inbox,
+          type: "warning"
+        }
+      },
+      element: Link,
+      href: "/account",
+      title: "Account"
+    }
+  ];
+  if (guide) {
+    items.push({
+      "data-guide": "menu-item-account-guide",
+      element: "button",
+      onClick: actions.guide,
+      title: "Screen guide"
+    });
+  }
+  ;
+  if (process.env.NEXT_PUBLIC_SUPPORT_URI) {
+    items.push({
+      "data-guide": "menu-item-account-support",
+      element: Link,
+      href: process.env.NEXT_PUBLIC_SUPPORT_URI,
+      target: "_blank",
+      title: "Support"
+    });
+  }
+  ;
+  items.push({
+    element: "button",
+    onClick: actions.signout,
+    title: "Logout"
+  });
+  if (isAdmin((_c = account == null ? void 0 : account.data) == null ? void 0 : _c.permissions)) {
+    items.unshift({
+      element: Link,
+      href: "/admin",
+      title: "Admin"
+    });
+  }
+  ;
+  const renderStatus = () => {
+    var _a2, _b2;
+    const status = (_a2 = account == null ? void 0 : account.data) == null ? void 0 : _a2.status;
+    switch (status) {
+      case "suspended":
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: "text-red-dark text-xs"
+            },
+            children: "Suspended"
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: "text-gray text-xs"
+            },
+            children: "Balance " + formatCurrency({
+              value: (((_b2 = balance == null ? void 0 : balance.data) == null ? void 0 : _b2.ai) || 0) / 100
+            })
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !Boolean((_d = balance == null ? void 0 : balance.data) == null ? void 0 : _d.ai) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "p-6"
+        },
+        children: /* @__PURE__ */ jsx(WrapperAI, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              element: Link,
+              href: "/account",
+              variant: "link"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: "flex flex-col space-y-1 w-full text-left"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center justify-between space-x-6"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("h4", { children: "Add AI credits" }),
+                        /* @__PURE__ */ jsx(
+                          ArrowRight,
+                          {
+                            ...{
+                              className: "w-5 h-5 shrink-0"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      ...{
+                        className: "text-sm"
+                      },
+                      children: "Get started with Drawbridge AI credits by funding your account."
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MenuAccountProcessButton,
+      {
+        ...{
+          modal
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "flex flex-col justify-between border-t border-gray-dark p-6 space-y-4"
+        },
+        children: /* @__PURE__ */ jsxs(Disclosure, { children: [
+          /* @__PURE__ */ jsx(
+            DisclosureButton,
+            {
+              ...{
+                as: Button,
+                variant: "link"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  ...{
+                    className: "flex items-center w-full space-x-3"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        ...{
+                          className: "relative w-8 h-8 shrink-0"
+                        },
+                        children: [
+                          Boolean(inbox) && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              ...{
+                                className: "w-3 h-3 z-10 flex items-center justify-center absolute -top-[3px] -right-[3px] border-2 border-black rounded-full overflow-hidden"
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                Indicator,
+                                {
+                                  ...{
+                                    type: "warning"
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Avatar,
+                            {
+                              ...{
+                                email: (_e = account == null ? void 0 : account.data) == null ? void 0 : _e.email,
+                                image: (_f = account == null ? void 0 : account.data) == null ? void 0 : _f.image,
+                                name: formatUserName(account == null ? void 0 : account.data)
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        ...{
+                          className: "w-full flex flex-col text-left leading-none space-y-[3px]"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              ...{
+                                className: "block text-white"
+                              },
+                              children: formatUserName(account == null ? void 0 : account.data)
+                            }
+                          ),
+                          renderStatus()
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(DisclosurePanel, { children: items.map((item, key) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              ...{
+                ...item,
+                onClick: item.onClick || onClick
+              }
+            },
+            key
+          )) })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  MenuAccount,
+  MenuAccountDropdown,
+  MenuAdmin,
+  MenuApp,
+  MenuCampaign,
+  MenuOrganization
+};