@vendure/dashboard 3.8.1-master-202610220213 → 3.8.1

package/src/lib/providers/user-settings.tsx

@@ -1,4 +1,5 @@
-import { LS_KEY_USER_SETTINGS } from '@/vdb/constants.js';
+import { LS_KEY_USER_SETTINGS, SETTINGS_STORE_KEY_USER_SETTINGS } from '@/vdb/constants.js';
+import { isForbiddenError } from '@/vdb/utils/is-forbidden-error.js';
 import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnFiltersState } from '@tanstack/react-table';
 import React, { createContext, useEffect, useRef, useState } from 'react';
@@ -136,8 +137,6 @@ export interface UserSettingsContextType {
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
 
-const SETTINGS_STORE_KEY = 'vendure.dashboard.userSettings';
-
 interface UserSettingsProviderProps {
     queryClient?: QueryClient;
     children: React.ReactNode;
@@ -171,8 +170,8 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
         isError: serverSettingsErrored,
         error,
     } = useQuery({
-        queryKey: ['user-settings', SETTINGS_STORE_KEY],
-        queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY }),
+        queryKey: ['user-settings', SETTINGS_STORE_KEY_USER_SETTINGS],
+        queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY_USER_SETTINGS }),
         retry: false,
         staleTime: 0,
         enabled: settingsStoreIsAvailable,
