chore(shared,ui): Fix locale fallback behavior

Author: alexcarpenter

.changeset/silver-mirrors-repeat.md

@@ -0,0 +1,2 @@
+---
+---

packages/shared/src/utils/fastDeepMerge.ts

@@ -17,7 +17,7 @@ export const fastDeepMergeAndReplace = (
         target[key] = new (Object.getPrototypeOf(source[key]).constructor)();
       }
       fastDeepMergeAndReplace(source[key], target[key]);
-    } else if (Object.prototype.hasOwnProperty.call(source, key)) {
+    } else if (Object.prototype.hasOwnProperty.call(source, key) && source[key] !== undefined) {
       target[key] = source[key];
     }
   }

packages/ui/src/localization/__tests__/parseLocalization.test.tsx

@@ -37,4 +37,65 @@ describe('Localization parsing and replacing', () => {
     const localizedValue = result.current.t(localizationKeys('backButton'));
     expect(localizedValue).toBe('test');
   });
+
+  it('falls back to English when user locale has undefined value for a key', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider
+          value={{
+            localization: {
+              backButton: undefined, // Explicitly undefined should fall back to English
+              formButtonPrimary: 'Translated', // Non-undefined should override
+            },
+          }}
+        >
+          {children}
+        </OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    // undefined value should fall back to English
+    const backButtonValue = result.current.t(localizationKeys('backButton'));
+    expect(backButtonValue).toBe(defaultResource.backButton);
+
+    // Non-undefined value should use the translation
+    const formButtonValue = result.current.t(localizationKeys('formButtonPrimary'));
+    expect(formButtonValue).toBe('Translated');
+  });
+
+  it('falls back to English for nested keys with undefined values', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapperBefore = ({ children }) => (
+      <Wrapper>
+        <OptionsProvider
+          value={{
+            localization: {
+              signIn: {
+                start: {
+                  title: undefined, // Should fall back to English
+                  subtitle: 'Custom subtitle', // Non-undefined should override
+                },
+              },
+            },
+          }}
+        >
+          {children}
+        </OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper: wrapperBefore });
+
+    // undefined nested value should fall back to English (tokens get replaced by t())
+    const titleValue = result.current.t(localizationKeys('signIn.start.title'));
+    // The English default is 'Sign in to {{applicationName}}', tokens get replaced
+    expect(titleValue).toContain('Sign in to');
+
+    // Non-undefined nested value should use the translation
+    const subtitleValue = result.current.t(localizationKeys('signIn.start.subtitle'));
+    expect(subtitleValue).toBe('Custom subtitle');
+  });
 });