@vendure/dashboard 3.6.0-minor-202511061555 → 3.6.0-minor-202512161252

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

@@ -1,5 +1,3 @@
-import { Permission } from '@vendure/common/lib/generated-types';
-
 import { useAuth } from './use-auth.js';
 import { useChannel } from './use-channel.js';
 
@@ -33,7 +31,9 @@ export function usePermissions() {
         if (!selectedChannel) {
             return false;
         }
-        return permissions.some(permission => selectedChannel.permissions.includes(permission as Permission));
+        return permissions.some(permission =>
+            selectedChannel.permissions.includes(permission as (typeof selectedChannel.permissions)[number]),
+        );
     }
 
     return { hasPermissions };

package/src/lib/hooks/use-sorted-languages.ts

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+import { useLocalFormat } from './use-local-format.js';
+
+export interface SortedLanguage {
+    code: string;
+    label: string;
+}
+
+/**
+ * @description
+ * This hook takes an array of language codes and returns a sorted array of language objects
+ * with code and localized label, sorted alphabetically by the label.
+ *
+ * @example
+ * ```ts
+ * const sortedLanguages = useSortedLanguages(['en', 'fr', 'de']);
+ * // Returns: [{ code: 'de', label: 'German' }, { code: 'en', label: 'English' }, { code: 'fr', label: 'French' }]
+ * ```
+ *
+ * @param availableLanguages - Array of language codes to sort
+ * @returns Sorted array of language objects with code and label
+ *
+ * @docsCategory hooks
+ * @docsPage useSortedLanguages
+ * @docsWeight 0
+ */
+export function useSortedLanguages(availableLanguages?: string[] | null): SortedLanguage[] {
+    const { formatLanguageName } = useLocalFormat();
+
+    return useMemo(
+        () =>
+            (availableLanguages ?? [])
+                .map(code => ({
+                    code,
+                    label: formatLanguageName(code),
+                }))
+                .sort((a, b) => a.label.localeCompare(b.label)),
+        [availableLanguages, formatLanguageName],
+    );
+}

package/src/lib/index.ts

@@ -247,6 +247,7 @@ export * from './framework/form-engine/utils.js';
 export * from './framework/form-engine/value-transformers.js';
 export * from './framework/history-entry/history-entry-extensions.js';
 export * from './framework/history-entry/history-entry.js';
+export * from './framework/layout-engine/action-bar-item-wrapper.js';
 export * from './framework/layout-engine/dev-mode-button.js';
 export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/layout-engine/location-wrapper.js';

package/src/lib/lib/load-i18n-messages.ts

@@ -12,6 +12,9 @@ export async function loadI18nMessages(locale: string): Promise<Messages> {
     } else {
         // In dev mode we allow the dynamic import behaviour
         const { messages } = await import(`../../i18n/locales/${locale}.po`);
-        return messages;
+        const pluginTranslations = await import('virtual:plugin-translations');
+        const safeLocale = locale.replace(/-/g, '_');
+        const pluginTranslationsForLocale = pluginTranslations.default[safeLocale] ?? {};
+        return { ...messages, ...pluginTranslationsForLocale };
     }
 }

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

@@ -147,6 +147,7 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
                     defaultCurrencyCode: fullChannelData?.defaultCurrencyCode || 'USD',
                     pricesIncludeTax: fullChannelData?.pricesIncludeTax || false,
                     availableLanguageCodes: fullChannelData?.availableLanguageCodes || ['en'],
+                    availableCurrencyCodes: fullChannelData?.availableCurrencyCodes || ['USD'],
                 };
             });
         }
@@ -198,13 +199,16 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
         });
     };
 
-    const contextValue: ChannelContext = {
-        channels,
-        activeChannel: selectedChannel,
-        isLoading,
-        setActiveChannel: setSelectedChannel,
-        refreshChannels,
-    };
+    const contextValue: ChannelContext = React.useMemo(
+        () => ({
+            channels,
+            activeChannel: selectedChannel,
+            isLoading,
+            setActiveChannel: setSelectedChannel,
+            refreshChannels,
+        }),
+        [channels, selectedChannel, isLoading, setSelectedChannel, refreshChannels],
+    );
 
     return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;
 }

package/src/lib/utils/config-utils.ts

@@ -0,0 +1,19 @@
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+/**
+ * Returns the base URL for API requests based on the configuration.
+ * Respects the 'auto' setting to derive the URL from the current location.
+ *
+ * @returns {string} The constructed API base URL, e.g. https://api.example.test:3070
+ */
+export function getApiBaseUrl(): string {
+    const schemeAndHost =
+        uiConfig.api.host !== 'auto'
+            ? uiConfig.api.host
+            : `${globalThis.location.protocol}//${globalThis.location.hostname}`;
+
+    const locationPortPart = globalThis.location.port ? `:${globalThis.location.port}` : '';
+    const portPart = uiConfig.api.port === 'auto' ? locationPortPart : `:${uiConfig.api.port}`;
+
+    return schemeAndHost + portPart;
+}

