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

package/src/components/inputs/combobox/combobox.tsx

@@ -15,7 +15,7 @@ import {
   TrianglesMini,
   XMarkMini,
 } from "@medusajs/icons"
-import { Badge, clx, Text } from "@medusajs/ui"
+import { clx, Text } from "@medusajs/ui"
 import { matchSorter } from "match-sorter"
 import {
   ComponentPropsWithoutRef,
@@ -59,7 +59,6 @@ interface ComboboxProps<T extends Value = Value>
   noResultsPlaceholder?: ReactNode
   allowClear?: boolean
   forceHideInput?: boolean // always hide input -> used for singe value select that don't have query/filter
-  displayMode?: "count" | "chips" // how to display multiple selected values
 }
 
 const ComboboxImpl = <T extends Value = string>(
@@ -77,7 +76,6 @@ const ComboboxImpl = <T extends Value = string>(
     noResultsPlaceholder,
     allowClear,
     forceHideInput,
-    displayMode = "count",
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -145,15 +143,6 @@ const ComboboxImpl = <T extends Value = string>(
     }
   }
 
-  const handleRemoveValue = (valueToRemove: string) => {
-    if (!isArrayValue || !Array.isArray(selectedValues)) {
-      return
-    }
-
-    const newValues = selectedValues.filter((v) => v !== valueToRemove) as T
-    handleValueChange(newValues)
-  }
-
   /**
    * Filter and sort the options based on the search value,
    * and whether the value is already selected.
@@ -246,179 +235,109 @@ const ComboboxImpl = <T extends Value = string>(
         startTransition(() => handleSearchChange(query))
       }}
     >
-      {displayMode === "chips" && isArrayValue ? (
-        <div
-          className={clx(
-            "relative flex cursor-pointer flex-wrap items-center gap-1.5",
-            "min-h-8 w-full rounded-md",
-            "bg-ui-bg-field transition-fg shadow-borders-base",
-            "has-[input:focus]:shadow-borders-interactive-with-active",
-            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-            "p-1",
-            className
-          )}
-        >
-          {Array.isArray(selectedValues) &&
-            selectedValues.map((value) => {
-              const option = options.find((o) => o.value === value)
-              if (!option) return null
-
-              return (
-                <Badge
-                  key={value}
-                  size="2xsmall"
-                  className="gap-x-0.5 pl-1.5 pr-1 transition-fg"
-                >
-                  {option.label}
-                  <button
-                    tabIndex={-1}
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault()
-                      handleRemoveValue(value)
-                    }}
-                    className="text-ui-fg-subtle transition-fg outline-none"
-                  >
-                    <XMarkMini />
-                  </button>
-                </Badge>
-              )
-            })}
-          <div className="relative flex flex-1 items-center min-w-[120px]">
-            <PrimitiveCombobox
-              autoSelect
-              ref={comboboxRef}
-              onFocus={() => setOpen(true)}
+      <div
+        className={clx(
+          "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+          "h-8 w-full rounded-md",
+          "bg-ui-bg-field transition-fg shadow-borders-base",
+          "has-[input:focus]:shadow-borders-interactive-with-active",
+          "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+          "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+          className
+        )}
+        style={
+          {
+            "--tag-width": `${tagWidth}px`,
+          } as CSSProperties
+        }
+      >
+        {showTag && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault()
+              handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
+            }}
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none"
+          >
+            <span className="tabular-nums">{selectedValues.length}</span>
+            <XMarkMini className="text-ui-fg-muted" />
+          </button>
+        )}
+        <div className="relative flex size-full items-center">
+          {showSelected && (
+            <div
               className={clx(
-                "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-1 outline-none focus:cursor-text"
+                "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                {
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
+                }
               )}
-              placeholder={
-                Array.isArray(selectedValues) && selectedValues.length > 0
-                  ? undefined
-                  : placeholder
-              }
-              {...inputProps}
-            />
-          </div>
-          <PrimitiveComboboxDisclosure
-            render={(props) => {
-              return (
-                <button
-                  {...props}
-                  type="button"
-                  className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 top-0 flex h-8 w-8 items-center justify-center rounded-r outline-none"
-                >
-                  <TrianglesMini />
-                </button>
-              )
-            }}
-          />
-        </div>
-      ) : (
-        <div
-          className={clx(
-            "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
-            "h-8 w-full rounded-md",
-            "bg-ui-bg-field transition-fg shadow-borders-base",
-            "has-[input:focus]:shadow-borders-interactive-with-active",
-            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-            className
-          )}
-          style={
-            {
-              "--tag-width": `${tagWidth}px`,
-            } as CSSProperties
-          }
-        >
-          {showTag && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault()
-                handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
-              }}
-              className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none"
             >
-              <span className="tabular-nums">{selectedValues.length}</span>
-              <XMarkMini className="text-ui-fg-muted" />
-            </button>
+              <Text size="small" leading="compact">
+                {t("general.selected")}
+              </Text>
+            </div>
           )}
-          <div className="relative flex size-full items-center">
-            {showSelected && (
-              <div
-                className={clx(
-                  "pointer-events-none absolute inset-y-0 flex size-full items-center",
-                  {
-                    "start-[calc(var(--tag-width)+8px)]": showTag,
-                    "start-2": !showTag,
-                  }
-                )}
-              >
-                <Text size="small" leading="compact">
-                  {t("general.selected")}
-                </Text>
-              </div>
-            )}
-            {hideInput && (
-              <div
-                className={clx(
-                  "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
-                  {
-                    "start-[calc(var(--tag-width)+8px)]": showTag,
-                    "start-2": !showTag,
-                  }
-                )}
-              >
-                <Text size="small" leading="compact" className="truncate">
-                  {selectedLabel}
-                </Text>
-              </div>
-            )}
-            <PrimitiveCombobox
-              autoSelect
-              ref={comboboxRef}
-              onFocus={() => setOpen(true)}
+          {hideInput && (
+            <div
               className={clx(
-                "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text",
+                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
                 {
-                  "opacity-0": hideInput,
-                  "ps-2": !showTag,
-                  "ps-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
-              placeholder={hidePlaceholder ? undefined : placeholder}
-              {...inputProps}
-            />
-          </div>
-          {allowClear && controlledValue && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault()
-                handleValueChange(undefined)
-              }}
-              className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
             >
-              <XMarkMini className="text-ui-fg-muted" />
-            </button>
+              <Text size="small" leading="compact" className="truncate">
+                {selectedLabel}
+              </Text>
+            </div>
           )}
-          <PrimitiveComboboxDisclosure
-            render={(props) => {
-              return (
-                <button
-                  {...props}
-                  type="button"
-                  className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
-                >
-                  <TrianglesMini />
-                </button>
-              )
-            }}
+          <PrimitiveCombobox
+            autoSelect
+            ref={comboboxRef}
+            onFocus={() => setOpen(true)}
+            className={clx(
+              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text",
+              "hover:bg-ui-bg-field-hover",
+              {
+                "opacity-0": hideInput,
+                "ps-2": !showTag,
+                "ps-[calc(var(--tag-width)+8px)]": showTag,
+              }
+            )}
+            placeholder={hidePlaceholder ? undefined : placeholder}
+            {...inputProps}
           />
         </div>
-      )}
+        {allowClear && controlledValue && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault()
+              handleValueChange(undefined)
+            }}
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
+          >
+            <XMarkMini className="text-ui-fg-muted" />
+          </button>
+        )}
+        <PrimitiveComboboxDisclosure
+          render={(props) => {
+            return (
+              <button
+                {...props}
+                type="button"
+                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
+              >
+                <TrianglesMini />
+              </button>
+            )
+          }}
+        />
+      </div>
       <PrimitiveComboboxPopover
         gutter={4}
         sameWidth

package/src/components/layout/main-layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import {
-  Buildings,
   BuildingStorefront,
+  Buildings,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
+import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,7 +107,8 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-      <DropdownMenu dir={direction}>
+    <DropdownMenu
+          dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -205,10 +206,6 @@ const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
           label: t("categories.domain"),
           to: "/categories",
         },
-        {
-          label: t("productOptions.domain"),
-          to: "/product-options",
-        },
         // TODO: Enable when domin is introduced
         // {
         //   label: t("giftCards.domain"),

package/src/components/search/use-search-results.tsx

@@ -117,7 +117,9 @@ const useDynamicSearchResults = (
     {
       q: debouncedSearch,
       limit,
-      fields: "id,title,thumbnail",
+      // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+      fields:
+        "id,title,thumbnail,-type,-collection,-options,-tags,-images,-variants,-sales_channels",
     },
     {
       enabled: isAreaEnabled(currentArea, "product"),

package/src/components/table/table-cells/order/total-cell/total-cell.tsx

@@ -5,15 +5,16 @@ import { PlaceholderCell } from "../../common/placeholder-cell"
 type TotalCellProps = {
   currencyCode: string
   total: number | null
+  className?: string
 }
 
-export const TotalCell = ({ currencyCode, total }: TotalCellProps) => {
+export const TotalCell = ({ currencyCode, total, className }: TotalCellProps) => {
   if (!total) {
     return <PlaceholderCell />
   }
 
   return (
-    <MoneyAmountCell currencyCode={currencyCode} amount={total} align="right" />
+    <MoneyAmountCell currencyCode={currencyCode} amount={total} className={className} align="right" />
   )
 }
 

package/src/dashboard-app/routes/get-route.map.tsx

@@ -136,6 +136,18 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-prices"),
                         },
+                        {
+                          path: "options/create",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-create-option"
+                            ),
+                        },
+                        {
+                          path: "options/:option_id/edit",
+                          lazy: () =>
+                            import("../../routes/products/product-edit-option"),
+                        },
                         {
                           path: "variants/create",
                           lazy: () =>
@@ -153,13 +165,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
-                        {
-                          path: "options/manage",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-options-manage"
-                            ),
-                        },
                       ],
                     },
                     {
@@ -220,63 +225,6 @@ export function getRouteMap({
                 },
               ],
             },
-            {
-              path: "/product-options",
-              errorElement: <ErrorBoundary />,
-              handle: {
-                breadcrumb: () => t("productOptions.domain"),
-              },
-              children: [
-                {
-                  path: "",
-                  lazy: () =>
-                    import("../../routes/product-options/product-option-list"),
-                  children: [
-                    {
-                      path: "create",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-create"
-                        ),
-                    },
-                  ],
-                },
-                {
-                  path: ":id",
-                  lazy: async () => {
-                    const { Component, Breadcrumb, loader } = await import(
-                      "../../routes/product-options/product-option-detail"
-                    )
-
-                    return {
-                      Component,
-                      loader,
-                      handle: {
-                        breadcrumb: (match: UIMatch<any>) => (
-                          <Breadcrumb {...match} />
-                        ),
-                      },
-                    }
-                  },
-                  children: [
-                    {
-                      path: "edit",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-edit"
-                        ),
-                    },
-                    {
-                      path: "metadata/edit",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-metadata"
-                        ),
-                    },
-                  ],
-                },
-              ],
-            },
             {
               path: "/categories",
               errorElement: <ErrorBoundary />,
@@ -352,6 +300,12 @@ export function getRouteMap({
                 {
                   path: "",
                   lazy: () => import("../../routes/orders/order-list"),
+                  children: [
+                    {
+                      path: "export",
+                      lazy: () => import("../../routes/orders/order-export"),
+                    },
+                  ],
                 },
                 {
                   path: ":id",
@@ -1061,6 +1015,10 @@ export function getRouteMap({
                   path: "currencies",
                   lazy: () => import("../../routes/store/store-add-currencies"),
                 },
+                {
+                  path: "locales",
+                  lazy: () => import("../../routes/store/store-add-locales"),
+                },
                 {
                   path: "metadata/edit",
                   lazy: () => import("../../routes/store/store-metadata"),

package/src/hooks/api/feature-flags.tsx

@@ -3,6 +3,7 @@ import { sdk } from "../../lib/client"
 
 export type FeatureFlags = {
   view_configurations?: boolean
+  translation?: boolean
   [key: string]: boolean | undefined
 }
 
@@ -10,13 +11,16 @@ export const useFeatureFlags = () => {
   return useQuery<FeatureFlags>({
     queryKey: ["admin", "feature-flags"],
     queryFn: async () => {
-      const response = await sdk.client.fetch<{ feature_flags: FeatureFlags }>("/admin/feature-flags", {
-        method: "GET",
-      })
-      
+      const response = await sdk.client.fetch<{ feature_flags: FeatureFlags }>(
+        "/admin/feature-flags",
+        {
+          method: "GET",
+        }
+      )
+
       return response.feature_flags
     },
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
     cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
   })
-}
+}

package/src/hooks/api/index.ts

@@ -11,13 +11,13 @@ export * from "./fulfillment-providers"
 export * from "./fulfillment-sets"
 export * from "./inventory"
 export * from "./invites"
+export * from "./locales"
 export * from "./notification"
 export * from "./orders"
 export * from "./payment-collections"
 export * from "./payments"
 export * from "./plugins"
 export * from "./price-lists"
-export * from "./product-options"
 export * from "./product-types"
 export * from "./product-variants"
 export * from "./products"

package/src/hooks/api/locales.tsx

@@ -0,0 +1,52 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
+import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
+
+import { sdk } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+
+const LOCALES_QUERY_KEY = "locales" as const
+const localesQueryKeys = queryKeysFactory(LOCALES_QUERY_KEY)
+
+export const useLocales = (
+  query?: HttpTypes.AdminLocaleListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminLocaleListResponse,
+      FetchError,
+      HttpTypes.AdminLocaleListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.locale.list(query),
+    queryKey: localesQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useLocale = (
+  id: string,
+  query?: HttpTypes.AdminLocaleParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminLocaleResponse,
+      FetchError,
+      HttpTypes.AdminLocaleResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: localesQueryKeys.detail(id),
+    queryFn: async () => sdk.admin.locale.retrieve(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}

package/src/hooks/api/orders.tsx

@@ -10,8 +10,8 @@ import {
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory, TQueryKey } from "../../lib/query-key-factory"
-import { reservationItemsQueryKeys } from "./reservations"
 import { inventoryItemsQueryKeys } from "./inventory"
+import { reservationItemsQueryKeys } from "./reservations"
 
 const ORDERS_QUERY_KEY = "orders" as const
 const _orderKeys = queryKeysFactory(ORDERS_QUERY_KEY) as TQueryKey<"orders"> & {
@@ -438,3 +438,20 @@ export const useUpdateOrderChange = (
     ...options,
   })
 }
+
+export const useExportOrders = (
+  query?: HttpTypes.AdminOrderFilters,
+  options?: UseMutationOptions<
+    { transaction_id: string },
+    FetchError,
+    HttpTypes.AdminOrderFilters
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.order.export(query),
+    onSuccess: (data, variables, context) => {
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}