@medusajs/dashboard 0.0.1

package/src/v2-routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx

@@ -0,0 +1,340 @@
+import { XCircle } from "@medusajs/icons"
+import {
+  LineItem,
+  Fulfillment as MedusaFulfillment,
+  Order,
+} from "@medusajs/medusa"
+import {
+  Container,
+  Copy,
+  Heading,
+  StatusBadge,
+  Text,
+  toast,
+  Tooltip,
+  usePrompt,
+} from "@medusajs/ui"
+import { format } from "date-fns"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { FulfillmentDTO, OrderDTO, OrderItemDTO } from "@medusajs/types"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { Skeleton } from "../../../../../components/common/skeleton"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { formatProvider } from "../../../../../lib/format-provider"
+import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
+import { useStockLocation } from "../../../../../hooks/api/stock-locations"
+
+type OrderFulfillmentSectionProps = {
+  order: OrderDTO
+}
+
+export const OrderFulfillmentSection = ({
+  order,
+}: OrderFulfillmentSectionProps) => {
+  const fulfillments = order.fulfillments || []
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <UnfulfilledItemBreakdown order={order} />
+      {fulfillments.map((f, index) => (
+        <Fulfillment key={f.id} index={index} fulfillment={f} />
+      ))}
+    </div>
+  )
+}
+
+const UnfulfilledItem = ({
+  item,
+  currencyCode,
+}: {
+  item: OrderItemDTO
+  currencyCode: string
+}) => {
+  return (
+    <div
+      key={item.id}
+      className="text-ui-fg-subtle grid grid-cols-2 items-start 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.options.map((o) => o.value).join(" · ")}
+          </Text>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 items-center gap-x-4">
+        <div className="flex items-center justify-end">
+          <Text size="small">
+            {getLocaleAmount(item.unit_price, currencyCode)}
+          </Text>
+        </div>
+        <div className="flex items-center justify-end">
+          <Text>
+            <span className="tabular-nums">{item.quantity}</span>x
+          </Text>
+        </div>
+        <div className="flex items-center justify-end">
+          <Text size="small">
+            {getLocaleAmount(item.subtotal || 0, currencyCode)}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const UnfulfilledItemBreakdown = ({ order }: { order: Order }) => {
+  const { t } = useTranslation()
+
+  const fulfillmentItems = order.fulfillments?.map((f) =>
+    f.items.map((i) => ({ id: i.item_id, quantity: i.quantity }))
+  )
+
+  // Create an array of order items that haven't been fulfilled or at least not fully fulfilled
+  const unfulfilledItems = order.items.filter(
+    (i) =>
+      !fulfillmentItems?.some((fi) =>
+        fi.some((f) => f.id === i.id && f.quantity === i.quantity)
+      )
+  )
+
+  if (!unfulfilledItems.length) {
+    return null
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("orders.fulfillment.unfulfilledItems")}</Heading>
+        <div className="flex items-center gap-x-4">
+          <StatusBadge color="red" className="text-nowrap">
+            {t("orders.fulfillment.awaitingFullfillmentBadge")}
+          </StatusBadge>
+          <ActionMenu groups={[]} />
+        </div>
+      </div>
+      <div>
+        {unfulfilledItems.map((item) => (
+          <UnfulfilledItem
+            key={item.id}
+            item={item}
+            currencyCode={order.currency_code}
+          />
+        ))}
+      </div>
+    </Container>
+  )
+}
+
+const Fulfillment = ({
+  fulfillment,
+  index,
+}: {
+  fulfillment: FulfillmentDTO
+  index: number
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const showLocation = !!fulfillment.location_id
+
+  const { stock_location, isError, error } = useStockLocation(
+    fulfillment.location_id!,
+    {
+      enabled: showLocation,
+    }
+  )
+
+  let statusText = "Fulfilled"
+  let statusColor: "orange" | "green" | "red" = "orange"
+  let statusTimestamp = fulfillment.created_at
+
+  if (fulfillment.canceled_at) {
+    statusText = "Canceled"
+    statusColor = "red"
+    statusTimestamp = fulfillment.canceled_at
+  } else if (fulfillment.shipped_at) {
+    statusText = "Shipped"
+    statusColor = "green"
+    statusTimestamp = fulfillment.shipped_at
+  }
+
+  const { mutateAsync } = {} // useCancelFulfillment(order.id)
+
+  const handleCancel = async () => {
+    if (fulfillment.shipped_at) {
+      toast.warning(t("general.warning"), {
+        description: t("orders.fulfillment.toast.fulfillmentShipped"),
+        dismissLabel: t("actions.close"),
+      })
+      return
+    }
+
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.fulfillment.cancelWarning"),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (res) {
+      try {
+        await mutateAsync(fulfillment.id)
+
+        toast.success(t("general.success"), {
+          description: t("orders.fulfillment.toast.canceled"),
+          dismissLabel: t("actions.close"),
+        })
+      } catch (e) {
+        toast.error(t("general.error"), {
+          description: e.message,
+          dismissLabel: t("actions.close"),
+        })
+      }
+    }
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">
+          {t("orders.fulfillment.number", {
+            number: index + 1,
+          })}
+        </Heading>
+        <div className="flex items-center gap-x-4">
+          <Tooltip
+            content={format(
+              new Date(statusTimestamp),
+              "dd MMM, yyyy, HH:mm:ss"
+            )}
+          >
+            <StatusBadge color={statusColor} className="text-nowrap">
+              {statusText}
+            </StatusBadge>
+          </Tooltip>
+          <ActionMenu
+            groups={[
+              {
+                actions: [
+                  {
+                    label: t("actions.cancel"),
+                    icon: <XCircle />,
+                    onClick: handleCancel,
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("orders.fulfillment.itemsLabel")}
+        </Text>
+        <ul>
+          {fulfillment.items.map((f_item) => (
+            <li key={f_item.item_id}>
+              <Text size="small" leading="compact">
+                {f_item.item.quantity}x {f_item.item.title}
+              </Text>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {showLocation && (
+        <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+          <Text size="small" leading="compact" weight="plus">
+            {t("orders.fulfillment.shippingFromLabel")}
+          </Text>
+          {stock_location ? (
+            <Link
+              to={`/settings/locations/${stock_location.id}`}
+              className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg"
+            >
+              <Text size="small" leading="compact">
+                {stock_location.name}
+              </Text>
+            </Link>
+          ) : (
+            <Skeleton className="w-16" />
+          )}
+        </div>
+      )}
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.provider")}
+        </Text>
+
+        <Text size="small" leading="compact">
+          {formatProvider(fulfillment.provider_id)}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("orders.fulfillment.trackingLabel")}
+        </Text>
+        <div>
+          {fulfillment.tracking_links &&
+          fulfillment.tracking_links.length > 0 ? (
+            <ul>
+              {fulfillment.tracking_links.map((tlink) => {
+                const hasUrl = tlink.url && tlink.url.length > 0
+
+                if (hasUrl) {
+                  return (
+                    <li key={tlink.tracking_number}>
+                      <a
+                        href={tlink.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg"
+                      >
+                        <Text size="small" leading="compact">
+                          {tlink.tracking_number}
+                        </Text>
+                      </a>
+                    </li>
+                  )
+                }
+
+                return (
+                  <li key={tlink.tracking_number}>
+                    <Text size="small" leading="compact">
+                      {tlink.tracking_number}
+                    </Text>
+                  </li>
+                )
+              })}
+            </ul>
+          ) : (
+            <Text size="small" leading="compact">
+              -
+            </Text>
+          )}
+        </div>
+      </div>
+    </Container>
+  )
+}

package/src/v2-routes/orders/order-detail/components/order-general-section/index.ts

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

package/src/v2-routes/orders/order-detail/components/order-general-section/order-general-section.tsx

@@ -0,0 +1,118 @@
+import { XCircle } from "@medusajs/icons"
+import { Order } from "@medusajs/medusa"
+import {
+  Container,
+  Copy,
+  Heading,
+  StatusBadge,
+  Text,
+  usePrompt,
+} from "@medusajs/ui"
+import { format } from "date-fns"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import {
+  getOrderFulfillmentStatus,
+  getOrderPaymentStatus,
+} from "../../../../../lib/order-helpers"
+
+type OrderGeneralSectionProps = {
+  order: Order
+}
+
+export const OrderGeneralSection = ({ order }: OrderGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = { mutateAsync: () => {} } // cancel order
+
+  const handleCancel = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.cancelWarning", {
+        id: `#${order.display_id}`,
+      }),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined)
+  }
+
+  return (
+    <Container className="flex items-center justify-between px-6 py-4">
+      <div>
+        <div className="flex items-center gap-x-1">
+          <Heading>#{order.display_id}</Heading>
+          <Copy content={`#${order.display_id}`} className="text-ui-fg-muted" />
+        </div>
+        <Text size="small" className="text-ui-fg-subtle">
+          {t("orders.onDateFromSalesChannel", {
+            date: format(new Date(order.created_at), "dd MMM, yyyy, HH:mm:ss"),
+            salesChannel: order.sales_channel?.name,
+          })}
+        </Text>
+      </div>
+      <div className="flex items-center gap-x-4">
+        <div className="flex items-center gap-x-1.5">
+          <PaymentBadge order={order} />
+          <FulfillmentBadge order={order} />
+        </div>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                // {
+                //   label: t("actions.cancel"),
+                //   onClick: handleCancel,
+                //   icon: <XCircle />,
+                // },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </Container>
+  )
+}
+
+const FulfillmentBadge = ({ order }: { order: Order }) => {
+  const { t } = useTranslation()
+
+  /**
+   * TODO: revisit when Order<>Fulfillment are linked
+   */
+  return null
+
+  const { label, color } = getOrderFulfillmentStatus(
+    t,
+    order.fulfillment_status
+  )
+
+  return (
+    <StatusBadge color={color} className="text-nowrap">
+      {label}
+    </StatusBadge>
+  )
+}
+
+const PaymentBadge = ({ order }: { order: Order }) => {
+  const { t } = useTranslation()
+
+  /**
+   * TODO: revisit when Order<>Payment are linked
+   */
+  return null
+
+  const { label, color } = getOrderPaymentStatus(t, order.payment_status)
+
+  return (
+    <StatusBadge color={color} className="text-nowrap">
+      {label}
+    </StatusBadge>
+  )
+}

package/src/v2-routes/orders/order-detail/components/order-payment-section/index.ts

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