@medusajs/dashboard 0.0.1

package/src/v2-routes/pricing/pricing-create/components/pricing-create-form/pricing-products-form.tsx

@@ -0,0 +1,175 @@
+import { Checkbox } from "@medusajs/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import {
+  OnChangeFn,
+  RowSelectionState,
+  createColumnHelper,
+} from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+import { UseFormReturn, useWatch } from "react-hook-form"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useProducts } from "../../../../../hooks/api/products"
+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 { ExtendedProductDTO } from "../../../../../types/api-responses"
+import { PricingProductsRecordType } from "../../../common/schemas"
+import { PricingCreateSchemaType } from "./schema"
+
+type PricingProductsFormProps = {
+  form: UseFormReturn<PricingCreateSchemaType>
+}
+
+const PAGE_SIZE = 50
+const PREFIX = "p"
+
+function getInitialSelection(products: { id: string }[]) {
+  return products.reduce((acc, curr) => {
+    acc[curr.id] = true
+    return acc
+  }, {} as RowSelectionState)
+}
+
+export const PricingProductsForm = ({ form }: PricingProductsFormProps) => {
+  const { control, setValue } = form
+
+  const selectedIds = useWatch({
+    control,
+    name: "product_ids",
+  })
+
+  const productRecords = useWatch({
+    control,
+    name: "products",
+  })
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(
+    getInitialSelection(selectedIds)
+  )
+
+  const { searchParams, raw } = useProductTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
+  const { products, count, isLoading, isError, error } = useProducts(
+    searchParams,
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const updater: OnChangeFn<RowSelectionState> = (fn) => {
+    const state = typeof fn === "function" ? fn(rowSelection) : fn
+
+    const ids = Object.keys(state)
+    const productRecordKeys = Object.keys(productRecords)
+
+    const updatedRecords = productRecordKeys.reduce((acc, key) => {
+      if (ids.includes(key)) {
+        acc[key] = productRecords[key]
+      }
+
+      return acc
+    }, {} as PricingProductsRecordType)
+
+    const update = ids.map((id) => ({ id }))
+
+    setValue("product_ids", update, { shouldDirty: true, shouldTouch: true })
+
+    /**
+     * Update the product records to ensure that all unselected products
+     * are removed from the form state.
+     */
+    setValue("products", updatedRecords, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+
+    setRowSelection(state)
+  }
+
+  const columns = useColumns()
+  const filters = useProductTableFilters()
+
+  const { table } = useDataTable({
+    data: products || [],
+    columns,
+    count,
+    enablePagination: true,
+    enableRowSelection: (row) => {
+      return row.original.variants.length > 0
+    },
+    getRowId: (row) => row.id,
+    rowSelection: {
+      state: rowSelection,
+      updater,
+    },
+    pageSize: PAGE_SIZE,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="flex size-full flex-col">
+      <DataTable
+        table={table}
+        columns={columns}
+        filters={filters}
+        pageSize={PAGE_SIZE}
+        prefix={PREFIX}
+        count={count}
+        isLoading={isLoading}
+        layout="fill"
+        orderBy={["title", "status", "created_at", "updated_at"]}
+        pagination
+        search
+        queryObject={raw}
+      />
+    </div>
+  )
+}
+
+const columnHelper = createColumnHelper<ExtendedProductDTO>()
+
+const useColumns = () => {
+  const base = useProductTableColumns()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      ...base,
+    ],
+    [base]
+  )
+}

package/src/v2-routes/pricing/pricing-create/components/pricing-create-form/schema.ts

@@ -0,0 +1,54 @@
+import { z } from "zod"
+import { PricingProductsRecordSchema } from "../../../common/schemas"
+
+const PricingCustomerGroupsArray = z.array(
+  z.object({
+    id: z.string(),
+    name: z.string(),
+  })
+)
+
+export type PricingCustomerGroupsArrayType = z.infer<
+  typeof PricingCustomerGroupsArray
+>
+
+export const PricingCreateSchema = z.object({
+  type: z.enum(["sale", "override"]),
+  title: z.string().min(1),
+  description: z.string().min(1),
+  starts_at: z.date().nullable(),
+  ends_at: z.date().nullable(),
+  customer_group_ids: PricingCustomerGroupsArray.optional(),
+  product_ids: z.array(z.object({ id: z.string() })).min(1),
+  products: PricingProductsRecordSchema,
+})
+
+export type PricingCreateSchemaType = z.infer<typeof PricingCreateSchema>
+
+export const PricingDetailsSchema = PricingCreateSchema.pick({
+  type: true,
+  title: true,
+  description: true,
+  starts_at: true,
+  ends_at: true,
+})
+
+export const PricingDetailsFields = Object.keys(
+  PricingDetailsSchema.shape
+) as (keyof typeof PricingDetailsSchema.shape)[]
+
+export const PricingProductsSchema = PricingCreateSchema.pick({
+  product_ids: true,
+})
+
+export const PricingProductsFields = Object.keys(
+  PricingProductsSchema.shape
+) as (keyof typeof PricingProductsSchema.shape)[]
+
+export const PricingPricesSchema = PricingCreateSchema.pick({
+  products: true,
+})
+
+export const PricingPricesFields = Object.keys(
+  PricingPricesSchema.shape
+) as (keyof typeof PricingPricesSchema.shape)[]

package/src/v2-routes/pricing/pricing-create/index.ts

@@ -0,0 +1 @@
+export { PricingCreate as Component } from "./pricing-create"

package/src/v2-routes/pricing/pricing-create/pricing-create.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/route-modal"
+import { PricingCreateForm } from "./components/pricing-create-form"
+
+export const PricingCreate = () => {
+  return (
+    <RouteFocusModal>
+      <PricingCreateForm />
+    </RouteFocusModal>
+  )
+}

package/src/v2-routes/pricing/pricing-detail/components/pricing-configuration-section/index.ts

@@ -0,0 +1 @@
+export * from "./pricing-configuration-section"

package/src/v2-routes/pricing/pricing-detail/components/pricing-configuration-section/pricing-configuration-section.tsx

@@ -0,0 +1,90 @@
+import { PencilSquare } from "@medusajs/icons"
+import { PriceListDTO } from "@medusajs/types"
+import { Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDate } from "../../../../../hooks/use-date"
+
+type PricingConfigurationSectionProps = {
+  priceList: PriceListDTO
+}
+
+export const PricingConfigurationSection = ({
+  priceList,
+}: PricingConfigurationSectionProps) => {
+  const { t } = useTranslation()
+  const { getFullDate } = useDate()
+
+  // TODO: Customer groups are not available in the price list schema out-of-the-box atm.
+  // const firstCustomerGroups = priceList.customer_groups?.slice(0, 3) || []
+  // const remainingCustomerGroups = priceList.customer_groups?.slice(3) || []
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("pricing.configuration.header")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "configuration",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("fields.startDate")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          {priceList.starts_at
+            ? getFullDate({ date: priceList.starts_at })
+            : "-"}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("fields.endDate")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          {priceList.ends_at ? getFullDate({ date: priceList.ends_at }) : "-"}
+        </Text>
+      </div>
+      {/* <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("pricing.settings.customerGroupsLabel")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          <span>
+            {firstCustomerGroups.length > 0
+              ? firstCustomerGroups.join(", ")
+              : "-"}
+          </span>
+          {remainingCustomerGroups.length > 0 && (
+            <Tooltip
+              content={
+                <ul>
+                  {remainingCustomerGroups.map((cg) => (
+                    <li key={cg.id}>{cg.name}</li>
+                  ))}
+                </ul>
+              }
+            >
+              <span className="text-ui-fg-muted">
+                {" "}
+                {t("general.plusCountMore", {
+                  count: remainingCustomerGroups.length,
+                })}
+              </span>
+            </Tooltip>
+          )}
+        </Text>
+      </div> */}
+    </Container>
+  )
+}

