fix: allow to create the brand fallback urls when {} is defined in PARAGON_THEMES_URLS (#785)

Author: dcoa

src/react/hooks/paragon/useParagonThemeUrls.js

@@ -102,27 +102,42 @@ const useParagonThemeUrls = () => useMemo(() => {
 
   // If we don't have  the core default or any theme variants, use the PARAGON_THEME
   if (!coreCss.default || isEmptyObject(themeVariantsCss) || isEmptyObject(defaultThemeVariants)) {
-    const localCoreUrl = PARAGON_THEME.paragon?.themeUrls?.core;
-    const localThemeVariants = PARAGON_THEME.paragon?.themeUrls?.variants;
-    const localDefaultThemeVariants = PARAGON_THEME.paragon?.themeUrls?.defaults;
+    const localParagonCoreUrl = PARAGON_THEME?.paragon?.themeUrls?.core;
+    const localParagonThemeVariants = PARAGON_THEME?.paragon?.themeUrls?.variants;
+    const localParagonDefaultThemeVariants = PARAGON_THEME?.paragon?.themeUrls?.defaults;
 
-    if (isEmptyObject(localCoreUrl) || isEmptyObject(localThemeVariants)) {
+    const localBrandCoreUrl = PARAGON_THEME?.brand?.themeUrls?.core;
+    const localBrandThemeVariants = PARAGON_THEME?.brand?.themeUrls?.variants;
+    const localBrandDefaultThemeVariants = PARAGON_THEME?.brand?.themeUrls?.defaults;
+
+    if (isEmptyObject(localParagonCoreUrl) || isEmptyObject(localParagonThemeVariants)) {
       return undefined;
     }
     if (!coreCss.default) {
-      coreCss.default = fallbackThemeUrl(localCoreUrl?.fileName);
+      coreCss.default = fallbackThemeUrl(localParagonCoreUrl?.fileName);
+    }
+
+    if (!coreCss.brandOverride && localBrandCoreUrl) {
+      coreCss.brandOverride = fallbackThemeUrl(localBrandCoreUrl?.fileName);
     }
 
     if (isEmptyObject(themeVariantsCss)) {
-      Object.entries(localThemeVariants).forEach(([themeVariant, { fileName, ...rest }]) => {
+      Object.entries(localParagonThemeVariants).forEach(([themeVariant, { fileName, ...rest }]) => {
         themeVariantsCss[themeVariant] = {
           urls: { default: fallbackThemeUrl(fileName), ...rest.urls },
         };
       });
+
+      Object.entries(localBrandThemeVariants).forEach(([themeVariant, { fileName, ...rest }]) => {
+        themeVariantsCss[themeVariant] = {
+          urls: { brandOverride: fallbackThemeUrl(fileName), ...rest.urls, ...themeVariantsCss[themeVariant]?.urls },
+        };
+      });
     }
+
     return {
       core: { urls: coreCss },
-      defaults: defaultThemeVariants || localDefaultThemeVariants,
+      defaults: defaultThemeVariants || { ...localParagonDefaultThemeVariants, ...localBrandDefaultThemeVariants },
       variants: themeVariantsCss,
     };
   }

src/react/hooks/paragon/useParagonThemeUrls.test.js

@@ -3,11 +3,53 @@ import { renderHook } from '@testing-library/react';
 import useParagonThemeUrls from './useParagonThemeUrls';
 import { mergeConfig } from '../../../config';
 
+Object.defineProperty(global, 'PARAGON_THEME', {
+  value: {
+    paragon: {
+      version: '1.0.0',
+      themeUrls: {
+        core: {
+          fileName: 'local-core.min.css',
+        },
+        defaults: {
+          light: 'light',
+        },
+        variants: {
+          light: {
+            fileName: 'local-light.min.css',
+          },
+        },
+      },
+    },
+    brand: {
+      version: '1.0.0',
+      themeUrls: {
+        core: {
+          fileName: 'brand-local-core.min.css',
+        },
+        defaults: {
+          light: 'light',
+        },
+        variants: {
+          light: {
+            fileName: 'brand-local-light.min.css',
+          },
+        },
+      },
+    },
+  },
+  writable: true,
+});
+
 describe('useParagonThemeUrls', () => {
   beforeEach(() => { jest.resetAllMocks(); });
   it.each([
     [undefined, undefined],
-    [{}, { core: { urls: { default: '//localhost:8080/core.min.css', brandOverride: undefined } }, defaults: { light: 'light' }, variants: { light: { urls: { default: '//localhost:8080/light.min.css' } } } }],
+    [{}, {
+      core: { urls: { default: '//localhost:8080/local-core.min.css', brandOverride: '//localhost:8080/brand-local-core.min.css' } },
+      defaults: { light: 'light' },
+      variants: { light: { urls: { default: '//localhost:8080/local-light.min.css', brandOverride: '//localhost:8080/brand-local-light.min.css' } } },
+    }],
   ])('handles when `config.PARAGON_THEME_URLS` is not present (%s)', (paragonThemeUrls, expectedURLConfig) => {
     mergeConfig({ PARAGON_THEME_URLS: paragonThemeUrls });
     const { result } = renderHook(() => useParagonThemeUrls());
@@ -122,7 +164,7 @@ describe('useParagonThemeUrls', () => {
         expect.objectContaining({
           core: {
             urls: {
-              default: '//localhost:8080/core.min.css',
+              default: '//localhost:8080/local-core.min.css',
               brandOverride: 'brand-core.css',
             },
           },
@@ -132,7 +174,8 @@ describe('useParagonThemeUrls', () => {
           variants: {
             light: {
               urls: {
-                default: '//localhost:8080/light.min.css',
+                default: '//localhost:8080/local-light.min.css',
+                brandOverride: '//localhost:8080/brand-local-light.min.css',
               },
             },
           },
@@ -155,7 +198,7 @@ describe('useParagonThemeUrls', () => {
       };
       const originalParagonTheme = global.PARAGON_THEME;
       Object.defineProperty(global, 'PARAGON_THEME', {
-        value: 'mocked-theme',
+        value: undefined,
         writable: true,
       });
       mergeConfig(config);