Merge branch 'develop' into fix/dismissed-quantity-receive

packages/admin-next/dashboard/package.json

@@ -31,13 +31,14 @@
     "@ariakit/react": "^0.4.1",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
     "@medusajs/icons": "1.2.1",
     "@medusajs/js-sdk": "0.0.1",
     "@medusajs/ui": "3.0.0",
     "@radix-ui/react-collapsible": "1.1.0",
     "@tanstack/react-query": "^5.28.14",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "^3.8.3",
     "@uiw/react-json-view": "^2.0.0-alpha.17",
     "cmdk": "^0.2.0",
@@ -55,6 +56,7 @@
     "react-country-flag": "^3.1.0",
     "react-currency-input-field": "^3.6.11",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "7.49.1",
     "react-i18next": "13.5.0",
     "react-jwt": "^1.2.0",

packages/admin-next/dashboard/src/app.tsx

@@ -1,5 +1,6 @@
 import { Toaster, TooltipProvider } from "@medusajs/ui"
 import { QueryClientProvider } from "@tanstack/react-query"
+import { HelmetProvider } from "react-helmet-async"
 
 import { I18n } from "./components/utilities/i18n"
 import { queryClient } from "./lib/query-client"
@@ -11,17 +12,19 @@ import "./index.css"
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <I18n />
-        <TooltipProvider>
-          <I18nProvider>
-            <RouterProvider />
-          </I18nProvider>
-        </TooltipProvider>
-        <Toaster />
-      </ThemeProvider>
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <I18n />
+          <TooltipProvider>
+            <I18nProvider>
+              <RouterProvider />
+            </I18nProvider>
+          </TooltipProvider>
+          <Toaster />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   )
 }
 

packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-boolean-cell.tsx → packages/admin-next/dashboard/src/components/data-grid/components/data-grid-boolean-cell.tsx

@@ -1,20 +1,19 @@
 import { Checkbox } from "@medusajs/ui"
 import { Controller, ControllerRenderProps } from "react-hook-form"
+
 import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { useDataGridCell } from "../hooks"
