@vendure/dashboard 3.5.3-master-202601290259 → 3.5.3

package/dist/vite/utils/plugin-discovery.js

@@ -323,9 +323,9 @@ export async function findVendurePluginFiles({ outputPath, vendureConfigPath, lo
     const globStart = Date.now();
     const files = await glob(patterns, {
         ignore: [
-            // Skip nested node_modules (transitive deps) but not .pnpm directory.
-            // [!.] ensures .pnpm paths are kept since pnpm stores all packages there.
-            '**/node_modules/[!.pnpm]*/**/node_modules/**',
+            // Skip nested node_modules (transitive deps) but not .pnpm or .bun directories.
+            // [!.] excludes paths starting with . since pnpm and bun store packages there.
+            '**/node_modules/[!.]*/**/node_modules/**',
             '**/*.spec.js',
             '**/*.test.js',
         ],

package/dist/vite/utils/ui-config.js

@@ -1,7 +1,7 @@
 import { ADMIN_API_PATH, DEFAULT_AUTH_TOKEN_HEADER_KEY, DEFAULT_CHANNEL_TOKEN_KEY, } from '@vendure/common/lib/shared-constants';
 import { defaultAvailableLanguages, defaultAvailableLocales, defaultLanguage, defaultLocale, } from '../constants.js';
 export function getUiConfig(config, pluginOptions) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const { authOptions, apiOptions } = config;
     // Merge API configuration with defaults
     const api = {
@@ -23,8 +23,22 @@ export function getUiConfig(config, pluginOptions) {
             ? pluginOptions.i18n.availableLocales
             : defaultAvailableLocales,
     };
+    // Merge orders configuration with defaults
+    // Default labels are identifiers that get translated via getTranslatedRefundReason()
+    const orders = {
+        refundReasons: ((_x = pluginOptions.orders) === null || _x === void 0 ? void 0 : _x.refundReasons) && pluginOptions.orders.refundReasons.length > 0
+            ? pluginOptions.orders.refundReasons
+            : [
+                { value: 'customer-request', label: 'CustomerRequest' },
+                { value: 'not-available', label: 'NotAvailable' },
+                { value: 'damaged-shipping', label: 'DamagedInShipping' },
+                { value: 'wrong-item', label: 'WrongItem' },
+                { value: 'other', label: 'Other' },
+            ],
+    };
     return {
         api,
         i18n,
+        orders,
     };
 }

package/dist/vite/vite-plugin-lingui-babel.d.ts

@@ -1,4 +1,14 @@
 import type { Plugin } from 'vite';
+/**
+ * Options for the linguiBabelPlugin.
+ */
+export interface LinguiBabelPluginOptions {
+    /**
+     * For testing: manually specify package paths that should have Lingui macros transformed.
+     * In production, these are automatically discovered from the VendureConfig plugins.
+     */
+    additionalPackagePaths?: string[];
+}
 /**
  * @description
  * A custom Vite plugin that transforms Lingui macros in files using Babel instead of SWC.
@@ -17,11 +27,14 @@ import type { Plugin } from 'vite';
  * - `@vendure/dashboard/src` files (in node_modules for external projects)
  * - `packages/dashboard/src` files (in monorepo development)
  * - User's dashboard extension files (e.g., custom plugins using Lingui)
+ * - Third-party npm packages that provide dashboard extensions (discovered automatically)
  *
  * Files NOT processed:
- * - Other node_modules packages (they shouldn't contain Lingui macros)
+ * - Files that don't contain Lingui macro imports (fast check via string matching)
+ * - Non-JS/TS files
+ * - node_modules packages that are not discovered as Vendure plugins
  *
  * @see https://github.com/vendurehq/vendure/issues/3929
  * @see https://github.com/lingui/swc-plugin/issues/179
  */
-export declare function linguiBabelPlugin(): Plugin;
+export declare function linguiBabelPlugin(options?: LinguiBabelPluginOptions): Plugin;

package/dist/vite/vite-plugin-lingui-babel.js

@@ -1,4 +1,5 @@
 import * as babel from '@babel/core';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
 /**
  * @description
  * A custom Vite plugin that transforms Lingui macros in files using Babel instead of SWC.
@@ -17,19 +18,40 @@ import * as babel from '@babel/core';
  * - `@vendure/dashboard/src` files (in node_modules for external projects)
  * - `packages/dashboard/src` files (in monorepo development)
  * - User's dashboard extension files (e.g., custom plugins using Lingui)
+ * - Third-party npm packages that provide dashboard extensions (discovered automatically)
  *
  * Files NOT processed:
- * - Other node_modules packages (they shouldn't contain Lingui macros)
+ * - Files that don't contain Lingui macro imports (fast check via string matching)
+ * - Non-JS/TS files
+ * - node_modules packages that are not discovered as Vendure plugins
  *
  * @see https://github.com/vendurehq/vendure/issues/3929
  * @see https://github.com/lingui/swc-plugin/issues/179
  */
-export function linguiBabelPlugin() {
+export function linguiBabelPlugin(options) {
+    var _a;
+    // Paths of npm packages that should have Lingui macros transformed.
+    // This is populated from plugin discovery when transform is first called.
+    const allowedNodeModulesPackages = new Set((_a = options === null || options === void 0 ? void 0 : options.additionalPackagePaths) !== null && _a !== void 0 ? _a : []);
+    // API reference to the config loader plugin (set in configResolved)
+    let configLoaderApi;
+    // Cached result from config loader (set on first transform that needs it)
+    let configResult;
     return {
         name: 'vendure:lingui-babel',
         // Run BEFORE @vitejs/plugin-react so the macros are already transformed
         // when the react plugin processes the file
         enforce: 'pre',
+        configResolved({ plugins }) {
+            // Get reference to the config loader API.
+            // This doesn't load the config yet - that happens lazily in transform.
+            try {
+                configLoaderApi = getConfigLoaderApi(plugins);
+            }
+            catch (_a) {
+                // configLoaderPlugin not available (e.g., plugin used standalone for testing)
+            }
+        },
         async transform(code, id) {
             // Strip query params for path matching (Vite adds ?v=xxx for cache busting)
             const cleanId = id.split('?')[0];
@@ -42,15 +64,42 @@ export function linguiBabelPlugin() {
             if (!code.includes('@lingui/') || !code.includes('/macro')) {
                 return null;
             }
-            // Skip node_modules files EXCEPT for @vendure/dashboard source
-            // This ensures:
-            // 1. Dashboard source files get transformed (both in monorepo and external projects)
-            // 2. User's extension files get transformed (not in node_modules)
-            // 3. Other node_modules packages are left alone
+            // Check if this file should be transformed
             if (cleanId.includes('node_modules')) {
+                // Always allow @vendure/dashboard source files
                 const isVendureDashboard = cleanId.includes('@vendure/dashboard/src') || cleanId.includes('packages/dashboard/src');
                 if (!isVendureDashboard) {
-                    return null;
+                    // Load discovered plugins on first need (lazy loading with caching)
+                    if (configLoaderApi && !configResult) {
+                        try {
+                            configResult = await configLoaderApi.getVendureConfig();
+                            // Extract package paths from discovered npm plugins
+                            for (const plugin of configResult.pluginInfo) {
+                                if (!plugin.sourcePluginPath && plugin.pluginPath.includes('node_modules')) {
+                                    const packagePath = extractPackagePath(plugin.pluginPath);
+                                    if (packagePath) {
+                                        allowedNodeModulesPackages.add(packagePath);
+                                    }
+                                }
+                            }
+                        }
+                        catch (error) {
+                            // Log but continue - will use only manually specified paths
+                            // eslint-disable-next-line no-console
+                            console.warn('[vendure:lingui-babel] Failed to load plugin config:', error);
+                        }
+                    }
+                    // Check if this is from a discovered Vendure plugin package
+                    let isDiscoveredPlugin = false;
+                    for (const pkgPath of allowedNodeModulesPackages) {
+                        if (cleanId.includes(pkgPath)) {
+                            isDiscoveredPlugin = true;
+                            break;
+                        }
+                    }
+                    if (!isDiscoveredPlugin) {
+                        return null;
+                    }
                 }
             }
             try {
@@ -84,3 +133,36 @@ export function linguiBabelPlugin() {
         },
     };
 }
+/**
+ * Extracts the npm package name from a full file path.
+ *
+ * Examples:
+ * - /path/to/node_modules/@vendure-ee/plugin/dist/index.js -> @vendure-ee/plugin
+ * - /path/to/node_modules/some-plugin/lib/index.js -> some-plugin
+ * - /path/to/node_modules/.pnpm/@vendure-ee+plugin@1.0.0/node_modules/@vendure-ee/plugin/dist/index.js -> @vendure-ee/plugin
+ */
+function extractPackagePath(filePath) {
+    // Normalize path separators
+    const normalizedPath = filePath.replace(/\\/g, '/');
+    // Find the last occurrence of node_modules (handles pnpm structure)
+    const lastNodeModulesIndex = normalizedPath.lastIndexOf('node_modules/');
+    if (lastNodeModulesIndex === -1) {
+        return undefined;
+    }
+    const afterNodeModules = normalizedPath.slice(lastNodeModulesIndex + 'node_modules/'.length);
+    // Handle scoped packages (@scope/package)
+    if (afterNodeModules.startsWith('@')) {
+        const parts = afterNodeModules.split('/');
+        if (parts.length >= 2) {
+            return `${parts[0]}/${parts[1]}`;
+        }
+    }
+    else {
+        // Unscoped package
+        const parts = afterNodeModules.split('/');
+        if (parts.length >= 1) {
+            return parts[0];
+        }
+    }
+    return undefined;
+}

package/dist/vite/vite-plugin-translations.js

@@ -91,8 +91,8 @@ async function getPluginTranslations(pluginInfo) {
         const poPatterns = path.join(dashboardPath, '**/*.po');
         const translations = await glob(poPatterns, {
             ignore: [
-                // Standard test & doc files
-                '**/node_modules/**/node_modules/**',
+                // Skip nested node_modules (transitive deps) but not .pnpm or .bun directories.
+                '**/node_modules/[!.]*/**/node_modules/**',
                 '**/*.spec.js',
                 '**/*.test.js',
             ],

package/dist/vite/vite-plugin-ui-config.d.ts

@@ -103,6 +103,27 @@ export interface I18nConfig {
      */
     availableLocales?: string[];
 }
+/**
+ * @description
+ * Options used by the {@link vendureDashboardPlugin} to configure order-related
+ * Dashboard UI behaviour.
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ */
+export interface OrdersConfig {
+    /**
+     * @description
+     * An array of refund reasons to display in the refund order dialog.
+     * Each reason has a `value` (used as the identifier) and a `label` (displayed to the user).
+     * If not provided, default reasons will be used.
+     */
+    refundReasons?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
 /**
  * @description
  * Options used by the {@link vendureDashboardPlugin} to configure aspects of the
@@ -123,6 +144,11 @@ export interface UiConfigPluginOptions {
      * Configuration for internationalization settings
      */
     i18n?: I18nConfig;
+    /**
+     * @description
+     * Configuration for order-related settings
+     */
+    orders?: OrdersConfig;
 }
 /**
  * @description
@@ -141,6 +167,11 @@ export interface ResolvedUiConfig {
      * Note: defaultLocale remains optional as it can be undefined.
      */
     i18n: Required<Omit<I18nConfig, 'defaultLocale'>> & Pick<I18nConfig, 'defaultLocale'>;
+    /**
+     * @description
+     * Order-related settings with all defaults applied
+     */
+    orders: Required<OrdersConfig>;
 }
 /**
  * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.5.3-master-202601290259",
+    "version": "3.5.3",
     "type": "module",
     "repository": {
         "type": "git",
@@ -157,8 +157,8 @@
         "@storybook/addon-vitest": "^10.0.0-beta.9",
         "@storybook/react-vite": "^10.0.0-beta.9",
         "@types/node": "^22.13.4",
-        "@vendure/common": "^3.5.3-master-202601290259",
-        "@vendure/core": "^3.5.3-master-202601290259",
+        "@vendure/common": "3.5.3",
+        "@vendure/core": "3.5.3",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.19.0",

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -22,7 +22,9 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useJobQueuePolling } from '@/vdb/hooks/use-job-queue-polling.js';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
@@ -54,6 +56,12 @@ function CollectionDetailPage() {
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { t } = useLingui();
+    const queryClient = useQueryClient();
+
+    const { isPolling: pendingFilterApplication, startPolling } = useJobQueuePolling(
+        'apply-collection-filters',
+        () => queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] }),
+    );
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -79,6 +87,7 @@ function CollectionDetailPage() {
                     name: translation.name,
                     slug: translation.slug,
                     description: translation.description,
+                    customFields: (translation as any).customFields,
                 })),
                 filters: entity.filters.map(f => ({
                     code: f.code,
@@ -90,12 +99,20 @@ function CollectionDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
+            const filtersWereDirty =
+                form.getFieldState('inheritFilters').isDirty || form.getFieldState('filters').isDirty;
             toast(
                 creatingNewEntity ? t`Successfully created collection` : t`Successfully updated collection`,
             );
             resetForm();
+            if (filtersWereDirty) {
+                startPolling();
+            }
             if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
+                await navigate({
+                    to: `../$id`,
+                    params: { id: data.id },
+                });
             }
         },
         onError: err => {
@@ -106,7 +123,9 @@ function CollectionDetailPage() {
     });
 
     const shouldPreviewContents =
-        form.getFieldState('inheritFilters').isDirty || form.getFieldState('filters').isDirty;
+        form.getFieldState('inheritFilters').isDirty ||
+        form.getFieldState('filters').isDirty ||
+        pendingFilterApplication;
 
     const currentFiltersValue = form.watch('filters');
     const currentInheritFiltersValue = form.watch('inheritFilters');
@@ -220,7 +239,7 @@ function CollectionDetailPage() {
                     </FormItem>
                 </PageBlock>
                 <PageBlock column="main" blockId="contents" title={<Trans>Contents</Trans>}>
-                    {shouldPreviewContents || creatingNewEntity ? (
+                    {pendingFilterApplication || shouldPreviewContents || creatingNewEntity ? (
                         <CollectionContentsPreviewTable
                             parentId={entity?.parent?.id}
                             filters={currentFiltersValue ?? []}

package/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -10,6 +10,7 @@ export const customerListDocument = graphql(`
                 firstName
                 lastName
                 emailAddress
+                phoneNumber
                 groups {
                     id
                     name

package/src/app/routes/_authenticated/_customers/customers.tsx

@@ -30,6 +30,9 @@ function CustomerListPage() {
                     emailAddress: {
                         contains: searchTerm,
                     },
+                    phoneNumber: {
+                        contains: searchTerm,
+                    },
                 };
             }}
             transformVariables={variables => {

package/src/app/routes/_authenticated/_orders/components/draft-order-status.tsx

@@ -0,0 +1,48 @@
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AlertTriangle, CheckCircle } from 'lucide-react';
+
+export type DraftOrderStatusProps = Readonly<{
+    hasCustomer: boolean;
+    hasLines: boolean;
+    hasShippingMethod: boolean;
+    isDraftState: boolean;
+}>;
+
+export function DraftOrderStatus({
+    hasCustomer,
+    hasLines,
+    hasShippingMethod,
+    isDraftState,
+}: DraftOrderStatusProps) {
+    const { t } = useLingui();
+    const isCompleteDraftDisabled = !hasCustomer || !hasLines || !hasShippingMethod || !isDraftState;
+
+    let completeDraftDisabledReason: string | null = null;
+    if (!hasCustomer) {
+        completeDraftDisabledReason = t`Select a customer to continue`;
+    } else if (!hasLines) {
+        completeDraftDisabledReason = t`Add at least one item to the order`;
+    } else if (!hasShippingMethod) {
+        completeDraftDisabledReason = t`Set a shipping address and select a shipping method`;
+    } else if (!isDraftState) {
+        completeDraftDisabledReason = t`Only draft orders can be completed`;
+    }
+
+    const Icon = isCompleteDraftDisabled ? AlertTriangle : CheckCircle;
+    const title = isCompleteDraftDisabled ? (
+        <Trans>Order draft isn't ready to be completed</Trans>
+    ) : (
+        <Trans>Order draft is ready to be completed</Trans>
+    );
+
+    return (
+        <Alert variant={isCompleteDraftDisabled ? 'destructive' : 'default'}>
+            <Icon className={isCompleteDraftDisabled ? '' : 'stroke-success'} />
+            <AlertTitle className={isCompleteDraftDisabled ? '' : 'text-success'}>{title}</AlertTitle>
+            {completeDraftDisabledReason ? (
+                <AlertDescription>{completeDraftDisabledReason}</AlertDescription>
+            ) : null}
+        </Alert>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -218,8 +218,8 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
             >
                 <Trans>Fulfill order</Trans>
             </Button>
-            <Dialog open={open}>
-                <DialogContent className="sm:max-w-[600px]">
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col">
                     <DialogHeader>
                         <DialogTitle>
                             <Trans>Fulfill order</Trans>
@@ -234,9 +234,9 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
                                 e.stopPropagation();
                                 form.handleSubmit(handleSubmit)(e);
                             }}
-                            className="space-y-4"
+                            className="space-y-4 flex-1 overflow-hidden flex flex-col"
                         >
-                            <div className="space-y-4">
+                            <div className="space-y-4 flex-1 overflow-y-auto">
                                 <div className="font-medium">
                                     <Trans>Order lines</Trans>
                                 </div>

package/src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx

@@ -19,15 +19,17 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
-import { Pencil, User } from 'lucide-react';
-import { useMemo } from 'react';
+import { Pencil, RotateCcw, User } from 'lucide-react';
+import { useCallback, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
+
 import {
     orderDetailDocument,
     setOrderCustomFieldsDocument,
     transitionOrderToStateDocument,
 } from '../orders.graphql.js';
-import { canAddFulfillment, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+import { canAddFulfillment, canRefundOrder, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+
 import { AddManualPaymentDialog } from './add-manual-payment-dialog.js';
 import { FulfillOrderDialog } from './fulfill-order-dialog.js';
 import { FulfillmentDetails } from './fulfillment-details.js';
@@ -37,6 +39,7 @@ import { orderHistoryQueryKey } from './order-history/use-order-history.js';
 import { OrderTable } from './order-table.js';
 import { OrderTaxSummary } from './order-tax-summary.js';
 import { PaymentDetails } from './payment-details.js';
+import { RefundOrderDialog, RefundOrderDialogRef } from './refund-order-dialog.js';
 import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
 import { useTransitionOrderToState } from './use-transition-order-to-state.js';
 
@@ -101,6 +104,15 @@ export function OrderDetailShared({
     });
 
     const customFieldConfig = useCustomFieldConfig('Order');
+    const refundDialogRef = useRef<RefundOrderDialogRef>(null);
+
+    const refreshOrderAndHistory = useCallback(async () => {
+        if (entity) {
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            void queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
+        }
+    }, [entity, queryClient]);
 
     const stateTransitionActions = useMemo(() => {
         if (!entity) {
@@ -116,17 +128,14 @@ export function OrderDetailShared({
                         description: transitionError,
                     });
                 } else {
-                    refreshOrderAndHistory();
+                    void refreshOrderAndHistory();
                 }
             },
         }));
-    }, [entity, transitionToState, t]);
+    }, [entity, transitionToState, t, refreshOrderAndHistory]);
 
-    if (!entity) {
-        return null;
-    }
-
-    const handleModifyClick = async () => {
+    const handleModifyClick = useCallback(async () => {
+        if (!entity) return;
         try {
             await transitionOrderToStateMutation.mutateAsync({
                 id: entity.id,
@@ -140,19 +149,38 @@ export function OrderDetailShared({
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         }
-    };
+    }, [entity, transitionOrderToStateMutation, queryClient, navigate, t]);
+
+    const ModifyMenuItem = useCallback(
+        () => (
+            <DropdownMenuItem onClick={handleModifyClick}>
+                <Pencil className="w-4 h-4" />
+                <Trans>Modify</Trans>
+            </DropdownMenuItem>
+        ),
+        [handleModifyClick],
+    );
+
+    const RefundMenuItem = useCallback(
+        () => (
+            <PermissionGuard requires={['UpdateOrder']}>
+                <DropdownMenuItem onClick={() => refundDialogRef.current?.open()}>
+                    <RotateCcw className="w-4 h-4" />
+                    <Trans>Refund & Cancel</Trans>
+                </DropdownMenuItem>
+            </PermissionGuard>
+        ),
+        [],
+    );
+
+    if (!entity) {
+        return null;
+    }
 
     const nextStates = entity.nextStates;
     const showAddPaymentButton = shouldShowAddManualPaymentButton(entity);
     const showFulfillButton = canAddFulfillment(entity);
-
-    async function refreshOrderAndHistory() {
-        if (entity) {
-            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
-            await queryClient.invalidateQueries({ queryKey });
-            queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
-        }
-    }
+    const showRefundOption = canRefundOrder(entity);
 
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
@@ -160,18 +188,8 @@ export function OrderDetailShared({
             <PageActionBar>
                 <PageActionBarRight
                     dropdownMenuItems={[
-                        ...(nextStates.includes('Modifying')
-                            ? [
-                                  {
-                                      component: () => (
-                                          <DropdownMenuItem onClick={handleModifyClick}>
-                                              <Pencil className="w-4 h-4" />
-                                              <Trans>Modify</Trans>
-                                          </DropdownMenuItem>
-                                      ),
-                                  },
-                              ]
-                            : []),
+                        ...(nextStates.includes('Modifying') ? [{ component: ModifyMenuItem }] : []),
+                        ...(showRefundOption ? [{ component: RefundMenuItem }] : []),
                     ]}
                 >
                     {showAddPaymentButton && (
@@ -189,13 +207,22 @@ export function OrderDetailShared({
                             <FulfillOrderDialog
                                 order={entity}
                                 onSuccess={() => {
-                                    refreshOrderAndHistory();
+                                    void refreshOrderAndHistory();
                                 }}
                             />
                         </PermissionGuard>
                     )}
                 </PageActionBarRight>
             </PageActionBar>
+            {showRefundOption && (
+                <RefundOrderDialog
+                    ref={refundDialogRef}
+                    order={entity}
+                    onSuccess={() => {
+                        void refreshOrderAndHistory();
+                    }}
+                />
+            )}
             <PageLayout>
                 {/* Main Column Blocks */}
                 {beforeOrderTable?.(entity)}
@@ -288,7 +315,7 @@ export function OrderDetailShared({
                                     fulfillment={fulfillment}
                                     onSuccess={() => {
                                         refreshEntity();
-                                        queryClient.refetchQueries({
+                                        void queryClient.refetchQueries({
                                             queryKey: orderHistoryQueryKey(entity.id),
                                         });
                                     }}