@medusajs/dashboard 0.0.1

package/src/routes/draft-orders/draft-order-detail/components/draft-order-summary-section/draft-order-summary-section.tsx

@@ -0,0 +1,364 @@
+import { Buildings } from "@medusajs/icons"
+import { Cart, DraftOrder, LineItem } from "@medusajs/medusa"
+import { ReservationItemDTO } from "@medusajs/types"
+import { Container, Copy, Heading, StatusBadge, Text } from "@medusajs/ui"
+import { useAdminReservations } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { Divider } from "../../../../../components/common/divider"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
+import {
+  getLocaleAmount,
+  getStylizedAmount,
+} from "../../../../../lib/money-amount-helpers"
+
+type DraftOrderSummarySectionProps = {
+  draftOrder: DraftOrder
+}
+
+export const DraftOrderSummarySection = ({
+  draftOrder,
+}: DraftOrderSummarySectionProps) => {
+  return (
+    <Container className="divide-y divide-dashed p-0">
+      <Header />
+      <ItemBreakdown draftOrder={draftOrder} />
+      <CostBreakdown draftOrder={draftOrder} />
+      <Total draftOrder={draftOrder} />
+    </Container>
+  )
+}
+
+const Header = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-center justify-between px-6 py-4">
+      <Heading level="h2">{t("fields.summary")}</Heading>
+      <ActionMenu
+        groups={[
+          {
+            actions: [
+              {
+                label: t("orders.summary.allocateItems"),
+                to: "#", // TODO: Open modal to allocate items
+                icon: <Buildings />,
+              },
+            ],
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+const CustomItem = ({
+  item,
+  currencyCode,
+  reservation,
+}: {
+  item: {
+    id: string
+    title: string
+    unit_price: number
+    subtotal: number
+    quantity: number
+  }
+  currencyCode: string
+  reservation?: ReservationItemDTO | null
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      key={item.id}
+      className="text-ui-fg-subtle grid grid-cols-2 items-start gap-x-4 px-6 py-4"
+    >
+      <Text
+        size="small"
+        leading="compact"
+        weight="plus"
+        className="text-ui-fg-base"
+      >
+        {item.title}
+      </Text>
+      <div className="grid grid-cols-3 items-center gap-x-4">
+        <div className="flex items-center justify-end gap-x-4">
+          <Text size="small">
+            {getLocaleAmount(item.unit_price, currencyCode)}
+          </Text>
+        </div>
+        <div className="flex items-center gap-x-2">
+          <div className="w-fit min-w-[27px]">
+            <Text>
+              <span className="tabular-nums">{item.quantity}</span>x
+            </Text>
+          </div>
+          <div className="overflow-visible">
+            <StatusBadge
+              color={reservation ? "green" : "orange"}
+              className="text-nowrap"
+            >
+              {reservation
+                ? t("orders.reservations.allocatedLabel")
+                : t("orders.reservations.notAllocatedLabel")}
+            </StatusBadge>
+          </div>
+        </div>
+        <div className="flex items-center justify-end">
+          <Text size="small">
+            {getLocaleAmount(item.subtotal || 0, currencyCode)}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Item = ({
+  item,
+  currencyCode,
+  reservation,
+}: {
+  item: LineItem
+  currencyCode: string
+  reservation?: ReservationItemDTO | null
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      key={item.id}
+      className="text-ui-fg-subtle grid grid-cols-2 items-start gap-x-4 px-6 py-4"
+    >
+      <div className="flex items-start gap-x-4">
+        <Thumbnail src={item.thumbnail} />
+        <div>
+          <Text
+            size="small"
+            leading="compact"
+            weight="plus"
+            className="text-ui-fg-base"
+          >
+            {item.title}
+          </Text>
+          {item.variant.sku && (
+            <div className="flex items-center gap-x-1">
+              <Text size="small">{item.variant.sku}</Text>
+              <Copy content={item.variant.sku} className="text-ui-fg-muted" />
+            </div>
+          )}
+          <Text size="small">{item.variant.title}</Text>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 items-center gap-x-4">
+        <div className="flex items-center justify-end gap-x-4">
+          <Text size="small">
+            {getLocaleAmount(item.unit_price, currencyCode)}
+          </Text>
+        </div>
+        <div className="flex items-center gap-x-2">
+          <div className="w-fit min-w-[27px]">
+            <Text>
+              <span className="tabular-nums">{item.quantity}</span>x
+            </Text>
+          </div>
+          <div className="overflow-visible">
+            <StatusBadge
+              color={reservation ? "green" : "orange"}
+              className="text-nowrap"
+            >
+              {reservation
+                ? t("orders.reservations.allocatedLabel")
+                : t("orders.reservations.notAllocatedLabel")}
+            </StatusBadge>
+          </div>
+        </div>
+        <div className="flex items-center justify-end">
+          <Text size="small">
+            {getLocaleAmount(item.subtotal || 0, currencyCode)}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ItemBreakdown = ({ draftOrder }: { draftOrder: DraftOrder }) => {
+  const { reservations, isError, error } = useAdminReservations({
+    line_item_id: draftOrder.cart.items.map((i) => i.id),
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  const variantBasedItems = draftOrder.cart.items.filter(
+    (i) => i.variant_id !== null
+  )
+
+  const customItems = draftOrder.cart.items.filter((i) => i.variant_id === null)
+
+  const showDivider = variantBasedItems.length > 0 && customItems.length > 0
+
+  console.log("customItems", customItems)
+
+  return (
+    <div>
+      {variantBasedItems.map((item) => {
+        const reservation = reservations
+          ? reservations.find((r) => r.line_item_id === item.id)
+          : null
+
+        return (
+          <Item
+            key={item.id}
+            item={item}
+            currencyCode={draftOrder.cart.region.currency_code}
+            reservation={reservation}
+          />
+        )
+      })}
+      {showDivider && <Divider variant="dashed" />}
+      {customItems.map((item) => {
+        const reservation = reservations
+          ? reservations.find((r) => r.line_item_id === item.id)
+          : null
+
+        return (
+          <CustomItem
+            key={item.id}
+            item={{
+              id: item.id,
+              title: item.title,
+              unit_price: item.unit_price,
+              subtotal: item.unit_price * item.quantity,
+              quantity: item.quantity,
+            }}
+            currencyCode={draftOrder.cart.region.currency_code}
+            reservation={reservation}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const Cost = ({
+  label,
+  value,
+  secondaryValue,
+}: {
+  label: string
+  value: string | number
+  secondaryValue: string
+}) => (
+  <div className="grid grid-cols-3 items-center">
+    <Text size="small" leading="compact">
+      {label}
+    </Text>
+    <div className="text-right">
+      <Text size="small" leading="compact">
+        {secondaryValue}
+      </Text>
+    </div>
+    <div className="text-right">
+      <Text size="small" leading="compact">
+        {value}
+      </Text>
+    </div>
+  </div>
+)
+
+const calculateCartTaxRate = (cart: Cart) => {
+  const {
+    tax_total,
+    subtotal = 0,
+    discount_total = 0,
+    gift_card_total = 0,
+    shipping_total = 0,
+  } = cart
+
+  const preTaxTotal =
+    subtotal - discount_total - gift_card_total + shipping_total
+
+  return ((tax_total || 0) / preTaxTotal) * 100
+}
+
+const CostBreakdown = ({ draftOrder }: { draftOrder: DraftOrder }) => {
+  const { t } = useTranslation()
+
+  // Calculate tax rate since it's not included in the cart
+  const taxRate = calculateCartTaxRate(draftOrder.cart).toFixed(2)
+
+  return (
+    <div className="text-ui-fg-subtle flex flex-col gap-y-2 px-6 py-4">
+      <Cost
+        label={t("fields.subtotal")}
+        secondaryValue={t("general.items", {
+          count: draftOrder.cart.items.length,
+        })}
+        value={getLocaleAmount(
+          draftOrder.cart.subtotal || 0,
+          draftOrder.cart.region.currency_code
+        )}
+      />
+      <Cost
+        label={t("fields.discount")}
+        secondaryValue={
+          draftOrder.cart.discounts.length > 0
+            ? draftOrder.cart.discounts.map((d) => d.code).join(", ")
+            : "-"
+        }
+        value={
+          (draftOrder.cart.discount_total || 0) > 0
+            ? `- ${getLocaleAmount(
+                draftOrder.cart.discount_total || 0,
+                draftOrder.cart.region.currency_code
+              )}`
+            : "-"
+        }
+      />
+      <Cost
+        label={t("fields.shipping")}
+        secondaryValue={draftOrder.cart.shipping_methods
+          .map((sm) => sm.shipping_option.name)
+          .join(", ")}
+        value={getLocaleAmount(
+          draftOrder.cart.shipping_total || 0,
+          draftOrder.cart.region.currency_code
+        )}
+      />
+      <Cost
+        label={t("fields.tax")}
+        secondaryValue={`${taxRate || 0} %`}
+        value={
+          draftOrder.cart.tax_total
+            ? getLocaleAmount(
+                draftOrder.cart.tax_total || 0,
+                draftOrder.cart.region.currency_code
+              )
+            : "-"
+        }
+      />
+    </div>
+  )
+}
+
+const Total = ({ draftOrder }: { draftOrder: DraftOrder }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="text-ui-fg-base flex items-center justify-between px-6 py-4">
+      <Text size="small" leading="compact" weight="plus">
+        {t("fields.total")}
+      </Text>
+      <Text size="small" leading="compact" weight="plus">
+        {getStylizedAmount(
+          draftOrder.cart.total || 0,
+          draftOrder.cart.region.currency_code
+        )}
+      </Text>
+    </div>
+  )
+}

package/src/routes/draft-orders/draft-order-detail/components/draft-order-summary-section/index.ts

@@ -0,0 +1 @@
+export * from "./draft-order-summary-section"

package/src/routes/draft-orders/draft-order-detail/draft-order-detail.tsx

@@ -0,0 +1,43 @@
+import { useAdminDraftOrder } from "medusa-react"
+import { Outlet, useLoaderData, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { DraftOrderCustomerSection } from "./components/draft-order-customer-section"
+import { DraftOrderGeneralSection } from "./components/draft-order-general-section"
+import { DraftOrderSummarySection } from "./components/draft-order-summary-section"
+import { draftOrderLoader } from "./loader"
+
+export const DraftOrderDetail = () => {
+  const { id } = useParams()
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof draftOrderLoader>
+  >
+
+  const { draft_order, isLoading, isError, error } = useAdminDraftOrder(id!, {
+    initialData,
+  })
+
+  if (isLoading || !draft_order) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-x-4 xl:grid-cols-[1fr,400px]">
+      <div className="flex flex-col gap-y-2">
+        <DraftOrderGeneralSection draftOrder={draft_order} />
+        <DraftOrderSummarySection draftOrder={draft_order} />
+        <div className="flex flex-col gap-y-2 xl:hidden">
+          <DraftOrderCustomerSection draftOrder={draft_order} />
+        </div>
+        <JsonViewSection data={draft_order} />
+      </div>
+      <div className="hidden flex-col gap-y-2 xl:flex">
+        <DraftOrderCustomerSection draftOrder={draft_order} />
+      </div>
+      <Outlet />
+    </div>
+  )
+}

package/src/routes/draft-orders/draft-order-detail/index.ts

@@ -0,0 +1,2 @@
+export { DraftOrderDetail as Component } from "./draft-order-detail"
+export { draftOrderLoader as loader } from "./loader"

package/src/routes/draft-orders/draft-order-detail/loader.ts

@@ -0,0 +1,21 @@
+import { AdminDraftOrdersRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { adminDraftOrderKeys } from "medusa-react"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const draftOrderDetailQuery = (id: string) => ({
+  queryKey: adminDraftOrderKeys.detail(id),
+  queryFn: async () => medusa.admin.draftOrders.retrieve(id),
+})
+
+export const draftOrderLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = draftOrderDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<Response<AdminDraftOrdersRes>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

package/src/routes/draft-orders/draft-order-email/components/edit-draft-order-email-form/edit-draft-order-email-form.tsx

@@ -0,0 +1,66 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { DraftOrder } from "@medusajs/medusa"
+import { Button } from "@medusajs/ui"
+import { useAdminUpdateDraftOrder } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+import { EmailForm } from "../../../../../components/forms/email-form"
+import {
+  RouteDrawer,
+  useRouteModal,
+} from "../../../../../components/route-modal"
+import { EmailSchema } from "../../../../../lib/schemas"
+
+type EditDraftOrderEmailFormProps = {
+  draftOrder: DraftOrder
+}
+
+export const EditDraftOrderEmailForm = ({
+  draftOrder,
+}: EditDraftOrderEmailFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof EmailSchema>>({
+    defaultValues: {
+      email: draftOrder.cart.email,
+    },
+    resolver: zodResolver(EmailSchema),
+  })
+
+  const { mutateAsync, isLoading } = useAdminUpdateDraftOrder(draftOrder.id)
+
+  const handleSumbit = form.handleSubmit(async (values) => {
+    mutateAsync(values, {
+      onSuccess: () => {
+        handleSuccess()
+      },
+    })
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <form
+        onSubmit={handleSumbit}
+        className="flex size-full flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="size-full flex-1 overflow-auto">
+          <EmailForm control={form.control} layout="stack" />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button type="submit" isLoading={isLoading} size="small">
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/draft-orders/draft-order-email/components/edit-draft-order-email-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-draft-order-email-form"

package/src/routes/draft-orders/draft-order-email/draft-order-email.tsx

@@ -0,0 +1,28 @@
+import { Heading } from "@medusajs/ui"
+import { useAdminDraftOrder } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/route-modal"
+import { EditDraftOrderEmailForm } from "./components/edit-draft-order-email-form/edit-draft-order-email-form"
+
+export const DraftOrderEmail = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { draft_order, isLoading, isError, error } = useAdminDraftOrder(id!)
+
+  const ready = !isLoading && draft_order
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("email.editHeader")}</Heading>
+      </RouteDrawer.Header>
+      {ready && <EditDraftOrderEmailForm draftOrder={draft_order} />}
+    </RouteDrawer>
+  )
+}

package/src/routes/draft-orders/draft-order-email/index.ts

@@ -0,0 +1 @@
+export { DraftOrderEmail as Component } from "./draft-order-email"

package/src/routes/draft-orders/draft-order-list/components/draft-order-list-table/draft-order-list-table.tsx

@@ -0,0 +1,69 @@
+import { Button, Container, Heading } from "@medusajs/ui"
+import { useAdminDraftOrders } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useDraftOrderTableColumns } from "./use-draft-order-table-columns"
+import { useDraftOrderTableFilters } from "./use-draft-order-table-filters"
+import { useDraftOrderTableQuery } from "./use-draft-order-table-query"
+
+const PAGE_SIZE = 20
+
+export const DraftOrderListTable = () => {
+  const { t } = useTranslation()
+
+  const { searchParams, raw } = useDraftOrderTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+  const { draft_orders, count, isLoading, isError, error } =
+    useAdminDraftOrders(
+      {
+        ...searchParams,
+        // expand: "cart,cart.customer",
+      },
+      {
+        keepPreviousData: true,
+      }
+    )
+
+  const columns = useDraftOrderTableColumns()
+  const filters = useDraftOrderTableFilters()
+
+  const { table } = useDataTable({
+    data: draft_orders || [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("draftOrders.domain")}</Heading>
+        <Button variant="secondary" size="small" asChild>
+          <Link to="create">{t("actions.create")}</Link>
+        </Button>
+      </div>
+      <DataTable
+        table={table}
+        isLoading={isLoading}
+        columns={columns}
+        filters={filters}
+        pageSize={PAGE_SIZE}
+        count={count}
+        search
+        pagination
+        navigateTo={(row) => row.original.id}
+        orderBy={["status", "created_at", "updated_at"]}
+        queryObject={raw}
+      />
+    </Container>
+  )
+}

package/src/routes/draft-orders/draft-order-list/components/draft-order-list-table/draft-order-table-actions.tsx

@@ -0,0 +1,59 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { DraftOrder } from "@medusajs/medusa"
+import { usePrompt } from "@medusajs/ui"
+import { useAdminDeleteDraftOrder } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+
+export const DraftOrderTableActions = ({
+  draftOrder,
+}: {
+  draftOrder: DraftOrder
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useAdminDeleteDraftOrder(draftOrder.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("draftOrders.deleteWarning", {
+        id: `#${draftOrder.display_id}`,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `${draftOrder.id}/edit`,
+              icon: <PencilSquare />,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/routes/draft-orders/draft-order-list/components/draft-order-list-table/index.ts

@@ -0,0 +1 @@
+export * from "./draft-order-list-table"