Fix types, CSS import in frontend

frontend/.gitignore

@@ -22,6 +22,9 @@ coverage
 .DS_Store
 *.pem
 
+# typescript
+tsconfig.tsbuildinfo
+
 # debug
 npm-debug.log*
 yarn-debug.log*

frontend/__mocks__/configMock.ts

@@ -8,15 +8,21 @@ export const mockConfigModule = {
       fxaOrigin: "https://accounts.example.com",
       fxaLoginUrl: "https://accounts.example.com/login/",
       fxaLogoutUrl: "https://accounts.example.com/logout/",
+      supportUrl: "https://support.example.com/products/relay",
       premiumProductId: "prod_X00XXXX0xXX0Xx",
       emailSizeLimitNumber: 10,
       emailSizeLimitUnit: "MB",
       maxFreeAliases: 5,
       mozmailDomain: "mozmail.com",
       googleAnalyticsId: "UA-00000000-00",
       maxOnboardingAvailable: 3,
+      maxOnboardingFreeAvailable: 3,
       featureFlags: {
-        generateCustomAlias: false,
+        tips: false,
+        generateCustomAliasMenu: false,
+        generateCustomAliasSubdomain: false,
+        interviewRecruitment: false,
+        csatSurvey: false,
       },
     };
   }),

frontend/__mocks__/hooks/api/aliases.ts