+import { useDataGridCell, useDataGridCellError } from "../hooks"
 import { DataGridCellProps, InputProps } from "../types"
 import { DataGridCellContainer } from "./data-grid-cell-container"
 
 export const DataGridBooleanCell = <TData, TValue = any>({
-  field,
   context,
   disabled,
 }: DataGridCellProps<TData, TValue> & { disabled?: boolean }) => {
-  const { control, renderProps } = useDataGridCell({
-    field,
+  const { field, control, renderProps } = useDataGridCell({
     context,
-    type: "boolean",
   })
+  const errorProps = useDataGridCellError({ context })
 
   const { container, input } = renderProps
 
@@ -24,7 +23,7 @@ export const DataGridBooleanCell = <TData, TValue = any>({
       name={field}
       render={({ field }) => {
         return (
-          <DataGridCellContainer {...container}>
+          <DataGridCellContainer {...container} {...errorProps}>
             <Inner field={field} inputProps={input} disabled={disabled} />
           </DataGridCellContainer>
         )

packages/admin-next/dashboard/src/components/data-grid/components/data-grid-cell-container.tsx

@@ -0,0 +1,84 @@
+import { ErrorMessage } from "@hookform/error-message"
+import { ExclamationCircle } from "@medusajs/icons"
+import { Tooltip, clx } from "@medusajs/ui"
+import { PropsWithChildren } from "react"
+import { get } from "react-hook-form"
+
+import { DataGridCellContainerProps, DataGridErrorRenderProps } from "../types"
+import { DataGridRowErrorIndicator } from "./data-grid-row-error-indicator"
+
+export const DataGridCellContainer = ({
+  isAnchor,
+  isSelected,
+  isDragSelected,
+  field,
+  showOverlay,
+  placeholder,
+  innerProps,
+  overlayProps,
+  children,
+  errors,
+  rowErrors,
+}: DataGridCellContainerProps & DataGridErrorRenderProps<any>) => {
+  const error = get(errors, field)
+  const hasError = !!error
+
+  return (
+    <div
+      className={clx(
+        "bg-ui-bg-base group/cell relative flex size-full items-center gap-x-2 px-4 py-2.5 outline-none",
+        {
+          "bg-ui-tag-red-bg text-ui-tag-red-text":
+            hasError && !isAnchor && !isSelected && !isDragSelected,
+          "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
+          "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base":
+            isSelected || isAnchor,
+          "bg-ui-bg-subtle": isDragSelected && !isAnchor,
+        }
+      )}
+      tabIndex={-1}
+      {...innerProps}
+    >
+      <ErrorMessage
+        name={field}
+        errors={errors}
+        render={({ message }) => {
+          return (
+            <div className="flex items-center justify-center">
+              <Tooltip content={message} delayDuration={0}>
+                <ExclamationCircle className="text-ui-tag-red-icon z-[3]" />
+              </Tooltip>
+            </div>
+          )
+        }}
+      />
+      <div className="relative z-[1] flex size-full items-center justify-center">
+        <RenderChildren isAnchor={isAnchor} placeholder={placeholder}>
+          {children}
+        </RenderChildren>
+      </div>
+      <DataGridRowErrorIndicator rowErrors={rowErrors} />
+      {showOverlay && (
+        <div
+          {...overlayProps}
+          data-cell-overlay="true"
+          className="absolute inset-0 z-[2] size-full"
+        />
+      )}
+    </div>
+  )
+}
+
+const RenderChildren = ({
+  isAnchor,
+  placeholder,
+  children,
+}: PropsWithChildren<
+  Pick<DataGridCellContainerProps, "isAnchor" | "placeholder">
+>) => {
+  if (!isAnchor && placeholder) {
+    return placeholder
+  }
+
+  return children
+}

packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-currency-cell.tsx → packages/admin-next/dashboard/src/components/data-grid/components/data-grid-currency-cell.tsx

@@ -7,7 +7,7 @@ import { Controller, ControllerRenderProps } from "react-hook-form"
 import { useCallback, useEffect, useState } from "react"
 import { useCombinedRefs } from "../../../hooks/use-combined-refs"
 import { CurrencyInfo, currencies } from "../../../lib/data/currencies"
-import { useDataGridCell } from "../hooks"
+import { useDataGridCell, useDataGridCellError } from "../hooks"
 import { DataGridCellProps, InputProps } from "../types"
 import { DataGridCellContainer } from "./data-grid-cell-container"
 
@@ -17,15 +17,13 @@ interface DataGridCurrencyCellProps<TData, TValue = any>
 }
 
 export const DataGridCurrencyCell = <TData, TValue = any>({
-  field,
   context,
   code,
 }: DataGridCurrencyCellProps<TData, TValue>) => {
-  const { control, renderProps } = useDataGridCell({
-    field,
+  const { field, control, renderProps } = useDataGridCell({
     context,
-    type: "number",
   })
+  const errorProps = useDataGridCellError({ context })
 
   const { container, input } = renderProps
 
@@ -37,7 +35,7 @@ export const DataGridCurrencyCell = <TData, TValue = any>({
       name={field}
       render={({ field }) => {
         return (
-          <DataGridCellContainer {...container}>
+          <DataGridCellContainer {...container} {...errorProps}>
             <Inner field={field} inputProps={input} currencyInfo={currency} />
           </DataGridCellContainer>
         )
@@ -112,7 +110,7 @@ const Inner = ({
   return (
     <div className="relative flex size-full items-center">
       <span
-        className="txt-compact-small text-ui-fg-muted pointer-events-none absolute left-4 w-fit min-w-4"
+        className="txt-compact-small text-ui-fg-muted pointer-events-none absolute left-0 w-fit min-w-4"
         aria-hidden
       >
         {currencyInfo.symbol_native}
@@ -121,7 +119,7 @@ const Inner = ({
         {...rest}
         {...attributes}
         ref={combinedRed}
-        className="txt-compact-small w-full flex-1 cursor-default appearance-none bg-transparent py-2.5 pl-12 pr-4 text-right outline-none"
+        className="txt-compact-small w-full flex-1 cursor-default appearance-none bg-transparent pl-8 text-right outline-none"
         value={localValue || undefined}
         onValueChange={handleValueChange}
         formatValueOnBlur