Use Bridge NPM Package

jest.config.ts

@@ -171,12 +171,11 @@ const config: Config = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.ts?$': 'ts-jest',
+    '^.+\\.[tj]sx?$': 'ts-jest',
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ['node_modules/(?!(\\oidc-client-ts)/)'],
+  transformIgnorePatterns: ['node_modules/(?!(@fossa-app|@fable-org|oidc-client-ts)/)'],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -6,10 +6,10 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.13.0",
+    "@fossa-app/bridge": "^0.1.31",
     "@mui/icons-material": "^6.1.6",
     "@mui/material": "^6.4.8",
     "@reduxjs/toolkit": "^2.11.2",
-    "axios": "^1.16.1",
     "leaflet": "^1.9.4",
     "oidc-client-ts": "^3.5.0",
     "react": "^19.2.0",

src/components/Catalog.tsx

@@ -3,7 +3,7 @@ import { generatePath, useNavigate } from 'react-router-dom';
 import { AsyncThunkAction } from '@reduxjs/toolkit';
 import { AppDispatch, PaginatedStateEntity, RootState, Status, useAppDispatch, useAppSelector } from 'store';
 import { selectUserRoles } from 'store/features';
-import { Module, SubModule, Entity, PaginationParams, UserRole, ErrorResponseDTO, PaginatedResponse } from 'shared/types';
+import { Module, SubModule, Entity, PaginationParams, UserRole, ValidationProblemDetails, PaginatedResponse } from 'shared/types';
 import { APP_CONFIG } from 'shared/constants';
 import { getTestSelectorByModule } from 'shared/helpers';
 import { useUnmount } from 'shared/hooks';
@@ -15,7 +15,7 @@ import { renderPrimaryLinkText } from 'components/UI/helpers/renderPrimaryLinkTe
 
 interface StateAction {
   state: RootState;
-  rejectValue: ErrorResponseDTO;
+  rejectValue: ValidationProblemDetails;
   dispatch?: AppDispatch;
 }
 

src/components/Entity/EntityManager.tsx

@@ -4,12 +4,12 @@ import { DefaultValues, FieldErrors, FieldValues } from 'react-hook-form';
 import { AsyncThunkAction } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector, RootState, AppDispatch, StateEntity } from 'store';
 import { useOnFormSubmitEffect, useSafeNavigateBack, useUnmount } from 'shared/hooks';
-import { BaseEntity, EntityInput, ErrorResponse, ErrorResponseDTO, Module, SubModule } from 'shared/types';
+import { BaseEntity, EntityInput, ErrorResponse, ValidationProblemDetails, Module, SubModule } from 'shared/types';
 import { areEqualBigIds } from 'shared/helpers';
 import PageLayout from 'components/layouts/PageLayout';
 import Form, { FormActionName, FormFieldProps, FormProps } from 'components/UI/Form';
 
