diff --git a/.changeset/odd-meals-help.md b/.changeset/odd-meals-help.md new file mode 100644 index 0000000000..98199494d8 --- /dev/null +++ b/.changeset/odd-meals-help.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): minor fixes for inventory items diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/index.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/index.tsx index 4234857c34..5d1f9d318a 100644 --- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/index.tsx +++ b/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) => { - onDeleteVariant(variantId) + const handleDeleteVariant = async (variantId: string) => { + 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) => { diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/table.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/table.tsx index ef99e88f50..7dea519e39 100644 --- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/table.tsx +++ b/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: , variant: "danger", }, @@ -177,6 +179,20 @@ const VariantsTable = ({ variants, actions }: Props) => {
+ {showDelete && ( + 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} + /> + )}