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

package/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -3,6 +3,7 @@ import {
   Alert,
   Button,
   Checkbox,
+  clx,
   Heading,
   Hint,
   IconButton,
@@ -10,13 +11,12 @@ import {
   Input,
   Label,
   Text,
-  clx,
 } from "@medusajs/ui"
 import {
   Controller,
   FieldArrayWithId,
-  UseFormReturn,
   useFieldArray,
+  UseFormReturn,
   useWatch,
 } from "react-hook-form"
 import { useTranslation } from "react-i18next"
@@ -104,7 +104,9 @@ export const ProductCreateVariantsSection = ({
     const newOptions = [...watchedOptions]
     newOptions[index].values = value
 
-    const permutations = getPermutations(newOptions)
+    const permutations = getPermutations(
+      newOptions.filter(({ values }) => values.length)
+    )
     const oldVariants = [...watchedVariants]
 
     const findMatchingPermutation = (options: Record<string, string>) => {
@@ -157,46 +159,29 @@ export const ProductCreateVariantsSection = ({
 
     const newOptions = [...watchedOptions]
     newOptions.splice(index, 1)
+    const validOptionTitles = new Set(newOptions.map((option) => option.title))
 
     const permutations = getPermutations(newOptions)
     const oldVariants = [...watchedVariants]
 
-    const findMatchingPermutation = (options: Record<string, string>) => {
-      return permutations.find((permutation) =>
-        Object.keys(options).every((key) => options[key] === permutation[key])
+    const newVariants = permutations.reduce((variants, permutation) => {
+      const variant = oldVariants.find(({ options }) =>
+        Object.keys(options)
+          .filter((option) => validOptionTitles.has(option))
+          .every((key) => options[key] === permutation[key])
       )
-    }
-
-    const newVariants = oldVariants.reduce((variants, variant) => {
-      const match = findMatchingPermutation(variant.options)
 
-      if (match) {
+      if (variant) {
         variants.push({
           ...variant,
-          title: getVariantName(match),
-          options: match,
+          title: variant.title,
+          options: permutation,
         })
       }
 
       return variants
     }, [] as typeof oldVariants)
 
-    const usedPermutations = new Set(
-      newVariants.map((variant) => variant.options)
-    )
-    const unusedPermutations = permutations.filter(
-      (permutation) => !usedPermutations.has(permutation)
-    )
-
-    unusedPermutations.forEach((permutation) => {
-      newVariants.push({
-        title: getVariantName(permutation),
-        options: permutation,
-        should_create: false,
-        variant_rank: newVariants.length,
-      })
-    })
-
     form.setValue("variants", newVariants)
   }
 
@@ -347,10 +332,18 @@ export const ProductCreateVariantsSection = ({
                       )}
                       <ul className="flex flex-col gap-y-4">
                         {options.fields.map((option, index) => {
+                          const hasError =
+                            !!form.formState.errors.options?.[index]
                           return (
                             <li
                               key={option.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"
+                              className={clx(
+                                "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5",
+                                {
+                                  "border-ui-border-error shadow-borders-error":
+                                    hasError,
+                                }
+                              )}
                             >
                               <div className="grid grid-cols-[min-content,1fr] items-center gap-1.5">
                                 <div className="flex items-center px-2 py-1.5">

package/src/routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -21,6 +21,7 @@ import { ProductCreateDetailsForm } from "../product-create-details-form"
 import { ProductCreateInventoryKitForm } from "../product-create-inventory-kit-form"
 import { ProductCreateOrganizeForm } from "../product-create-organize-form"
 import { ProductCreateVariantsForm } from "../product-create-variants-form"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -58,7 +59,7 @@ export const ProductCreateForm = ({
   const { handleSuccess } = useRouteModal()
   const { getFormConfigs } = useExtension()
   const configs = getFormConfigs("product", "create")
-
+  const direction = useDocumentDirection()
   const form = useExtendableForm({
     defaultValues: {
       ...PRODUCT_CREATE_FORM_DEFAULTS,
@@ -244,6 +245,7 @@ export const ProductCreateForm = ({
         className="flex h-full flex-col"
       >
         <ProgressTabs
+          dir={direction}
           value={tab}
           onValueChange={async (tab) => {
             const valid = await form.trigger()

package/src/routes/products/product-create/components/product-create-inventory-kit-form/components/product-create-inventory-kit-section/product-create-inventory-kit-section.tsx

@@ -9,6 +9,144 @@ import { Combobox } from "../../../../../../../components/inputs/combobox"
 import { useComboboxData } from "../../../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../../../lib/client"
 
+type InventoryItemRowProps = {
+  form: UseFormReturn<ProductCreateSchemaType>
+  variantIndex: number
+  inventoryIndex: number
+  inventoryItem: any
+  isItemOptionDisabled: (
+    option: { value: string },
+    inventoryIndex: number
+  ) => boolean
+  onRemove: () => void
+}
+
+function InventoryItemRow({
+  form,
+  variantIndex,
+  inventoryIndex,
+  inventoryItem,
+  isItemOptionDisabled,
+  onRemove,
+}: InventoryItemRowProps) {
+  const { t } = useTranslation()
+
+  const selectedInventoryItemId = useWatch({
+    control: form.control,
+    name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
+  })
+
+  const items = useComboboxData({
+    queryKey: ["inventory_items"],
+    defaultValueKey: "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={`variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`}
+          >
+            {t("fields.item")}
+          </Label>
+        </div>
+
+        <Form.Field
+          control={form.control}
+          name={`variants.${variantIndex}.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}
+                    onBlur={() => items.onSearchValueChange("")}
+                    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.Item>
+            )
+          }}
+        />
+
+        <div className="flex items-center px-2 py-1.5">
+          <Label
+            size="xsmall"
+            weight="plus"
+            className="text-ui-fg-subtle"
+            htmlFor={`variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`}
+          >
+            {t("fields.quantity")}
+          </Label>
+        </div>
+        <Form.Field
+          control={form.control}
+          name={`variants.${variantIndex}.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={(e) => {
+                      const value = e.target.value
+
+                      if (value === "") {
+                        onChange(null)
+                      } else {
+                        onChange(Number(value))
+                      }
+                    }}
+                    {...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>
+  )
+}
+
 type VariantSectionProps = {
   form: UseFormReturn<ProductCreateSchemaType>
   variant: ProductCreateSchemaType["variants"][0]
@@ -28,26 +166,14 @@ function VariantSection({ form, variant, index }: VariantSectionProps) {
     name: `variants.${index}.inventory`,
   })
 
-  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,
-      })),
-  })
-
   /**
    * Will mark an option as disabled if another input already selected that option
-   * @param option
-   * @param inventoryIndex
    */
   const isItemOptionDisabled = (
-    option: (typeof items.options)[0],
+    option: { value: string },
     inventoryIndex: number
   ) => {
-    return inventoryFormData?.some(
+    return !!inventoryFormData?.some(
       (i, index) =>
         index != inventoryIndex && i.inventory_item_id === option.value
     )
@@ -75,102 +201,15 @@ function VariantSection({ form, variant, index }: VariantSectionProps) {
         </Button>
       </div>
       {inventory.fields.map((inventoryItem, inventoryIndex) => (
-        <li
+        <InventoryItemRow
           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={`variants.${index}.inventory.${inventoryIndex}.inventory_item_id`}
-              >
-                {t("fields.item")}
-              </Label>
-            </div>
-
-            <Form.Field
-              control={form.control}
-              name={`variants.${index}.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}
-                        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.Item>
-                )
-              }}
-            />
-
-            <div className="flex items-center px-2 py-1.5">
-              <Label
-                size="xsmall"
-                weight="plus"
-                className="text-ui-fg-subtle"
-                htmlFor={`variants.${index}.inventory.${inventoryIndex}.required_quantity`}
-              >
-                {t("fields.quantity")}
-              </Label>
-            </div>
-            <Form.Field
-              control={form.control}
-              name={`variants.${index}.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={(e) => {
-                          const value = e.target.value
-
-                          if (value === "") {
-                            onChange(null)
-                          } else {
-                            onChange(Number(value))
-                          }
-                        }}
-                        {...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}
+          variantIndex={index}
+          inventoryIndex={inventoryIndex}
+          inventoryItem={inventoryItem}
+          isItemOptionDisabled={isItemOptionDisabled}
+          onRemove={() => inventory.remove(inventoryIndex)}
+        />
       ))}
     </div>
   )

package/src/routes/products/product-create/components/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx

@@ -23,7 +23,7 @@ type ProductCreateSalesChannelStackedModalProps = {
   form: UseFormReturn<ProductCreateSchemaType>
 }
 
-const PAGE_SIZE = 50
+const PAGE_SIZE = 20
 
 export const ProductCreateSalesChannelStackedModal = ({
   form,

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

@@ -26,6 +26,7 @@ import {
 import DetailsTab from "./details-tab"
 import InventoryKitTab from "./inventory-kit-tab"
 import PricingTab from "./pricing-tab"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAIL = "detail",
@@ -50,7 +51,7 @@ export const CreateProductVariantForm = ({
 }: CreateProductVariantFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const [tab, setTab] = useState<Tab>(Tab.DETAIL)
   const [tabState, setTabState] = useState<TabState>(initialTabState)
 
@@ -75,10 +76,13 @@ export const CreateProductVariantForm = ({
       return {}
     }
 
-    return regions.reduce((acc, reg) => {
-      acc[reg.id] = reg.currency_code
-      return acc
-    }, {} as Record<string, string>)
+    return regions.reduce(
+      (acc, reg) => {
+        acc[reg.id] = reg.currency_code
+        return acc
+      },
+      {} as Record<string, string>
+    )
   }, [regions])
 
   const isManageInventoryEnabled = useWatch({
@@ -257,6 +261,7 @@ export const CreateProductVariantForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
+        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/products/product-create-variant/components/create-product-variant-form/details-tab.tsx

@@ -99,7 +99,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
-                        className="mt-[2px]"
+                        dir="ltr"
+                        className="mt-[2px] rtl:rotate-180"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}
@@ -130,6 +131,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
+                        dir="ltr"
+                        className="rtl:rotate-180"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}
@@ -159,6 +162,8 @@ function DetailsTab({ form, product }: DetailsTabProps) {
                   <div className="bg-ui-bg-component shadow-elevation-card-rest flex gap-x-3 rounded-lg p-4">
                     <Form.Control>
                       <Switch
+                        dir="ltr"
+                        className="rtl:rotate-180"
                         checked={value}
                         onCheckedChange={(checked) => onChange(!!checked)}
                         {...field}

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

@@ -1,6 +1,6 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Container, Heading, StatusBadge, usePrompt } from "@medusajs/ui"
+import { Container, Heading, StatusBadge, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
@@ -58,6 +58,11 @@ export const ProductGeneralSection = ({
       onSuccess: () => {
         navigate("..")
       },
+      onError: (e) => {
+        toast.error(t("products.toasts.delete.error.header"), {
+          description: e.message,
+        })
+      },
     })
   }
 

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

@@ -12,7 +12,7 @@ import {
 } from "@medusajs/ui"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useUpdateProduct } from "../../../../../hooks/api/products"
 import { HttpTypes } from "@medusajs/types"
@@ -24,6 +24,8 @@ type ProductMedisaSectionProps = {
 export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
+  const navigate = useNavigate()
+
   const [selection, setSelection] = useState<Record<string, boolean>>({})
 
   const media = getMedia(product)
@@ -66,7 +68,7 @@ export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
 
     const mediaToKeep = product.images
       .filter((i) => !ids.includes(i.id))
-      .map((i) => ({ url: i.url}))
+      .map((i) => ({ id: i.id, url: i.url }))
 
     await mutateAsync(
       {
@@ -90,7 +92,7 @@ export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
             {
               actions: [
                 {
-                  label: t("actions.edit"),
+                  label: t("actions.editImages"),
                   to: "media?view=edit",
                   icon: <PencilSquare />,
                 },
@@ -175,6 +177,16 @@ export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
             label={t("actions.delete")}
             shortcut="d"
           />
+          {Object.keys(selection).length === 1 && (
+            <CommandBar.Command
+              action={() => {
+                navigate(`images/${Object.keys(selection)[0]}/variants`)
+                setSelection({})
+              }}
+              label={t("products.media.manageImageVariants")}
+              shortcut="m"
+            />
+          )}
         </CommandBar.Bar>
       </CommandBar>
     </Container>

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

@@ -18,7 +18,6 @@ import { useTranslation } from "react-i18next"
 import { CellContext } from "@tanstack/react-table"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { DataTable } from "../../../../../components/data-table"
-import { useDataTableDateColumns } from "../../../../../components/data-table/helpers/general/use-data-table-date-columns"
 import { useDataTableDateFilters } from "../../../../../components/data-table/helpers/general/use-data-table-date-filters"
 import {
   useDeleteVariantLazy,
@@ -26,6 +25,7 @@ import {
 } from "../../../../../hooks/api/products"
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 import { PRODUCT_VARIANT_IDS_KEY } from "../../../common/constants"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
 
 type ProductVariantSectionProps = {
   product: HttpTypes.AdminProduct
@@ -39,26 +39,11 @@ export const ProductVariantSection = ({
 }: ProductVariantSectionProps) => {
   const { t } = useTranslation()
 
-  const {
-    q,
-    order,
-    offset,
-    allow_backorder,
-    manage_inventory,
-    created_at,
-    updated_at,
-  } = useQueryParams(
-    [
-      "q",
-      "order",
-      "offset",
-      "manage_inventory",
-      "allow_backorder",
-      "created_at",
-      "updated_at",
-    ],
-    PREFIX
-  )
+  const { q, order, offset, allow_backorder, manage_inventory } =
+    useQueryParams(
+      ["q", "order", "offset", "manage_inventory", "allow_backorder"],
+      PREFIX
+    )
 
   const columns = useColumns(product)
   const filters = useFilters()
@@ -77,10 +62,8 @@ export const ProductVariantSection = ({
       manage_inventory: manage_inventory
         ? JSON.parse(manage_inventory)
         : undefined,
-      created_at: created_at ? JSON.parse(created_at) : undefined,
-      updated_at: updated_at ? JSON.parse(updated_at) : undefined,
       fields:
-        "title,sku,*options,created_at,updated_at,*inventory_items.inventory.location_levels,inventory_quantity,manage_inventory",
+        "title,sku,thumbnail,*options,created_at,*inventory_items.inventory.location_levels,inventory_quantity,manage_inventory",
     },
     {
       placeholderData: keepPreviousData,
@@ -103,6 +86,7 @@ export const ProductVariantSection = ({
         pageSize={PAGE_SIZE}
         isLoading={isPending}
         heading={t("products.variants.header")}
+        headingLevel="h2"
         emptyState={{
           empty: {
             heading: t("products.variants.empty.heading"),
@@ -162,8 +146,6 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
     return filtered
   }, [searchParams])
 
-  const dateColumns = useDataTableDateColumns<HttpTypes.AdminProductVariant>()
-
   const handleDelete = useCallback(
     async (id: string, title: string) => {
       const res = await prompt({
@@ -348,6 +330,18 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
 
   return useMemo(() => {
     return [
+      columnHelper.accessor("thumbnail", {
+        header: "",
+        headerAlign: "center",
+        maxSize: 72,
+        cell: ({ row }) => {
+          return (
+            <div className="flex items-center pl-[1px]">
+              <Thumbnail src={row.original.thumbnail} />
+            </div>
+          )
+        },
+      }),
       columnHelper.accessor("title", {
         header: t("fields.title"),
         enableSorting: true,
@@ -386,12 +380,11 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
         },
         maxSize: 250,
       }),
-      ...dateColumns,
       columnHelper.action({
         actions: getActions,
       }),
     ]
-  }, [t, optionColumns, dateColumns, getActions, getInventory])
+  }, [t, optionColumns, getActions, getInventory])
 }
 
 const filterHelper =