feat(dashboard): variant images management UI

.changeset/thirty-clocks-refuse.md

@@ -0,0 +1,7 @@
+---
+"@medusajs/js-sdk": patch
+"@medusajs/types": patch
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): variant images management UI

packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx

@@ -124,6 +124,13 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-media"),
                         },
+                        {
+                          path: "images/:image_id/variants",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-image-variants-edit"
+                            ),
+                        },
                         {
                           path: "prices",
                           lazy: () =>
@@ -198,6 +205,13 @@ export function getRouteMap({
                               "../../routes/product-variants/product-variant-manage-inventory-items"
                             ),
                         },
+                        {
+                          path: "media",
+                          lazy: () =>
+                            import(
+                              "../../routes/product-variants/product-variant-media"
+                            ),
+                        },
                         {
                           path: "metadata/edit",
                           lazy: () =>

packages/admin/dashboard/src/hooks/api/products.tsx

@@ -419,3 +419,57 @@ export const useConfirmImportProducts = (
     ...options,
   })
 }
+
+export const useBatchImageVariants = (
+  productId: string,
+  imageId: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminBatchImageVariantResponse,
+    FetchError,
+    HttpTypes.AdminBatchImageVariantRequest
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.admin.product.batchImageVariants(productId, imageId, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId),
+      })
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.details() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useBatchVariantImages = (
+  productId: string,
+  variantId: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminBatchVariantImagesResponse,
+    FetchError,
+    HttpTypes.AdminBatchVariantImagesRequest
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.admin.product.batchVariantImages(productId, variantId, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId),
+      })
+      queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.list({ productId }),
+      })
+      queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.detail(variantId),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin/dashboard/src/hooks/table/query/use-product-variant-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductTagTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductVariantTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductTagTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminProductTagListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/i18n/translations/$schema.json

@@ -450,6 +450,12 @@
         "idCopiedToClipboard": {
           "type": "string"
         },
+        "editVariantImages": {
+          "type": "string"
+        },
+        "editImages": {
+          "type": "string"
+        },
         "addReason": {
           "type": "string"
         },
@@ -530,6 +536,8 @@
         "continue",
         "continueWithEmail",
         "idCopiedToClipboard",
+        "editVariantImages",
+        "editImages",
         "addReason",
         "addNote",
         "reset",
@@ -1912,6 +1920,9 @@
             "editHint": {
               "type": "string"
             },
+            "manageImageVariants": {
+              "type": "string"
+            },
             "makeThumbnail": {
               "type": "string"
             },
@@ -1969,11 +1980,27 @@
             },
             "successToast": {
               "type": "string"
+            },
+            "variantImages": {
+              "type": "string"
+            },
+            "showAvailableImages": {
+              "type": "string"
+            },
+            "availableImages": {
+              "type": "string"
+            },
+            "selectToAdd": {
+              "type": "string"
+            },
+            "removeSelected": {
+              "type": "string"
             }
           },
           "required": [
             "label",
             "editHint",
+            "manageImageVariants",
             "makeThumbnail",
             "uploadImagesLabel",
             "uploadImagesHint",
@@ -1988,7 +2015,57 @@
             "downloadImageLabel",
             "deleteImageLabel",
             "emptyState",
-            "successToast"
+            "successToast",
+            "variantImages",
+            "showAvailableImages",
+            "availableImages",
+            "selectToAdd",
+            "removeSelected"
+          ],
+          "additionalProperties": false
+        },
+        "variantMedia": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string"
+            },
+            "manageVariants": {
+              "type": "string"
+            },
+            "addToMultipleVariants": {
+              "type": "string"
+            },
+            "manageVariantsDescription": {
+              "type": "string"
+            },
+            "successToast": {
+              "type": "string"
+            },
+            "emptyState": {
+              "type": "object",
+              "properties": {
+                "header": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "action": {
+                  "type": "string"
+                }
+              },
+              "required": ["header", "description", "action"],
+              "additionalProperties": false
+            }
+          },
+          "required": [
+            "label",
+            "manageVariants",
+            "addToMultipleVariants",
+            "manageVariantsDescription",
+            "successToast",
+            "emptyState"
           ],
           "additionalProperties": false
         },
@@ -2736,6 +2813,7 @@
         "editOptions",
         "editPrices",
         "media",
+        "variantMedia",
         "discountableHint",
         "noSalesChannels",
         "variantCount_one",
