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

package/src/lib/table/cell-renderers.tsx

@@ -13,7 +13,10 @@ import { DisplayIdCell } from "../../components/table/table-cells/order/display-
 import { TotalCell } from "../../components/table/table-cells/order/total-cell"
 import { MoneyAmountCell } from "../../components/table/table-cells/common/money-amount-cell"
 import { TFunction } from "i18next"
-import { toCamelCase } from "../common"
+import {
+  getOrderPaymentStatus,
+  getOrderFulfillmentStatus,
+} from "../order-helpers"
 
 export type CellRenderer<TData = any> = (
   value: any,
@@ -27,96 +30,104 @@ export type RendererRegistry = Map<string, CellRenderer>
 const cellRenderers: RendererRegistry = new Map()
 
 const getNestedValue = (obj: any, path: string) => {
-  return path.split('.').reduce((current, key) => current?.[key], obj)
+  return path.split(".").reduce((current, key) => current?.[key], obj)
 }
 
 const TextRenderer: CellRenderer = (value, _row, _column, _t) => {
-  if (value === null || value === undefined) return '-'
+  if (value === null || value === undefined) return "-"
   return String(value)
 }
 
 const CountRenderer: CellRenderer = (value, _row, _column, t) => {
   const items = value || []
   const count = Array.isArray(items) ? items.length : 0
-  return t('general.items', { count })
+  return t("general.items", { count })
 }
 
 const StatusRenderer: CellRenderer = (value, row, column, t) => {
-  if (!value) return '-'
+  if (!value) return "-"
 
-  if (column.field === 'status' && row.status && (row.handle || row.is_giftcard !== undefined)) {
+  if (
+    column.field === "status" &&
+    row.status &&
+    (row.handle || row.is_giftcard !== undefined)
+  ) {
     return <ProductStatusCell status={row.status} />
   }
 
-  // Generic status badge
+  if (column.context === "payment" && t) {
+    const { label, color } = getOrderPaymentStatus(t, value)
+    return <StatusBadge color={color}>{label}</StatusBadge>
+  }
+
+  if (column.context === "fulfillment" && t) {
+    const { label, color } = getOrderFulfillmentStatus(t, value)
+    return <StatusBadge color={color}>{label}</StatusBadge>
+  }
+
+  // Generic status badge for other status types
   const getStatusColor = (status: string) => {
     switch (status?.toLowerCase()) {
-      case 'active':
-      case 'published':
-      case 'fulfilled':
-      case 'paid':
-        return 'green'
-      case 'pending':
-      case 'proposed':
-      case 'processing':
-        return 'orange'
-      case 'draft':
-        return 'grey'
-      case 'rejected':
-      case 'failed':
-      case 'canceled':
-        return 'red'
+      case "active":
+      case "published":
+      case "fulfilled":
+      case "paid":
+        return "green"
+      case "pending":
+      case "proposed":
+      case "processing":
+        return "orange"
+      case "draft":
+        return "grey"
+      case "rejected":
+      case "failed":
+      case "canceled":
+        return "red"
       default:
-        return 'grey'
+        return "grey"
     }
   }
 
   // Use existing translation keys where available
-  const getTranslatedStatus = (status: string, column: HttpTypes.AdminColumn): string => {
+  const getTranslatedStatus = (status: string): string => {
     if (!t) return status
 
     const lowerStatus = status.toLowerCase()
-    const camelCaseStatus = toCamelCase(lowerStatus)
     switch (lowerStatus) {
-      case 'active':
-        return t('general.active', 'Active') as string
-      case 'published':
-        return t('products.productStatus.published', 'Published') as string
-      case 'draft':
-        return t('orders.status.draft', 'Draft') as string
-      case 'pending':
-        return t('orders.status.pending', 'Pending') as string
-      case 'canceled':
-        return t('orders.status.canceled', 'Canceled') as string
+      case "active":
+        return t("general.active", "Active") as string
+      case "published":
+        return t("products.productStatus.published", "Published") as string
+      case "draft":
+        return t("orders.status.draft", "Draft") as string
+      case "pending":
+        return t("orders.status.pending", "Pending") as string
+      case "canceled":
+        return t("orders.status.canceled", "Canceled") as string
       default:
-        if (column.context === 'payment') {
-          return t(`orders.payment.status.${camelCaseStatus}`, status) as string
-        }
-        if (column.context === 'fulfillment') {
-          return t(`orders.fulfillment.status.${camelCaseStatus}`, status) as string
-        }
         // Try generic status translation with fallback
         return t(`status.${lowerStatus}`, status) as string
     }
   }
 
-  const translatedValue = getTranslatedStatus(value, column)
+  const translatedValue = getTranslatedStatus(value)
 
   return (
-    <StatusBadge color={getStatusColor(value)}>
-      {translatedValue}
-    </StatusBadge>
+    <StatusBadge color={getStatusColor(value)}>{translatedValue}</StatusBadge>
   )
 }
 
 const BadgeListRenderer: CellRenderer = (value, row, column, t) => {
   // For sales channels
-  if (column.field === 'sales_channels_display' || column.field === 'sales_channels') {
+  if (
+    column.field === "sales_channels_display" ||
+    column.field === "sales_channels"
+  ) {
     return <SalesChannelsCell salesChannels={row.sales_channels} />
   }
 
   // Generic badge list
-  if (!Array.isArray(value)) return '-'
+  if (!Array.isArray(value)) return "-"
 
   const items = value.slice(0, 2)
   const remaining = value.length - 2
@@ -125,12 +136,16 @@ const BadgeListRenderer: CellRenderer = (value, row, column, t) => {
     <div className="flex gap-1">
       {items.map((item, index) => (
         <Badge key={index} size="xsmall">
-          {typeof item === 'string' ? item : item.name || item.title || '-'}
+          {typeof item === "string" ? item : item.name || item.title || "-"}
         </Badge>
       ))}
       {remaining > 0 && (
         <Badge size="xsmall" color="grey">
-          {t ? t('general.plusCountMore', '+ {{count}} more', { count: remaining }) : `+${remaining}`}
+          {t
+            ? t("general.plusCountMore", "+ {{count}} more", {
+                count: remaining,
+              })
+            : `+${remaining}`}
         </Badge>
       )}
     </div>
@@ -152,7 +167,9 @@ const VariantsRenderer: CellRenderer = (_, row, _column, _t) => {
 // Order-specific renderers
 const CustomerNameRenderer: CellRenderer = (_, row, _column, t) => {
   if (row.customer?.first_name || row.customer?.last_name) {
-    const fullName = `${row.customer.first_name || ''} ${row.customer.last_name || ''}`.trim()
+    const fullName = `${row.customer.first_name || ""} ${
+      row.customer.last_name || ""
+    }`.trim()
     if (fullName) return fullName
   }
 
@@ -166,20 +183,20 @@ const CustomerNameRenderer: CellRenderer = (_, row, _column, t) => {
     return row.customer.phone
   }
 
-  return t ? t('customers.guest', 'Guest') : 'Guest'
+  return t ? t("customers.guest", "Guest") : "Guest"
 }
 
 const AddressSummaryRenderer: CellRenderer = (_, row, column, _t) => {
   let address = null
-  if (column.field === 'shipping_address_display') {
+  if (column.field === "shipping_address_display") {
     address = row.shipping_address
-  } else if (column.field === 'billing_address_display') {
+  } else if (column.field === "billing_address_display") {
     address = row.billing_address
   } else {
     address = row.shipping_address || row.billing_address
   }
 
-  if (!address) return '-'
+  if (!address) return "-"
 
   const parts = []
 
@@ -193,14 +210,14 @@ const AddressSummaryRenderer: CellRenderer = (_, row, column, _t) => {
   if (address.postal_code) locationParts.push(address.postal_code)
 
   if (locationParts.length > 0) {
-    parts.push(locationParts.join(', '))
+    parts.push(locationParts.join(", "))
   }
 
   if (address.country_code) {
     parts.push(address.country_code.toUpperCase())
   }
 
-  return parts.join(' • ') || '-'
+  return parts.join(" • ") || "-"
 }
 
 const CountryCodeRenderer: CellRenderer = (_, row, _column, _t) => {
@@ -239,36 +256,38 @@ const DisplayIdRenderer: CellRenderer = (value, _row, _column, _t) => {
 }
 
 const CurrencyRenderer: CellRenderer = (value, row, _column, _t) => {
-  const currencyCode = row.currency_code || 'USD'
-  return <MoneyAmountCell currencyCode={currencyCode} amount={value} align="right" />
+  const currencyCode = row.currency_code || "USD"
+  return (
+    <MoneyAmountCell currencyCode={currencyCode} amount={value} align="right" />
+  )
 }
 
 const TotalRenderer: CellRenderer = (value, row, _column, _t) => {
-  const currencyCode = row.currency_code || 'USD'
+  const currencyCode = row.currency_code || "USD"
   return <TotalCell currencyCode={currencyCode} total={value} />
 }
 
 // Register built-in renderers
-cellRenderers.set('text', TextRenderer)
-cellRenderers.set('count', CountRenderer)
-cellRenderers.set('status', StatusRenderer)
-cellRenderers.set('badge_list', BadgeListRenderer)
-cellRenderers.set('date', DateRenderer)
-cellRenderers.set('timestamp', DateRenderer)
-cellRenderers.set('currency', CurrencyRenderer)
-cellRenderers.set('total', TotalRenderer)
+cellRenderers.set("text", TextRenderer)
+cellRenderers.set("count", CountRenderer)
+cellRenderers.set("status", StatusRenderer)
+cellRenderers.set("badge_list", BadgeListRenderer)
+cellRenderers.set("date", DateRenderer)
+cellRenderers.set("timestamp", DateRenderer)
+cellRenderers.set("currency", CurrencyRenderer)
+cellRenderers.set("total", TotalRenderer)
 
 // Register product-specific renderers
-cellRenderers.set('product_info', ProductInfoRenderer)
-cellRenderers.set('collection', CollectionRenderer)
-cellRenderers.set('variants', VariantsRenderer)
-cellRenderers.set('sales_channels_list', BadgeListRenderer)
+cellRenderers.set("product_info", ProductInfoRenderer)
+cellRenderers.set("collection", CollectionRenderer)
+cellRenderers.set("variants", VariantsRenderer)
+cellRenderers.set("sales_channels_list", BadgeListRenderer)
 
 // Register order-specific renderers
-cellRenderers.set('customer_name', CustomerNameRenderer)
-cellRenderers.set('address_summary', AddressSummaryRenderer)
-cellRenderers.set('country_code', CountryCodeRenderer)
-cellRenderers.set('display_id', DisplayIdRenderer)
+cellRenderers.set("customer_name", CustomerNameRenderer)
+cellRenderers.set("address_summary", AddressSummaryRenderer)
+cellRenderers.set("country_code", CountryCodeRenderer)
+cellRenderers.set("display_id", DisplayIdRenderer)
 
 export function getCellRenderer(
   renderType?: string,
@@ -279,21 +298,21 @@ export function getCellRenderer(
   }
 
   switch (dataType) {
-    case 'number':
-    case 'string':
+    case "number":
+    case "string":
       return TextRenderer
-    case 'date':
+    case "date":
       return DateRenderer
-    case 'boolean':
+    case "boolean":
       return (value, _row, _column, t) => {
         if (t) {
-          return value ? t('fields.yes', 'Yes') : t('fields.no', 'No')
+          return value ? t("fields.yes", "Yes") : t("fields.no", "No")
         }
-        return value ? 'Yes' : 'No'
+        return value ? "Yes" : "No"
       }
-    case 'enum':
+    case "enum":
       return StatusRenderer
-    case 'currency':
+    case "currency":
       return CurrencyRenderer
     default:
       return TextRenderer

package/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, StatusBadge, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { getIsActiveProps, getIsInternalProps } from "../../../common/utils"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type CategoryGeneralSectionProps = {
   category: HttpTypes.AdminProductCategory
@@ -14,6 +15,7 @@ export const CategoryGeneralSection = ({
   category,
 }: CategoryGeneralSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const activeProps = getIsActiveProps(category.is_active, t)
   const internalProps = getIsInternalProps(category.is_internal, t)
@@ -44,6 +46,19 @@ export const CategoryGeneralSection = ({
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product_category&reference_id=${category.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

package/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { AdminProductCategoryResponse } from "@medusajs/types"
 import { Button, Container, Heading, Text } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
@@ -14,6 +14,7 @@ import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { useCategoryTableColumns } from "./use-category-table-columns"
 import { useCategoryTableQuery } from "./use-category-table-query"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const PAGE_SIZE = 20
 
@@ -105,6 +106,7 @@ const CategoryRowActions = ({
   category: AdminProductCategoryResponse["product_category"]
 }) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
   const handleDelete = useDeleteProductCategoryAction(category)
 
   return (
@@ -119,6 +121,19 @@ const CategoryRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_category&reference_id=${category.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/collections/collection-detail/components/collection-general-section/collection-general-section.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, Text, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCollection } from "../../../../../hooks/api/collections"
 import { useNavigate } from "react-router-dom"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type CollectionGeneralSectionProps = {
   collection: HttpTypes.AdminCollection
@@ -16,6 +17,7 @@ export const CollectionGeneralSection = ({
   const { t } = useTranslation()
   const prompt = usePrompt()
   const navigate = useNavigate()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { mutateAsync } = useDeleteCollection(collection.id!)
 
@@ -52,6 +54,19 @@ export const CollectionGeneralSection = ({
                 },
               ],
             },
+            ...(isTranslationsEnabled
+              ? [
+                  {
+                    actions: [
+                      {
+                        label: t("translations.actions.manage"),
+                        to: `/settings/translations/edit?reference=product_collection&reference_id=${collection.id}`,
+                        icon: <GlobeEurope />,
+                      },
+                    ],
+                  },
+                ]
+              : []),
             {
               actions: [
                 {

package/src/routes/collections/collection-list/components/collection-list-table/collection-row-actions.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCollection } from "../../../../../hooks/api/collections"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 export const CollectionRowActions = ({
   collection,
@@ -13,6 +14,7 @@ export const CollectionRowActions = ({
 }) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { mutateAsync } = useDeleteCollection(collection.id!)
 
@@ -47,6 +49,19 @@ export const CollectionRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_collection&reference_id=${collection.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx

@@ -568,6 +568,16 @@ export const ClaimCreateForm = ({
     }
   }, [])
 
+  /**
+   * For estimated difference show pending difference and subtract the total of inbound items (assume all items will be returned correctly)
+   * We don't include inbound total in the pending difference because it will be considered returned when the receive flow is completed
+   */
+  const estimatedDifference =
+    preview.summary.pending_difference -
+    inboundPreviewItems.reduce((acc, item) => {
+      return acc + item.total
+    }, 0)
+
   const inboundShippingTotal = useMemo(() => {
     const method = preview.shipping_methods.find(
       (sm) =>
@@ -1010,10 +1020,7 @@ export const ClaimCreateForm = ({
                   {t("orders.claims.refundAmount")}
                 </span>
                 <span className="txt-small font-medium">
-                  {getStylizedAmount(
-                    preview.summary.pending_difference,
-                    order.currency_code
-                  )}
+                  {getStylizedAmount(estimatedDifference, order.currency_code)}
                 </span>
               </div>
             </div>

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx

@@ -272,6 +272,16 @@ export const ExchangeCreateForm = ({
     }
   }, [])
 
+  /**
+   * For estimated difference show pending difference and subtract the total of inbound items (assume all items will be returned correctly)
+   * We don't include inbound total in the pending difference because it will be considered returned when the receive flow is completed
+   */
+  const estimatedDifference =
+    preview.summary.pending_difference -
+    inboundPreviewItems.reduce((acc, item) => {
+      return acc + item.total
+    }, 0)
+
   const inboundShippingTotal = useMemo(() => {
     const method = preview.shipping_methods.find(
       (sm) =>
@@ -516,10 +526,7 @@ export const ExchangeCreateForm = ({
                   {t("orders.exchanges.refundAmount")}
                 </span>
                 <span className="txt-small font-medium">
-                  {getStylizedAmount(
-                    preview.summary.pending_difference,
-                    order.currency_code
-                  )}
+                  {getStylizedAmount(estimatedDifference, order.currency_code)}
                 </span>
               </div>
             </div>

package/src/routes/orders/order-create-return/components/return-create-form/return-create-form.tsx

@@ -402,6 +402,16 @@ export const ReturnCreateForm = ({
     return method?.total || 0
   }, [preview.shipping_methods])
 
+  /**
+   * For estimated difference show pending difference and subtract the total of inbound items (assume all items will be returned correctly)
+   * We don't include inbound total in the pending difference because it will be considered returned when the receive flow is completed
+   */
+  const estimatedDifference =
+    preview.summary.pending_difference -
+    previewItems.reduce((acc, item) => {
+      return acc + item.total
+    }, 0)
+
   return (
     <RouteFocusModal.Form
       form={form}
@@ -707,10 +717,7 @@ export const ReturnCreateForm = ({
                   {t("orders.returns.estDifference")}
                 </span>
                 <span className="txt-small font-medium">
-                  {getStylizedAmount(
-                    preview.summary.pending_difference,
-                    order.currency_code
-                  )}
+                  {getStylizedAmount(estimatedDifference, order.currency_code)}
                 </span>
               </div>
             </div>

package/src/routes/orders/order-list/const.ts

@@ -11,7 +11,7 @@ export const DEFAULT_PROPERTIES = [
   "currency_code",
 ]
 
-export const DEFAULT_RELATIONS = ["*customer", "*sales_channel"]
+export const DEFAULT_RELATIONS = ["*customer", "*sales_channel", "*payment_collections"]
 
 export const DEFAULT_FIELDS = `${DEFAULT_PROPERTIES.join(
   ","

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx

@@ -35,7 +35,9 @@ export const PriceListPricesForm = ({
   const { products, isLoading, isError, error } = useProducts({
     id: ids.map((id) => id.id),
     limit: ids.length,
-    fields: "title,thumbnail,*variants",
+    // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+    fields:
+      "title,thumbnail,*variants,-type,-collection,-options,-tags,-images,-sales_channels",
   })
 
   const { setCloseOnEscape } = useRouteModal()

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-products-form.tsx

@@ -109,6 +109,7 @@ export const PriceListProductsForm = ({ form }: PriceListProductsFormProps) => {
       updater,
     },
     pageSize: PAGE_SIZE,
+    prefix: PREFIX,
   })
 
   if (isError) {

package/src/routes/price-lists/price-list-detail/components/price-list-general-section/price-list-general-section.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeletePriceListAction } from "../../../common/hooks/use-delete-price-list-action"
 import { getPriceListStatus } from "../../../common/utils"
+import { usePriceListPrices } from "../../../../../hooks/api"
 
 type PriceListGeneralSectionProps = {
   priceList: HttpTypes.AdminPriceList
@@ -15,8 +16,13 @@ export const PriceListGeneralSection = ({
   priceList,
 }: PriceListGeneralSectionProps) => {
   const { t } = useTranslation()
-
-  const overrideCount = priceList.prices?.length || 0
+  const {
+    count: overrideCount,
+    isLoading,
+    error,
+  } = usePriceListPrices(priceList.id, {
+    limit: 1,
+  })
 
   const { color, text } = getPriceListStatus(t, priceList)
 
@@ -77,9 +83,11 @@ export const PriceListGeneralSection = ({
         <Text leading="compact" size="small" weight="plus">
           {t("priceLists.fields.priceOverrides.label")}
         </Text>
-        <Text size="small" className="text-pretty">
-          {overrideCount || "-"}
-        </Text>
+        {!isLoading && !error && (
+          <Text size="small" className="text-pretty">
+            {overrideCount || "-"}
+          </Text>
+        )}
       </div>
     </Container>
   )