@vendure/dashboard 3.2.0

package/src/lib/providers/auth.tsx

@@ -0,0 +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>
+    );
+}
+

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

@@ -0,0 +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>;
+}
+

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

@@ -0,0 +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}</>;
+}

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

@@ -0,0 +1,279 @@
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { ResultOf } from 'gql.tada';
+import React from 'react';
+
+export const customFieldConfigFragment = graphql(`
+    fragment CustomFieldConfig on CustomField {
+        name
+        type
+        list
+        description {
+            languageCode
+            value
+        }
+        label {
+            languageCode
+            value
+        }
+        readonly
+        nullable
+        requiresPermission
+        ui
+    }
+`);
+
+export const stringCustomFieldFragment = graphql(
+    `
+        fragment StringCustomField on StringCustomFieldConfig {
+            ...CustomFieldConfig
+            pattern
+            options {
+                label {
+                    languageCode
+                    value
+                }
+                value
+            }
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const localeStringCustomFieldFragment = graphql(
+    `
+        fragment LocaleStringCustomField on LocaleStringCustomFieldConfig {
+            ...CustomFieldConfig
+            pattern
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const textCustomFieldFragment = graphql(
+    `
+        fragment TextCustomField on TextCustomFieldConfig {
+            ...CustomFieldConfig
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const localeTextCustomFieldFragment = graphql(
+    `
+        fragment LocaleTextCustomField on LocaleTextCustomFieldConfig {
+            ...CustomFieldConfig
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const booleanCustomFieldFragment = graphql(
+    `
+        fragment BooleanCustomField on BooleanCustomFieldConfig {
+            ...CustomFieldConfig
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const intCustomFieldFragment = graphql(
+    `
+        fragment IntCustomField on IntCustomFieldConfig {
+            ...CustomFieldConfig
+            intMin: min
+            intMax: max
+            intStep: step
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const floatCustomFieldFragment = graphql(
+    `
+        fragment FloatCustomField on FloatCustomFieldConfig {
+            ...CustomFieldConfig
+            floatMin: min
+            floatMax: max
+            floatStep: step
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const dateTimeCustomFieldFragment = graphql(
+    `
+        fragment DateTimeCustomField on DateTimeCustomFieldConfig {
+            ...CustomFieldConfig
+            datetimeMin: min
+            datetimeMax: max
+            datetimeStep: step
+        }
+    `,
+    [customFieldConfigFragment],
+);
+export const relationCustomFieldFragment = graphql(
+    `
+        fragment RelationCustomField on RelationCustomFieldConfig {
+            ...CustomFieldConfig
+            entity
+            scalarFields
+        }
+    `,
+    [customFieldConfigFragment],
+);
+
+export const structCustomFieldFragment = graphql(
+    `
+        fragment StructCustomField on StructCustomFieldConfig {
+            ...CustomFieldConfig
+            fields {
+                ... on StructField {
+                    name
+                    type
+                    list
+                    description {
+                        languageCode
+                        value
+                    }
+                    label {
+                        languageCode
+                        value
+                    }
+                    ui
+                }
+                ... on StringStructFieldConfig {
+                    pattern
+                    options {
+                        label {
+                            languageCode
+                            value
+                        }
+                        value
+                    }
+                }
+                ... on IntStructFieldConfig {
+                    intMin: min
+                    intMax: max
+                    intStep: step
+                }
+                ... on FloatStructFieldConfig {
+                    floatMin: min
+                    floatMax: max
+                    floatStep: step
+                }
+                ... on DateTimeStructFieldConfig {
+                    datetimeMin: min
+                    datetimeMax: max
+                    datetimeStep: step
+                }
+            }
+        }
+    `,
+    [customFieldConfigFragment],
+);
+
+export const allCustomFieldsFragment = graphql(
+    `
+        fragment CustomFields on CustomField {
+            ... on StringCustomFieldConfig {
+                ...StringCustomField
+            }
+            ... on LocaleStringCustomFieldConfig {
+                ...LocaleStringCustomField
+            }
+            ... on TextCustomFieldConfig {
+                ...TextCustomField
+            }
+            ... on LocaleTextCustomFieldConfig {
+                ...LocaleTextCustomField
+            }
+            ... on BooleanCustomFieldConfig {
+                ...BooleanCustomField
+            }
+            ... on IntCustomFieldConfig {
+                ...IntCustomField
+            }
+            ... on FloatCustomFieldConfig {
+                ...FloatCustomField
+            }
+            ... on DateTimeCustomFieldConfig {
+                ...DateTimeCustomField
+            }
+            ... on RelationCustomFieldConfig {
+                ...RelationCustomField
+            }
+            ... on StructCustomFieldConfig {
+                ...StructCustomField
+            }
+        }
+    `,
+    [
+        stringCustomFieldFragment,
+        localeStringCustomFieldFragment,
+        textCustomFieldFragment,
+        localeTextCustomFieldFragment,
+        booleanCustomFieldFragment,
+        intCustomFieldFragment,
+        floatCustomFieldFragment,
+        dateTimeCustomFieldFragment,
+        relationCustomFieldFragment,
+        structCustomFieldFragment,
+    ],
+);
+
+export const getServerConfigDocument = graphql(
+    `
+        query GetServerConfig {
+            globalSettings {
+                id
+                availableLanguages
+                serverConfig {
+                    moneyStrategyPrecision
+                    orderProcess {
+                        name
+                        to
+                    }
+                    permittedAssetTypes
+                    permissions {
+                        name
+                        description
+                        assignable
+                    }
+                    entityCustomFields {
+                        entityName
+                        customFields {
+                            ...CustomFields
+                        }
+                    }
+                }
+            }
+        }
+    `,
+    [allCustomFieldsFragment],
+);
+
+type QueryResult = ResultOf<typeof getServerConfigDocument>['globalSettings']['serverConfig'];
+
+export interface ServerConfig {
+    availableLanguages: string[];
+    moneyStrategyPrecision: QueryResult['moneyStrategyPrecision'];
+    orderProcess: QueryResult['orderProcess'];
+    permittedAssetTypes: QueryResult['permittedAssetTypes'];
+    permissions: QueryResult['permissions'];
+    entityCustomFields: QueryResult['entityCustomFields'];
+}
+
+// create a provider for the global settings
+export const ServerConfigProvider = ({ children }: { children: React.ReactNode }) => {
+    const { data } = useQuery({
+        queryKey: ['getServerConfig'],
+        queryFn: () => api.query(getServerConfigDocument),
+    });
+    const value: ServerConfig = {
+        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 ?? [],
+    };
+
+    return <ServerConfigContext.Provider value={value}>{children}</ServerConfigContext.Provider>;
+};
+
+export const ServerConfigContext = React.createContext<ServerConfig | null>(null);

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

@@ -0,0 +1,54 @@
+import { createContext, useEffect, useState } from 'react';
+import { useUserSettings } from '../hooks/use-user-settings.js';
+
+export type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+    theme: 'system',
+    setTheme: () => null,
+};
+
+export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({ children, defaultTheme = 'system', ...props }: ThemeProviderProps) {
+    const { settings, setTheme } = useUserSettings();
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove('light', 'dark');
+
+        if (settings.theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(settings.theme);
+    }, [settings.theme]);
+
+    return (
+        <ThemeProviderContext.Provider
+            {...props}
+            value={{
+                theme: settings.theme,
+                setTheme: setTheme,
+            }}
+        >
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+