Fix(admin-ui): delete inventory item when variant is deleted (#3585)

.changeset/odd-meals-help.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): minor fixes for inventory items

packages/admin-ui/ui/src/components/organisms/product-variants-section/index.tsx

@@ -1,26 +1,34 @@
-import { Product, ProductVariant } from "@medusajs/medusa"
 import OptionsProvider, { useOptionsContext } from "./options-provider"
+import { Product, ProductVariant, VariantInventory } from "@medusajs/medusa"
 
-import { useState } from "react"
-import useEditProductActions from "../../../hooks/use-edit-product-actions"
-import useToggleState from "../../../hooks/use-toggle-state"
-import EditIcon from "../../fundamentals/icons/edit-icon"
-import GearIcon from "../../fundamentals/icons/gear-icon"
-import PlusIcon from "../../fundamentals/icons/plus-icon"
 import { ActionType } from "../../molecules/actionables"
-import Section from "../../organisms/section"
 import AddVariantModal from "./add-variant-modal"
+import EditIcon from "../../fundamentals/icons/edit-icon"
 import EditVariantInventoryModal from "./edit-variant-inventory-modal"
 import EditVariantModal from "./edit-variant-modal"
 import EditVariantsModal from "./edit-variants-modal"
+import GearIcon from "../../fundamentals/icons/gear-icon"
 import OptionsModal from "./options-modal"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import Section from "../../organisms/section"
 import VariantsTable from "./table"
+import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { adminInventoryItemsKeys, useMedusa } from "medusa-react"
+import { useQueryClient } from "@tanstack/react-query"
+import { useState } from "react"
+import useToggleState from "../../../hooks/use-toggle-state"
 
 type Props = {
   product: Product
 }
 
 const ProductVariantsSection = ({ product }: Props) => {
+  const queryClient = useQueryClient()
+  const { client } = useMedusa()
+
+  const { isFeatureEnabled } = useFeatureFlag()
+
   const [variantToEdit, setVariantToEdit] = useState<
     | {
         base: ProductVariant
@@ -71,8 +79,23 @@ const ProductVariantsSection = ({ product }: Props) => {
 
   const { onDeleteVariant } = useEditProductActions(product.id)
 
-  const handleDeleteVariant = (variantId: string) => {
+  const handleDeleteVariant = async (variantId: string) => {
-    onDeleteVariant(variantId)
+    let variantInventory: VariantInventory | undefined
+    if (isFeatureEnabled("inventoryService")) {
+      const { variant } = await client.admin.variants.getInventory(variantId)
+      variantInventory = variant
+    }
+    onDeleteVariant(variantId, async () => {
+      if (
+        isFeatureEnabled("inventoryService") &&
+        variantInventory?.inventory[0]?.id
+      ) {
+        await client.admin.inventoryItems.delete(
+          variantInventory.inventory[0].id
+        )
+        queryClient.invalidateQueries(adminInventoryItemsKeys.lists())
+      }
+    })
   }
 
   const handleEditVariant = (variant: ProductVariant) => {

packages/admin-ui/ui/src/components/organisms/product-variants-section/table.tsx

@@ -1,7 +1,7 @@
 import { Column, useTable } from "react-table"
 
 import { ProductVariant } from "@medusajs/medusa"
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
 import DuplicateIcon from "../../fundamentals/icons/duplicate-icon"
@@ -9,6 +9,7 @@ import EditIcon from "../../fundamentals/icons/edit-icon"
 import TrashIcon from "../../fundamentals/icons/trash-icon"
 import Actionables from "../../molecules/actionables"
 import Table from "../../molecules/table"
+import DeletePrompt from "../delete-prompt"
 
 type Props = {
   variants: ProductVariant[]
@@ -87,6 +88,7 @@ const VariantsTable = ({ variants, actions }: Props) => {
   const { isFeatureEnabled } = useFeatureFlag()
   const hasInventoryService = isFeatureEnabled("inventoryService")
   const columns = useVariantsTableColumns(hasInventoryService)
+  const [showDelete, setShowDelete] = useState(false)
 
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
     useTable({
@@ -132,7 +134,7 @@ const VariantsTable = ({ variants, actions }: Props) => {
       },
       {
         label: "Delete Variant",
-        onClick: () => deleteVariant(variant.id),
+        onClick: () => setShowDelete(true),
         icon: <TrashIcon size="20" />,
         variant: "danger",
       },
@@ -177,6 +179,20 @@ const VariantsTable = ({ variants, actions }: Props) => {
               <Table.Cell>
                 <div className="float-right">
                   <Actionables forceDropdown actions={actionables} />
+                  {showDelete && (
+                    <DeletePrompt
+                      onDelete={async () => deleteVariant(row.original.id)}
+                      handleClose={() => setShowDelete(false)}
+                      confirmText="Yes, delete"
+                      heading="Delete variant"
+                      text={`Are you sure you want to delete this variant? ${
+                        isFeatureEnabled("inventoryService")
+                          ? " Note: Deleting the variant will also remove inventory items and levels"
+                          : ""
+                      }`}
+                      successText={false}
+                    />
+                  )}
                 </div>
               </Table.Cell>
             </Table.Row>