Fix PayPal billing flow and mobile admin UX

resources/js/guest/components/__tests__/BottomNav.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+import BottomNav from '../BottomNav';
+
+const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+const originalResizeObserver = globalThis.ResizeObserver;
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    status: 'ready',
+    event: {
+      id: 1,
+      default_locale: 'de',
+    },
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#0f172a',
+      secondaryColor: '#38bdf8',
+      backgroundColor: '#ffffff',
+      palette: {
+        surface: '#ffffff',
+      },
+      buttons: {
+        radius: 12,
+        style: 'filled',
+        linkColor: '#0f172a',
+      },
+    },
+  }),
+}));
+
+vi.mock('../../lib/engagement', () => ({
+  isTaskModeEnabled: () => false,
+}));
+
+describe('BottomNav', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = () =>
+      ({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 80,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 80,
+        toJSON: () => ({}),
+      }) as DOMRect;
+
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver = class {
+      private callback: () => void;
+
+      constructor(callback: () => void) {
+        this.callback = callback;
+      }
+
+      observe() {
+        this.callback();
+      }
+
+      disconnect() {}
+    };
+
+    document.documentElement.style.removeProperty('--guest-bottom-nav-offset');
+  });
+
+  afterEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    document.documentElement.style.removeProperty('--guest-bottom-nav-offset');
+    if (originalResizeObserver) {
+      globalThis.ResizeObserver = originalResizeObserver;
+    } else {
+      delete (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    }
+  });
+
+  it('sets the bottom nav offset CSS variable', async () => {
+    render(
+      <MemoryRouter initialEntries={['/e/demo']}>
+        <Routes>
+          <Route path="/e/:token/*" element={<BottomNav />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue('--guest-bottom-nav-offset')).toBe('80px');
+    });
+  });
+});