@medusajs/dashboard 0.0.1

package/src/v2-routes/products/product-detail/components/product-variant-section/product-variant-section.tsx

@@ -0,0 +1,94 @@
+import { PencilSquare, Plus } from "@medusajs/icons"
+import { Product } from "@medusajs/medusa"
+import { Container, Heading } from "@medusajs/ui"
+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"
+import { useProductVariants } from "../../../../../hooks/api/products"
+
+type ProductVariantSectionProps = {
+  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 } = useProductVariants(
+    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 (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.variants")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.create"),
+                  to: `variants/create`,
+                  icon: <Plus />,
+                },
+                {
+                  label: t("products.editPrices"),
+                  to: `prices`,
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <DataTable
+        table={table}
+        columns={columns}
+        filters={filters}
+        count={count}
+        pageSize={PAGE_SIZE}
+        isLoading={isLoading}
+        orderBy={["title", "created_at", "updated_at"]}
+        pagination
+        search
+        queryObject={raw}
+      />
+    </Container>
+  )
+}

package/src/v2-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 { 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"
+import { useDeleteVariant } from "../../../../../hooks/api/products"
+
+const VariantActions = ({
+  variant,
+  product,
+}: {
+  variant: ProductVariant
+  product: Product
+}) => {
+  const { mutateAsync } = useDeleteVariant(product.id, variant.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()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `variants/${variant.id}/edit`,
+              icon: <PencilSquare />,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<ProductVariant>()
+
+export const useProductVariantTableColumns = (product?: Product) => {
+  const { t } = useTranslation()
+
+  const optionColumns = useMemo(() => {
+    if (!product) {
+      return []
+    }
+    return product.options?.map((option) => {
+      return columnHelper.display({
+        id: option.id,
+        header: () => (
+          <div className="flex h-full w-full items-center">
+            <span className="truncate">{option.title}</span>
+          </div>
+        ),
+        cell: ({ row }) => {
+          const variantOpt: any = row.original.options.find(
+            (opt: any) => opt.option_id === option.id
+          )
+          if (!variantOpt) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex h-full w-full items-center overflow-hidden">
+              <Badge
+                size="2xsmall"
+                className="flex min-w-[20px] items-center justify-center"
+              >
+                {variantOpt.value}
+              </Badge>
+            </div>
+          )
+        },
+      })
+    })
+  }, [product])
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: () => (
+          <div className="flex h-full w-full items-center">
+            <span className="truncate">{t("fields.title")}</span>
+          </div>
+        ),
+        cell: ({ getValue }) => (
+          <div className="flex h-full w-full items-center overflow-hidden">
+            <span className="truncate">{getValue()}</span>
+          </div>
+        ),
+      }),
+      columnHelper.accessor("sku", {
+        header: () => (
+          <div className="flex h-full w-full items-center">
+            <span className="truncate">{t("fields.sku")}</span>
+          </div>
+        ),
+        cell: ({ getValue }) => {
+          const value = getValue()
+
+          if (!value) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex h-full w-full items-center overflow-hidden">
+              <span className="truncate">{value}</span>
+            </div>
+          )
+        },
+      }),
+      ...optionColumns,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row, table }) => {
+          const { product } = table.options.meta as { product: Product }
+
+          return <VariantActions variant={row.original} product={product} />
+        },
+      }),
+    ],
+    [t, optionColumns]
+  )
+}

package/src/v2-routes/products/product-detail/components/product-variant-section/use-variant-table-filters.tsx

@@ -0,0 +1,58 @@
+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 allowBackorderFilter: Filter = {
+    key: "allow_backorder",
+    label: t("fields.allowBackorder"),
+    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,
+    allowBackorderFilter,
+    ...dateFilters,
+  ]
+
+  return filters
+}

package/src/v2-routes/products/product-detail/components/product-variant-section/use-variant-table-query.tsx

@@ -0,0 +1,51 @@
+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",
+      "allow_backorder",
+      "order",
+      "created_at",
+      "updated_at",
+    ],
+    prefix
+  )
+
+  const {
+    offset,
+    manage_inventory,
+    allow_backorder,
+    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,
+    allow_backorder: allow_backorder ? allow_backorder === "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,
+  }
+}

package/src/v2-routes/products/product-detail/index.ts

@@ -0,0 +1,2 @@
+export { productLoader as loader } from "./loader"
+export { ProductDetail as Component } from "./product-detail"

package/src/v2-routes/products/product-detail/loader.ts

@@ -0,0 +1,22 @@
+import { AdminProductsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { queryClient } from "../../../lib/medusa"
+import { productsQueryKeys } from "../../../hooks/api/products"
+import { client } from "../../../lib/client"
+
+const productDetailQuery = (id: string) => ({
+  queryKey: productsQueryKeys.detail(id),
+  queryFn: async () => client.products.retrieve(id),
+})
+
+export const productLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = productDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<Response<AdminProductsRes>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

package/src/v2-routes/products/product-detail/product-detail.tsx

@@ -0,0 +1,94 @@
+import { Outlet, useLoaderData, useParams } from "react-router-dom"
+
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { ProductAttributeSection } from "./components/product-attribute-section"
+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 { ProductVariantSection } from "./components/product-variant-section"
+import { productLoader } from "./loader"
+
+// 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 { useProduct } from "../../../hooks/api/products"
+import { ProductOrganizationSection } from "./components/product-organization-section"
+
+// TODO: Use product domain translations only
+export const ProductDetail = () => {
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof productLoader>
+  >
+
+  const { id } = useParams()
+  const { product, isLoading, isError, error } = useProduct(id!, undefined, {
+    initialData: initialData,
+  })
+
+  if (isLoading || !product) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      {/* {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })} */}
+
+      <div className="flex flex-col gap-x-4 lg:flex-row lg:items-start">
+        <div className="flex w-full flex-col gap-y-2">
+          <ProductGeneralSection product={product} />
+          <ProductMediaSection product={product} />
+          <ProductOptionSection product={product} />
+          <ProductVariantSection product={product} />
+          {/* {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })} */}
+
+          <div className="hidden lg:block">
+            <JsonViewSection data={product} root="product" />
+          </div>
+        </div>
+        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 lg:mt-0 lg:max-w-[400px]">
+          {/* {sideBefore.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })} */}
+          <ProductSalesChannelSection product={product} />
+          <ProductOrganizationSection product={product} />
+          <ProductAttributeSection product={product} />
+          {/* {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })} */}
+
+          <div className="lg:hidden">
+            <JsonViewSection data={product} root="product" />
+          </div>
+        </div>
+      </div>
+      <Outlet />
+    </div>
+  )
+}