Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(dashboard): manage inventory placeholder #9190

Merged
merged 1 commit into from
Sep 19, 2024
+61 −35
Merged

feat(dashboard): manage inventory placeholder #9190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/admin/dashboard/src/i18n/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 3 additions & 1 deletion ...es/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && " · "}

Expand Down
63 changes: 40 additions & 23 deletions ...product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -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>

Expand All @@ -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>
)
}
28 changes: 17 additions & 11 deletions ...n/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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" />
Expand Down
Loading