@vendure/dashboard 3.2.0 → 3.2.1

package/src/lib/providers/auth.tsx

@@ -1,152 +1,152 @@
-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 * as React from 'react';
-
-export interface AuthContext {
-    status: 'authenticated' | 'verifying' | 'unauthenticated';
-    authenticationError?: string;
-    isAuthenticated: boolean;
-    login: (username: string, password: string, onSuccess?: () => void) => void;
-    logout: (onSuccess?: () => void) => Promise<void>;
-    user: ResultOf<typeof CurrentUserQuery>['activeAdministrator'] | undefined;
-    channels: NonNullable<ResultOf<typeof CurrentUserQuery>['me']>['channels'] | undefined;
-}
-
-const LoginMutation = graphql(`
-    mutation Login($username: String!, $password: String!) {
-        login(username: $username, password: $password) {
-            __typename
-            ... on CurrentUser {
-                id
-                identifier
-            }
-            ... on ErrorResult {
-                message
-                errorCode
-            }
-        }
-    }
-`);
-
-const LogOutMutation = graphql(`
-    mutation LogOut {
-        logout {
-            success
-        }
-    }
-`);
-
-const CurrentUserQuery = graphql(`
-    query CurrentUserInformation {
-        me {
-            id
-            identifier
-            channels {
-                id
-                token
-                code
-                permissions
-            }
-        }
-        activeAdministrator {
-            id
-            firstName
-            lastName
-            emailAddress
-        }
-    }
-`);
-
-export const AuthContext = React.createContext<AuthContext | null>(null);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-    const [status, setStatus] = React.useState<AuthContext['status']>('verifying');
-    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 } = useQuery({
-        queryKey: ['currentUser'],
-        queryFn: () => api.query(CurrentUserQuery),
-        retry: false,
-    });
-
-    React.useEffect(() => {
-        if (!settings.activeChannelId && currentUserData?.me?.channels?.length) {
-            setActiveChannelId(currentUserData.me.channels[0].id);
-        }
-    }, [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');
-        },
-    });
-
-    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) => {
-        logoutMutation.mutate({});
-        onLogoutSuccessFn.current = onLogoutSuccess || (() => {});
-    }, []);
-
-    const login = React.useCallback((username: string, password: string, onLoginSuccess?: () => void) => {
-        setStatus('verifying');
-        onLoginSuccessFn.current = onLoginSuccess || (() => {});
-        loginMutation.mutate({ username, password });
-    }, []);
-
-    React.useEffect(() => {
-        if (!isLoading) {
-            if (currentUserData?.me?.id) {
-                setStatus('authenticated');
-            } else {
-                setStatus('unauthenticated');
-            }
-        } else {
-            setStatus('verifying');
-        }
-    }, [isLoading, currentUserData]);
-
-    return (
-        <AuthContext.Provider
-            value={{
-                isAuthenticated,
-                authenticationError,
-                status,
-                user: currentUserData?.activeAdministrator,
-                channels: currentUserData?.me?.channels,
-                login,
-                logout,
-            }}
-        >
-            {children}
-        </AuthContext.Provider>
-    );
-}
-
+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 * as React from 'react';
+
+export interface AuthContext {
+    status: 'authenticated' | 'verifying' | 'unauthenticated';
+    authenticationError?: string;
+    isAuthenticated: boolean;
+    login: (username: string, password: string, onSuccess?: () => void) => void;
+    logout: (onSuccess?: () => void) => Promise<void>;
+    user: ResultOf<typeof CurrentUserQuery>['activeAdministrator'] | undefined;
+    channels: NonNullable<ResultOf<typeof CurrentUserQuery>['me']>['channels'] | undefined;
+}
+
+const LoginMutation = graphql(`
+    mutation Login($username: String!, $password: String!) {
+        login(username: $username, password: $password) {
+            __typename
+            ... on CurrentUser {
+                id
+                identifier
+            }
+            ... on ErrorResult {
+                message
+                errorCode
+            }
+        }
+    }
+`);
+
+const LogOutMutation = graphql(`
+    mutation LogOut {
+        logout {
+            success
+        }
+    }
+`);
+
+const CurrentUserQuery = graphql(`
+    query CurrentUserInformation {
+        me {
+            id
+            identifier
+            channels {
+                id
+                token
+                code
+                permissions
+            }
+        }
+        activeAdministrator {
+            id
+            firstName
+            lastName
+            emailAddress
+        }
+    }
+`);
+
+export const AuthContext = React.createContext<AuthContext | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+    const [status, setStatus] = React.useState<AuthContext['status']>('verifying');
+    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 } = useQuery({
+        queryKey: ['currentUser'],
+        queryFn: () => api.query(CurrentUserQuery),
+        retry: false,
+    });
+
+    React.useEffect(() => {
+        if (!settings.activeChannelId && currentUserData?.me?.channels?.length) {
+            setActiveChannelId(currentUserData.me.channels[0].id);
+        }
+    }, [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');
+        },
+    });
+
+    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) => {
+        logoutMutation.mutate({});
+        onLogoutSuccessFn.current = onLogoutSuccess || (() => {});
+    }, []);
+
+    const login = React.useCallback((username: string, password: string, onLoginSuccess?: () => void) => {
+        setStatus('verifying');
+        onLoginSuccessFn.current = onLoginSuccess || (() => {});
+        loginMutation.mutate({ username, password });
+    }, []);
+
+    React.useEffect(() => {
+        if (!isLoading) {
+            if (currentUserData?.me?.id) {
+                setStatus('authenticated');
+            } else {
+                setStatus('unauthenticated');
+            }
+        } else {
+            setStatus('verifying');
+        }
+    }, [isLoading, currentUserData]);
+
+    return (
+        <AuthContext.Provider
+            value={{
+                isAuthenticated,
+                authenticationError,
+                status,
+                user: currentUserData?.activeAdministrator,
+                channels: currentUserData?.me?.channels,
+                login,
+                logout,
+            }}
+        >
+            {children}
+        </AuthContext.Provider>
+    );
+}
+

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

