@vendure/dashboard 3.3.1 → 3.3.3

package/src/lib/hooks/use-permissions.ts

@@ -1,8 +1,7 @@
 import { useAuth } from '@/hooks/use-auth.js';
+import { useChannel } from '@/hooks/use-channel.js';
 import { Permission } from '@vendure/common/lib/generated-types';
 
-import { useUserSettings } from './use-user-settings.js';
-
 /**
  * @description
  * **Status: Developer Preview**
@@ -18,13 +17,14 @@ import { useUserSettings } from './use-user-settings.js';
  */
 export function usePermissions() {
     const { channels } = useAuth();
-    const { settings } = useUserSettings();
+    const { selectedChannelId } = useChannel();
 
     function hasPermissions(permissions: string[]) {
         if (permissions.length === 0) {
             return true;
         }
-        const activeChannel = (channels ?? []).find(channel => channel.id === settings.activeChannelId);
+        // Use the selected channel instead of settings.activeChannelId
+        const activeChannel = (channels ?? []).find(channel => channel.id === selectedChannelId);
         if (!activeChannel) {
             return false;
         }

package/src/lib/providers/auth.tsx

@@ -1,9 +1,8 @@
 import { api } from '@/graphql/api.js';
 import { ResultOf, graphql } from '@/graphql/graphql.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
-import { useAuth } from '@/hooks/use-auth.js';
 
 /**
  * @description
@@ -72,79 +71,85 @@ const CurrentUserQuery = graphql(`
 export const AuthContext = React.createContext<AuthContext | null>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-    const [status, setStatus] = React.useState<AuthContext['status']>('verifying');
+    const [status, setStatus] = React.useState<AuthContext['status']>('unauthenticated');
     const [authenticationError, setAuthenticationError] = React.useState<string | undefined>();
     const { settings, setActiveChannelId } = useUserSettings();
-    const onLoginSuccessFn = React.useRef<() => void>(() => {});
-    const onLogoutSuccessFn = React.useRef<() => void>(() => {});
-    const isAuthenticated = status === 'authenticated';
-
-    const { data: currentUserData, isLoading , error: currentUserError} = useQuery({
-        queryKey: ['currentUser', isAuthenticated],
+    const queryClient = useQueryClient();
+
+    // Query for current user
+    const {
+        data: currentUserData,
+        isLoading,
+        error: currentUserError,
+        refetch: refetchCurrentUser,
+    } = useQuery({
+        queryKey: ['currentUser'],
         queryFn: () => api.query(CurrentUserQuery),
-        retry: false,
-        staleTime: 1000,
     });
 
-    const currentUser = currentUserError ? undefined : currentUserData;
-
+    // Set active channel if needed
     React.useEffect(() => {
-        if (!settings.activeChannelId && currentUser?.me?.channels?.length) {
-            setActiveChannelId(currentUser.me.channels[0].id);
+        if (!settings.activeChannelId && currentUserData?.me?.channels?.length) {
+            setActiveChannelId(currentUserData.me.channels[0].id);
         }
-    }, [settings.activeChannelId, currentUser?.me?.channels]);
+    }, [settings.activeChannelId, currentUserData?.me?.channels]);
 
-    const loginMutationFn = api.mutate(LoginMutation);
-    const loginMutation = useMutation({
-        mutationFn: loginMutationFn,
-        onSuccess: async data => {
-            if (data.login.__typename === 'CurrentUser') {
-                setStatus('authenticated');
-                onLoginSuccessFn.current();
-            } else {
-                setAuthenticationError(data?.login.message);
-                setStatus('unauthenticated');
-            }
-        },
-        onError: error => {
-            setAuthenticationError(error.message);
-            setStatus('unauthenticated');
+    // Auth actions
+    const login = React.useCallback(
+        (username: string, password: string, onLoginSuccess?: () => void) => {
+            setStatus('verifying');
+            api.mutate(LoginMutation)({ username, password })
+                .then(async data => {
+                    if (data.login.__typename === 'CurrentUser') {
+                        setAuthenticationError(undefined);
+                        await refetchCurrentUser();
+                        // Invalidate all queries to ensure fresh data after login
+                        await queryClient.invalidateQueries();
+                        setStatus('authenticated');
+                        onLoginSuccess?.();
+                    } else {
+                        setAuthenticationError(data?.login.message);
+                        setStatus('unauthenticated');
+                    }
+                })
+                .catch(error => {
+                    setAuthenticationError(error.message);
+                    setStatus('unauthenticated');
+                });
         },
-    });
+        [refetchCurrentUser, queryClient],
+    );
 
-    const logoutMutationFn = api.mutate(LogOutMutation);
-    const logoutMutation = useMutation({
-        mutationFn: logoutMutationFn,
-        onSuccess: async data => {
-            if (data?.logout.success === true) {
-                setStatus('unauthenticated');
-                onLogoutSuccessFn.current();
-            }
+    const logout = React.useCallback(
+        async (onLogoutSuccess?: () => void) => {
+            setStatus('verifying');
+            api.mutate(LogOutMutation)({}).then(async data => {
+                if (data?.logout.success) {
+                    // Clear all cached queries to prevent stale data
+                    queryClient.clear();
+                    // Clear selected channel from localStorage
+                    localStorage.removeItem('vendure-selected-channel');
+                    localStorage.removeItem('vendure-selected-channel-token');
+                    setStatus('unauthenticated');
+                    onLogoutSuccess?.();
+                }
+            });
         },
-    });
-
-    const logout = React.useCallback(async (onLogoutSuccess?: () => void) => {
-        logoutMutation.mutate({});
-        onLogoutSuccessFn.current = onLogoutSuccess || (() => {});
-    }, []);
+        [queryClient],
+    );
 
-    const login = React.useCallback((username: string, password: string, onLoginSuccess?: () => void) => {
-        setStatus('verifying');
-        onLoginSuccessFn.current = onLoginSuccess || (() => {});
-        loginMutation.mutate({ username, password });
-    }, []);
+    // Determine isAuthenticated from currentUserData
+    const isAuthenticated = !!currentUserData?.me?.id;
 
+    // Set status based on query result (only if not in the middle of login/logout)
     React.useEffect(() => {
-        if (!isLoading) {
-            if (currentUser?.me?.id) {
-                setStatus('authenticated');
-            } else {
-                setStatus('unauthenticated');
-            }
+        if (status === 'verifying') return;
+        if (currentUserError || !currentUserData?.me?.id) {
+            setStatus('unauthenticated');
         } else {
-            setStatus('verifying');
+            setStatus('authenticated');
         }
-    }, [isLoading, currentUser]);
+    }, [currentUserData, currentUserError]);
 
     return (
         <AuthContext.Provider
@@ -152,8 +157,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                 isAuthenticated,
                 authenticationError,
                 status,
-                user: currentUser?.activeAdministrator,
-                channels: currentUser?.me?.channels,
+                user: currentUserData?.activeAdministrator,
+                channels: currentUserData?.me?.channels,
                 login,
                 logout,
             }}
@@ -162,4 +167,3 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         </AuthContext.Provider>
     );
 }
-

package/src/lib/providers/channel-provider.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import { api } from '@/graphql/api.js';
 import { ResultOf, graphql } from '@/graphql/graphql.js';
-import { useQuery } from '@tanstack/react-query';
+import { useAuth } from '@/hooks/use-auth.js';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import * as React from 'react';
 
 // Define the channel fragment for reuse
 const channelFragment = graphql(`
@@ -36,7 +37,6 @@ const ChannelsQuery = graphql(
     [channelFragment],
 );
 
-
 // Define the type for a channel
 type ActiveChannel = ResultOf<typeof ChannelsQuery>['activeChannel'];
 type Channel = ResultOf<typeof channelFragment>;
@@ -63,8 +63,11 @@ export const ChannelContext = React.createContext<ChannelContext | undefined>(un
 
 // Local storage key for the selected channel
 const SELECTED_CHANNEL_KEY = 'vendure-selected-channel';
+const SELECTED_CHANNEL_TOKEN_KEY = 'vendure-selected-channel-token';
 
 export function ChannelProvider({ children }: { children: React.ReactNode }) {
+    const queryClient = useQueryClient();
+    const { channels: userChannels, isAuthenticated } = useAuth();
     const [selectedChannelId, setSelectedChannelId] = React.useState<string | undefined>(() => {
         // Initialize from localStorage if available
         try {
@@ -78,35 +81,82 @@ export function ChannelProvider({ children }: { children: React.ReactNode }) {
 
     // Fetch all available channels
     const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
-        queryKey: ['channels'],
+        queryKey: ['channels', isAuthenticated],
         queryFn: () => api.query(ChannelsQuery),
         retry: false,
+        enabled: isAuthenticated,
     });
 
-    // Set the selected channel and update localStorage
-    const setSelectedChannel = React.useCallback((channelId: string) => {
-        try {
-            // Store in localStorage
-            localStorage.setItem(SELECTED_CHANNEL_KEY, channelId);
-            setSelectedChannelId(channelId);
-        } catch (e) {
-            console.error('Failed to set selected channel', e);
+    // Filter channels based on user permissions
+    const channels = React.useMemo(() => {
+        // If user has specific channels assigned (non-superadmin), use those
+        if (userChannels && userChannels.length > 0) {
+            // Map user channels to match the Channel type structure
+            return userChannels.map(ch => ({
+                id: ch.id,
+                code: ch.code,
+                token: ch.token,
+                defaultLanguageCode:
+                    channelsData?.channels.items.find(c => c.id === ch.id)?.defaultLanguageCode || 'en',
+                defaultCurrencyCode:
+                    channelsData?.channels.items.find(c => c.id === ch.id)?.defaultCurrencyCode || 'USD',
+                pricesIncludeTax:
+                    channelsData?.channels.items.find(c => c.id === ch.id)?.pricesIncludeTax || false,
+            }));
         }
-    }, []);
+        // Otherwise use all channels (superadmin)
+        return channelsData?.channels.items || [];
+    }, [userChannels, channelsData?.channels.items]);
+
+    // Set the selected channel and update localStorage
+    const setSelectedChannel = React.useCallback(
+        (channelId: string) => {
+            try {
+                // Find the channel to get its token
+                const channel = channels.find(c => c.id === channelId);
+                if (channel) {
+                    // Store channel ID and token in localStorage
+                    localStorage.setItem(SELECTED_CHANNEL_KEY, channelId);
+                    localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, channel.token);
+                    setSelectedChannelId(channelId);
+                    queryClient.invalidateQueries();
+                }
+            } catch (e) {
+                console.error('Failed to set selected channel', e);
+            }
+        },
+        [queryClient, channels],
+    );
 
     // If no selected channel is set but we have an active channel, use that
+    // Also validate that the selected channel is accessible to the user
     React.useEffect(() => {
-        if (!selectedChannelId && channelsData?.activeChannel?.id) {
-            setSelectedChannelId(channelsData.activeChannel.id);
+        const validChannelIds = channels.map(c => c.id);
+
+        // If selected channel is not valid for this user, reset it
+        if (selectedChannelId && !validChannelIds.includes(selectedChannelId)) {
+            setSelectedChannelId(undefined);
             try {
-                localStorage.setItem(SELECTED_CHANNEL_KEY, channelsData.activeChannel.id);
+                localStorage.removeItem(SELECTED_CHANNEL_KEY);
+                localStorage.removeItem(SELECTED_CHANNEL_TOKEN_KEY);
+            } catch (e) {
+                console.error('Failed to remove selected channel from localStorage', e);
+            }
+        }
+
+        // If no selected channel is set, use the first available channel
+        if (!selectedChannelId && channels.length > 0) {
+            const defaultChannel = channels[0];
+            setSelectedChannelId(defaultChannel.id);
+            try {
+                localStorage.setItem(SELECTED_CHANNEL_KEY, defaultChannel.id);
+                localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, defaultChannel.token);
             } catch (e) {
                 console.error('Failed to store selected channel in localStorage', e);
             }
         }
-    }, [selectedChannelId, channelsData]);
+    }, [selectedChannelId, channels]);
 
-    const channels = channelsData?.channels.items || [];
     const activeChannel = channelsData?.activeChannel;
     const isLoading = isChannelsLoading;
 
@@ -126,4 +176,3 @@ export function ChannelProvider({ children }: { children: React.ReactNode }) {
 
     return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;
 }
-

package/src/lib/providers/server-config.tsx

@@ -270,14 +270,14 @@ export const ServerConfigProvider = ({ children }: { children: React.ReactNode }
         enabled: !!user?.id,
         staleTime: 1000,
     });
-    const value: ServerConfig = {
+    const value: ServerConfig | null = data?.globalSettings ? {
         availableLanguages: data?.globalSettings.availableLanguages ?? [],
         moneyStrategyPrecision: data?.globalSettings.serverConfig.moneyStrategyPrecision ?? 2,
         orderProcess: data?.globalSettings.serverConfig.orderProcess ?? [],
         permittedAssetTypes: data?.globalSettings.serverConfig.permittedAssetTypes ?? [],
         permissions: data?.globalSettings.serverConfig.permissions ?? [],
         entityCustomFields: data?.globalSettings.serverConfig.entityCustomFields ?? [],
-    };
+    } : null;
 
     return <ServerConfigContext.Provider value={value}>{children}</ServerConfigContext.Provider>;
 };

package/vite/utils/config-loader.ts

@@ -36,6 +36,7 @@ export interface ConfigLoaderOptions {
     tempDir: string;
     vendureConfigExport?: string;
     logger?: Logger;
+    reportCompilationErrors?: boolean;
 }
 
 export interface LoadVendureConfigResult {
@@ -67,7 +68,12 @@ export async function loadVendureConfig(options: ConfigLoaderOptions): Promise<L
     const configFileName = path.basename(vendureConfigPath);
     const inputRootDir = path.dirname(vendureConfigPath);
     await fs.remove(outputPath);
-    const pluginInfo = await compileFile(inputRootDir, vendureConfigPath, outputPath, logger);
+    const pluginInfo = await compileFile({
+        inputRootDir,
+        inputPath: vendureConfigPath,
+        outputDir: outputPath,
+        logger,
+    });
     const compiledConfigFilePath = pathToFileURL(path.join(outputPath, configFileName)).href.replace(
         /.ts$/,
         '.js',
@@ -147,7 +153,14 @@ async function findTsConfigPaths(
                             );
                         }
                         logger.debug(
-                            `Found tsconfig paths in ${tsConfigPath}: ${JSON.stringify({ baseUrl: tsConfigBaseUrl, paths }, null, 2)}`,
+                            `Found tsconfig paths in ${tsConfigPath}: ${JSON.stringify(
+                                {
+                                    baseUrl: tsConfigBaseUrl,
+                                    paths,
+                                },
+                                null,
+                                2,
+                            )}`,
                         );
                         return { baseUrl: tsConfigBaseUrl, paths };
                     }
@@ -167,15 +180,27 @@ async function findTsConfigPaths(
     return undefined;
 }
 
-export async function compileFile(
-    inputRootDir: string,
-    inputPath: string,
-    outputDir: string,
-    logger: Logger = defaultLogger,
+type CompileFileOptions = {
+    inputRootDir: string;
+    inputPath: string;
+    outputDir: string;
+    logger?: Logger;
+    compiledFiles?: Set<string>;
+    isRoot?: boolean;
+    pluginInfo?: PluginInfo[];
+    reportCompilationErrors?: boolean;
+};
+
+export async function compileFile({
+    inputRootDir,
+    inputPath,
+    outputDir,
+    logger = defaultLogger,
     compiledFiles = new Set<string>(),
     isRoot = true,
-    pluginInfo: PluginInfo[] = [],
-): Promise<PluginInfo[]> {
+    pluginInfo = [],
+    reportCompilationErrors = false,
+}: CompileFileOptions): Promise<PluginInfo[]> {
     const absoluteInputPath = path.resolve(inputPath);
     if (compiledFiles.has(absoluteInputPath)) {
         return pluginInfo;
@@ -325,7 +350,15 @@ export async function compileFile(
     // Recursively collect all files that need to be compiled
     for (const importPath of importPaths) {
         // Pass rootTsConfigInfo down, but set isRoot to false
-        await compileFile(inputRootDir, importPath, outputDir, logger, compiledFiles, false, pluginInfo);
+        await compileFile({
+            inputRootDir,
+            inputPath: importPath,
+            outputDir,
+            logger,
+            compiledFiles,
+            isRoot: false,
+            pluginInfo,
+        });
     }
 
     // If this is the root file (the one that started the compilation),
@@ -370,10 +403,12 @@ export async function compileFile(
         logger.info(`Emitting compiled files to ${outputDir}`);
         const emitResult = program.emit();
 
-        const hasEmitErrors = reportDiagnostics(program, emitResult, logger);
+        if (reportCompilationErrors) {
+            const hasEmitErrors = reportDiagnostics(program, emitResult, logger);
 
-        if (hasEmitErrors) {
-            throw new Error('TypeScript compilation failed with errors.');
+            if (hasEmitErrors) {
+                throw new Error('TypeScript compilation failed with errors.');
+            }
         }
 
         logger.info(`Successfully compiled ${allFiles.length} files to ${outputDir}`);

package/vite/vite-plugin-vendure-dashboard.ts

@@ -1,4 +1,3 @@
-import { lingui } from '@lingui/vite-plugin';
 import tailwindcss from '@tailwindcss/vite';
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
@@ -10,8 +9,7 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
-import { themeVariablesPlugin } from './vite-plugin-theme.js';
-import { ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
+import { ThemeVariablesPluginOptions, themeVariablesPlugin } from './vite-plugin-theme.js';
 import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
 
 /**
@@ -37,6 +35,14 @@ export type VitePluginVendureDashboardOptions = {
     gqlTadaOutputPath?: string;
     tempCompilationDir?: string;
     disableTansStackRouterPlugin?: boolean;
+    /**
+     * @description
+     * If set to `true`, compilation errors during the build process will be reported and
+     * the build will fail.
+     *
+     * @default false
+     */
+    reportCompilationErrors?: boolean;
 } & UiConfigPluginOptions &
     ThemeVariablesPluginOptions;
 
@@ -74,7 +80,11 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
         }),
         themeVariablesPlugin({ theme: options.theme }),
         tailwindcss(),
-        configLoaderPlugin({ vendureConfigPath: normalizedVendureConfigPath, tempDir }),
+        configLoaderPlugin({
+            vendureConfigPath: normalizedVendureConfigPath,
+            tempDir,
+            reportCompilationErrors: options.reportCompilationErrors,
+        }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
         dashboardMetadataPlugin({ rootDir: tempDir }),