Fix more withMultiSite HOC ts errors

SalesforceCommerceCloud · Feb 5, 2025 · b85f9df · b85f9df
1 parent 6344ea9
commit b85f9df
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/packages/extension-chakra-storefront/src/components/with-multi-site/with-multi-site.test.tsx b/packages/extension-chakra-storefront/src/components/with-multi-site/with-multi-site.test.tsx
@@ -13,6 +13,7 @@ import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hook
 import {createUrlTemplate} from '../../utils/url'
 import {resolveSiteFromUrl, resolveLocaleFromUrl} from '../../utils/site-utils'
 import {useExtensionConfig} from '../../hooks/use-extension-config'
+import {UserConfig} from '../../types/config'
 
 // Mock dependencies
 jest.mock('@salesforce/pwa-kit-react-sdk/ssr/universal/hooks', () => ({
@@ -30,7 +31,7 @@ jest.mock('../../utils/site-utils', () => ({
 }))
 
 const mockUseServerContext = useServerContext as jest.MockedFunction<typeof useServerContext>
-const mockUseConfig = useExtensionConfig as jest.MockedFunction<typeof useExtensionConfig>
+const mockUseConfig = useExtensionConfig as jest.MockedFunction<() => UserConfig>
 const mockCreateUrlTemplate = createUrlTemplate as jest.MockedFunction<typeof createUrlTemplate>
 const mockResolveSiteFromUrl = resolveSiteFromUrl as jest.MockedFunction<typeof resolveSiteFromUrl>
 const mockResolveLocaleFromUrl = resolveLocaleFromUrl as jest.MockedFunction<
@@ -51,7 +52,43 @@ describe('withMultiSite HOC', () => {
             res: {}
         })
         mockUseConfig.mockReturnValue({
-            defaultAppLocale: 'en-US'
+            defaultAppLocale: 'en-US',
+            commerceAPI: {
+                proxyPath: '/api/proxy',
+                parameters: {
+                    clientId: 'your-client-id',
+                    organizationId: 'your-org-id',
+                    shortCode: 'your-short-code',
+                    siteId: 'your-site-id'
+                }
+            },
+            categoryNav: {
+                defaultNavSsrDepth: 3,
+                defaultRootCategory: 'root-category'
+            },
+            defaultSite: 'site-1',
+            defaultSiteTitle: 'Default Site Title',
+            einsteinAPI: {
+                host: 'https://example.com',
+                einsteinId: 'your-einstein-id',
+                siteId: 'your-site-id',
+                isProduction: false
+            },
+            maxCacheAge: 3600,
+            search: {
+                defaultLimitValues: [10, 20, 50],
+                defaultSearchParams: {
+                    limit: 10,
+                    offset: 0,
+                    sort: 'relevance',
+                    refine: []
+                },
+                recentSearchKey: 'recentSearch',
+                recentSearchLimit: 5,
+                recentSearchMinLength: 3
+            },
+            sites: [],
+            staleWhileRevalidate: 60
         })
         mockResolveSiteFromUrl.mockReturnValue({id: 'site-id', alias: 'site-alias'})
         mockResolveLocaleFromUrl.mockReturnValue({id: 'locale-id'})

diff --git a/packages/extension-chakra-storefront/src/components/with-multi-site/with-multi-site.tsx b/packages/extension-chakra-storefront/src/components/with-multi-site/with-multi-site.tsx
@@ -32,7 +32,11 @@ const withMultiSite = <P extends object>(WrappedComponent: React.ComponentType<P
         const config: any = useExtensionConfig()
         const site: any = resolveSiteFromUrl(path)
         const locale: any = resolveLocaleFromUrl(path)
-        const buildUrl = createUrlTemplate(config, site.alias || site.id, locale.id)
+        const buildUrl = createUrlTemplate(
+            {defaultAppLocale: config.defaultAppLocale},
+            site.alias || site.id,
+            locale.id
+        )
 
         return (
             <MultiSiteProvider site={site} locale={locale} buildUrl={buildUrl}>

diff --git a/packages/extension-chakra-storefront/src/components/with-react-intl/with-react-intl.tsx b/packages/extension-chakra-storefront/src/components/with-react-intl/with-react-intl.tsx
@@ -10,7 +10,7 @@ import {IntlProvider} from 'react-intl'
 import {useQuery} from '@tanstack/react-query'
 import {useLocation} from 'react-router-dom'
 
-import type {ApplicationExtensionConfig} from '@salesforce/pwa-kit-extension-sdk/types'
+import {UserConfig} from '../../types/config'
 
 // Local Imports
 import {getTargetLocale, fetchTranslations} from '../../utils/locale'
@@ -19,11 +19,6 @@ import logger from '../../utils/logger-instance'
 import useMultiSite from '../../hooks/use-multi-site'
 import {useExtensionConfig} from '../../hooks'
 
-// Define a type for the ApplicationExtensionConfig including defaultAppLocale
-interface ExtendedApplicationExtensionConfig extends ApplicationExtensionConfig {
-    defaultAppLocale: string
-}
-
 // Define a type for the HOC props
 type WithReactIntlProps = React.ComponentPropsWithoutRef<any>
 
@@ -32,7 +27,7 @@ const withReactIntl = <P extends object>(WrappedComponent: React.ComponentType<P
     const WithReactIntl: React.FC<P> = (props: WithReactIntlProps) => {
         const {site, locale} = useMultiSite()
         const location = useLocation()
-        const config = useExtensionConfig() as ExtendedApplicationExtensionConfig
+        const config = useExtensionConfig() as UserConfig
         const targetLocale = getTargetLocale({
             getUserPreferredLocales: () => {
                 // CONFIG: This function should return an array of preferred locales. They can be