feat: manage inventory placeholder

medusajs · Sep 19, 2024 · d2968da · d2968da
1 parent 58167b5
commit d2968da
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 35 deletions.
diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json
@@ -546,6 +546,7 @@
  "inventory": {
  "notManaged": "Not managed",
  "manageItems": "Manage inventory items",
+ "notManagedDesc":"Inventory is not managed for this variant. Turn on ‘Manage Inventory’ to track the variant's inventory.",
  "manageKit": "Manage inventory kit",
  "navigateToItem": "Go to inventory item",
  "actions": {

diff --git a/...es/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx b/...es/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
@@ -33,7 +33,9 @@ function EditItem({
 
  <Thumbnail src={item.thumbnail} />
 
- <span className="txt-small txt-subtile font-medium">{item.title}</span>
+ <span className="txt-small text-ui-fg-subtle font-medium">
+ {item.title}
+ </span>
 
  {item.variant_sku && " · "}
 

diff --git a/...product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx b/...product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
@@ -2,24 +2,23 @@ import { useTranslation } from "react-i18next"
 
 import { Buildings, Component } from "@medusajs/icons"
 import { Container, Heading } from "@medusajs/ui"
-import { InventoryItemDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
 
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useInventoryTableColumns } from "./use-inventory-table-columns"
+import { LinkButton } from "../../../../../components/common/link-button"
 
 const PAGE_SIZE = 20
 
 type VariantInventorySectionProps = {
- inventoryItems: InventoryItemDTO[]
- manageInventory?: boolean
+ inventoryItems: HttpTypes.AdminInventoryItem[]
 }
 
 export function VariantInventorySection({
  inventoryItems,
- manageInventory,
 }: VariantInventorySectionProps) {
  const { t } = useTranslation()
 
@@ -43,25 +42,23 @@ export function VariantInventorySection({
  <Heading level="h2">{t("fields.inventoryItems")}</Heading>
  </div>
  <div className="flex items-center gap-x-4">
- {manageInventory && (
- <ActionMenu
- groups={[
- {
- actions: [
- {
- label: t(
- hasKit
- ? "products.variant.inventory.manageKit"
- : "products.variant.inventory.manageItems"
- ),
- to: "manage-items",
- icon: hasKit ? <Component /> : <Buildings />,
- },
- ],
- },
- ]}
- />
- )}
+ <ActionMenu
+ groups={[
+ {
+ actions: [
+ {
+ label: t(
+ hasKit
+ ? "products.variant.inventory.manageKit"
+ : "products.variant.inventory.manageItems"
+ ),
+ to: "manage-items",
+ icon: hasKit ? <Component /> : <Buildings />,
+ },
+ ],
+ },
+ ]}
+ />
  </div>
  </div>
 
@@ -75,3 +72,23 @@ export function VariantInventorySection({
  </Container>
  )
 }
+
+export function InventorySectionPlaceholder() {
+ const { t } = useTranslation()
+
+ return (
+ <Container className="divide-y p-0">
+ <div className="flex items-center justify-between px-6 py-4">
+ <div className="flex flex-col gap-1">
+ <Heading level="h2">{t("fields.inventoryItems")}</Heading>
+ <span className="txt-small text-ui-fg-subtle">
+ {t("products.variant.inventory.notManagedDesc")}
+ </span>
+ </div>
+ <div className="flex items-center gap-x-4">
+ <LinkButton to="edit">{t("products.variant.edit.header")}</LinkButton>
+ </div>
+ </div>
+ </Container>
+ )
+}
diff --git a/...n/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx b/...n/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
@@ -6,7 +6,10 @@ import { useProductVariant } from "../../../hooks/api/products"
 import { variantLoader } from "./loader"
 import { VARIANT_DETAIL_FIELDS } from "./constants"
 import { VariantGeneralSection } from "./components/variant-general-section"
-import { VariantInventorySection } from "./components/variant-inventory-section"
+import {
+ InventorySectionPlaceholder,
+ VariantInventorySection,
+} from "./components/variant-inventory-section"
 import { VariantPricesSection } from "./components/variant-prices-section"
 
 export const ProductVariantDetail = () => {
@@ -37,16 +40,19 @@ export const ProductVariantDetail = () => {
  <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
  <div className="flex w-full flex-col gap-y-3">
  <VariantGeneralSection variant={variant} />
- <VariantInventorySection
- inventoryItems={variant.inventory_items.map((i) => {
- return {
- ...i.inventory,
- required_quantity: i.required_quantity,
- variant,
- }
- })}
- manageInventory={variant.manage_inventory}
- />
+ {!variant.manage_inventory ? (
+ <InventorySectionPlaceholder />
+ ) : (
+ <VariantInventorySection
+ inventoryItems={variant.inventory_items.map((i) => {
+ return {
+ ...i.inventory,
+ required_quantity: i.required_quantity,
+ variant,
+ }
+ })}
+ />
+ )}
 
  <div className="hidden xl:block">
  <JsonViewSection data={variant} root="product" />