@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/routes/product-types/product-type-metadata/product-type-metadata.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router-dom"
+import { MetadataForm } from "../../../components/forms/metadata-form/metadata-form"
+import { useProductType, useUpdateProductType } from "../../../hooks/api"
+
+export const ProductTypeMetadata = () => {
+  const { id } = useParams()
+
+  const { product_type, isPending, isError, error } = useProductType(id!)
+
+  const { mutateAsync, isPending: isMutating } = useUpdateProductType(
+    product_type?.id!
+  )
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <MetadataForm
+      metadata={product_type?.metadata}
+      hook={mutateAsync}
+      isPending={isPending}
+      isMutating={isMutating}
+    />
+  )
+}

package/src/routes/product-variants/product-variant-detail/components/variant-media-section/index.ts

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

package/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>
+  )
+}

package/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"

package/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx

@@ -10,6 +10,7 @@ import {
   InventorySectionPlaceholder,
   VariantInventorySection,
 } from "./components/variant-inventory-section"
+import { VariantMediaSection } from "./components/variant-media-section"
 import { VariantPricesSection } from "./components/variant-prices-section"
 import { VARIANT_DETAIL_FIELDS } from "./constants"
 import { variantLoader } from "./loader"
@@ -61,6 +62,7 @@ export const ProductVariantDetail = () => {
     >
       <TwoColumnPage.Main>
         <VariantGeneralSection variant={variant} />
+        <VariantMediaSection variant={variant} />
         {!variant.manage_inventory ? (
           <InventorySectionPlaceholder />
         ) : (

package/src/routes/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx

@@ -269,7 +269,9 @@ export const ProductEditVariantForm = ({
                         </Form.Label>
                         <Form.Control>
                           <Switch
+                            dir="ltr"
                             checked={value}
+                            className="rtl:rotate-180"
                             onCheckedChange={(checked) => onChange(!!checked)}
                             {...field}
                           />
@@ -297,6 +299,8 @@ export const ProductEditVariantForm = ({
                         </Form.Label>
                         <Form.Control>
                           <Switch
+                            dir="ltr"
+                            className="rtl:rotate-180"
                             checked={value}
                             onCheckedChange={(checked) => onChange(!!checked)}
                             {...field}

package/src/routes/product-variants/product-variant-manage-inventory-items/components/manage-variant-inventory-items-form/manage-variant-inventory-items-form.tsx

@@ -3,7 +3,12 @@ import { XMarkMini } from "@medusajs/icons"
 import { AdminProductVariant, HttpTypes } from "@medusajs/types"
 import { Button, Heading, IconButton, Input, Label, toast } from "@medusajs/ui"
 import i18next from "i18next"
-import { useFieldArray, useForm } from "react-hook-form"
+import {
+  useFieldArray,
+  useForm,
+  UseFormReturn,
+  useWatch,
+} from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
@@ -56,6 +61,144 @@ const ManageVariantInventoryItemsSchema = zod.object({
   ),
 })
 
+type InventoryItemFormData = zod.infer<
+  typeof ManageVariantInventoryItemsSchema
+>["inventory"]
+
+type VariantInventoryItemRowProps = {
+  form: UseFormReturn<InventoryItemFormData>
+  inventoryIndex: number
+  inventoryItem: {
+    id: string
+    inventory_item_id: string
+    required_quantity: number
+  }
+  isItemOptionDisabled: (
+    option: { value: string },
+    inventoryIndex: number
+  ) => boolean
+  onRemove: () => void
+}
+
+function VariantInventoryItemRow({
+  form,
+  inventoryIndex,
+  inventoryItem,
+  isItemOptionDisabled,
+  onRemove,
+}: VariantInventoryItemRowProps) {
+  const { t } = useTranslation()
+
+  const selectedInventoryItemId = useWatch({
+    control: form.control,
+    name: `inventory.${inventoryIndex}.inventory_item_id`,
+  })
+
+  const items = useComboboxData({
+    queryKey: ["inventory_items"],
+    defaultValueKey: "id",
+    defaultValue: inventoryItem.inventory_item_id,
+    selectedValue: selectedInventoryItemId,
+    queryFn: (params) => sdk.admin.inventoryItem.list(params),
+    getOptions: (data) =>
+      data.inventory_items.map((item) => ({
+        label: `${item.title} ${item.sku ? `(${item.sku})` : ""}`,
+        value: item.id!,
+      })),
+  })
+
+  return (
+    <li
+      key={inventoryItem.id}
+      className="bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5"
+    >
+      <div className="grid grid-cols-[min-content,1fr] items-center gap-1.5">
+        <div className="flex items-center px-2 py-1.5">
+          <Label
+            size="xsmall"
+            weight="plus"
+            className="text-ui-fg-subtle"
+            htmlFor={`inventory.${inventoryIndex}.inventory_item_id`}
+          >
+            {t("fields.item")}
+          </Label>
+        </div>
+
+        <Form.Field
+          control={form.control}
+          name={`inventory.${inventoryIndex}.inventory_item_id`}
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Control>
+                  <Combobox
+                    {...field}
+                    options={items.options.map((o) => ({
+                      ...o,
+                      disabled: isItemOptionDisabled(o, inventoryIndex),
+                    }))}
+                    searchValue={items.searchValue}
+                    onSearchValueChange={items.onSearchValueChange}
+                    onBlur={() => items.onSearchValueChange("")}
+                    fetchNextPage={items.fetchNextPage}
+                    className="bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover"
+                    placeholder={t("products.create.inventory.itemPlaceholder")}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+
+        <div className="flex items-center px-2 py-1.5">
+          <Label
+            size="xsmall"
+            weight="plus"
+            className="text-ui-fg-subtle"
+            htmlFor={`inventory.${inventoryIndex}.required_quantity`}
+          >
+            {t("fields.quantity")}
+          </Label>
+        </div>
+        <Form.Field
+          control={form.control}
+          name={`inventory.${inventoryIndex}.required_quantity`}
+          render={({ field: { onChange, value, ...field } }) => {
+            return (
+              <Form.Item>
+                <Form.Control>
+                  <Input
+                    type="number"
+                    className="bg-ui-bg-field-component"
+                    min={0}
+                    value={value}
+                    onChange={onChange}
+                    {...field}
+                    placeholder={t(
+                      "products.create.inventory.quantityPlaceholder"
+                    )}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </div>
+      <IconButton
+        type="button"
+        size="small"
+        variant="transparent"
+        className="text-ui-fg-muted"
+        onClick={onRemove}
+      >
+        <XMarkMini />
+      </IconButton>
+    </li>
+  )
+}
+
 export function ManageVariantInventoryItemsForm({
   variant,
 }: ManageVariantInventoryItemsFormProps) {
@@ -84,19 +227,26 @@ export function ManageVariantInventoryItemsForm({
     name: `inventory`,
   })
 
-  const hasKit = inventory.fields.length > 1
-
-  const items = useComboboxData({
-    queryKey: ["inventory_items"],
-    queryFn: (params) => sdk.admin.inventoryItem.list(params),
-    getOptions: (data) =>
-      data.inventory_items.map((item) => ({
-        label: `${item.title} (${item.sku})`,
-        value: item.id!,
-      })),
-    defaultValue: variant.inventory_items?.[0]?.inventory_item_id,
+  const inventoryFormData = useWatch({
+    control: form.control,
+    name: `inventory`,
   })
 
+  /**
+   * Will mark an option as disabled if another input already selected that option
+   */
+  const isItemOptionDisabled = (
+    option: { value: string },
+    inventoryIndex: number
+  ) => {
+    return !!inventoryFormData?.some(
+      (i, index) =>
+        index != inventoryIndex && i.inventory_item_id === option.value
+    )
+  }
+
+  const hasKit = inventory.fields.length > 1
+
   const { mutateAsync, isPending } = useProductVariantsInventoryItemsBatch(
     variant?.product_id!
   )
@@ -159,23 +309,9 @@ export function ManageVariantInventoryItemsForm({
 
   return (
     <RouteFocusModal.Form form={form}>
-      <KeyboundForm
-        className="flex h-full flex-col overflow-hidden"
-        onSubmit={handleSubmit}
-      >
-        <RouteFocusModal.Header>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteFocusModal.Close asChild>
-              <Button size="small" variant="secondary">
-                {t("actions.cancel")}
-              </Button>
-            </RouteFocusModal.Close>
-            <Button size="small" type="submit" isLoading={isPending}>
-              {t("actions.save")}
-            </Button>
-          </div>
-        </RouteFocusModal.Header>
-        <RouteFocusModal.Body className="flex justify-center">
+      <KeyboundForm className="flex h-full flex-col" onSubmit={handleSubmit}>
+        <RouteFocusModal.Header />
+        <RouteFocusModal.Body className="flex justify-center overflow-auto">
           <div className="flex w-full flex-col gap-y-8 px-6 pt-12 md:w-[720px] md:pt-24">
             <Heading>
               {t(
@@ -185,7 +321,7 @@ export function ManageVariantInventoryItemsForm({
               )}
             </Heading>
 
-            <div className="grid gap-y-4">
+            <div className="grid gap-y-4 pb-8">
               <div className="flex items-start justify-between gap-x-4">
                 <div className="flex flex-col">
                   <Form.Label>{variant.title}</Form.Label>
@@ -212,96 +348,28 @@ export function ManageVariantInventoryItemsForm({
                 </Button>
               </div>
               {inventory.fields.map((inventoryItem, inventoryIndex) => (
-                <li
+                <VariantInventoryItemRow
                   key={inventoryItem.id}
-                  className="bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5"
-                >
-                  <div className="grid grid-cols-[min-content,1fr] items-center gap-1.5">
-                    <div className="flex items-center px-2 py-1.5">
-                      <Label
-                        size="xsmall"
-                        weight="plus"
-                        className="text-ui-fg-subtle"
-                        htmlFor={`inventory.${inventoryIndex}.inventory_item_id`}
-                      >
-                        {t("fields.item")}
-                      </Label>
-                    </div>
-
-                    <Form.Field
-                      control={form.control}
-                      name={`inventory.${inventoryIndex}.inventory_item_id`}
-                      render={({ field }) => {
-                        return (
-                          <Form.Item>
-                            <Form.Control>
-                              <Combobox
-                                {...field}
-                                options={items.options}
-                                searchValue={items.searchValue}
-                                onSearchValueChange={items.onSearchValueChange}
-                                fetchNextPage={items.fetchNextPage}
-                                className="bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover"
-                                placeholder={t(
-                                  "products.create.inventory.itemPlaceholder"
-                                )}
-                              />
-                            </Form.Control>
-                            <Form.ErrorMessage />
-                          </Form.Item>
-                        )
-                      }}
-                    />
-
-                    <div className="flex items-center px-2 py-1.5">
-                      <Label
-                        size="xsmall"
-                        weight="plus"
-                        className="text-ui-fg-subtle"
-                        htmlFor={`inventory.${inventoryIndex}.required_quantity`}
-                      >
-                        {t("fields.quantity")}
-                      </Label>
-                    </div>
-                    <Form.Field
-                      control={form.control}
-                      name={`inventory.${inventoryIndex}.required_quantity`}
-                      render={({ field: { onChange, value, ...field } }) => {
-                        return (
-                          <Form.Item>
-                            <Form.Control>
-                              <Input
-                                type="number"
-                                className="bg-ui-bg-field-component"
-                                min={0}
-                                value={value}
-                                onChange={onChange}
-                                {...field}
-                                placeholder={t(
-                                  "products.create.inventory.quantityPlaceholder"
-                                )}
-                              />
-                            </Form.Control>
-                            <Form.ErrorMessage />
-                          </Form.Item>
-                        )
-                      }}
-                    />
-                  </div>
-                  <IconButton
-                    type="button"
-                    size="small"
-                    variant="transparent"
-                    className="text-ui-fg-muted"
-                    onClick={() => inventory.remove(inventoryIndex)}
-                  >
-                    <XMarkMini />
-                  </IconButton>
-                </li>
+                  form={form}
+                  inventoryIndex={inventoryIndex}
+                  inventoryItem={inventoryItem}
+                  isItemOptionDisabled={isItemOptionDisabled}
+                  onRemove={() => inventory.remove(inventoryIndex)}
+                />
               ))}
             </div>
           </div>
         </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <RouteFocusModal.Close asChild>
+            <Button size="small" variant="secondary">
+              {t("actions.cancel")}
+            </Button>
+          </RouteFocusModal.Close>
+          <Button size="small" type="submit" isLoading={isPending}>
+            {t("actions.save")}
+          </Button>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
     </RouteFocusModal.Form>
   )