MPP-4282: (bugfix) removed hardcoded domains in prod

Author: vpremamozilla

frontend/src/apiMocks/mockData.ts

@@ -10,8 +10,9 @@ export const mockIds = ["demo", "empty", "onboarding", "some", "full"] as const;
 
 // This is the same for all mock users, at this time:
 export const mockedRuntimeData: RuntimeData = {
-  FXA_ORIGIN: "https://fxa-mock.com",
-  BASKET_ORIGIN: "https://basket-mock.com",
+  // not sure if this is the mock url we want to use
+  FXA_ORIGIN: "http://localhost/mock/fxa",
+  BASKET_ORIGIN: "http://localhost/mock/basket",
   GOOGLE_ANALYTICS_ID: "UA-123456789-0",
   GA4_MEASUREMENT_ID: "G-YXT33S87LT",
   PERIODICAL_PREMIUM_PRODUCT_ID: "prod_123456789",

frontend/src/components/phones/onboarding/RelayNumberPicker.test.tsx

@@ -3,6 +3,7 @@ import { RelayNumberPicker } from "../onboarding/RelayNumberPicker";
 import { OverlayProvider } from "react-aria";
 import { useL10n } from "../../../hooks/l10n";
 import * as relayNumberHooks from "../../../hooks/api/relayNumber";
+import { formatPhone } from "../../../functions/formatPhone";
 
 jest.mock("../../../hooks/l10n", () => ({
   useL10n: jest.fn(),
@@ -165,7 +166,8 @@ describe("RelayNumberPicker", () => {
       expect(relayNumberHooks.search).toHaveBeenCalledWith("999");
     });
 
-    const label = screen.getByLabelText("(999) 888 - 7777");
+    const formatted = formatPhone("+19998887777");
+    const label = await screen.findByLabelText(formatted);
     expect(label).toBeInTheDocument();
   });
 

frontend/src/functions/getPlan.test.ts

@@ -158,7 +158,7 @@ describe("Megabundle Tests", () => {
       );
 
       const expectedLink =
-        "https://fxa-mock.com/subscriptions/products/prod_123456789?plan=price_1RMAopKb9q6OnNsLSGe1vLtt";
+        "http://localhost/mock/fxa/subscriptions/products/prod_123456789?plan=price_1RMAopKb9q6OnNsLSGe1vLtt";
 
       expect(link).toBe(expectedLink);
     });

frontend/src/pages/_app.page.tsx

@@ -9,8 +9,6 @@ import ReactGa from "react-ga";
 import { getL10n } from "../functions/getL10n";
 import { AddonDataContext, useAddonElementWatcher } from "../hooks/addon";
 import { ReactAriaI18nProvider } from "../components/ReactAriaI18nProvider";
-import { initialiseApiMocks } from "../apiMocks/initialise";
-import { mockIds } from "../apiMocks/mockData";
 import { useIsLoggedIn } from "../hooks/session";
 import { useMetrics } from "../hooks/metrics";
 import {
@@ -60,6 +58,9 @@ function MyApp({ Component, pageProps }: AppProps) {
       return;
     }
     (async () => {
+      const { initialiseApiMocks } = await import("../apiMocks/initialise");
+      const { mockIds } = await import("../apiMocks/mockData");
+
       await initialiseApiMocks();
 
       if (

frontend/src/pages/mock/login.page.tsx

@@ -5,7 +5,6 @@ import styles from "./mockSession.module.scss";
 import { getRuntimeConfig } from "../../config";
 import { apiFetch } from "../../hooks/api/api";
 import { UsersData } from "../../hooks/api/user";
-import { mockIds } from "../../apiMocks/mockData";
 
 type UsedToken = {
   token: string;
@@ -20,15 +19,18 @@ const MockLogin: NextPage = () => {
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_MOCK_API === "true") {
-      // When the API is mocked out, the API tokens are fake as well:
-      const mockIdsAsTokens: UsedToken[] = mockIds.map((id) => ({
-        lastUsed: 0,
-        token: id,
-        user: `${id}@example.com`,
-      }));
-      setUsedTokens(mockIdsAsTokens);
+      (async () => {
+        const { mockIds } = await import("../../apiMocks/mockData");
+        const mockIdsAsTokens: UsedToken[] = mockIds.map((id) => ({
+          lastUsed: 0,
+          token: id,
+          user: `${id}@example.com`,
+        }));
+        setUsedTokens(mockIdsAsTokens);
+      })();
       return;
     }
+
     const usedTokensString = localStorage.getItem("usedTokens") ?? "[]";
     setUsedTokens(JSON.parse(usedTokensString).sort(byUseDate));
   }, []);