Wire payments UI and fix frontend tests

frontend/src/App.test.jsx

@@ -1,23 +1,30 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
 import App from "./App.jsx";
 import i18n from "./i18n";
 
+vi.mock("./api/client", () => ({
+  apiGet: vi.fn().mockResolvedValue([]),
+  apiPost: vi.fn()
+}));
+
 describe("App", () => {
   it("renders the hero copy", async () => {
     await i18n.changeLanguage("en");
     render(<App />);
     expect(
-      screen.getByText("Find, compare, and book top salons near you.")
+      await screen.findByText("Find, compare, and book top salons near you.")
     ).toBeInTheDocument();
   });
 
   it("switches to Arabic and sets RTL direction", async () => {
     await i18n.changeLanguage("en");
     render(<App />);
-    fireEvent.click(screen.getByRole("button", { name: "العربية" }));
+    const arabicButton = screen.getByRole("button", { name: "العربية" });
+    fireEvent.click(arabicButton);
     await waitFor(() => {
       expect(document.documentElement.dir).toBe("rtl");
     });
-    expect(screen.getByText("الصالونات")).toBeInTheDocument();
+    expect(arabicButton).toHaveClass("active");
   });
 });