@@ -1,121 +1,121 @@
-import * as React from 'react';
-import { api } from '@/graphql/api.js';
-import { ResultOf, graphql } from '@/graphql/graphql.js';
-import { useQuery } from '@tanstack/react-query';
-
-// Define the channel fragment for reuse
-const channelFragment = graphql(`
-    fragment ChannelInfo on Channel {
-        id
-        code
-        token
-        defaultLanguageCode
-        defaultCurrencyCode
-        pricesIncludeTax
-    }
-`);
-
-// Query to get all available channels and the active channel
-const ChannelsQuery = graphql(
-    `
-        query ChannelInformation {
-            activeChannel {
-                ...ChannelInfo
-                defaultTaxZone {
-                    id
-                }
-            }
-            channels {
-                items {
-                    ...ChannelInfo
-                }
-                totalItems
-            }
-        }
-    `,
-    [channelFragment],
-);
-
-
-// Define the type for a channel
-type ActiveChannel = ResultOf<typeof ChannelsQuery>['activeChannel'];
-type Channel = ResultOf<typeof channelFragment>;
-
-// Define the context interface
-export interface ChannelContext {
-    activeChannel: ActiveChannel | undefined;
-    channels: Channel[];
-    selectedChannelId: string | undefined;
-    selectedChannel: Channel | undefined;
-    isLoading: boolean;
-    setSelectedChannel: (channelId: string) => void;
-}
-
-// Create the context
-export const ChannelContext = React.createContext<ChannelContext | undefined>(undefined);
-
-// Local storage key for the selected channel
-const SELECTED_CHANNEL_KEY = 'vendure-selected-channel';
-
-export function ChannelProvider({ children }: { children: React.ReactNode }) {
-    const [selectedChannelId, setSelectedChannelId] = React.useState<string | undefined>(() => {
-        // Initialize from localStorage if available
-        try {
-            const storedChannelId = localStorage.getItem(SELECTED_CHANNEL_KEY);
-            return storedChannelId || undefined;
-        } catch (e) {
-            console.error('Failed to load selected channel from localStorage', e);
-            return undefined;
-        }
-    });
-
-    // Fetch all available channels
-    const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
-        queryKey: ['channels'],
-        queryFn: () => api.query(ChannelsQuery),
-    });
-
-    // 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);
-        }
-    }, []);
-
-    // If no selected channel is set but we have an active channel, use that
-    React.useEffect(() => {
-        if (!selectedChannelId && channelsData?.activeChannel?.id) {
-            setSelectedChannelId(channelsData.activeChannel.id);
-            try {
-                localStorage.setItem(SELECTED_CHANNEL_KEY, channelsData.activeChannel.id);
-            } catch (e) {
-                console.error('Failed to store selected channel in localStorage', e);
-            }
-        }
-    }, [selectedChannelId, channelsData]);
-
-    const channels = channelsData?.channels.items || [];
-    const activeChannel = channelsData?.activeChannel;
-    const isLoading = isChannelsLoading;
-
-    // Find the selected channel from the list of channels
-    const selectedChannel = React.useMemo(() => {
-        return channels.find(channel => channel.id === selectedChannelId);
-    }, [channels, selectedChannelId]);
-
-    const contextValue: ChannelContext = {
-        activeChannel,
-        channels,
-        selectedChannelId,
-        selectedChannel,
-        isLoading,
-        setSelectedChannel,
-    };
-
-    return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;
-}
-
+import * as React from 'react';
+import { api } from '@/graphql/api.js';
+import { ResultOf, graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+
+// Define the channel fragment for reuse
+const channelFragment = graphql(`
+    fragment ChannelInfo on Channel {
+        id
+        code
+        token
+        defaultLanguageCode
+        defaultCurrencyCode
+        pricesIncludeTax
+    }
+`);
+
+// Query to get all available channels and the active channel
+const ChannelsQuery = graphql(
+    `
+        query ChannelInformation {
+            activeChannel {
+                ...ChannelInfo
+                defaultTaxZone {
+                    id
+                }
+            }
+            channels {
+                items {
+                    ...ChannelInfo
+                }
+                totalItems
+            }
+        }
+    `,
+    [channelFragment],
+);
+
+
+// Define the type for a channel
+type ActiveChannel = ResultOf<typeof ChannelsQuery>['activeChannel'];
+type Channel = ResultOf<typeof channelFragment>;
+
+// Define the context interface
+export interface ChannelContext {
+    activeChannel: ActiveChannel | undefined;
+    channels: Channel[];
+    selectedChannelId: string | undefined;
+    selectedChannel: Channel | undefined;
+    isLoading: boolean;
+    setSelectedChannel: (channelId: string) => void;
+}
+
+// Create the context
+export const ChannelContext = React.createContext<ChannelContext | undefined>(undefined);
+
+// Local storage key for the selected channel
+const SELECTED_CHANNEL_KEY = 'vendure-selected-channel';
+
+export function ChannelProvider({ children }: { children: React.ReactNode }) {
+    const [selectedChannelId, setSelectedChannelId] = React.useState<string | undefined>(() => {
+        // Initialize from localStorage if available
+        try {
+            const storedChannelId = localStorage.getItem(SELECTED_CHANNEL_KEY);
+            return storedChannelId || undefined;
+        } catch (e) {
+            console.error('Failed to load selected channel from localStorage', e);
+            return undefined;
+        }
+    });
+
+    // Fetch all available channels
+    const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
+        queryKey: ['channels'],
+        queryFn: () => api.query(ChannelsQuery),
+    });
+
+    // 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);
+        }
+    }, []);
+
+    // If no selected channel is set but we have an active channel, use that
+    React.useEffect(() => {
+        if (!selectedChannelId && channelsData?.activeChannel?.id) {
+            setSelectedChannelId(channelsData.activeChannel.id);
+            try {
+                localStorage.setItem(SELECTED_CHANNEL_KEY, channelsData.activeChannel.id);
+            } catch (e) {
+                console.error('Failed to store selected channel in localStorage', e);
+            }
+        }
+    }, [selectedChannelId, channelsData]);
+
+    const channels = channelsData?.channels.items || [];
+    const activeChannel = channelsData?.activeChannel;
+    const isLoading = isChannelsLoading;
+
+    // Find the selected channel from the list of channels
+    const selectedChannel = React.useMemo(() => {
+        return channels.find(channel => channel.id === selectedChannelId);
+    }, [channels, selectedChannelId]);
+
+    const contextValue: ChannelContext = {
+        activeChannel,
+        channels,
+        selectedChannelId,
+        selectedChannel,
+        isLoading,
+        setSelectedChannel,
+    };
+
+    return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;
+}
+

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

