From 61fd4832d1ed299dc7dbfd51a73d89d0685ca477 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:59:04 +0200
Subject: [PATCH] feat(dashboard): manage inventory placeholder (#9190)

**What**
- add placeholder on variant details when inventor is not managed

---
![Screenshot 2024-09-19 at 10 35 55](https://github.com/user-attachments/assets/c731565d-5525-4537-b9a8-8bd6b74ca3bd)
---

CLOSES CC-127
---
 .../dashboard/src/i18n/translations/en.json   |  1 +
 .../order-active-edit-section.tsx             |  4 +-
 .../variant-inventory-section.tsx             | 63 ++++++++++++-------
 .../product-variant-detail.tsx                | 28 +++++----
 4 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json
index 8bad727101..c2d4ed74c3 100644
--- 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/packages/admin/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx b/packages/admin/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
index bd3cc3d541..ac56d1897e 100644
--- a/packages/admin/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
+++ b/packages/admin/dashboard/src/routes/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/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
index 91c5b16625..f7c1a4d158 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
+++ b/packages/admin/dashboard/src/routes/product-variants/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/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
index 410f9f9380..a1b5cb5569 100644
--- a/packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
+++ b/packages/admin/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" />