@medusajs/dashboard 3.0.0-snapshot-20251208164410 → 3.0.0-snapshot-20251211180009

package/src/routes/products/product-create-option/product-create-option.tsx

@@ -0,0 +1,30 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useProduct } from "../../../hooks/api/products"
+import { CreateProductOptionForm } from "./components/create-product-option-form"
+
+export const ProductCreateOption = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields:
+      "-type,-collection,-options,-tags,-images,-variants,-sales_channels",
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("products.options.create.header")}</Heading>
+      </RouteDrawer.Header>
+      {!isLoading && product && <CreateProductOptionForm product={product} />}
+    </RouteDrawer>
+  )
+}

package/src/routes/products/product-create-variant/product-create-variant.tsx

@@ -6,7 +6,10 @@ import { CreateProductVariantForm } from "./components/create-product-variant-fo
 export const ProductCreateVariant = () => {
   const { id } = useParams()
 
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "-type,-collection,-tags,-images,-variants,-sales_channels",
+  })
 
   if (isError) {
     throw error

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

@@ -1,7 +1,6 @@
 import { HttpTypes } from "@medusajs/types"
 import { UIMatch } from "react-router-dom"
 import { useProduct } from "../../../hooks/api"
-import { PRODUCT_DETAIL_FIELDS } from "./constants"
 
 type ProductDetailBreadcrumbProps = UIMatch<HttpTypes.AdminProductResponse>
 
@@ -13,7 +12,9 @@ export const ProductDetailBreadcrumb = (
   const { product } = useProduct(
     id!,
     {
-      fields: PRODUCT_DETAIL_FIELDS,
+      // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+      fields:
+        "-type,-collection,-options,-tags,-images,-variants,-sales_channels",
     },
     {
       initialData: props.data,

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

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, StatusBadge, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
@@ -8,6 +8,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteProduct } from "../../../../../hooks/api/products"
 import { useExtension } from "../../../../../providers/extension-provider"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const productStatusColor = (status: string) => {
   switch (status) {
@@ -35,6 +36,7 @@ export const ProductGeneralSection = ({
   const prompt = usePrompt()
   const navigate = useNavigate()
   const { getDisplays } = useExtension()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const displays = getDisplays("product", "general")
 
@@ -85,6 +87,19 @@ export const ProductGeneralSection = ({
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

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

@@ -1,16 +1,38 @@
-import { PencilSquare } from "@medusajs/icons"
-import { Badge, Container, Heading } from "@medusajs/ui"
+import { PencilSquare, Plus, Trash } from "@medusajs/icons"
+import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
+import { useDeleteProductOption } from "../../../../../hooks/api/products"
 import { HttpTypes } from "@medusajs/types"
 
 const OptionActions = ({
+  product,
   option,
 }: {
+  product: HttpTypes.AdminProduct
   option: HttpTypes.AdminProductOption
 }) => {
   const { t } = useTranslation()
+  const { mutateAsync } = useDeleteProductOption(product.id, option.id)
+  const prompt = usePrompt()
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.options.deleteWarning", {
+        title: option.title,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
 
   return (
     <ActionMenu
@@ -19,11 +41,20 @@ const OptionActions = ({
           actions: [
             {
               label: t("actions.edit"),
-              to: `/product-options/${option.id}/edit`,
+              to: `options/${option.id}/edit`,
               icon: <PencilSquare />,
             },
           ],
         },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
       ]}
     />
   )
@@ -47,9 +78,9 @@ export const ProductOptionSection = ({
             {
               actions: [
                 {
-                  label: t("actions.manage"),
-                  to: "options/manage",
-                  icon: <PencilSquare />,
+                  label: t("actions.create"),
+                  to: "options/create",
+                  icon: <Plus />,
                 },
               ],
             },
@@ -62,31 +93,18 @@ export const ProductOptionSection = ({
           <SectionRow
             title={option.title}
             key={option.id}
-            value={option.values
-              ?.sort((a, b) => {
-                if (a.rank == null && b.rank == null) {
-                  return 0
-                }
-                if (a.rank == null) {
-                  return 1
-                }
-                if (b.rank == null) {
-                  return -1
-                }
-                return a.rank - b.rank
-              })
-              .map((val) => {
-                return (
-                  <Badge
-                    key={val.value}
-                    size="2xsmall"
-                    className="flex min-w-[20px] items-center justify-center"
-                  >
-                    {val.value}
-                  </Badge>
-                )
-              })}
-            actions={<OptionActions option={option} />}
+            value={option.values?.map((val) => {
+              return (
+                <Badge
+                  key={val.value}
+                  size="2xsmall"
+                  className="flex min-w-[20px] items-center justify-center"
+                >
+                  {val.value}
+                </Badge>
+              )
+            })}
+            actions={<OptionActions product={product} option={option} />}
           />
         )
       })}

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

@@ -1,4 +1,10 @@
-import { Buildings, Component, PencilSquare, Trash } from "@medusajs/icons"
+import {
+  Buildings,
+  Component,
+  GlobeEurope,
+  PencilSquare,
+  Trash,
+} from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
   Badge,
@@ -26,6 +32,7 @@ import {
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 import { PRODUCT_VARIANT_IDS_KEY } from "../../../common/constants"
 import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductVariantSectionProps = {
   product: HttpTypes.AdminProduct
@@ -38,6 +45,7 @@ export const ProductVariantSection = ({
   product,
 }: ProductVariantSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { q, order, offset, allow_backorder, manage_inventory } =
     useQueryParams(
@@ -70,6 +78,11 @@ export const ProductVariantSection = ({
     }
   )
 
+  const translationParams = new URLSearchParams()
+  variants?.forEach((variant) => {
+    translationParams.append("reference_id", variant.id)
+  })
+
   if (isError) {
     throw error
   }
@@ -115,6 +128,15 @@ export const ProductVariantSection = ({
                   to: `stock`,
                   icon: <Buildings />,
                 },
+                ...(isTranslationsEnabled
+                  ? [
+                      {
+                        icon: <GlobeEurope />,
+                        label: t("translations.actions.manage"),
+                        to: `/settings/translations/edit?reference=product_variant&${translationParams.toString()}`,
+                      },
+                    ]
+                  : []),
               ],
             },
           ],
@@ -225,6 +247,15 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
             )
           },
         },
+        {
+          icon: <GlobeEurope />,
+          label: t("translations.actions.manage"),
+          onClick: () => {
+            navigate(
+              `/settings/translations/edit?reference=product_variant&reference_id=${variant.id}`
+            )
+          },
+        },
       ]
 
       const secondaryActions: DataTableAction<HttpTypes.AdminProductVariant>[] =

package/src/routes/products/product-edit/product-edit.tsx

@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
 import { useProduct } from "../../../hooks/api/products"
-import { PRODUCT_DETAIL_FIELDS } from "../product-detail/constants"
 import { EditProductForm } from "./components/edit-product-form"
 
 export const ProductEdit = () => {
@@ -12,7 +11,9 @@ export const ProductEdit = () => {
   const { t } = useTranslation()
 
   const { product, isLoading, isError, error } = useProduct(id!, {
-    fields: PRODUCT_DETAIL_FIELDS,
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields:
+      "-type,-collection,-options,-tags,-images,-variants,-sales_channels",
   })
 
   if (isError) {

package/src/routes/products/product-edit-option/components/edit-product-option-form/edit-product-option-form.tsx

@@ -0,0 +1,123 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Input } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import { HttpTypes } from "@medusajs/types"
+import { Form } from "../../../../../components/common/form"
+import { ChipInput } from "../../../../../components/inputs/chip-input"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useUpdateProductOption } from "../../../../../hooks/api/products"
+
+type EditProductOptionFormProps = {
+  option: HttpTypes.AdminProductOption
+}
+
+const CreateProductOptionSchema = z.object({
+  title: z.string().min(1),
+  values: z.array(z.string()).optional(),
+})
+
+export const CreateProductOptionForm = ({
+  option,
+}: EditProductOptionFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof CreateProductOptionSchema>>({
+    defaultValues: {
+      title: option.title,
+      values: option.values.map((v: any) => v.value),
+    },
+    resolver: zodResolver(CreateProductOptionSchema),
+  })
+
+  const { mutateAsync, isPending } = useUpdateProductOption(
+    option.product_id,
+    option.id
+  )
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(
+      {
+        id: option.id,
+        ...values,
+      },
+      {
+        onSuccess: () => {
+          handleSuccess()
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+          <Form.Field
+            control={form.control}
+            name="title"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("products.fields.options.optionTitle")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.optionTitlePlaceholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="values"
+            render={({ field: { ...field } }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("products.fields.options.variations")}
+                  </Form.Label>
+                  <Form.Control>
+                    <ChipInput
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.variantionsPlaceholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button type="submit" size="small" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/products/product-edit-option/components/edit-product-option-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-product-option-form"

package/src/routes/products/product-edit-option/index.ts

@@ -0,0 +1 @@
+export { ProductEditOption as Component } from "./product-edit-option"

package/src/routes/products/product-edit-option/product-edit-option.tsx

@@ -0,0 +1,35 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { json, useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useProduct } from "../../../hooks/api/products"
+import { CreateProductOptionForm } from "./components/edit-product-option-form"
+
+export const ProductEditOption = () => {
+  const { id, option_id } = useParams()
+  const { t } = useTranslation()
+
+  const { product, isPending, isFetching, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "-type,-collection,-tags,-images,-variants,-sales_channels",
+  })
+
+  const option = product?.options.find((o) => o.id === option_id)
+
+  if (!isPending && !isFetching && !option) {
+    throw json({ message: `An option with ID ${option_id} was not found` }, 404)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("products.options.edit.header")}</Heading>
+      </RouteDrawer.Header>
+      {option && <CreateProductOptionForm option={option} />}
+    </RouteDrawer>
+  )
+}

package/src/routes/products/product-image-variants-edit/product-image-variants-edit.tsx

@@ -21,7 +21,11 @@ export const ProductImageVariantsEdit = () => {
 
   const { product, isPending } = useProduct(
     product_id!,
-    { fields: "images.id,images.url,images.variants.id" },
+    {
+      // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+      fields:
+        "images.id,images.url,images.variants.id,-type,-collection,-options,-tags,-variants,-sales_channels",
+    },
     {
       enabled: !!product_id && !!image_id,
     }

package/src/routes/products/product-list/components/product-list-table/product-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { createColumnHelper } from "@tanstack/react-table"
@@ -110,6 +110,7 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const { mutateAsync } = useDeleteProduct(product.id)
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const handleDelete = async () => {
     const res = await prompt({
@@ -153,6 +154,19 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/products/product-media/product-media.tsx

@@ -8,7 +8,10 @@ export const ProductMedia = () => {
   const { t } = useTranslation()
   const { id } = useParams()
 
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "-type,-collection,-options,-tags,-variants,-sales_channels",
+  })
 
   const ready = !isLoading && product
 

package/src/routes/products/product-metadata/product-metadata.tsx

@@ -5,7 +5,11 @@ import { useProduct, useUpdateProduct } from "../../../hooks/api"
 export const ProductMetadata = () => {
   const { id } = useParams()
 
-  const { product, isPending, isError, error } = useProduct(id!)
+  const { product, isPending, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields:
+      "-type,-collection,-options,-tags,-images,-variants,-sales_channels",
+  })
 
   const { mutateAsync, isPending: isMutating } = useUpdateProduct(product?.id!)
 

package/src/routes/products/product-organization/product-organization.tsx

@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
 import { useProduct } from "../../../hooks/api/products"
-import { PRODUCT_DETAIL_FIELDS } from "../product-detail/constants"
 import { ProductOrganizationForm } from "./components/product-organization-form"
 
 export const ProductOrganization = () => {
@@ -12,7 +11,8 @@ export const ProductOrganization = () => {
   const { t } = useTranslation()
 
   const { product, isLoading, isError, error } = useProduct(id!, {
-    fields: PRODUCT_DETAIL_FIELDS,
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "*categories,-options,-images,-variants,-sales_channels",
   })
 
   if (isError) {

package/src/routes/products/product-prices/product-prices.tsx

@@ -7,7 +7,10 @@ import { PricingEdit } from "./pricing-edit"
 export const ProductPrices = () => {
   const { id, variant_id } = useParams()
 
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "-type,-collection,-options,-tags,-images,-sales_channels",
+  })
 
   if (isError) {
     throw error

package/src/routes/products/product-sales-channels/product-sales-channels.tsx

@@ -6,7 +6,10 @@ import { EditSalesChannelsForm } from "./components/edit-sales-channels-form"
 
 export const ProductSalesChannels = () => {
   const { id } = useParams()
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields: "-type,-collection,-options,-tags,-images,-variants",
+  })
 
   if (isError) {
     throw error

package/src/routes/products/product-shipping-profile/product-shipping-profile.tsx

@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
 import { useProduct } from "../../../hooks/api/products"
-import { PRODUCT_DETAIL_FIELDS } from "../product-detail/constants"
 import { ProductShippingProfileForm } from "./components/product-organization-form"
 
 export const ProductShippingProfile = () => {
@@ -12,7 +11,9 @@ export const ProductShippingProfile = () => {
   const { t } = useTranslation()
 
   const { product, isLoading, isError, error } = useProduct(id!, {
-    fields: PRODUCT_DETAIL_FIELDS,
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields:
+      "*shipping_profile,-type,-collection,-options,-tags,-images,-variants,-sales_channels",
   })
 
   if (isError) {

package/src/routes/store/common/hooks/use-locales-table-columns.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import {
+  TextCell,
+  TextHeader,
+} from "../../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminLocale>()
+
+export const useLocalesTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("code", {
+        header: () => <TextHeader text={t("fields.code")} />,
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("name", {
+        header: () => <TextHeader text={t("fields.name")} />,
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+    ],
+    [t]
+  )
+}

package/src/routes/store/common/hooks/use-locales-table-query.tsx

@@ -0,0 +1,21 @@
+import { useQueryParams } from "../../../../hooks/use-query-params"
+
+export const useLocalesTableQuery = ({
+  pageSize = 10,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const raw = useQueryParams(["order", "q", "offset"], prefix)
+
+  const { offset, ...rest } = raw
+
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : 0,
+    ...rest,
+  }
+
+  return { searchParams, raw }
+}