-
-
-
-
+
+
+
{t("fields.sales_channels")}
+
,
+ },
+ ],
+ },
+ ]}
+ />
+
+
-
-
- ,
- ,
- ]}
- />
+ {availableInSalesChannels.length > 0 ? (
+
+
+ {firstChannels.map((sc) => sc.name).join(", ")}
+
+ {restChannels.length > 0 && (
+
+ {restChannels.map((sc) => (
+ {sc.name}
+ ))}
+
+ }
+ >
+
+ {`+${restChannels.length}`}
+
+
+ )}
+
-
-
+
+
+ ,
+ ,
+ ]}
+ />
+
+
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/index.ts
deleted file mode 100644
index f3fb2a0e2b..0000000000
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./product-thumbnail-section";
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/product-thumbnail-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/product-thumbnail-section.tsx
deleted file mode 100644
index 7926e0ab91..0000000000
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/product-thumbnail-section.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Product } from "@medusajs/medusa";
-import { Container, Heading } from "@medusajs/ui";
-
-type ProductThumbnailSectionProps = {
- product: Product;
-};
-
-export const ProductThumbnailSection = ({
- product,
-}: ProductThumbnailSectionProps) => {
- return (
-
-
-
- Thumbnail
-
-
- {product.thumbnail && (
-
-
-
- )}
-
-
- );
-};
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts
index f979682346..a92ad5b788 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts
@@ -1 +1 @@
-export * from "./product-variant-section";
+export * from "./product-variant-section"
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
index 8f8f331524..d5e0d3f670 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
@@ -1,18 +1,90 @@
-import { Product } from "@medusajs/medusa";
-import { Container, Heading } from "@medusajs/ui";
+import { PencilSquare } from "@medusajs/icons"
+import { Product } from "@medusajs/medusa"
+import { Container, Heading } from "@medusajs/ui"
+import { useAdminProductVariants } from "medusa-react"
+import { useTranslation } from "react-i18next"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useProductVariantTableColumns } from "./use-variant-table-columns"
+import { useProductVariantTableFilters } from "./use-variant-table-filters"
+import { useProductVariantTableQuery } from "./use-variant-table-query"
type ProductVariantSectionProps = {
- product: Product;
-};
+ product: Product
+}
+
+const PAGE_SIZE = 10
export const ProductVariantSection = ({
product,
}: ProductVariantSectionProps) => {
+ const { t } = useTranslation()
+
+ const { searchParams, raw } = useProductVariantTableQuery({
+ pageSize: PAGE_SIZE,
+ })
+ const { variants, count, isLoading, isError, error } =
+ useAdminProductVariants(
+ product.id,
+ {
+ ...searchParams,
+ },
+ {
+ keepPreviousData: true,
+ }
+ )
+
+ const filters = useProductVariantTableFilters()
+ const columns = useProductVariantTableColumns(product)
+
+ const { table } = useDataTable({
+ data: variants ?? [],
+ columns,
+ count,
+ enablePagination: true,
+ getRowId: (row) => row.id,
+ pageSize: PAGE_SIZE,
+ meta: {
+ product,
+ },
+ })
+
+ if (isError) {
+ throw error
+ }
+
return (
-
-
- Variants
-
-
- );
-};
+
+
+
{t("products.variants")}
+
,
+ },
+ ],
+ },
+ ]}
+ />
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-columns.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-columns.tsx
new file mode 100644
index 0000000000..74e07b81c1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-columns.tsx
@@ -0,0 +1,152 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { Product, ProductVariant } from "@medusajs/medusa"
+import { Badge, usePrompt } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useAdminDeleteVariant } from "medusa-react"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell"
+
+const VariantActions = ({
+ variant,
+ product,
+}: {
+ variant: ProductVariant
+ product: Product
+}) => {
+ const { mutateAsync } = useAdminDeleteVariant(product.id)
+ const { t } = useTranslation()
+ const prompt = usePrompt()
+
+ const handleDelete = async () => {
+ const res = await prompt({
+ title: t("general.areYouSure"),
+ description: t("products.deleteVariantWarning", {
+ title: variant.title,
+ }),
+ confirmText: t("actions.delete"),
+ cancelText: t("actions.cancel"),
+ })
+
+ if (!res) {
+ return
+ }
+
+ await mutateAsync(variant.id)
+ }
+
+ return (
+
,
+ },
+ ],
+ },
+ {
+ actions: [
+ {
+ label: t("actions.delete"),
+ onClick: handleDelete,
+ icon:
,
+ },
+ ],
+ },
+ ]}
+ />
+ )
+}
+
+const columnHelper = createColumnHelper
()
+
+export const useProductVariantTableColumns = (product?: Product) => {
+ const { t } = useTranslation()
+
+ const optionColumns = useMemo(() => {
+ return product
+ ? product.options?.map((o) => {
+ return columnHelper.display({
+ id: o.id,
+ header: () => (
+
+ {o.title}
+
+ ),
+ cell: ({ row }) => {
+ const value = row.original.options.find(
+ (op) => op.option_id === o.id
+ )
+
+ if (!value) {
+ return
+ }
+
+ return (
+
+
+ {value.value}
+
+
+ )
+ },
+ })
+ })
+ : []
+ }, [product])
+
+ return useMemo(
+ () => [
+ columnHelper.accessor("title", {
+ header: () => (
+
+ {t("fields.title")}
+
+ ),
+ cell: ({ getValue }) => (
+
+ {getValue()}
+
+ ),
+ }),
+ columnHelper.accessor("sku", {
+ header: () => (
+
+ {t("fields.sku")}
+
+ ),
+ cell: ({ getValue }) => {
+ const value = getValue()
+
+ if (!value) {
+ return
+ }
+
+ return (
+
+ {value}
+
+ )
+ },
+ }),
+ ...optionColumns,
+ columnHelper.display({
+ id: "actions",
+ cell: ({ row, table }) => {
+ const { product } = table.options.meta as { product: Product }
+
+ return
+ },
+ }),
+ ],
+ [t, optionColumns]
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-filters.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-filters.tsx
new file mode 100644
index 0000000000..7af6069d17
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-filters.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../../../components/table/data-table"
+
+export const useProductVariantTableFilters = () => {
+ const { t } = useTranslation()
+
+ let filters: Filter[] = []
+
+ const manageInventoryFilter: Filter = {
+ key: "manage_inventory",
+ label: t("fields.managedInventory"),
+ type: "select",
+ options: [
+ {
+ label: t("fields.true"),
+ value: "true",
+ },
+ {
+ label: t("fields.false"),
+ value: "false",
+ },
+ ],
+ }
+
+ const dateFilters: Filter[] = [
+ { label: t("fields.createdAt"), key: "created_at" },
+ { label: t("fields.updatedAt"), key: "updated_at" },
+ ].map((f) => ({
+ key: f.key,
+ label: f.label,
+ type: "date",
+ }))
+
+ filters = [...filters, manageInventoryFilter, ...dateFilters]
+
+ return filters
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-query.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-query.tsx
new file mode 100644
index 0000000000..a0092fc633
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/use-variant-table-query.tsx
@@ -0,0 +1,35 @@
+import { AdminGetProductsVariantsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useProductVariantTableQuery = ({
+ pageSize,
+ prefix,
+}: {
+ pageSize: number
+ prefix?: string
+}) => {
+ const queryObject = useQueryParams(
+ ["offset", "q", "manage_inventory", "order", "created_at", "updated_at"],
+ prefix
+ )
+
+ const { offset, manage_inventory, created_at, updated_at, q, order } =
+ queryObject
+
+ const searchParams: AdminGetProductsVariantsParams = {
+ limit: pageSize,
+ offset: offset ? Number(offset) : 0,
+ manage_inventory: manage_inventory
+ ? manage_inventory === "true"
+ : undefined,
+ order,
+ created_at: created_at ? JSON.parse(created_at) : undefined,
+ updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+ q,
+ }
+
+ return {
+ searchParams,
+ raw: queryObject,
+ }
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
index 7f0f42009b..b823d9c715 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
@@ -1,5 +1,5 @@
import { useAdminProduct } from "medusa-react"
-import { useLoaderData, useParams } from "react-router-dom"
+import { Outlet, useLoaderData, useParams } from "react-router-dom"
import { JsonViewSection } from "../../../components/common/json-view-section"
import { ProductAttributeSection } from "./components/product-attribute-section"
@@ -7,7 +7,6 @@ import { ProductGeneralSection } from "./components/product-general-section"
import { ProductMediaSection } from "./components/product-media-section"
import { ProductOptionSection } from "./components/product-option-section"
import { ProductSalesChannelSection } from "./components/product-sales-channel-section"
-import { ProductThumbnailSection } from "./components/product-thumbnail-section"
import { ProductVariantSection } from "./components/product-variant-section"
import { productLoader } from "./loader"
@@ -15,6 +14,7 @@ import after from "medusa-admin:widgets/product/details/after"
import before from "medusa-admin:widgets/product/details/before"
import sideAfter from "medusa-admin:widgets/product/details/side/after"
import sideBefore from "medusa-admin:widgets/product/details/side/before"
+import { ProductOrganizationSection } from "./components/product-organization-section"
export const ProductDetail = () => {
const initialData = useLoaderData() as Awaited<
@@ -30,23 +30,12 @@ export const ProductDetail = () => {
}
)
- // TODO: Move to loading.tsx and set as Suspense fallback for the route
- if (isLoading) {
- return Loading
+ if (isLoading || !product) {
+ return Loading...
}
- // TODO: Move to error.tsx and set as ErrorBoundary for the route
- if (isError || !product) {
- const err = error ? JSON.parse(JSON.stringify(error)) : null
- return (
-
- {(err as Error & { status: number })?.status === 404 ? (
-
Not found
- ) : (
-
Something went wrong!
- )}
-
-
+
-
{sideBefore.widgets.map((w, i) => {
return (
@@ -73,8 +61,9 @@ export const ProductDetail = () => {
)
})}
-
-
+
+
+
{sideAfter.widgets.map((w, i) => {
return (
@@ -100,8 +89,9 @@ export const ProductDetail = () => {
)
})}
-
-
+
+
+
{sideAfter.widgets.map((w, i) => {
return (
@@ -111,6 +101,7 @@ export const ProductDetail = () => {
})}
+
)
}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
new file mode 100644
index 0000000000..3889b91008
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx
@@ -0,0 +1,275 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Product } from "@medusajs/medusa"
+import { ProductStatus } from "@medusajs/types"
+import {
+ Button,
+ Drawer,
+ Input,
+ Select,
+ Switch,
+ Text,
+ Textarea,
+} from "@medusajs/ui"
+import { useAdminUpdateProduct } from "medusa-react"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+
+type EditProductFormProps = {
+ product: Product
+ subscribe: (state: boolean) => void
+ onSuccessfulSubmit: () => void
+}
+
+const EditProductSchema = zod.object({
+ status: zod.enum(["draft", "published", "proposed", "rejected"]),
+ title: zod.string().min(1),
+ subtitle: zod.string(),
+ handle: zod.string().min(1),
+ material: zod.string(),
+ description: zod.string(),
+ discountable: zod.boolean(),
+})
+
+export const EditProductForm = ({
+ product,
+ subscribe,
+ onSuccessfulSubmit,
+}: EditProductFormProps) => {
+ const form = useForm>({
+ defaultValues: {
+ status: product.status,
+ title: product.title,
+ material: product.material || "",
+ subtitle: product.subtitle || "",
+ handle: product.handle || "",
+ description: product.description || "",
+ discountable: product.discountable,
+ },
+ resolver: zodResolver(EditProductSchema),
+ })
+
+ const {
+ formState: { isDirty },
+ } = form
+
+ useEffect(() => {
+ subscribe(isDirty)
+ }, [isDirty, subscribe])
+
+ const { t } = useTranslation()
+ const { mutateAsync, isLoading } = useAdminUpdateProduct(product.id)
+
+ const handleSubmit = form.handleSubmit(async (data) => {
+ await mutateAsync(
+ {
+ ...data,
+ status: data.status as ProductStatus,
+ },
+ {
+ onSuccess: () => {
+ onSuccessfulSubmit()
+ },
+ }
+ )
+ })
+
+ return (
+
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/index.ts b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/index.ts
new file mode 100644
index 0000000000..c0a3a488b3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-edit/components/edit-product-form/index.ts
@@ -0,0 +1 @@
+export * from "./edit-product-form"
diff --git a/packages/admin-next/dashboard/src/routes/products/product-edit/index.ts b/packages/admin-next/dashboard/src/routes/products/product-edit/index.ts
new file mode 100644
index 0000000000..39e931ef5f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-edit/index.ts
@@ -0,0 +1 @@
+export { ProductEdit as Component } from "./product-edit"
diff --git a/packages/admin-next/dashboard/src/routes/products/product-edit/product-edit.tsx b/packages/admin-next/dashboard/src/routes/products/product-edit/product-edit.tsx
new file mode 100644
index 0000000000..0da39a73c5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-edit/product-edit.tsx
@@ -0,0 +1,41 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminProduct } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { EditProductForm } from "./components/edit-product-form"
+
+export const ProductEdit = () => {
+ const { id } = useParams()
+ const [open, onOpenChange, subscribe] = useRouteModalState()
+
+ const { t } = useTranslation()
+
+ const { product, isLoading, isError, error } = useAdminProduct(id!)
+
+ const handleSuccessfulSubmit = () => {
+ onOpenChange(false, true)
+ }
+
+ if (isError) {
+ throw error
+ }
+
+ return (
+
+
+
+ {t("products.editProduct")}
+
+ {!isLoading && product && (
+
+ )}
+
+
+ )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-gallery/index.ts b/packages/admin-next/dashboard/src/routes/products/product-gallery/index.ts
new file mode 100644
index 0000000000..899d525721
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-gallery/index.ts
@@ -0,0 +1 @@
+export { ProductGallery as Component } from "./product-gallery"
diff --git a/packages/admin-next/dashboard/src/routes/products/product-gallery/product-gallery.tsx b/packages/admin-next/dashboard/src/routes/products/product-gallery/product-gallery.tsx
new file mode 100644
index 0000000000..83744149a0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-gallery/product-gallery.tsx
@@ -0,0 +1,204 @@
+import {
+ ArrowDownTray,
+ ChevronLeftMini,
+ ChevronRightMini,
+ ThumbnailBadge,
+ Trash,
+ XMarkMini,
+} from "@medusajs/icons"
+import { Product } from "@medusajs/medusa"
+import { Button, IconButton, Kbd, Tooltip } from "@medusajs/ui"
+import * as Dialog from "@radix-ui/react-dialog"
+import { Variants, motion } from "framer-motion"
+import { useAdminProduct } from "medusa-react"
+import { useCallback, useEffect, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useParams, useSearchParams } from "react-router-dom"
+
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const ProductGallery = () => {
+ const [open, onOpenChange] = useRouteModalState()
+
+ const { id } = useParams()
+ const [searchParams, setSearchParams] = useSearchParams()
+
+ const { product, isLoading, isError, error } = useAdminProduct(id!)
+
+ const { t } = useTranslation()
+
+ const media = useMemo(() => {
+ return product ? getMedia(product) : []
+ }, [product])
+
+ const currentId = searchParams.get("img") ?? media[0]?.id
+ const currentIndex = media.findIndex((m) => m.id === currentId)
+
+ const paginate = useCallback(
+ (newDirection: number) => {
+ const adjustment = newDirection > 0 ? 1 : -1
+ const newIndex = (currentIndex + adjustment + media.length) % media.length
+ setSearchParams({ img: media[newIndex].id }, { replace: true })
+ },
+ [currentIndex, media, setSearchParams]
+ )
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "ArrowRight") {
+ e.preventDefault()
+ paginate(1)
+ }
+ if (e.key === "ArrowLeft") {
+ e.preventDefault()
+ paginate(-1)
+ }
+ }
+
+ document.addEventListener("keydown", handleKeyDown)
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown)
+ }
+ }, [paginate])
+
+ const indicatorVariants: Variants = {
+ active: {
+ width: "16px",
+ backgroundColor: "var(--fg-subtle)",
+ },
+ inactive: {
+ width: "6px",
+ backgroundColor: "var(--fg-muted)",
+ },
+ }
+
+ if (isError) {
+ throw error
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ esc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {media[currentIndex].isThumbnail && (
+
+
+
+
+
+ )}
+
+
+
+ {media.map((img, index) => (
+
+ ))}
+
+
+
+
+ )
+}
+
+type Media = {
+ id: string
+ url: string
+ isThumbnail: boolean
+}
+
+const getMedia = (product: Product) => {
+ const { images = [], thumbnail } = product
+
+ const media: Media[] = images.map((image) => ({
+ id: image.id,
+ url: image.url,
+ isThumbnail: image.url === thumbnail,
+ }))
+
+ if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+ media.unshift({
+ id: "img_thumbnail",
+ url: thumbnail,
+ isThumbnail: true,
+ })
+ }
+
+ return media
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
index fc9e5f5308..2ac39bbb89 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
@@ -1,180 +1,101 @@
import { PencilSquare, Trash } from "@medusajs/icons"
import type { Product } from "@medusajs/medusa"
-import {
- Button,
- Checkbox,
- CommandBar,
- Container,
- Heading,
- Table,
- clx,
-} from "@medusajs/ui"
-import {
- PaginationState,
- RowSelectionState,
- createColumnHelper,
- flexRender,
- getCoreRowModel,
- useReactTable,
-} from "@tanstack/react-table"
+import { Button, Container, Heading, usePrompt } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
import { useAdminDeleteProduct, useAdminProducts } from "medusa-react"
-import { useMemo, useState } from "react"
+import { useMemo } from "react"
import { useTranslation } from "react-i18next"
-import { useLoaderData, useNavigate } from "react-router-dom"
-
-import {
- ProductAvailabilityCell,
- ProductCollectionCell,
- ProductStatusCell,
- ProductTitleCell,
- ProductVariantCell,
-} from "../../../../../components/common/product-table-cells"
+import { Link, Outlet, useLoaderData } from "react-router-dom"
import { ActionMenu } from "../../../../../components/common/action-menu"
-import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useProductTableColumns } from "../../../../../hooks/table/columns/use-product-table-columns"
+import { useProductTableFilters } from "../../../../../hooks/table/filters/use-product-table-filters"
+import { useProductTableQuery } from "../../../../../hooks/table/query/use-product-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
import { productsLoader } from "../../loader"
-const PAGE_SIZE = 50
+const PAGE_SIZE = 20
export const ProductListTable = () => {
- const navigate = useNavigate()
const { t } = useTranslation()
- const [{ pageIndex, pageSize }, setPagination] = useState({
- pageIndex: 0,
- pageSize: PAGE_SIZE,
- })
-
- const [rowSelection, setRowSelection] = useState({})
-
const initialData = useLoaderData() as Awaited<
ReturnType>
>
- const { products, count } = useAdminProducts(
+ const { searchParams, raw } = useProductTableQuery({ pageSize: PAGE_SIZE })
+ const { products, count, isLoading, isError, error } = useAdminProducts(
{
- limit: PAGE_SIZE,
- offset: pageIndex * PAGE_SIZE,
+ ...searchParams,
},
{
initialData,
+ keepPreviousData: true,
}
)
+ const filters = useProductTableFilters()
const columns = useColumns()
- const pagination = useMemo(
- () => ({
- pageIndex,
- pageSize,
- }),
- [pageIndex, pageSize]
- )
-
- const table = useReactTable({
+ const { table } = useDataTable({
data: (products ?? []) as Product[],
columns,
- pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
- state: {
- pagination,
- rowSelection,
- },
- onPaginationChange: setPagination,
- onRowSelectionChange: setRowSelection,
- getCoreRowModel: getCoreRowModel(),
- manualPagination: true,
+ count,
+ enablePagination: true,
+ pageSize: PAGE_SIZE,
+ getRowId: (row) => row.id,
})
+ if (isError) {
+ throw error
+ }
+
return (
-
+
{t("products.domain")}
-
-
-
-
- {table.getHeaderGroups().map((headerGroup) => {
- return (
-
- {headerGroup.headers.map((header) => {
- return (
-
- {flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
-
- )
- })}
-
- )
- })}
-
-
- {table.getRowModel().rows.map((row) => (
- navigate(`/products/${row.original.id}`)}
- >
- {row.getVisibleCells().map((cell) => (
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
- ))}
-
- ))}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
* {isLoading && Loading...}
@@ -45,21 +56,21 @@ type ProductQueryKeys = typeof adminProductKeys
*
* )
* }
- *
+ *
* export default Products
* ```
- *
+ *
* To specify relations that should be retrieved within the products:
- *
+ *
* ```tsx
* import React from "react"
* import { useAdminProducts } from "medusa-react"
- *
+ *
* const Products = () => {
* const { products, isLoading } = useAdminProducts({
* expand: "images"
* })
- *
+ *
* return (
*
* {isLoading && Loading...}
@@ -74,19 +85,19 @@ type ProductQueryKeys = typeof adminProductKeys
*
* )
* }
- *
+ *
* export default Products
* ```
- *
+ *
* By default, only the first `50` records are retrieved. You can control pagination by specifying the `limit` and `offset` properties:
- *
+ *
* ```tsx
* import React from "react"
* import { useAdminProducts } from "medusa-react"
- *
+ *
* const Products = () => {
- * const {
- * products,
+ * const {
+ * products,
* limit,
* offset,
* isLoading
@@ -95,7 +106,7 @@ type ProductQueryKeys = typeof adminProductKeys
* limit: 20,
* offset: 0
* })
- *
+ *
* return (
*
* {isLoading && Loading...}
@@ -110,10 +121,10 @@ type ProductQueryKeys = typeof adminProductKeys
*
* )
* }
- *
+ *
* export default Products
* ```
- *
+ *
* @customNamespace Hooks.Admin.Products
* @category Queries
*/
@@ -139,32 +150,32 @@ export const useAdminProducts = (
/**
* This hook retrieves a product's details.
- *
+ *
* @example
* import React from "react"
* import { useAdminProduct } from "medusa-react"
- *
+ *
* type Props = {
* productId: string
* }
- *
+ *
* const Product = ({ productId }: Props) => {
- * const {
- * product,
- * isLoading,
+ * const {
+ * product,
+ * isLoading,
* } = useAdminProduct(productId)
- *
+ *
* return (
*
* {isLoading && Loading...}
* {product && {product.title}}
- *
+ *
*
* )
* }
- *
+ *
* export default Product
- *
+ *
* @customNamespace Hooks.Admin.Products
* @category Queries
*/
@@ -192,16 +203,40 @@ export const useAdminProduct = (
return { ...data, ...rest } as const
}
+export const useAdminProductVariants = (
+ /**
+ * The product's ID.
+ */
+ id: string,
+ /**
+ * Configurations to apply on the retrieved product variants.
+ */
+ query?: AdminGetProductsVariantsParams,
+ options?: UseQueryOptionsWrapper<
+ Response,
+ Error,
+ ReturnType
+ >
+) => {
+ const { client } = useMedusa()
+ const { data, ...rest } = useQuery(
+ adminProductKeys.detailVariants(id, query),
+ () => client.admin.products.listVariants(id, query),
+ options
+ )
+ return { ...data, ...rest } as const
+}
+
/**
* This hook retrieves a list of Product Tags with how many times each is used in products.
- *
+ *
* @example
* import React from "react"
* import { useAdminProductTagUsage } from "medusa-react"
- *
+ *
* const ProductTags = (productId: string) => {
* const { tags, isLoading } = useAdminProductTagUsage()
- *
+ *
* return (
*
* {isLoading && Loading...}
@@ -216,9 +251,9 @@ export const useAdminProduct = (
*
* )
* }
- *
+ *
* export default ProductTags
- *
+ *
* @customNamespace Hooks.Admin.Products
* @category Queries
*/
diff --git a/packages/medusa/src/api/routes/admin/products/__tests__/get-product.js b/packages/medusa/src/api/routes/admin/products/__tests__/get-product.js
index f99ea63f7e..4a58d2f808 100644
--- a/packages/medusa/src/api/routes/admin/products/__tests__/get-product.js
+++ b/packages/medusa/src/api/routes/admin/products/__tests__/get-product.js
@@ -1,6 +1,6 @@
import { IdMap } from "medusa-test-utils"
-import { ProductServiceMock } from "../../../../../services/__mocks__/product"
import { request } from "../../../../../helpers/test-request"
+import { ProductServiceMock } from "../../../../../services/__mocks__/product"
describe("GET /admin/products/:id", () => {
describe("successfully gets a product", () => {
@@ -24,7 +24,7 @@ describe("GET /admin/products/:id", () => {
jest.clearAllMocks()
})
- it("calls get product from productSerice", () => {
+ it("calls get product from productService", () => {
expect(ProductServiceMock.retrieve).toHaveBeenCalledTimes(1)
expect(ProductServiceMock.retrieve).toHaveBeenCalledWith(
IdMap.getId("product1"),
@@ -59,6 +59,7 @@ describe("GET /admin/products/:id", () => {
"collection",
"images",
"options",
+ "options.values",
"profiles",
"sales_channels",
"tags",
diff --git a/packages/medusa/src/api/routes/admin/products/__tests__/list-variants.js b/packages/medusa/src/api/routes/admin/products/__tests__/list-variants.js
index bd53c04250..a7097743ef 100644
--- a/packages/medusa/src/api/routes/admin/products/__tests__/list-variants.js
+++ b/packages/medusa/src/api/routes/admin/products/__tests__/list-variants.js
@@ -1,13 +1,19 @@
import { IdMap } from "medusa-test-utils"
+import {
+ defaultAdminGetProductsVariantsFields,
+ defaultAdminGetProductsVariantsRelations,
+} from ".."
import { request } from "../../../../../helpers/test-request"
import { ProductVariantServiceMock } from "../../../../../services/__mocks__/product-variant"
describe("GET /admin/products/:id/variants", () => {
describe("successfully gets a product variants", () => {
- let subject
+ afterEach(() => {
+ jest.clearAllMocks()
+ })
- beforeAll(async () => {
- subject = await request(
+ it("should call listAndCount with the default config", async () => {
+ await request(
"GET",
`/admin/products/${IdMap.getId("product1")}/variants`,
{
@@ -18,36 +24,22 @@ describe("GET /admin/products/:id/variants", () => {
},
}
)
- })
- afterAll(() => {
- jest.clearAllMocks()
- })
-
- it("should cal the get product from productService with the expected parameters without giving any config", () => {
expect(ProductVariantServiceMock.listAndCount).toHaveBeenCalledTimes(1)
expect(ProductVariantServiceMock.listAndCount).toHaveBeenCalledWith(
{
product_id: IdMap.getId("product1"),
},
- {
- relations: [],
- select: ["id", "product_id"],
+ expect.objectContaining({
+ relations: defaultAdminGetProductsVariantsRelations,
+ select: defaultAdminGetProductsVariantsFields,
skip: 0,
- take: 100
- }
+ take: 100,
+ })
)
})
- it("should returns product decorated", () => {
- expect(subject.body.variants.length).toEqual(2)
- expect(subject.body.variants).toEqual(expect.arrayContaining([
- expect.objectContaining({ product_id: IdMap.getId("product1") }),
- expect.objectContaining({ product_id: IdMap.getId("product1") }),
- ]))
- })
-
- it("should call the get product from productService with the expected parameters including the config that has been given", async () => {
+ it("should call listAndCount with the provided query params", async () => {
await request(
"GET",
`/admin/products/${IdMap.getId("product1")}/variants`,
@@ -58,24 +50,24 @@ describe("GET /admin/products/:id/variants", () => {
},
},
query: {
- expand: "variants.options",
- fields: "id, variants.id",
+ expand: "product",
+ fields: "id",
limit: 10,
- }
+ },
}
)
- expect(ProductVariantServiceMock.listAndCount).toHaveBeenCalledTimes(2)
+ expect(ProductVariantServiceMock.listAndCount).toHaveBeenCalledTimes(1)
expect(ProductVariantServiceMock.listAndCount).toHaveBeenLastCalledWith(
{
product_id: IdMap.getId("product1"),
},
- {
- relations: ["variants.options"],
- select: ["id", "product_id", "variants.id"],
+ expect.objectContaining({
+ relations: ["product"],
+ select: ["id", "created_at"],
skip: 0,
- take: 10
- }
+ take: 10,
+ })
)
})
})
diff --git a/packages/medusa/src/api/routes/admin/products/index.ts b/packages/medusa/src/api/routes/admin/products/index.ts
index bb25aeec77..8c0c10b437 100644
--- a/packages/medusa/src/api/routes/admin/products/index.ts
+++ b/packages/medusa/src/api/routes/admin/products/index.ts
@@ -10,6 +10,7 @@ import { PricedProduct } from "../../../../types/pricing"
import { validateSalesChannelsExist } from "../../../middlewares/validators/sales-channel-existence"
import { AdminGetProductParams } from "./get-product"
import { AdminGetProductsParams } from "./list-products"
+import { AdminGetProductsVariantsParams } from "./list-variants"
const route = Router()
@@ -42,7 +43,11 @@ export default (app, featureFlagRouter: FlagRouter) => {
route.get(
"/:id/variants",
- middlewares.normalizeQuery(),
+ transformQuery(AdminGetProductsVariantsParams, {
+ defaultRelations: defaultAdminGetProductsVariantsRelations,
+ defaultFields: defaultAdminGetProductsVariantsFields,
+ isList: true,
+ }),
middlewares.wrap(require("./list-variants").default)
)
route.post(
@@ -105,6 +110,7 @@ export const defaultAdminProductRelations = [
"profiles",
"images",
"options",
+ "options.values",
"tags",
"type",
"collection",
@@ -137,7 +143,33 @@ export const defaultAdminProductFields: (keyof Product)[] = [
"metadata",
]
-export const defaultAdminGetProductsVariantsFields = ["id", "product_id"]
+export const defaultAdminGetProductsVariantsFields = [
+ "id",
+ "product_id",
+ "title",
+ "sku",
+ "inventory_quantity",
+ "allow_backorder",
+ "manage_inventory",
+ "hs_code",
+ "origin_country",
+ "mid_code",
+ "material",
+ "weight",
+ "length",
+ "height",
+ "width",
+ "created_at",
+ "updated_at",
+ "deleted_at",
+ "metadata",
+ "variant_rank",
+ "ean",
+ "upc",
+ "barcode",
+]
+
+export const defaultAdminGetProductsVariantsRelations = ["options", "prices"]
/**
* This is temporary.
diff --git a/packages/medusa/src/api/routes/admin/products/list-variants.ts b/packages/medusa/src/api/routes/admin/products/list-variants.ts
index bd1cd3f87b..de0e9fb985 100644
--- a/packages/medusa/src/api/routes/admin/products/list-variants.ts
+++ b/packages/medusa/src/api/routes/admin/products/list-variants.ts
@@ -1,12 +1,17 @@
-import { IsNumber, IsOptional, IsString } from "class-validator"
+import {
+ IsBoolean,
+ IsNumber,
+ IsOptional,
+ IsString,
+ ValidateNested,
+} from "class-validator"
import { Request, Response } from "express"
-import { ProductVariant } from "../../../../models"
+import { Transform, Type } from "class-transformer"
import { ProductVariantService } from "../../../../services"
-import { Type } from "class-transformer"
-import { defaultAdminGetProductsVariantsFields } from "./index"
-import { getRetrieveConfig } from "../../../../utils/get-query-config"
-import { validator } from "../../../../utils/validator"
+import { DateComparisonOperator } from "../../../../types/common"
+import { IsType } from "../../../../utils"
+import { optionalBooleanMapper } from "../../../../utils/validators/is-boolean"
/**
* @oas [get] /admin/products/{id}/variants
@@ -14,15 +19,62 @@ import { validator } from "../../../../utils/validator"
* summary: "List a Product's Variants"
* description: |
* Retrieve a list of Product Variants associated with a Product. The variants can be paginated.
- *
- * By default, each variant will only have the `id` and `variant_id` fields. You can use the `expand` and `fields` request parameters to retrieve more fields or relations.
* x-authenticated: true
* parameters:
* - (path) id=* {string} ID of the product.
+ * - (query) id {string} IDs to filter product variants by.
* - (query) fields {string} Comma-separated fields that should be included in the returned product variants.
* - (query) expand {string} Comma-separated relations that should be expanded in the returned product variants.
* - (query) offset=0 {integer} The number of product variants to skip when retrieving the product variants.
* - (query) limit=100 {integer} Limit the number of product variants returned.
+ * - (query) q {string} Search term to search product variants' title, sku, and products' title.
+ * - (query) order {string} The field to sort the data by. By default, the sort order is ascending. To change the order to descending, prefix the field name with `-`.
+ * - (query) manage_inventory {boolean} Filter product variants by whether their inventory is managed or not.
+ * - (query) allow_backorder {boolean} Filter product variants by whether they are allowed to be backordered or not.
+ * - in: query
+ * name: created_at
+ * description: Filter by a creation date range.
+ * schema:
+ * type: object
+ * properties:
+ * lt:
+ * type: string
+ * description: filter by dates less than this date
+ * format: date
+ * gt:
+ * type: string
+ * description: filter by dates greater than this date
+ * format: date
+ * lte:
+ * type: string
+ * description: filter by dates less than or equal to this date
+ * format: date
+ * gte:
+ * type: string
+ * description: filter by dates greater than or equal to this date
+ * format: date
+ * - in: query
+ * name: updated_at
+ * description: Filter by an update date range.
+ * schema:
+ * type: object
+ * properties:
+ * lt:
+ * type: string
+ * description: filter by dates less than this date
+ * format: date
+ * gt:
+ * type: string
+ * description: filter by dates greater than this date
+ * format: date
+ * lte:
+ * type: string
+ * description: filter by dates less than or equal to this date
+ * format: date
+ * gte:
+ * type: string
+ * description: filter by dates greater than or equal to this date
+ * format: date
* x-codegen:
* method: listVariants
* queryParams: AdminGetProductsVariantsParams
@@ -61,61 +113,111 @@ import { validator } from "../../../../utils/validator"
export default async (req: Request, res: Response) => {
const { id } = req.params
- const { expand, fields, limit, offset } = await validator(
- AdminGetProductsVariantsParams,
- req.query
- )
-
- const queryConfig = getRetrieveConfig(
- defaultAdminGetProductsVariantsFields as (keyof ProductVariant)[],
- [],
- [
- ...new Set([
- ...defaultAdminGetProductsVariantsFields,
- ...(fields?.split(",") ?? []),
- ]),
- ] as (keyof ProductVariant)[],
- expand ? expand?.split(",") : undefined
- )
-
const productVariantService: ProductVariantService = req.scope.resolve(
"productVariantService"
)
+
+ const { skip, take } = req.listConfig
+
const [variants, count] = await productVariantService.listAndCount(
{
product_id: id,
+ ...req.filterableFields,
},
- {
- ...queryConfig,
- skip: offset,
- take: limit,
- }
+ req.listConfig
)
res.json({
count,
variants,
- offset,
- limit,
+ offset: skip,
+ limit: take,
})
}
export class AdminGetProductsVariantsParams {
+ /**
+ * IDs to filter product variants by.
+ */
+ @IsOptional()
+ @IsType([String, [String]])
+ id?: string | string[]
+
+ /**
+ * {@inheritDoc FindParams.fields}
+ */
@IsString()
@IsOptional()
fields?: string
+ /**
+ * {@inheritDoc FindParams.expand}
+ */
@IsString()
@IsOptional()
expand?: string
+ /**
+ * {@inheritDoc FindPaginationParams.offset}
+ * @defaultValue 0
+ */
@IsNumber()
@IsOptional()
@Type(() => Number)
offset?: number = 0
+ /**
+ * {@inheritDoc FindPaginationParams.limit}
+ * @defaultValue 100
+ */
@IsNumber()
@IsOptional()
@Type(() => Number)
limit?: number = 100
+
+ /**
+ * Search term to search product variants' title, sku, and products' title.
+ */
+ @IsString()
+ @IsOptional()
+ q?: string
+
+ /**
+ * The field to sort the data by. By default, the sort order is ascending. To change the order to descending, prefix the field name with `-`.
+ */
+ @IsString()
+ @IsOptional()
+ order?: string
+
+ /**
+ * Filter product variants by whether their inventory is managed or not.
+ */
+ @IsBoolean()
+ @IsOptional()
+ @Transform(({ value }) => optionalBooleanMapper.get(value.toLowerCase()))
+ manage_inventory?: boolean
+
+ /**
+ * Filter product variants by whether they are allowed to be backordered or not.
+ */
+ @IsBoolean()
+ @IsOptional()
+ @Transform(({ value }) => optionalBooleanMapper.get(value.toLowerCase()))
+ allow_backorder?: boolean
+
+ /**
+ * Date filters to apply on the product variants' `created_at` date.
+ */
+ @IsOptional()
+ @ValidateNested()
+ @Type(() => DateComparisonOperator)
+ created_at?: DateComparisonOperator
+
+ /**
+ * Date filters to apply on the product variants' `updated_at` date.
+ */
+ @IsOptional()
+ @ValidateNested()
+ @Type(() => DateComparisonOperator)
+ updated_at?: DateComparisonOperator
}
diff --git a/packages/medusa/src/types/product.ts b/packages/medusa/src/types/product.ts
index 571cd0a881..9ef67cb1c5 100644
--- a/packages/medusa/src/types/product.ts
+++ b/packages/medusa/src/types/product.ts
@@ -1,4 +1,4 @@
-import { DateComparisonOperator, FindConfig, Selector } from "./common"
+import { Transform, Type } from "class-transformer"
import {
IsArray,
IsBoolean,
@@ -15,14 +15,14 @@ import {
ProductStatus,
SalesChannel,
} from "../models"
-import { Transform, Type } from "class-transformer"
+import { DateComparisonOperator, FindConfig, Selector } from "./common"
-import { FeatureFlagDecorators } from "../utils/feature-flag-decorators"
import { FindOperator } from "typeorm"
+import SalesChannelFeatureFlag from "../loaders/feature-flags/sales-channels"
+import { FeatureFlagDecorators } from "../utils/feature-flag-decorators"
+import { optionalBooleanMapper } from "../utils/validators/is-boolean"
import { IsType } from "../utils/validators/is-type"
import { PriceListLoadConfig } from "./price-list"
-import SalesChannelFeatureFlag from "../loaders/feature-flags/sales-channels"
-import { optionalBooleanMapper } from "../utils/validators/is-boolean"
/**
* Filters to apply on retrieved products.
diff --git a/yarn.lock b/yarn.lock
index 9be232a3db..cf640f8a84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8089,6 +8089,7 @@ __metadata:
"@radix-ui/react-hover-card": ^1.0.7
"@tanstack/react-query": 4.22.0
"@tanstack/react-table": 8.10.7
+ "@tanstack/react-virtual": ^3.0.4
"@types/node": ^20.11.15
"@types/react": 18.2.43
"@types/react-dom": 18.2.17
@@ -8109,6 +8110,7 @@ __metadata:
react-hook-form: 7.49.1
react-i18next: 13.5.0
react-jwt: ^1.2.0
+ react-resizable-panels: ^2.0.9
react-router-dom: 6.20.1
tailwindcss: ^3.4.1
typescript: 5.2.2
@@ -16791,6 +16793,18 @@ __metadata:
languageName: node
linkType: hard
+"@tanstack/react-virtual@npm:^3.0.4":
+ version: 3.0.4
+ resolution: "@tanstack/react-virtual@npm:3.0.4"
+ dependencies:
+ "@tanstack/virtual-core": 3.0.0
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 6222dc1254843fa52bdb93deca74282e2b8aabd17337d7b35596441bb70d1d7e333b1679acfb50240847799d63ee24eb184958ad8c7f1ca84c4ff0c13aefa7ec
+ languageName: node
+ linkType: hard
+
"@tanstack/table-core@npm:8.10.7":
version: 8.10.7
resolution: "@tanstack/table-core@npm:8.10.7"
@@ -43948,6 +43962,16 @@ __metadata:
languageName: node
linkType: hard
+"react-resizable-panels@npm:^2.0.9":
+ version: 2.0.9
+ resolution: "react-resizable-panels@npm:2.0.9"
+ peerDependencies:
+ react: ^16.14.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
+ checksum: 0302ab32d3aa7d2887a2ad58882e447a8e22cef3c5c728cde7436442fcd7475969a86bb45d1a6e285b1b4e2a9ac49d13a0e2df4b29bc63542dc99044309e211c
+ languageName: node
+ linkType: hard
+
"react-router-dom@npm:6.20.1":
version: 6.20.1
resolution: "react-router-dom@npm:6.20.1"