feat: Add support for price setting and updates for products (medusaj…

…s#7037)

We still need to add a `batch` method for variants, but I'll do that in a separate PR

packages/admin-next/dashboard/public/locales/en-US/translation.json

@@ -58,6 +58,7 @@
   "actions": {
     "save": "Save",
     "saveAsDraft": "Save as draft",
+    "publish": "Publish",
     "create": "Create",
     "delete": "Delete",
     "remove": "Remove",
@@ -157,6 +158,7 @@
     "organization": "Organize",
     "editOrganization": "Edit Organization",
     "editOptions": "Edit Options",
+    "editPrices": "Edit prices",
     "media": {
       "label": "Media",
       "editHint": "Add media to the product to showcase it in your storefront.",

packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx

@@ -29,19 +29,19 @@ type FieldCoordinates = {
 
 export interface DataGridRootProps<
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 > {
   data?: TData[]
   columns: ColumnDef<TData>[]
   state: UseFormReturn<TFieldValues>
-  getSubRows: (row: TData) => TData[] | undefined
+  getSubRows?: (row: TData) => TData[]
 }
 
 const ROW_HEIGHT = 40
 
 export const DataGridRoot = <
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 >({
   data = [],
   columns,

packages/admin-next/dashboard/src/providers/router-provider/v2.tsx

@@ -98,6 +98,11 @@ export const v2Routes: RouteObject[] = [
                     lazy: () =>
                       import("../../v2-routes/products/product-media"),
                   },
+                  {
+                    path: "prices",
+                    lazy: () =>
+                      import("../../v2-routes/products/product-prices"),
+                  },
                   {
                     path: "options/create",
                     lazy: () =>

packages/admin-next/dashboard/src/v2-routes/pricing/pricing-create/components/pricing-create-form/pricing-create-form.tsx

@@ -127,10 +127,13 @@ export const PricingCreateForm = () => {
   ) => {
     form.clearErrors(fields)
 
-    const values = fields.reduce((acc, key) => {
-      acc[key] = form.getValues(key)
-      return acc
-    }, {} as Record<string, unknown>)
+    const values = fields.reduce(
+      (acc, key) => {
+        acc[key] = form.getValues(key)
+        return acc
+      },
+      {} as Record<string, unknown>
+    )
 
     const validationResult = schema.safeParse(values)
 

packages/admin-next/dashboard/src/v2-routes/products/common/variant-pricing-form.tsx

@@ -0,0 +1,95 @@
+import { UseFormReturn, useWatch } from "react-hook-form"
+import { CreateProductSchemaType } from "../product-create/schema"
+import { DataGrid } from "../../../components/grid/data-grid"
+import { useCurrencies } from "../../../hooks/api/currencies"
+import { useStore } from "../../../hooks/api/store"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { CurrencyDTO, ProductVariantDTO } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
+import { useMemo } from "react"
+import { ReadonlyCell } from "../../../components/grid/grid-cells/common/readonly-cell"
+import { CurrencyCell } from "../../../components/grid/grid-cells/common/currency-cell"
+import { DataGridMeta } from "../../../components/grid/types"
+
+type VariantPricingFormProps = {
+  form: UseFormReturn<CreateProductSchemaType>
+}
+
+export const VariantPricingForm = ({ form }: VariantPricingFormProps) => {
+  const { store, isLoading: isStoreLoading } = useStore()
+  const { currencies, isLoading: isCurrenciesLoading } = useCurrencies(
+    {
+      code: store?.supported_currency_codes,
+      limit: store?.supported_currency_codes?.length,
+    },
+    {
+      enabled: !!store,
+    }
+  )
+
+  const columns = useVariantPriceGridColumns({
+    currencies,
+  })
+
+  const variants = useWatch({
+    control: form.control,
+    name: "variants",
+  }) as any
+
+  return (
+    <div className="flex size-full flex-col divide-y overflow-hidden">
+      <DataGrid
+        columns={columns}
+        data={variants}
+        isLoading={isStoreLoading || isCurrenciesLoading}
+        state={form}
+      />
+    </div>
+  )
+}
+
+const columnHelper = createColumnHelper<ProductVariantDTO>()
+
+export const useVariantPriceGridColumns = ({
+  currencies = [],
+}: {
+  currencies?: CurrencyDTO[]
+}) => {
+  const { t } = useTranslation()
+
+  const colDefs: ColumnDef<ProductVariantDTO>[] = useMemo(() => {
+    return [
+      columnHelper.display({
+        id: t("fields.title"),
+        header: t("fields.title"),
+        cell: ({ row }) => {
+          const entity = row.original
+
+          return (
+            <ReadonlyCell>
+              <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
+                <span className="truncate">{entity.title}</span>
+              </div>
+            </ReadonlyCell>
+          )
+        },
+      }),
+      ...currencies.map((currency) => {
+        return columnHelper.display({
+          header: `Price ${currency.code.toUpperCase()}`,
+          cell: ({ row, table }) => {
+            return (
+              <CurrencyCell
+                currency={currency}
+                meta={table.options.meta as DataGridMeta}
+                field={`variants.${row.index}.prices.${currency.code}`}
+              />
+            )
+          },
+        })
+      }),
+    ]
+  }, [t, currencies])
+
+  return colDefs
+}