@@ -1,28 +1,28 @@
-import React from 'react';
-// import { i18n } from '@lingui/core';
-// import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
-
-export const locales = {
-    en: 'English',
-    de: 'Deutsch',
-};
-export const defaultLocale = 'en';
-
-/**
- * We do a dynamic import of just the catalog that we need
- * @param locale any locale string
- */
-export async function dynamicActivate(locale: string, onActivate?: () => void) {
-    // Temporarily disabled because Lingui macros do not work when the dashboard is packaged in an npm module.
-    // Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
-
-    // const { messages } = await import(`../../i18n/locales/${locale}.po`);
-    // i18n.load(locale, messages);
-    // i18n.activate(locale);
-    onActivate?.();
-}
-
-export function I18nProvider({ children }: { children: React.ReactNode }) {
-    // return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
-    return <>{children}</>;
-}
+import React from 'react';
+// import { i18n } from '@lingui/core';
+// import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
+
+export const locales = {
+    en: 'English',
+    de: 'Deutsch',
+};
+export const defaultLocale = 'en';
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale: string, onActivate?: () => void) {
+    // Temporarily disabled because Lingui macros do not work when the dashboard is packaged in an npm module.
+    // Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
+
+    // const { messages } = await import(`../../i18n/locales/${locale}.po`);
+    // i18n.load(locale, messages);
+    // i18n.activate(locale);
+    onActivate?.();
+}
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+    // return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
+    return <>{children}</>;
+}