@@ -7678,6 +7756,7 @@
             "campaign",
             "method",
             "allocation",
+            "allocationTooltip",
             "addCondition",
             "clearAll",
             "taxInclusive",

packages/admin/dashboard/src/i18n/translations/en.json

@@ -122,6 +122,8 @@
     "continue": "Continue",
     "continueWithEmail": "Continue with Email",
     "idCopiedToClipboard": "ID copied to clipboard",
+    "editVariantImages": "Edit variant images",
+    "editImages": "Edit images",
     "addReason": "Add Reason",
     "addNote": "Add Note",
     "reset": "Reset",
@@ -506,6 +508,7 @@
     "media": {
       "label": "Media",
       "editHint": "Add media to the product to showcase it in your storefront.",
+      "manageImageVariants": "Manage associated variants",
       "makeThumbnail": "Make thumbnail",
       "uploadImagesLabel": "Upload images",
       "uploadImagesHint": "Drag and drop images here or click to upload.",
@@ -521,10 +524,27 @@
       "deleteImageLabel": "Delete current image",
       "emptyState": {
         "header": "No media yet",
-        "description": "Add media to the product to showcase it in your storefront.",
+        "description": "Add media to showcase it in your storefront.",
         "action": "Add media"
       },
-      "successToast": "Media was successfully updated."
+      "successToast": "Media was successfully updated.",
+      "variantImages": "Variant images",
+      "showAvailableImages": "Show available images",
+      "availableImages": "Available images",
+      "selectToAdd": "Select to add to variant",
+      "removeSelected": "Remove Selected"
+    },
+    "variantMedia": {
+      "label": "Variant Media",
+      "manageVariants": "Manage variants",
+      "addToMultipleVariants": "Add to multiple variants",
+      "manageVariantsDescription": "Manage associated variants for the image",
+      "successToast": "Image variants successfully updated.",
+      "emptyState": {
+        "header": "No media yet",
+        "description": "Add media to the variant to showcase it in your storefront.",
+        "action": "Add media"
+      }
     },
     "discountableHint": "When unchecked, discounts will not be applied to this product.",
     "noSalesChannels": "Not available in any sales channels",

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-media-section/index.ts

@@ -0,0 +1 @@
+export { VariantMediaSection } from "./variant-media-section"

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-media-section/variant-media-section.tsx

@@ -0,0 +1,77 @@
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { HttpTypes } from "@medusajs/types"
+import { PencilSquare, ThumbnailBadge } from "@medusajs/icons"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+
+type VariantMediaSectionProps = {
+  variant: HttpTypes.AdminProductVariant
+}
+
+export const VariantMediaSection = ({ variant }: VariantMediaSectionProps) => {
+  const { t } = useTranslation()
+
+  // show only variant scoped images
+  const media = (variant.images || []).filter((image) =>
+    image.variants?.some((variant) => variant.id === variant.id)
+  )
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.media.label")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.editImages"),
+                  to: "media",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      {media.length > 0 ? (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4">
+          {media.map((i) => {
+            return (
+              <div
+                className="shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg group relative aspect-square size-full overflow-hidden rounded-[8px]"
+                key={i.id}
+              >
+                {i.url === variant.thumbnail && (
+                  <div className="absolute left-2 top-2">
+                    <Tooltip content={t("products.media.thumbnailTooltip")}>
+                      <ThumbnailBadge />
+                    </Tooltip>
+                  </div>
+                )}
+                <img src={i.url} className="size-full object-cover" />
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        <div className="flex flex-col items-center gap-y-4 pb-8 pt-6">
+          <div className="flex flex-col items-center">
+            <Text
+              size="small"
+              leading="compact"
+              weight="plus"
+              className="text-ui-fg-subtle"
+            >
+              {t("products.media.emptyState.header")}
+            </Text>
+            <Text size="small" className="text-ui-fg-muted">
+              {t("products.media.emptyState.description")}
+            </Text>
+          </div>
+        </div>
+      )}
+    </Container>
+  )
+}

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/constants.ts

@@ -1,2 +1,2 @@
 export const VARIANT_DETAIL_FIELDS =
-  "*inventory_items,*inventory_items.inventory,*inventory_items.inventory.location_levels,*options,*options.option,*prices,*prices.price_rules"
+  "*inventory_items,*inventory_items.inventory,*inventory_items.inventory.location_levels,*options,*options.option,*prices,*prices.price_rules,+images.id,+images.url,+images.variants.id"