refactor(dashboard): Use constants for all localStorage keys

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx

@@ -3,6 +3,7 @@ import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/compone
 import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { LS_KEY_SHIPPING_TEST_ADDRESS } from '@/vdb/constants.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { Trans } from '@lingui/react/macro';
@@ -43,20 +44,20 @@ export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormPro
     const form = useForm<TestAddress>({
         defaultValues: (() => {
             try {
-                const stored = localStorage.getItem('shippingTestAddress');
+                const stored = localStorage.getItem(LS_KEY_SHIPPING_TEST_ADDRESS);
                 return stored
                     ? JSON.parse(stored)
                     : {
-                        fullName: '',
-                        company: '',
-                        streetLine1: '',
-                        streetLine2: '',
-                        city: '',
-                        province: '',
-                        postalCode: '',
-                        countryCode: '',
-                        phoneNumber: '',
-                    };
+                          fullName: '',
+                          company: '',
+                          streetLine1: '',
+                          streetLine2: '',
+                          city: '',
+                          province: '',
+                          postalCode: '',
+                          countryCode: '',
+                          phoneNumber: '',
+                      };
             } catch {
                 return {
                     fullName: '',
@@ -92,7 +93,7 @@ export function TestAddressForm({ onAddressChange }: Readonly<TestAddressFormPro
                 previousValuesRef.current = currentValueString;
 
                 try {
-                    localStorage.setItem('shippingTestAddress', currentValueString);
+                    localStorage.setItem(LS_KEY_SHIPPING_TEST_ADDRESS, currentValueString);
                 } catch {
                     // Ignore localStorage errors
                 }

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/components/test-order-builder.tsx

@@ -7,6 +7,7 @@ import { AccordionContent, AccordionItem, AccordionTrigger } from '@/vdb/compone
 import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { LS_KEY_SHIPPING_TEST_ORDER } from '@/vdb/constants.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@lingui/react/macro';
@@ -38,7 +39,7 @@ export function TestOrderBuilder({ onOrderLinesChange }: Readonly<TestOrderBuild
     const { activeChannel } = useChannel();
     const [lines, setLines] = useState<TestOrderLine[]>(() => {
         try {
-            const stored = localStorage.getItem('shippingTestOrder');
+            const stored = localStorage.getItem(LS_KEY_SHIPPING_TEST_ORDER);
             return stored ? JSON.parse(stored) : [];
         } catch {
             return [];
@@ -51,7 +52,7 @@ export function TestOrderBuilder({ onOrderLinesChange }: Readonly<TestOrderBuild
 
     useEffect(() => {
         try {
-            localStorage.setItem('shippingTestOrder', JSON.stringify(lines));
+            localStorage.setItem(LS_KEY_SHIPPING_TEST_ORDER, JSON.stringify(lines));
         } catch {
             // Ignore localStorage errors
         }

packages/dashboard/src/lib/constants.ts

@@ -3,6 +3,15 @@ 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_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.

packages/dashboard/src/lib/graphql/api.ts

@@ -1,3 +1,4 @@
+import { LS_KEY_SELECTED_CHANNEL_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 +13,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,7 +20,7 @@ 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 headers = new Headers(options.headers);
 
         if (channelToken) {
@@ -31,7 +30,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;

packages/dashboard/src/lib/providers/auth.tsx

@@ -1,4 +1,5 @@
-import { api, SELECTED_CHANNEL_TOKEN_KEY } from '@/vdb/graphql/api.js';
+import { LS_KEY_SELECTED_CHANNEL_TOKEN } from '@/vdb/constants.js';
+import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -170,7 +171,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                     // Clear all cached queries to prevent stale data
                     queryClient.clear();
                     // Clear selected channel from localStorage
-                    localStorage.removeItem(SELECTED_CHANNEL_TOKEN_KEY);
+                    localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
                     setStatus('unauthenticated');
                     setIsLoginLogoutInProgress(false);
                     onLogoutSuccess?.();

packages/dashboard/src/lib/providers/channel-provider.tsx

@@ -1,4 +1,5 @@
-import { api, SELECTED_CHANNEL_TOKEN_KEY } from '@/vdb/graphql/api.js';
+import { LS_KEY_SELECTED_CHANNEL_TOKEN } from '@/vdb/constants.js';
+import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
@@ -94,7 +95,7 @@ export interface ChannelContext {
  */
 function setChannelTokenInLocalStorage(channelToken: string) {
     try {
-        localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, channelToken);
+        localStorage.setItem(LS_KEY_SELECTED_CHANNEL_TOKEN, channelToken);
     } catch (e) {
         console.error('Failed to store selected channel in localStorage', e);
     }

packages/dashboard/src/lib/providers/user-settings.tsx

@@ -1,3 +1,4 @@
+import { LS_KEY_USER_SETTINGS } from '@/vdb/constants.js';
 import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnFiltersState } from '@tanstack/react-table';
 import React, { createContext, useEffect, useRef, useState } from 'react';
@@ -69,7 +70,6 @@ export interface UserSettingsContextType {
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
 
-const STORAGE_KEY = 'vendure-user-settings';
 const SETTINGS_STORE_KEY = 'vendure.dashboard.userSettings';
 
 interface UserSettingsProviderProps {
@@ -81,7 +81,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     // Load settings from localStorage or use defaults
     const loadSettings = (): UserSettings => {
         try {
-            const storedSettings = localStorage.getItem(STORAGE_KEY);
+            const storedSettings = localStorage.getItem(LS_KEY_USER_SETTINGS);
             if (storedSettings) {
                 return { ...defaultSettings, ...JSON.parse(storedSettings) };
             }
@@ -105,10 +105,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
         error,
     } = useQuery({
         queryKey: ['user-settings', SETTINGS_STORE_KEY],
-        queryFn: () => {
-            console.log('runnign query, settingsStoreAvailable:', settingsStoreIsAvailable);
-            return api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY });
-        },
+        queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY }),
         retry: false,
         staleTime: 0,
         enabled: settingsStoreIsAvailable,
@@ -169,7 +166,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     // Save settings to localStorage whenever they change
     useEffect(() => {
         try {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+            localStorage.setItem(LS_KEY_USER_SETTINGS, JSON.stringify(settings));
         } catch (e) {
             console.error('Failed to save user settings to localStorage', e);
         }