Fix PayPal billing flow and mobile admin UX

resources/js/admin/mobile/components/__tests__/BottomNav.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+const originalResizeObserver = globalThis.ResizeObserver;
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string) => fallback ?? _key,
+  }),
+}));
+
+vi.mock('@tamagui/stacks', () => ({
+  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+}));
+
+vi.mock('@tamagui/text', () => ({
+  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
+}));
+
+vi.mock('@tamagui/react-native-web-lite', () => ({
+  Pressable: ({ children, onPress, ...props }: { children: React.ReactNode; onPress?: () => void }) => (
+    <button type="button" onClick={onPress} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('../../theme', () => ({
+  useAdminTheme: () => ({
+    primary: '#FF5A5F',
+    muted: '#6b7280',
+    glassSurfaceStrong: 'rgba(255,255,255,0.9)',
+    surfaceMuted: '#f8fafc',
+    surface: '#ffffff',
+    glassBorder: 'rgba(229,231,235,0.7)',
+    border: '#e5e7eb',
+    glassShadow: 'rgba(15,23,42,0.14)',
+    shadow: 'rgba(0,0,0,0.12)',
+  }),
+}));
+
+vi.mock('../../../constants', () => ({
+  adminPath: (path: string) => path,
+}));
+
+import { BottomNav } from '../BottomNav';
+
+describe('BottomNav', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = () =>
+      ({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 84,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 84,
+        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('--admin-bottom-nav-offset');
+  });
+
+  afterEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
+    if (originalResizeObserver) {
+      globalThis.ResizeObserver = originalResizeObserver;
+    } else {
+      delete (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    }
+  });
+
+  it('sets the admin bottom nav offset CSS variable', async () => {
+    render(
+      <MemoryRouter initialEntries={['/mobile/profile']}>
+        <BottomNav active="profile" onNavigate={() => undefined} />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue('--admin-bottom-nav-offset')).toBe('84px');
+    });
+  });
+});