@@ -28,15 +28,15 @@ const mockedGetFullAddress = getFullAddress as jest.MockedFunction<
 // We only need to mock out the functions that make HTTP requests;
 // restore the rest:
 const actualModule = jest.requireActual(
-  "../../../src/hooks/api/aliases"
+  "../../../src/hooks/api/aliases",
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ) as any;
 mockedIsRandomAlias.mockImplementation(actualModule.isRandomAlias);
 mockedGetAllAliases.mockImplementation(actualModule.getAllAliases);
 mockedGetFullAddress.mockImplementation(actualModule.getFullAddress);
 
 export function getMockRandomAlias(
-  alias?: Partial<RandomAliasData>
+  alias?: Partial<RandomAliasData>,
 ): RandomAliasData {
   return {
     mask_type: "random",
@@ -62,7 +62,7 @@ export function getMockRandomAlias(
   };
 }
 export function getMockCustomAlias(
-  alias?: Partial<CustomAliasData>
+  alias?: Partial<CustomAliasData>,
 ): CustomAliasData {
   return {
     mask_type: "custom",
@@ -98,23 +98,27 @@ type Callbacks = {
 };
 function getReturnValue(
   aliasesData?: MockData,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ): ReturnType<typeof useAliases> {
   const randomAliasData = (aliasesData?.random || [{}]).map((alias) =>
-    getMockRandomAlias(alias)
+    getMockRandomAlias(alias),
   );
   const customAliasData = (aliasesData?.custom || [{}]).map((alias) =>
-    getMockCustomAlias(alias)
+    getMockCustomAlias(alias),
   );
 
   return {
     randomAliasData: {
       isValidating: false,
+      isLoading: false,
+      error: undefined,
       mutate: jest.fn(),
       data: randomAliasData,
     },
     customAliasData: {
       isValidating: false,
+      isLoading: false,
+      error: undefined,
       mutate: jest.fn(),
       data: customAliasData,
     },
@@ -132,14 +136,14 @@ function getReturnValue(
 
 export const setMockAliasesData = (
   aliasesData?: MockData,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseAliases.mockReturnValue(getReturnValue(aliasesData, callbacks));
 };
 
 export const setMockAliasesDataOnce = (
   aliasesData?: MockData,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseAliases.mockReturnValueOnce(getReturnValue(aliasesData, callbacks));
 };

frontend/__mocks__/hooks/api/inboundContact.ts

@@ -13,7 +13,7 @@ const mockedUseInboundContact = useInboundContact as jest.MockedFunction<
 >;
 
 export function getMockInboundContact(
-  inboundContact: Partial<InboundContact>
+  inboundContact: Partial<InboundContact> | undefined,
 ): InboundContact {
   return {
     id: 0,
@@ -23,8 +23,10 @@ export function getMockInboundContact(
     last_inbound_type: "call",
     num_calls: 45,
     num_calls_blocked: 3,
+    last_call_date: "2024-12-09T10:18:01.801Z",
     num_texts: 13,
     num_texts_blocked: 18,
+    last_text_date: "2024-12-09T01:18:01.801Z",
     blocked: false,
     ...inboundContact,
   };
@@ -35,35 +37,39 @@ type Callbacks = {
 };
 
 function getReturnValue(
-  inboundContacts: Array<Partial<InboundContact>> = [getMockInboundContact()],
-  callbacks?: Callbacks
+  inboundContacts: Array<Partial<InboundContact>> = [
+    getMockInboundContact(undefined),
+  ],
+  callbacks?: Callbacks,
 ): ReturnType<typeof useInboundContact> {
   return {
     isValidating: false,
     mutate: jest.fn(),
     data: inboundContacts.map((partialInboundContact) =>
-      getMockInboundContact(partialInboundContact)
+      getMockInboundContact(partialInboundContact),
     ),
     setForwardingState:
       callbacks?.setForwardingState ??
       jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+    error: undefined,
+    isLoading: false,
   };
 }
 
 export const setMockInboundContactData = (
   inboundContacts?: Array<Partial<InboundContact>>,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseInboundContact.mockReturnValue(
-    getReturnValue(inboundContacts, callbacks)
+    getReturnValue(inboundContacts, callbacks),
   );
 };
 
 export const setMockRelayNumberDataOnce = (
   inboundContacts?: Array<Partial<InboundContact>>,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseInboundContact.mockReturnValueOnce(
-    getReturnValue(inboundContacts, callbacks)
+    getReturnValue(inboundContacts, callbacks),
   );
 };

frontend/__mocks__/hooks/api/profile.ts

@@ -26,6 +26,8 @@ export function getMockProfileData(profileData?: MockData): ProfileData {
     remove_level_one_email_trackers: false,
     subdomain: null,
     onboarding_state: 3,
+    onboarding_free_state: 3,
+    forwarded_first_reply: true,
     avatar: "",
     date_subscribed: null,
     bounce_status: [false, ""],
@@ -35,6 +37,7 @@ export function getMockProfileData(profileData?: MockData): ProfileData {
     emails_forwarded: 0,
     emails_replied: 0,
     level_one_trackers_blocked: 0,
+    metrics_enabled: false,
     ...profileData,
   };
 }
@@ -45,27 +48,29 @@ type Callbacks = {
 };
 function getReturnValue(
   profileData?: MockData | null,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ): ReturnType<typeof useProfiles> {
   return {
     isValidating: false,
     mutate: jest.fn(),
     update: callbacks?.updater ?? jest.fn(),
     data: profileData === null ? undefined : [getMockProfileData(profileData)],
     setSubdomain: callbacks?.setSubdomain ?? jest.fn(),
+    isLoading: false,
+    error: undefined,
   };
 }
 
 export const setMockProfileData = (
   profileData?: MockData | null,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseProfiles.mockReturnValue(getReturnValue(profileData, callbacks));
 };
 
 export const setMockProfileDataOnce = (
   profileData?: MockData | null,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseProfiles.mockReturnValueOnce(getReturnValue(profileData, callbacks));
 };

frontend/__mocks__/hooks/api/realPhone.ts

@@ -5,12 +5,14 @@ import {
   useRealPhonesData,
   PhoneNumberRequestVerificationFn,
   PhoneNumberSubmitVerificationFn,
+  RequestPhoneRemovalFn,
+  ResendWelcomeSMSFn,
 } from "../../../src/hooks/api/realPhone";
 
 jest.mock("../../../src/hooks/api/realPhone", () => {
   // Do not mock functions like `isVerified`:
   const actualUseRealPhonesModule = jest.requireActual(
-    "../../../src/hooks/api/realPhone"
+    "../../../src/hooks/api/realPhone",
   );
   return {
     ...actualUseRealPhonesModule,
@@ -25,7 +27,7 @@ const mockedUseRealPhonesData = useRealPhonesData as jest.MockedFunction<
 >;
 
 export function getMockVerifiedRealPhone(
-  realPhone?: Partial<VerifiedPhone>
+  realPhone?: Partial<VerifiedPhone>,
 ): VerifiedPhone {
   return {
     id: 0,
@@ -40,7 +42,7 @@ export function getMockVerifiedRealPhone(
 }
 
 export function getMockVerificationPendingRealPhone(
-  realPhone?: Partial<UnverifiedPhone>
+  realPhone?: Partial<UnverifiedPhone>,
 ): UnverifiedPhone {
   return {
     id: 0,
@@ -55,7 +57,7 @@ export function getMockVerificationPendingRealPhone(
 }
 
 export function getMockUnverifiedRealPhone(
-  realPhone?: Partial<UnverifiedPhone>
+  realPhone?: Partial<UnverifiedPhone>,
 ): UnverifiedPhone {
   return {
     id: 0,
@@ -70,49 +72,59 @@ export function getMockUnverifiedRealPhone(
 }
 
 export function getMockRealPhone(
-  realPhone?: Partial<RealPhone>
+  realPhone?: Partial<RealPhone>,
 ): UnverifiedPhone {
   return getMockUnverifiedRealPhone(realPhone as Partial<UnverifiedPhone>);
 }
 
 type Callbacks = {
   requestPhoneVerification: PhoneNumberRequestVerificationFn;
   submitPhoneVerification: PhoneNumberSubmitVerificationFn;
+  requestPhoneRemoval: RequestPhoneRemovalFn;
+  resendWelcomeSMS: ResendWelcomeSMSFn;
 };
 
 function getReturnValue(
   realPhones: Array<Partial<RealPhone>> = [getMockRealPhone()],
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ): ReturnType<typeof useRealPhonesData> {
   return {
     isValidating: false,
+    isLoading: false,
+    error: undefined,
     mutate: jest.fn(),
     data: realPhones.map((partialRealPhone) =>
-      getMockRealPhone(partialRealPhone)
+      getMockRealPhone(partialRealPhone),
     ),
     requestPhoneVerification:
       callbacks?.requestPhoneVerification ??
       jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
     submitPhoneVerification:
       callbacks?.submitPhoneVerification ??
       jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+    requestPhoneRemoval:
+      callbacks?.requestPhoneRemoval ??
+      jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+    resendWelcomeSMS:
+      callbacks?.resendWelcomeSMS ??
+      jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
   };
 }
 
 export const setMockRealPhonesData = (
   realPhones?: Array<Partial<RealPhone>>,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseRealPhonesData.mockReturnValue(
-    getReturnValue(realPhones, callbacks)
+    getReturnValue(realPhones, callbacks),
   );
 };
 
 export const setMockRealPhonesDataOnce = (
   realPhones?: Array<Partial<RealPhone>>,
-  callbacks?: Callbacks
+  callbacks?: Callbacks,
 ) => {
   mockedUseRealPhonesData.mockReturnValueOnce(
-    getReturnValue(realPhones, callbacks)
+    getReturnValue(realPhones, callbacks),
   );
 };