@@ -181,7 +180,9 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     useEffect(() => {
         if (
             settingsStoreIsAvailable &&
-            error?.message.includes('Settings store field not registered: vendure.dashboard.userSettings')
+            error?.message.includes(
+                `Settings store field not registered: ${SETTINGS_STORE_KEY_USER_SETTINGS}`,
+            )
         ) {
             logSettingsStoreWarning();
             setSettingsStoreIsAvailable(false);
@@ -192,7 +193,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     const saveToServerMutation = useMutation({
         mutationFn: (settingsToSave: UserSettings) =>
             api.mutate(setSettingsStoreValueDocument, {
-                input: { key: SETTINGS_STORE_KEY, value: settingsToSave },
+                input: { key: SETTINGS_STORE_KEY_USER_SETTINGS, value: settingsToSave },
             }),
         onSuccess: (_, settingsSaved) => {
             // Only update serverSettings after successful save
@@ -205,9 +206,11 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
         },
     });
 
-    // Initialize settings from server if available
+    // Initialize settings from the first successful read of the server value. Until then
+    // `serverSettings` stays null, which stops the save effect below from writing this
+    // browser's local copy over the stored value.
     useEffect(() => {
-        if (isReady) {
+        if (serverSettings) {
             return;
         }
         if (serverSettingsLoaded) {
@@ -230,13 +233,26 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
                 setServerSettings(settings);
                 setIsReady(true);
             }
-        } else if (serverSettingsErrored) {
-            // Fetch failed and won't retry (retry: false); fall back to local settings and mark
-            // ready so consumers gating on `settingsReady` don't hang forever.
-            setServerSettings(settings);
+            return;
+        }
+        // A FORBIDDEN read (no session yet) initializes nothing: login() re-reads the settings.
+        // A signed-in user whose channel token grants no permissions gets FORBIDDEN too, and the
+        // settings stay not ready until a later read succeeds, e.g. after a channel switch.
+        if (serverSettingsErrored && !isForbiddenError(error)) {
+            // The read won't retry (retry: false). Mark ready so consumers gating on
+            // `settingsReady` don't hang forever, but leave `serverSettings` unset: the local
+            // copy was never read from the server, so it must not be saved over the stored
+            // value. A later successful read still initializes the settings.
             setIsReady(true);
         }
-    }, [serverSettingsLoaded, serverSettingsErrored, serverSettingsResponse, settings, isReady]);
+    }, [
+        serverSettings,
+        serverSettingsLoaded,
+        serverSettingsErrored,
+        error,
+        serverSettingsResponse,
+        settings,
+    ]);
 
     // Save settings to localStorage whenever they change
     useEffect(() => {

package/src/lib/storage-keys.ts

@@ -1,5 +1,5 @@
 /**
- * The local storage keys, kept in their own module so the Playwright suite can
+ * The local storage and settings store keys, kept in their own module so the Playwright suite can
  * import them. They cannot live in `constants.ts`, because that imports
  * `schema-enums.js`, which imports `virtual:admin-api-schema` — a module only
  * the Vite build provides. Importing `constants.ts` from Playwright's Node
@@ -14,3 +14,5 @@ export const LS_KEY_USER_SETTINGS = 'vendure-user-settings';
 export const LS_KEY_SELECTED_CHANNEL_TOKEN = 'vendure-selected-channel-token';
 export const LS_KEY_SHIPPING_TEST_ORDER = 'vendure-shipping-test-order';
 export const LS_KEY_SHIPPING_TEST_ADDRESS = 'vendure-shipping-test-address';
+/** The settings store key under which the server stores the user settings. */
+export const SETTINGS_STORE_KEY_USER_SETTINGS = 'vendure.dashboard.userSettings';

package/src/lib/utils/is-forbidden-error.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a GraphQL request failed because the request has no session or lacks permission.
+ * `api.query`/`api.mutate` throw a `GraphQLRequestError`, which carries the Vendure error
+ * code in `extensions.code`.
+ */
+export function isForbiddenError(error: unknown): boolean {
+    const code = (error as { extensions?: { code?: unknown } } | null)?.extensions?.code;
+    return code === 'FORBIDDEN' || code === 'UNAUTHORIZED';
+}

package/src/lib/virtual.d.ts

@@ -13,12 +13,6 @@ declare module 'virtual:plugin-translations' {
     export default translations;
 }
 
-declare module 'virtual:vendure-platform-promotion' {
-    import { DashboardPromotionV1 } from '@/vdb/framework/platform-promotion/platform-promotion-types.js';
-    export const dashboardPromotion: DashboardPromotionV1;
-    export const licenseGuardConfigured: boolean;
-}
-
 declare module 'virtual:vendure-ui-config' {
     import { LanguageCode } from '@vendure/core';
 

package/dist/vite/vite-plugin-platform-promotion.d.ts

@@ -1,25 +0,0 @@
-import { DashboardPromotionV1 } from '@vendure/common/lib/platform-promotion';
-import { Plugin } from 'vite';
-export declare const PLATFORM_CATALOG_URL = "https://api.vendure.io/v1/catalog";
-export declare const PLATFORM_CATALOG_TIMEOUT_MS = 2000;
-/**
- * Set this environment variable to `true` to skip the catalog fetch. The build then uses
- * the snapshot that ships with `@vendure/common`.
- */
-export declare const SKIP_PLATFORM_CATALOG_FETCH_ENV = "VENDURE_DASHBOARD_SKIP_PLATFORM_CATALOG_FETCH";
-/**
- * Fetches the `dashboardPromotion` data from the Vendure catalog one time. If the fetch
- * is skipped, fails, takes longer than the timeout or returns an unknown version, it
- * returns the snapshot that ships with `@vendure/common`. It never throws.
- */
-export declare function loadDashboardPromotion(log?: (message: string) => void): Promise<DashboardPromotionV1>;
-/**
- * This Vite plugin supplies the `virtual:vendure-platform-promotion` module. It holds the
- * Platform catalog data (`dashboardPromotion`) that the Dashboard uses to show locked
- * Platform items, and `licenseGuardConfigured`, which is `true` when the Vendure config
- * contains the License Guard plugin.
- *
- * The data is read at build time (and at dev server start), so the browser makes no
- * request to `api.vendure.io`.
- */
-export declare function platformPromotionPlugin(): Plugin;

package/dist/vite/vite-plugin-platform-promotion.js

@@ -1,83 +0,0 @@
-import { isDashboardPromotionV1 } from '@vendure/common/lib/platform-promotion';
-import { platformPromotionSnapshot } from '@vendure/common/lib/platform-promotion-snapshot';
-import { getActivePluginNames } from './utils/get-active-plugin-info.js';
-import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
-const virtualModuleId = 'virtual:vendure-platform-promotion';
-const resolvedVirtualModuleId = `\0${virtualModuleId}`;
-export const PLATFORM_CATALOG_URL = 'https://api.vendure.io/v1/catalog';
-export const PLATFORM_CATALOG_TIMEOUT_MS = 2000;
-/**
- * Set this environment variable to `true` to skip the catalog fetch. The build then uses
- * the snapshot that ships with `@vendure/common`.
- */
-export const SKIP_PLATFORM_CATALOG_FETCH_ENV = 'VENDURE_DASHBOARD_SKIP_PLATFORM_CATALOG_FETCH';
-const LICENSE_GUARD_PLUGIN_NAME = 'LicenseGuardPlugin';
-/**
- * Fetches the `dashboardPromotion` data from the Vendure catalog one time. If the fetch
- * is skipped, fails, takes longer than the timeout or returns an unknown version, it
- * returns the snapshot that ships with `@vendure/common`. It never throws.
- */
-export async function loadDashboardPromotion(log = () => undefined) {
-    if (process.env[SKIP_PLATFORM_CATALOG_FETCH_ENV] === 'true') {
-        return platformPromotionSnapshot;
-    }
-    try {
-        const response = await fetch(PLATFORM_CATALOG_URL, {
-            signal: AbortSignal.timeout(PLATFORM_CATALOG_TIMEOUT_MS),
-        });
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}`);
-        }
-        const body = (await response.json());
-        if (!isDashboardPromotionV1(body === null || body === void 0 ? void 0 : body.dashboardPromotion)) {
-            throw new Error('the response has no valid dashboardPromotion with version 1');
-        }
-        return body.dashboardPromotion;
-    }
-    catch (e) {
-        const reason = e instanceof Error ? e.message : String(e);
-        log(`Could not fetch the Platform catalog (${reason}). Using the bundled snapshot.`);
-        return platformPromotionSnapshot;
-    }
-}
-/**
- * This Vite plugin supplies the `virtual:vendure-platform-promotion` module. It holds the
- * Platform catalog data (`dashboardPromotion`) that the Dashboard uses to show locked
- * Platform items, and `licenseGuardConfigured`, which is `true` when the Vendure config
- * contains the License Guard plugin.
- *
- * The data is read at build time (and at dev server start), so the browser makes no
- * request to `api.vendure.io`.
- */
-export function platformPromotionPlugin() {
-    let configLoaderApi;
-    let dashboardPromotion;
-    return {
-        name: 'vendure:platform-promotion',
-        configResolved({ plugins }) {
-            configLoaderApi = getConfigLoaderApi(plugins);
-        },
-        buildStart() {
-            dashboardPromotion !== null && dashboardPromotion !== void 0 ? dashboardPromotion : (dashboardPromotion = loadDashboardPromotion(message => this.warn(message)));
-        },
-        resolveId(id) {
-            if (id === virtualModuleId) {
-                return resolvedVirtualModuleId;
-            }
-        },
-        async load(id) {
-            if (id === resolvedVirtualModuleId) {
-                dashboardPromotion !== null && dashboardPromotion !== void 0 ? dashboardPromotion : (dashboardPromotion = loadDashboardPromotion(message => this.warn(message)));
-                const [promotion, { vendureConfig }] = await Promise.all([
-                    dashboardPromotion,
-                    configLoaderApi.getVendureConfig(),
-                ]);
-                const licenseGuardConfigured = getActivePluginNames(vendureConfig).has(LICENSE_GUARD_PLUGIN_NAME);
-                return [
-                    `export const dashboardPromotion = ${JSON.stringify(promotion)};`,
-                    `export const licenseGuardConfigured = ${JSON.stringify(licenseGuardConfigured)};`,
-                ].join('\n');
-            }
-        },
-    };
-}

package/src/lib/framework/platform-promotion/platform-granted-capabilities.ts

@@ -1,71 +0,0 @@
-import { globalRegistry } from '../registry/global-registry.js';
-
-export interface PlatformGrantedCapabilitiesStore {
-    capabilities: ReadonlySet<string> | undefined;
-    listeners: Set<() => void>;
-}
-
-globalRegistry.register('platformGrantedCapabilities', {
-    capabilities: undefined,
-    listeners: new Set(),
-});
-
-/**
- * @description
- * Reports the Vendure Platform capability keys that the current license grants. The
- * Dashboard shows a locked item for each promoted Platform capability that is not in
- * this set. The License Guard Dashboard extension calls this function. Each call
- * replaces the earlier set.
- *
- * The Dashboard applies these rules:
- *
- * - The Vendure config has no `LicenseGuardPlugin`: the granted set is empty, and the
- *   Dashboard shows all locked items on the first render.
- * - The Vendure config has the `LicenseGuardPlugin` and this function was called: the
- *   Dashboard uses the reported set.
- * - The Vendure config has the `LicenseGuardPlugin` and this function was not called
- *   (yet): the Dashboard shows no locked items.
- *
- * Call it before the first render if you can, for example at the top level of the
- * extension entry file, or from a `customProviders` component that loads the grants.
- *
- * @example
- * ```ts
- * import { defineDashboardExtension, setPlatformGrantedCapabilities } from '@vendure/dashboard';
- *
- * setPlatformGrantedCapabilities(['org.accounts', 'quote.requests']);
- *
- * defineDashboardExtension({});
- * ```
- *
- * @docsCategory extensions-api
- * @docsPage PlatformPromotion
- * @since 3.8.1
- */
-export function setPlatformGrantedCapabilities(capabilities: readonly string[]) {
-    const store = globalRegistry.get('platformGrantedCapabilities');
-    store.capabilities = new Set(capabilities);
-    for (const listener of store.listeners) {
-        listener();
-    }
-}
-
-/**
- * @description
- * Returns the capability keys that were reported with {@link setPlatformGrantedCapabilities},
- * or `undefined` if nothing was reported.
- *
- * @internal
- */
-export function getReportedPlatformGrantedCapabilities(): ReadonlySet<string> | undefined {
-    return globalRegistry.get('platformGrantedCapabilities').capabilities;
-}
-
-/**
- * @internal
- */
-export function subscribeToPlatformGrantedCapabilities(listener: () => void): () => void {
-    const { listeners } = globalRegistry.get('platformGrantedCapabilities');
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-}

package/src/lib/framework/platform-promotion/platform-promotion-types.ts

@@ -1,5 +0,0 @@
-export type {
-    DashboardPromotionCapabilityV1,
-    DashboardPromotionV1,
-    PlatformTier,
-} from '@vendure/common/lib/platform-promotion';

package/src/lib/hooks/use-platform-promotion.spec.tsx

@@ -1,117 +0,0 @@
-import { act } from 'react';
-import { createRoot } from 'react-dom/client';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { DashboardPromotionV1 } from '@/vdb/framework/platform-promotion/platform-promotion-types.js';
-import { globalRegistry } from '@/vdb/framework/registry/global-registry.js';
-
-(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-const dashboardPromotion: DashboardPromotionV1 = {
-    version: 1,
-    navSections: [],
-    navItems: [],
-    pageBlocks: [],
-    actions: [],
-    capabilities: [
-        {
-            key: 'org.accounts',
-            tier: 'starter',
-            title: 'Company accounts',
-            summary: 'Summary',
-            benefits: ['One', 'Two', 'Three'],
-            cta: 'trial',
-        },
-    ],
-};
-
-async function importWithLicenseGuard(licenseGuardConfigured: boolean) {
-    vi.resetModules();
-    vi.doMock('virtual:vendure-platform-promotion', () => ({
-        dashboardPromotion,
-        licenseGuardConfigured,
-    }));
-    const hook = await import('./use-platform-promotion.js');
-    const extensionPoint =
-        await import('@/vdb/framework/platform-promotion/platform-granted-capabilities.js');
-    return { ...hook, ...extensionPoint };
-}
-
-describe('usePlatformPromotion', () => {
-    afterEach(() => {
-        vi.unstubAllGlobals();
-    });
-
-    beforeEach(() => {
-        // No test may reach a real host.
-        vi.stubGlobal(
-            'fetch',
-            vi.fn(() => Promise.reject(new Error('Unexpected fetch'))),
-        );
-        const store = globalRegistry.get('platformGrantedCapabilities');
-        if (store) {
-            store.capabilities = undefined;
-        }
-    });
-
-    it('License Guard not configured: the granted set is empty and all items are locked at once', async () => {
-        const { getPlatformPromotion } = await importWithLicenseGuard(false);
-
-        const state = getPlatformPromotion();
-        expect(state.licenseGuardConfigured).toBe(false);
-        expect(state.hideAll).toBe(false);
-        expect(state.grantedCapabilities.size).toBe(0);
-        expect(state.isLocked('org.accounts')).toBe(true);
-        expect(state.capabilities.get('org.accounts')?.tier).toBe('starter');
-    });
-
-    it('License Guard configured and it reports a granted set: the set is used', async () => {
-        const { getPlatformPromotion, setPlatformGrantedCapabilities } = await importWithLicenseGuard(true);
-
-        setPlatformGrantedCapabilities(['org.accounts']);
-
-        const state = getPlatformPromotion();
-        expect(state.hideAll).toBe(false);
-        expect([...state.grantedCapabilities]).toEqual(['org.accounts']);
-        expect(state.isLocked('org.accounts')).toBe(false);
-        expect(state.isLocked('quote.requests')).toBe(true);
-    });
-
-    it('License Guard configured but it reports nothing: all locked items are hidden', async () => {
-        const { getPlatformPromotion } = await importWithLicenseGuard(true);
-
-        const state = getPlatformPromotion();
-        expect(state.hideAll).toBe(true);
-        expect(state.isLocked('org.accounts')).toBe(false);
-    });
-
-    it('renders again when License Guard reports the granted set', async () => {
-        const { usePlatformPromotion, setPlatformGrantedCapabilities } = await importWithLicenseGuard(true);
-        const states: Array<{ hideAll: boolean; locked: boolean }> = [];
-        function Probe() {
-            const { hideAll, isLocked } = usePlatformPromotion();
-            states.push({ hideAll, locked: isLocked('quote.requests') });
-            return null;
-        }
-        const container = document.createElement('div');
-        const root = createRoot(container);
-
-        await act(async () => root.render(<Probe />));
-        await act(async () => setPlatformGrantedCapabilities(['org.accounts']));
-        await act(async () => root.unmount());
-
-        expect(states[0]).toEqual({ hideAll: true, locked: false });
-        expect(states[states.length - 1]).toEqual({ hideAll: false, locked: true });
-    });
-
-    it('renders with renderToStaticMarkup', async () => {
-        const { usePlatformPromotion } = await importWithLicenseGuard(false);
-        function Probe() {
-            const { isLocked } = usePlatformPromotion();
-            return <span>{String(isLocked('org.accounts'))}</span>;
-        }
-
-        expect(renderToStaticMarkup(<Probe />)).toBe('<span>true</span>');
-    });
-});

package/src/lib/hooks/use-platform-promotion.ts

@@ -1,117 +0,0 @@
-import {
-    getReportedPlatformGrantedCapabilities,
-    subscribeToPlatformGrantedCapabilities,
-} from '@/vdb/framework/platform-promotion/platform-granted-capabilities.js';
-import {
-    DashboardPromotionCapabilityV1,
-    DashboardPromotionV1,
-} from '@/vdb/framework/platform-promotion/platform-promotion-types.js';
-import { useSyncExternalStore } from 'react';
-import { dashboardPromotion, licenseGuardConfigured } from 'virtual:vendure-platform-promotion';
-
-/**
- * @description
- * The data that the Dashboard needs to show locked Vendure Platform items. It is
- * returned by {@link usePlatformPromotion}.
- *
- * @docsCategory extensions-api
- * @docsPage PlatformPromotion
- * @since 3.8.1
- */
-export interface PlatformPromotionState {
-    /**
-     * @description
-     * The Platform catalog data, read at build time. If the build could not fetch it,
-     * this is the snapshot that ships with `@vendure/common`.
-     */
-    promotion: DashboardPromotionV1;
-    /**
-     * @description
-     * `promotion.capabilities`, keyed by capability key.
-     */
-    capabilities: ReadonlyMap<string, DashboardPromotionCapabilityV1>;
-    /**
-     * @description
-     * `true` when the Vendure config contains the `LicenseGuardPlugin`.
-     */
-    licenseGuardConfigured: boolean;
-    /**
-     * @description
-     * The capability keys that the license grants. Empty when License Guard is not configured.
-     */
-    grantedCapabilities: ReadonlySet<string>;
-    /**
-     * @description
-     * `true` when the Dashboard must show no locked items: License Guard is configured
-     * but it did not report a granted set.
-     */
-    hideAll: boolean;
-    /**
-     * @description
-     * Returns `true` when the Dashboard shows the locked item for the capability:
-     * `hideAll` is `false` and the capability is not granted.
-     */
-    isLocked: (capability: string) => boolean;
-}
-
-const EMPTY_SET: ReadonlySet<string> = new Set();
-const capabilities = new Map<string, DashboardPromotionCapabilityV1>(
-    dashboardPromotion.capabilities.map(c => [c.key, c]),
-);
-let cachedState: PlatformPromotionState | undefined;
-let cachedReported: ReadonlySet<string> | undefined;
-
-function createState(reported: ReadonlySet<string> | undefined): PlatformPromotionState {
-    const hideAll = licenseGuardConfigured && !reported;
-    // Without License Guard nothing can grant a capability, so a reported set is not used.
-    const grantedCapabilities = (licenseGuardConfigured && reported) || EMPTY_SET;
-    return {
-        promotion: dashboardPromotion,
-        capabilities,
-        licenseGuardConfigured,
-        grantedCapabilities,
-        hideAll,
-        isLocked: capability => !hideAll && !grantedCapabilities.has(capability),
-    };
-}
-
-/**
- * @description
- * Returns the current {@link PlatformPromotionState} outside of React.
- * Use {@link usePlatformPromotion} in components.
- *
- * @docsCategory extensions-api
- * @docsPage PlatformPromotion
- * @since 3.8.1
- */
-export function getPlatformPromotion(): PlatformPromotionState {
-    const reported = getReportedPlatformGrantedCapabilities();
-    if (!cachedState || reported !== cachedReported) {
-        cachedState = createState(reported);
-        cachedReported = reported;
-    }
-    return cachedState;
-}
-
-/**
- * @description
- * Returns the {@link PlatformPromotionState}. The component renders again when
- * {@link setPlatformGrantedCapabilities} reports a new granted set.
- *
- * @example
- * ```tsx
- * const { promotion, isLocked } = usePlatformPromotion();
- * const lockedNavItems = promotion.navItems.filter(item => item.promoted && isLocked(item.capability));
- * ```
- *
- * @docsCategory extensions-api
- * @docsPage PlatformPromotion
- * @since 3.8.1
- */
-export function usePlatformPromotion(): PlatformPromotionState {
-    return useSyncExternalStore(
-        subscribeToPlatformGrantedCapabilities,
-        getPlatformPromotion,
-        getPlatformPromotion,
-    );
-}