package/src/lib/virtual.d.ts

@@ -5,6 +5,9 @@ declare module 'virtual:admin-api-schema' {
 declare module 'virtual:dashboard-extensions' {
     export const runDashboardExtensions: () => Promise<void>;
 }
+declare module 'virtual:plugin-translations' {
+    export default translations = Record<string, any>;
+}
 
 declare module 'virtual:vendure-ui-config' {
     import { LanguageCode } from '@vendure/core';

package/LICENSE.md

@@ -1,42 +0,0 @@
-# License
-Copyright (C) Vendure GmbH
-
-This software is available under two different licenses:
-* GNU General Public License version 3 (GPLv3) as Vendure Community Edition
-* Vendure Commercial License (VCL)
-
-The default Vendure license, without a valid Vendure Commercial License agreement, is the Open-Source GPLv3 license.
-
-## GNU General Public License version 3 (GPLv3)
-
-If you decide to choose the GPLv3 license, you must comply with the following terms:
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-Additional permission under GNU GPL version 3 section 7:
-
-An additional exception under section 7 of the GPL is included in the plugin-exception.txt file,
-which allows you to distribute Vendure plugins (i.e. extensions) under a different license.
-
-## Vendure Commercial License (VCL)
-
-Alternatively, commercial and supported versions of the program - also known as
-Commercial Distributions - must be used in accordance with the terms and conditions
-contained in a separate written agreement between you and Vendure GmbH.
-For more information about the Vendure Commercial License (VCL) please contact contact@vendure.io.
-
-Please see also:
-
-- [Licensing FAQ - license-faq.md](license/license-faq.md)
-- [GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 - gpl-3.0.txt](license/gpl-3.0.txt)

package/src/app/routes/_authenticated/_facets/components/edit-facet-value.tsx

@@ -1,129 +0,0 @@
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Form, FormControl, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@lingui/react/macro';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
-
-const facetValuesDocument = graphql(`
-    query FacetValue($options: FacetValueListOptions) {
-        facetValues(options: $options) {
-            items {
-                id
-                name
-                code
-                customFields
-                translations {
-                    id
-                    languageCode
-                    name
-                }
-            }
-        }
-    }
-`);
-
-const updateFacetValueDocument = graphql(`
-    mutation UpdateFacetValue($input: [UpdateFacetValueInput!]!) {
-        updateFacetValues(input: $input) {
-            id
-        }
-    }
-`);
-
-export interface EditFacetValueProps {
-    facetValueId: string;
-    onSuccess?: () => void;
-}
-
-export function EditFacetValue({ facetValueId, onSuccess }: Readonly<EditFacetValueProps>) {
-    const {
-        settings: { contentLanguage },
-    } = useUserSettings();
-    const { refetchPaginatedList } = usePaginatedList();
-    const { data: facetValues } = useQuery({
-        queryKey: ['facetValues', facetValueId],
-        queryFn: () => api.query(facetValuesDocument, { options: { filter: { id: { eq: facetValueId } } } }),
-    });
-    const { mutate: updateFacetValue } = useMutation({
-        mutationFn: api.mutate(updateFacetValueDocument),
-        onSuccess: () => {
-            refetchPaginatedList();
-            onSuccess?.();
-        },
-    });
-    const facetValue = facetValues?.facetValues.items[0];
-
-    const form = useForm({
-        values: {
-            name: facetValue?.name ?? '',
-            code: facetValue?.code ?? '',
-        },
-    });
-
-    if (!facetValue) {
-        return <div>Facet value not found</div>;
-    }
-
-    const handleSave = (values: { name: string; code: string }) => {
-        const translations = facetValue.translations.map(translation => {
-            if (translation.languageCode === contentLanguage) {
-                return {
-                    id: translation.id,
-                    languageCode: translation.languageCode,
-                    name: values.name,
-                };
-            }
-            return translation;
-        });
-        updateFacetValue({
-            input: [
-                {
-                    id: facetValue.id,
-                    translations,
-                    code: values.code,
-                },
-            ],
-        });
-    };
-
-    return (
-        <div className="grid gap-4">
-            <div className="space-y-2">
-                <h4 className="font-medium leading-none">Edit Facet Value</h4>
-                <p className="text-sm text-muted-foreground">Update the name and code of this facet value.</p>
-            </div>
-            <Form {...form}>
-                <form onSubmit={form.handleSubmit(handleSave)} className="grid gap-2">
-                    <FormItem>
-                        <FormLabel>
-                            <Trans>Name</Trans>
-                        </FormLabel>
-                        <FormControl>
-                            <Input placeholder="" {...form.register('name')} />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    <FormItem>
-                        <FormLabel>
-                            <Trans>Code</Trans>
-                        </FormLabel>
-                        <FormControl>
-                            <Input placeholder="" {...form.register('code')} />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                    <div className="flex justify-end">
-                        <Button type="submit" size="sm">
-                            <Trans>Save changes</Trans>
-                        </Button>
-                    </div>
-                </form>
-            </Form>
-        </div>
-    );
-}