-type EntityManagerProps<T extends BaseEntity, TDTO extends BaseEntity> = {
+type EntityManagerProps<T extends BaseEntity, TInput extends BaseEntity> = {
   module: Module;
   subModule: SubModule;
   pageTitle: { create: string; edit: string };
@@ -24,15 +24,17 @@ type EntityManagerProps<T extends BaseEntity, TDTO extends BaseEntity> = {
   resetEntity: () => ReturnType<AppDispatch>;
   resetErrors: () => ReturnType<AppDispatch>;
   resetCatalogFetchStatus: () => ReturnType<AppDispatch>;
-  mapDTO: (value: T) => EntityInput<TDTO>;
-  createEntityAction: (args: EntityInput<TDTO>) => AsyncThunkAction<void, EntityInput<TDTO>, { rejectValue: ErrorResponse<FieldValues> }>;
+  mapInput: (value: T) => EntityInput<TInput>;
+  createEntityAction: (
+    args: EntityInput<TInput>
+  ) => AsyncThunkAction<void, EntityInput<TInput>, { rejectValue: ErrorResponse<FieldValues> }>;
   editEntityAction: (
-    args: [string, EntityInput<TDTO>]
-  ) => AsyncThunkAction<void, [string, EntityInput<TDTO>], { rejectValue: ErrorResponse<FieldValues> }>;
-  fetchEntityAction: (id: string) => AsyncThunkAction<T, unknown, { rejectValue: ErrorResponseDTO }>;
+    args: [string, EntityInput<TInput>]
+  ) => AsyncThunkAction<void, [string, EntityInput<TInput>], { rejectValue: ErrorResponse<FieldValues> }>;
+  fetchEntityAction: (id: string) => AsyncThunkAction<T, unknown, { rejectValue: ValidationProblemDetails }>;
 };
 
-const EntityManager = <T extends BaseEntity, TDTO extends BaseEntity>({
+const EntityManager = <T extends BaseEntity, TInput extends BaseEntity>({
   module,
   subModule,
   pageTitle,
@@ -50,8 +52,8 @@ const EntityManager = <T extends BaseEntity, TDTO extends BaseEntity>({
   fetchEntityAction,
   createEntityAction,
   editEntityAction,
-  mapDTO,
-}: EntityManagerProps<T, TDTO>) => {
+  mapInput,
+}: EntityManagerProps<T, TInput>) => {
   const dispatch = useAppDispatch();
   const { id } = useParams<{ id: string }>();
   const { item: values, fetchStatus, updateStatus = 'idle' } = useAppSelector(selectEntity);
@@ -71,12 +73,12 @@ const EntityManager = <T extends BaseEntity, TDTO extends BaseEntity>({
   });
 
   const handleSubmit = (formValue: T) => {
-    const dto = mapDTO(formValue);
+    const input = mapInput(formValue);
 
     if (id) {
-      dispatch(editEntityAction([id, dto]));
+      dispatch(editEntityAction([id, input]));
     } else {
-      dispatch(createEntityAction(dto));
+      dispatch(createEntityAction(input));
     }
 
     setFormSubmitted(true);

src/components/Entity/EntityViewer.tsx

@@ -4,7 +4,7 @@ import { AsyncThunkAction } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector, RootState, AppDispatch, StateEntity } from 'store';
 import { selectUserRoles } from 'store/features';
 import { areEqualBigIds, hasAllowedRole } from 'shared/helpers';
-import { Module, SubModule, ErrorResponseDTO, BaseEntity } from 'shared/types';
+import { Module, SubModule, ValidationProblemDetails, BaseEntity } from 'shared/types';
 import PageLayout from 'components/layouts/PageLayout';
 import ViewDetails, { ViewDetailActionName, ViewDetailProps } from 'components/UI/ViewDetails';
 
@@ -17,7 +17,7 @@ type EntityViewerProps<T extends BaseEntity> = {
   editRoute?: string;
   selectEntity: (state: RootState) => StateEntity<T | undefined>;
   resetEntity: () => ReturnType<AppDispatch>;
-  fetchEntityAction: (id: string) => AsyncThunkAction<T, unknown, { rejectValue: ErrorResponseDTO }>;
+  fetchEntityAction: (id: string) => AsyncThunkAction<T, unknown, { rejectValue: ValidationProblemDetails }>;
 };
 
 const EntityViewer = <T extends BaseEntity>({

src/layout/MessageLayout.tsx

@@ -24,7 +24,7 @@ const MessageLayout: React.FC = () => {
       data-cy={testSelector}
       type={type}
       open={!!error || !!success}
-      message={error ? error.title : success}
+      message={error ? (error.title ?? undefined) : success}
       onClose={handleSnackbarClose}
     />
   );

src/pages/Manage/Branch/pages/BranchManagement.tsx

@@ -19,10 +19,10 @@ import {
   ROUTES,
   USER_PERMISSION_GENERAL_ERROR,
 } from 'shared/constants';
-import { Branch, BranchDTO, TimeZone } from 'shared/types';
+import { Branch, TimeZone } from 'shared/types';
 import {
   getBranchManagementDetailsByAddressFormSchema,
-  mapBranchDTO,
+  mapBranchInput,
   mapDisabledFields,
   mapBranchFieldOptionsToFieldOptions,
   deepCopyObject,
@@ -70,7 +70,7 @@ const BranchManagementPage: React.FC = () => {
   };
 
   return (
-    <EntityManager<Branch, BranchDTO>
+    <EntityManager<Branch, Branch>
       module={testModule}
       subModule={testSubModule}
       pageTitle={{ create: 'Create Branch', edit: 'Edit Branch' }}
@@ -88,7 +88,7 @@ const BranchManagementPage: React.FC = () => {
       fetchEntityAction={(id) => fetchBranchById({ id, skipState: false })}
       createEntityAction={createBranch}
       editEntityAction={editBranch}
-      mapDTO={mapBranchDTO}
+      mapInput={mapBranchInput}
     />
   );
 };

src/pages/Manage/Company/pages/CompanyEdit.tsx

@@ -16,7 +16,7 @@ import {
   ROUTES,
   USER_PERMISSION_GENERAL_ERROR,
 } from 'shared/constants';
-import { Company, CompanyDTO, EntityInput } from 'shared/types';
+import { Company, EntityInput } from 'shared/types';
 import { deepCopyObject, mapCountriesToFieldOptions, mapDisabledFields } from 'shared/helpers';
 import { useOnFormSubmitEffect } from 'shared/hooks';
 import PageLayout from 'components/layouts/PageLayout';
@@ -37,7 +37,7 @@ const CompanyEditPage: React.FC = () => {
   const errors = isUserAdmin ? deepCopyObject(error?.errors) : USER_PERMISSION_GENERAL_ERROR;
   const navigateToViewCompany = () => navigate(ROUTES.viewCompany.path);
 
-  const handleSubmit = (data: EntityInput<CompanyDTO>) => {
+  const handleSubmit = (data: EntityInput<Company>) => {
     dispatch(editCompany(data));
     setFormSubmitted(true);
   };

src/pages/Manage/Company/pages/CompanySettings.tsx

@@ -10,7 +10,7 @@ import {
 } from 'store/features';
 import { editCompanySettings } from 'store/thunks';
 import { COMPANY_SETTINGS_FIELDS, COMPANY_SETTINGS_MANAGEMENT_DETAILS_FORM_SCHEMA, ROUTES } from 'shared/constants';
-import { CompanySettings, CompanySettingsDTO, EntityInput, ThemeMode } from 'shared/types';
+import { CompanySettings, EntityInput, ThemeMode } from 'shared/types';
 import { mapDisabledFields } from 'shared/helpers';
 import { COLOR_SCHEMES } from 'shared/themes';
 import { useUnmount } from 'shared/hooks';
@@ -29,11 +29,11 @@ const CompanySettingsPage: React.FC = () => {
   const { isDarkTheme } = useAppSelector(selectAppConfig);
   const mode: ThemeMode = isDarkTheme ? 'dark' : 'light';
 
-  const handleSubmit = (data: EntityInput<CompanySettingsDTO>) => {
+  const handleSubmit = (data: EntityInput<CompanySettings>) => {
     dispatch(editCompanySettings({ ...companySettings, ...data }));
   };
 
-  const handleChange = (data: CompanySettingsDTO) => {
+  const handleChange = (data: CompanySettings) => {
     if (data.colorSchemeId) {
       dispatch(setPreviewCompanyColorSchemeSettings(data.colorSchemeId));
     }