@vendure/dashboard 3.5.0-minor-202510012036 → 3.5.0-minor-202510071456

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -7,9 +7,8 @@ import {
 } from '@/vdb/components/ui/breadcrumb.js';
 import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
-import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useLingui } from '@lingui/react';
-import { Link, useRouter, useRouterState } from '@tanstack/react-router';
+import { Link, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import { Fragment } from 'react';
 
@@ -25,11 +24,8 @@ export type PageBreadcrumb = BreadcrumbPair | BreadcrumbShorthand;
 export function GeneratedBreadcrumbs() {
     const matches = useRouterState({ select: s => s.matches });
     const currentPath = useRouterState({ select: s => s.location.pathname });
-    const router = useRouter();
     const { i18n } = useLingui();
     const navMenuConfig = getNavMenuConfig();
-    const { bcp47Tag } = useDisplayLocale();
-    const basePath = router.basepath || '';
 
     const normalizeBreadcrumb = (breadcrumb: any, pathname: string): BreadcrumbPair[] => {
         if (typeof breadcrumb === 'string') {
@@ -58,12 +54,11 @@ export function GeneratedBreadcrumbs() {
             .flatMap(({ pathname, loaderData }) => normalizeBreadcrumb(loaderData.breadcrumb, pathname));
     }, [matches]);
 
-    const isBaseRoute = (p: string) => p === basePath || p === `${basePath}/`;
+    const isBaseRoute = (p: string) => p === '' || p === `/`;
     const pageCrumbs: BreadcrumbPair[] = rawCrumbs.filter(c => !isBaseRoute(c.path));
 
     const normalizePath = (path: string): string => {
-        const normalizedPath = basePath && path.startsWith(basePath) ? path.slice(basePath.length) : path;
-        return normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`;
+        return path.startsWith('/') ? path : `/${path}`;
     };
 
     const pathMatches = (cleanPath: string, rawUrl?: string): boolean => {
@@ -115,10 +110,7 @@ export function GeneratedBreadcrumbs() {
         return undefined;
     };
 
-    const sectionCrumb = React.useMemo(
-        () => findSectionCrumb(currentPath),
-        [currentPath, basePath, navMenuConfig],
-    );
+    const sectionCrumb = React.useMemo(() => findSectionCrumb(currentPath), [currentPath, navMenuConfig]);
     const breadcrumbs: BreadcrumbPair[] = React.useMemo(() => {
         const arr = sectionCrumb ? [sectionCrumb, ...pageCrumbs] : pageCrumbs;
         return arr.filter(

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -144,7 +144,7 @@ export function interpolateDescription(
         (substring: string, argName: string) => {
             const normalizedArgName = argName.toLowerCase();
             const value = values.find(v => v.name === normalizedArgName)?.value;
-            if (value == null) {
+            if (value == null || value === '') {
                 return '_';
             }
             let formatted = value;

package/src/lib/constants.ts

@@ -3,6 +3,16 @@ export const AUTHENTICATED_ROUTE_PREFIX = '/_authenticated';
 export const DEFAULT_CHANNEL_CODE = '__default_channel__';
 export const SUPER_ADMIN_ROLE_CODE = '__super_admin_role__';
 export const CUSTOMER_ROLE_CODE = '__customer_role__';
+
+/**
+ * Local storage keys
+ */
+export const LS_KEY_SESSION_TOKEN = 'vendure-session-token';
+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';
+
 /**
  * This is copied from the generated types from @vendure/common/lib/generated-types.d.ts
  * It is used to provide a list of available currency codes for the user to select from.

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -5,7 +5,6 @@ import {
     OrderStateCell,
 } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
@@ -39,7 +38,6 @@ export function LatestOrdersWidget() {
             },
         },
     ]);
-    const { formatCurrency } = useLocalFormat();
 
     // Update filters when date range changes
     useEffect(() => {

package/src/lib/framework/extension-api/types/layout.ts

@@ -93,9 +93,49 @@ export type PageBlockLocation = {
  * @since 3.3.0
  */
 export interface DashboardPageBlockDefinition {
+    /**
+     * @description
+     * An ID for the page block. Should be unique at least
+     * to the page in which it appears.
+     */
     id: string;
+    /**
+     * @description
+     * An optional title for the page block
+     */
     title?: React.ReactNode;
+    /**
+     * @description
+     * The location of the page block. It specifies the pageId, and then the
+     * relative location compared to another existing block.
+     */
     location: PageBlockLocation;
-    component: React.FunctionComponent<{ context: PageContextValue }>;
+    /**
+     * @description
+     * The component to be rendered inside the page block.
+     */
+    component?: React.FunctionComponent<{ context: PageContextValue }>;
+    /**
+     * @description
+     * Control whether to render the page block depending on your custom
+     * logic.
+     *
+     * This can also be used to disable any built-in blocks you
+     * do not need to display.
+     *
+     * If you need to query aspects about the current context not immediately
+     * provided in the `PageContextValue`, you can also use hooks such as
+     * `useChannel` in this function.
+     *
+     * @since 3.5.0
+     */
+    shouldRender?: (context: PageContextValue) => boolean;
+    /**
+     * @description
+     * If provided, the logged-in user must have one or more of the specified
+     * permissions in order for the block to render.
+     *
+     * For more advanced control over rendering, use the `shouldRender` function.
+     */
     requiresPermission?: string | string[];
 }

package/src/lib/framework/form-engine/value-transformers.ts

@@ -29,9 +29,16 @@ export const nativeValueTransformer: ValueTransformer = {
  */
 export const jsonStringValueTransformer: ValueTransformer = {
     parse: (value: string, fieldDef: ConfigurableFieldDef) => {
-        if (!value) {
+        if (value === undefined) {
             return getDefaultValue(fieldDef);
         }
+        // This case arises often when the administrator is actively editing
+        // values and clears out the input. At that point, we don't want to suddenly
+        // switch to the default value otherwise it results in poor UX, e.g. pressing
+        // backspace to delete a number would result in `0` suddenly appearing as the value.
+        if (value === '') {
+            return value;
+        }
 
         try {
             // For JSON string mode, parse the string to get the native value

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -119,12 +119,12 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 }
 
 function PageContent({
-                         pageHeader,
-                         pageContent,
-                         form,
-                         submitHandler,
-                         ...props
-                     }: {
+    pageHeader,
+    pageContent,
+    form,
+    submitHandler,
+    ...props
+}: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -146,11 +146,11 @@ function PageContent({
 }
 
 export function PageContentWithOptionalForm({
-                                                form,
-                                                pageHeader,
-                                                pageContent,
-                                                submitHandler,
-                                            }: {
+    form,
+    pageHeader,
+    pageContent,
+    submitHandler,
+}: {
     form?: UseFormReturn<any>;
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
@@ -235,22 +235,32 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
                 childBlock.props.blockId ??
                 (isOfType(childBlock, CustomFieldsPageBlock) ? 'custom-fields' : undefined);
             const extensionBlock = extensionBlocks.find(block => block.location.position.blockId === blockId);
+
             if (extensionBlock) {
-                const ExtensionBlock = (
-                    <PageBlock
-                        key={childBlock.key}
-                        column={extensionBlock.location.column}
-                        blockId={extensionBlock.id}
-                        title={extensionBlock.title}
-                    >
-                        {<extensionBlock.component context={page} />}
-                    </PageBlock>
-                );
+                let extensionBlockShouldRender = true;
+                if (typeof extensionBlock?.shouldRender === 'function') {
+                    extensionBlockShouldRender = extensionBlock.shouldRender(page);
+                }
+                const ExtensionBlock =
+                    extensionBlock.component && extensionBlockShouldRender ? (
+                        <PageBlock
+                            key={childBlock.key}
+                            column={extensionBlock.location.column}
+                            blockId={extensionBlock.id}
+                            title={extensionBlock.title}
+                        >
+                            {<extensionBlock.component context={page} />}
+                        </PageBlock>
+                    ) : undefined;
                 if (extensionBlock.location.position.order === 'before') {
-                    finalChildArray.push(ExtensionBlock, childBlock);
+                    finalChildArray.push(...[ExtensionBlock, childBlock].filter(x => !!x));
                 } else if (extensionBlock.location.position.order === 'after') {
-                    finalChildArray.push(childBlock, ExtensionBlock);
-                } else if (extensionBlock.location.position.order === 'replace') {
+                    finalChildArray.push(...[childBlock, ExtensionBlock].filter(x => !!x));
+                } else if (
+                    extensionBlock.location.position.order === 'replace' &&
+                    extensionBlockShouldRender &&
+                    ExtensionBlock
+                ) {
                     finalChildArray.push(ExtensionBlock);
                 }
             } else {
@@ -425,9 +435,9 @@ function EntityInfoDropdown({ entity }: Readonly<{ entity: any }>) {
  * @since 3.3.0
  */
 export function PageActionBarRight({
-                                       children,
-                                       dropdownMenuItems,
-                                   }: Readonly<{
+    children,
+    dropdownMenuItems,
+}: Readonly<{
     children: React.ReactNode;
     dropdownMenuItems?: InlineDropdownItem[];
 }>) {
@@ -458,9 +468,9 @@ export function PageActionBarRight({
 }
 
 function PageActionBarItem({
-                               item,
-                               page,
-                           }: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
+    item,
+    page,
+}: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
     return (
         <PermissionGuard requires={item.requiresPermission ?? []}>
             <item.component context={page} />
@@ -469,9 +479,9 @@ function PageActionBarItem({
 }
 
 function PageActionBarDropdown({
-                                   items,
-                                   page,
-                               }: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
+    items,
+    page,
+}: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -550,13 +560,13 @@ export type PageBlockProps = {
  * @since 3.3.0
  */
 export function PageBlock({
-                              children,
-                              title,
-                              description,
-                              className,
-                              blockId,
-                              column,
-                          }: Readonly<PageBlockProps>) {
+    children,
+    title,
+    description,
+    className,
+    blockId,
+    column,
+}: Readonly<PageBlockProps>) {
     const contextValue = useMemo(
         () => ({
             blockId,
@@ -595,10 +605,10 @@ export function PageBlock({
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-                                       children,
-                                       className,
-                                       blockId,
-                                   }: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
+    children,
+    className,
+    blockId,
+}: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
     const contextValue = useMemo(() => ({ blockId, column: 'main' as const }), [blockId]);
     return (
         <PageBlockContext.Provider value={contextValue}>
@@ -625,10 +635,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-                                          column,
-                                          entityType,
-                                          control,
-                                      }: Readonly<{
+    column,
+    entityType,
+    control,
+}: Readonly<{
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

package/src/lib/framework/page/detail-page.tsx

@@ -5,8 +5,8 @@ import { Checkbox } from '@/vdb/components/ui/checkbox.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans } from '@lingui/react/macro';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Trans } from '@lingui/react/macro';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { toast } from 'sonner';
@@ -16,6 +16,7 @@ import {
     getOperationVariablesFields,
 } from '../document-introspection/get-document-structure.js';
 
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
 import { FormControl } from '@/vdb/components/ui/form.js';
 import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
@@ -108,11 +109,7 @@ function FieldInputRenderer<
         case 'Float':
             return (
                 <FormControl>
-                    <Input
-                        type="number"
-                        value={field.value}
-                        onChange={e => field.onChange(e.target.valueAsNumber)}
-                    />
+                    <NumberInput {...field} />
                 </FormControl>
             );
         case 'DateTime':
@@ -152,15 +149,15 @@ export function DetailPage<
     C extends TypedDocumentNode<any, any>,
     U extends TypedDocumentNode<any, any>,
 >({
-      pageId,
-      route,
-      entityName: passedEntityName,
-      queryDocument,
-      createDocument,
-      updateDocument,
-      setValuesForUpdate,
-      title,
-  }: DetailPageProps<T, C, U>) {
+    pageId,
+    route,
+    entityName: passedEntityName,
+    queryDocument,
+    createDocument,
+    updateDocument,
+    setValuesForUpdate,
+    title,
+}: DetailPageProps<T, C, U>) {
     const params = route.useParams();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const navigate = useNavigate();

package/src/lib/graphql/api.ts

@@ -1,3 +1,8 @@
+import {
+    LS_KEY_SELECTED_CHANNEL_TOKEN,
+    LS_KEY_SESSION_TOKEN,
+    LS_KEY_USER_SETTINGS,
+} from '@/vdb/constants.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AwesomeGraphQLClient } from 'awesome-graphql-client';
 import { DocumentNode, print } from 'graphql';
@@ -12,8 +17,6 @@ const API_URL =
     `:${uiConfig.api.port !== 'auto' ? uiConfig.api.port : window.location.port}` +
     `/${uiConfig.api.adminApiPath}`;
 
-export const SELECTED_CHANNEL_TOKEN_KEY = 'vendure-selected-channel-token';
-
 export type Variables = object;
 export type RequestDocument = string | DocumentNode;
 
@@ -21,9 +24,13 @@ const awesomeClient = new AwesomeGraphQLClient({
     endpoint: API_URL,
     fetch: async (url: string, options: RequestInit = {}) => {
         // Get the active channel token from localStorage
-        const channelToken = localStorage.getItem(SELECTED_CHANNEL_TOKEN_KEY);
+        const channelToken = localStorage.getItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+        const sessionToken = localStorage.getItem(LS_KEY_SESSION_TOKEN);
         const headers = new Headers(options.headers);
 
+        if (sessionToken) {
+            headers.set('Authorization', `Bearer ${sessionToken}`);
+        }
         if (channelToken) {
             headers.set(uiConfig.api.channelTokenKey, channelToken);
         }
@@ -31,7 +38,7 @@ const awesomeClient = new AwesomeGraphQLClient({
         // Get the content language from user settings and add as query parameter
         let finalUrl = url;
         try {
-            const userSettings = localStorage.getItem('vendure-user-settings');
+            const userSettings = localStorage.getItem(LS_KEY_USER_SETTINGS);
             if (userSettings) {
                 const settings = JSON.parse(userSettings);
                 const contentLanguage = settings.contentLanguage;
@@ -52,6 +59,12 @@ const awesomeClient = new AwesomeGraphQLClient({
             headers,
             credentials: 'include',
             mode: 'cors',
+        }).then(res => {
+            const authToken = res.headers.get('vendure-auth-token');
+            if (authToken) {
+                localStorage.setItem(LS_KEY_SESSION_TOKEN, authToken);
+            }
+            return res;
         });
     },
 });