package/src/v2-routes/pricing/pricing-detail/components/pricing-general-section/index.ts

@@ -0,0 +1 @@
+export * from "./pricing-general-section"

package/src/v2-routes/pricing/pricing-detail/components/pricing-general-section/pricing-general-section.tsx

@@ -0,0 +1,110 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { PriceListDTO } from "@medusajs/types"
+import { Container, Heading, StatusBadge, Text, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDeletePriceList } from "../../../../../hooks/api/price-lists"
+import { getPriceListStatus } from "../../../common/utils"
+
+type PricingGeneralSectionProps = {
+  priceList: PriceListDTO
+}
+
+export const PricingGeneralSection = ({
+  priceList,
+}: PricingGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeletePriceList(priceList.id)
+
+  const overrideCount = priceList.prices?.length || 0
+
+  const { color, text } = getPriceListStatus(t, priceList)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("pricing.warnings.delete", {
+        name: priceList.title,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("..", { replace: true })
+      },
+    })
+  }
+
+  const type =
+    priceList.type === "sale"
+      ? t("pricing.type.sale")
+      : t("pricing.type.override")
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{priceList.title}</Heading>
+        <div className="flex items-center gap-x-4">
+          <StatusBadge color={color}>{text}</StatusBadge>
+          <ActionMenu
+            groups={[
+              {
+                actions: [
+                  {
+                    label: t("actions.edit"),
+                    to: "edit",
+                    icon: <PencilSquare />,
+                  },
+                ],
+              },
+              {
+                actions: [
+                  {
+                    label: t("actions.delete"),
+                    onClick: handleDelete,
+                    icon: <Trash />,
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("fields.type")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          {type}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("fields.description")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          {priceList.description}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4">
+        <Text leading="compact" size="small" weight="plus">
+          {t("pricing.fields.priceOverridesLabel")}
+        </Text>
+        <Text size="small" className="text-pretty">
+          {overrideCount || "-"}
+        </Text>
+      </div>
+    </Container>
+  )
+}

package/src/v2-routes/pricing/pricing-detail/components/pricing-product-section/index.ts

@@ -0,0 +1 @@
+export * from "./pricing-product-section"

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

@@ -0,0 +1,217 @@
+import { PencilSquare, Plus, Trash } from "@medusajs/icons"
+import { PriceListDTO } from "@medusajs/types"
+import { Checkbox, Container, Heading, usePrompt } from "@medusajs/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useProducts } from "../../../../../hooks/api/products"
+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 { ExtendedProductDTO } from "../../../../../types/api-responses"
+
+type PricingProductSectionProps = {
+  priceList: PriceListDTO
+}
+
+const PAGE_SIZE = 10
+const PREFIX = "p"
+
+export const PricingProductSection = ({
+  priceList,
+}: PricingProductSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { searchParams, raw } = useProductTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
+  const { products, count, isLoading, isError, error } = useProducts(
+    {
+      ...searchParams,
+      price_list_id: [priceList.id],
+    },
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const filters = useProductTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: products || [],
+    count,
+    columns,
+    enablePagination: true,
+    enableRowSelection: true,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id,
+    rowSelection: {
+      state: rowSelection,
+      updater: setRowSelection,
+    },
+    prefix: PREFIX,
+  })
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("pricing.products.deleteProductsPricesWarning", {
+        count: Object.keys(rowSelection).length,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    // The endpoint to batch remove prices by product ids is not implemented in
+    // v2. We either need to implement it or remove the feature.
+    console.log("Not implemented yet.")
+  }
+
+  const handleEdit = async () => {
+    const ids = Object.keys(rowSelection).join(",")
+
+    navigate(`/pricing/${priceList.id}/products/edit?ids[]=${ids}`)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("products.domain")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("pricing.prices.addPrices"),
+                  to: "products/add",
+                  icon: <Plus />,
+                },
+                {
+                  label: t("pricing.prices.editPrices"),
+                  to: "products/edit",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <DataTable
+        table={table}
+        filters={filters}
+        columns={columns}
+        count={count}
+        pageSize={PAGE_SIZE}
+        isLoading={isLoading}
+        navigateTo={(row) => `/products/${row.original.id}`}
+        orderBy={["title", "created_at", "updated_at"]}
+        commands={[
+          {
+            action: handleEdit,
+            label: t("actions.edit"),
+            shortcut: "e",
+          },
+          {
+            action: handleDelete,
+            label: t("actions.delete"),
+            shortcut: "d",
+          },
+        ]}
+        pagination
+        search
+        prefix={PREFIX}
+        queryObject={raw}
+      />
+    </Container>
+  )
+}
+
+const ProductRowAction = ({ product }: { product: ExtendedProductDTO }) => {
+  const { t } = useTranslation()
+
+  // TODO: The endpoint to remove prices by product id is not implemented in v2.
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.remove"),
+              onClick: () => {
+                console.log(
+                  `Removing prices for ${product.id}. Not implemented yet.`
+                )
+              },
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<ExtendedProductDTO>()
+
+const useColumns = () => {
+  const base = useProductTableColumns()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <ProductRowAction product={row.original} />,
+      }),
+    ],
+    [base]
+  )
+}

package/src/v2-routes/pricing/pricing-detail/index.ts

@@ -0,0 +1,2 @@
+export { pricingLoader as loader } from "./loader"
+export { PricingDetail as Component } from "./pricing-detail"

package/src/v2-routes/pricing/pricing-detail/loader.ts

@@ -0,0 +1,20 @@
+import { LoaderFunctionArgs } from "react-router-dom"
+import { priceListsQueryKeys } from "../../../hooks/api/price-lists"
+import { client } from "../../../lib/client"
+import { queryClient } from "../../../lib/medusa"
+import { PriceListRes } from "../../../types/api-responses"
+
+const pricingDetailQuery = (id: string) => ({
+  queryKey: priceListsQueryKeys.detail(id),
+  queryFn: async () => client.priceLists.retrieve(id),
+})
+
+export const pricingLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = pricingDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<PriceListRes>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}