@jobber/components-native 0.44.2 → 0.45.0

package/dist/types/src/AtlantisContext/AtlantisContext.d.ts

@@ -36,6 +36,14 @@ export interface AtlantisContextProps {
      * By accurately defining this value, Atlantis can effectively calculate the layout and alignment of its components.
      */
     readonly headerHeight: number;
+    /**
+     * Change the locale of the components. This updates the strings that comes
+     * with the components, updates the date and time formats, and/or the
+     * native 3rd-party packages.
+     *
+     * @default "en"
+     */
+    readonly locale: string;
     /**
      * The `setHeaderHeight` method allows you to set the height of the app header in Atlantis.
      * Adjusting this height is essential for ensuring the correct positioning and alignment of various elements within the app.

package/dist/types/src/FormatFile/utils/computeA11yLabel.d.ts

@@ -1,9 +1,9 @@
-import { MessageDescriptor } from "react-intl";
+import { useAtlantisI18nValue } from "../../hooks/useAtlantisI18n";
 interface params {
-    accessibilityLabel?: string;
-    showOverlay: boolean;
-    showError: boolean;
-    formatMessage: (message: MessageDescriptor) => string;
+    readonly accessibilityLabel?: string;
+    readonly showOverlay: boolean;
+    readonly showError: boolean;
+    readonly t: useAtlantisI18nValue["t"];
 }
-export declare function computeA11yLabel({ accessibilityLabel, showOverlay, showError, formatMessage, }: params): string;
+export declare function computeA11yLabel({ accessibilityLabel, showOverlay, showError, t, }: params): string;
 export {};

package/dist/types/src/InputFieldWrapper/components/ClearAction/index.d.ts

@@ -1,2 +1 @@
 export { ClearAction } from "./ClearAction";
-export { messages } from "./messages";

package/dist/types/src/hooks/useAtlantisI18n/index.d.ts

@@ -0,0 +1 @@
+export * from "./useAtlantisI18n";

package/dist/types/src/hooks/useAtlantisI18n/useAtlantisI18n.d.ts

@@ -0,0 +1,6 @@
+import en from "./locales/en.json";
+export interface useAtlantisI18nValue {
+    readonly locale: string;
+    readonly t: (message: keyof typeof en, values?: Record<string, string>) => string;
+}
+export declare function useAtlantisI18n(): useAtlantisI18nValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.44.2",
+  "version": "0.45.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "4f1eed5cadf29a87143305992d08c90907ee41f4"
+  "gitHead": "90e9d2a124e1d65d678364063f6ef57e066939af"
 }

package/src/AtlantisContext/AtlantisContext.tsx

@@ -47,6 +47,15 @@ export interface AtlantisContextProps {
    */
   readonly headerHeight: number;
 
+  /**
+   * Change the locale of the components. This updates the strings that comes
+   * with the components, updates the date and time formats, and/or the
+   * native 3rd-party packages.
+   *
+   * @default "en"
+   */
+  readonly locale: string;
+
   /**
    * The `setHeaderHeight` method allows you to set the height of the app header in Atlantis.
    * Adjusting this height is essential for ensuring the correct positioning and alignment of various elements within the app.
@@ -67,6 +76,7 @@ export const defaultValues: AtlantisContextProps = {
   floatSeparators: { group: ",", decimal: "." },
   currencySymbol: DEFAULT_CURRENCY_SYMBOL,
   headerHeight: 0,
+  locale: "en",
   setHeaderHeight: _ => {
     return;
   },

package/src/BottomSheet/BottomSheet.test.tsx

@@ -4,7 +4,6 @@ import { AccessibilityInfo, View } from "react-native";
 import { Host, Portal } from "react-native-portalize";
 import { BottomSheet } from ".";
 import { BottomSheetRef } from "./BottomSheet";
-import { messages } from "./messages";
 import { waitForUntestableRender } from "../utils/test/wait";
 import { Text } from "../Text";
 
@@ -79,7 +78,7 @@ it("BottomSheet can be closed with the cancel action", async () => {
     ref.current?.open();
   });
 
-  fireEvent.press(getByText(messages.cancel.defaultMessage));
+  fireEvent.press(getByText("Cancel"));
 
   await waitFor(() => {
     expect(queryByText("BottomSheet")).toBeNull();
@@ -98,7 +97,7 @@ describe("when loading is provided and true", () => {
       ref.current?.open();
     });
 
-    expect(queryByText(messages.cancel.defaultMessage)).toBeNull();
+    expect(queryByText("Cancel")).toBeNull();
   });
 });
 
@@ -143,7 +142,7 @@ describe("when there is a screen reader enabled", () => {
       ref.current?.open();
     });
 
-    fireEvent.press(getByText(messages.cancel.defaultMessage));
+    fireEvent.press(getByText("Cancel"));
 
     await waitFor(() => {
       expect(queryByText("BottomSheet")).toBeNull();

package/src/BottomSheet/BottomSheet.tsx

@@ -2,13 +2,12 @@ import React, { ReactNode, Ref, RefObject, forwardRef, useState } from "react";
 import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
-import { useIntl } from "react-intl";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { styles } from "./BottomSheet.style";
-import { messages } from "./messages";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface BottomSheetProps {
   readonly children: ReactNode;
@@ -118,7 +117,7 @@ function Footer({
   onCancel: () => void;
 }) {
   const insets = useSafeAreaInsets();
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   return (
     <View style={{ marginBottom: insets.bottom }}>
@@ -128,7 +127,7 @@ function Footer({
             <Divider />
           </View>
           <BottomSheetOption
-            text={formatMessage(messages.cancel)}
+            text={t("cancel")}
             icon={"remove"}
             onPress={onCancel}
           />

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { Alert } from "react-native";
-import { messages } from "./messages";
 import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
 import { Button } from "../Button";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
@@ -37,7 +36,7 @@ it("renders a single primary action", () => {
   );
 
   expect(getByText("Create")).not.toBeNull();
-  expect(queryByLabelText(messages.more.defaultMessage)).toBeNull();
+  expect(queryByLabelText("More")).toBeNull();
 });
 
 it("renders 2 primary actions", () => {
@@ -60,7 +59,7 @@ it("renders 2 primary actions", () => {
 
   expect(getByText("Create")).not.toBeNull();
   expect(getByText("Edit")).not.toBeNull();
-  expect(queryByLabelText(messages.more.defaultMessage)).toBeNull();
+  expect(queryByLabelText("More")).toBeNull();
 });
 
 it("does not render more than 2 primary actions but adds a More button", () => {
@@ -90,7 +89,7 @@ it("does not render more than 2 primary actions but adds a More button", () => {
   expect(getByText("Create")).not.toBeNull();
   expect(getByText("Edit")).not.toBeNull();
   expect(queryByText("Mystery")).toBeNull();
-  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+  expect(getByLabelText("More")).toBeDefined();
 });
 
 it("does not render secondary actions", () => {
@@ -119,7 +118,7 @@ it("does not render secondary actions", () => {
   expect(getByText("Create")).not.toBeNull();
   expect(queryByText("Edit")).toBeNull();
   expect(queryByText("Delete")).toBeNull();
-  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+  expect(getByLabelText("More")).toBeDefined();
 });
 
 it("renders first secondary action as a primary action button if no primary action specified", () => {
@@ -141,7 +140,7 @@ it("renders first secondary action as a primary action button if no primary acti
   );
   expect(getByText("Edit")).not.toBeNull();
   expect(queryByText("Delete")).toBeNull();
-  expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+  expect(getByLabelText("More")).toBeDefined();
 });
 
 it("fires the press handlers when the primary action buttons are pressed", () => {
@@ -194,7 +193,7 @@ it("opens the secondary action menu when the More button is pressed", () => {
 
   expect(queryByText("Edit")).toBeNull();
 
-  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+  fireEvent.press(getByLabelText("More"));
 
   expect(getByText("Edit")).not.toBeNull();
   expect(getByText("Delete")).not.toBeNull();
@@ -221,7 +220,7 @@ it("renders heading and cancel options if passed in", () => {
     </ButtonGroupForTest>,
   );
 
-  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+  fireEvent.press(getByLabelText("More"));
 
   expect(getByText("Heading")).not.toBeNull();
   expect(getByText("Cancel")).not.toBeNull();
@@ -273,7 +272,7 @@ it("calls onOpenBottomSheet when the secondary actions are opened", () => {
     </ButtonGroupForTest>,
   );
 
-  fireEvent.press(getByLabelText(messages.more.defaultMessage));
+  fireEvent.press(getByLabelText("More"));
 
   expect(mockOnOpen).toHaveBeenCalled();
 });

package/src/ButtonGroup/ButtonGroup.tsx

@@ -1,14 +1,13 @@
 import React, { useRef } from "react";
-import { useIntl } from "react-intl";
 import { View } from "react-native";
 import { PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
-import { messages } from "./messages";
 import { styles } from "./ButtonGroup.style";
 import { SecondaryActionSheet } from "./components/SecondaryActionSheet";
 import { getActions, usePreventTapWhenOffline } from "./utils";
 import { ButtonGroupActionElement } from "./types";
 import { Button } from "../Button";
 import { BottomSheetRef } from "../BottomSheet/BottomSheet";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface ButtonGroupProps {
   readonly children: ButtonGroupActionElement | ButtonGroupActionElement[];
@@ -47,7 +46,7 @@ export function ButtonGroup({
   onCloseBottomSheet,
   allowTapWhenOffline = false,
 }: ButtonGroupProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const { handlePress } = usePreventTapWhenOffline();
   const secondaryActionsRef = useRef<BottomSheetRef>();
   const { primaryActions, secondaryActions } = getActions(children);
@@ -86,7 +85,7 @@ export function ButtonGroup({
         <View style={styles.moreButton}>
           <Button
             icon={"more"}
-            accessibilityLabel={formatMessage(messages.more)}
+            accessibilityLabel={t("more")}
             onPress={handlePress(openBottomSheet)}
             fullHeight={true}
           />

package/src/ButtonGroup/utils.ts

@@ -1,7 +1,5 @@
 import React, { useCallback } from "react";
-import { useIntl } from "react-intl";
 import { Alert } from "react-native";
-import { messages } from "./messages";
 import {
   ButtonGroupActionElement,
   ButtonGroupPrimaryActionElement,
@@ -12,6 +10,7 @@ import {
   SecondaryAction,
 } from "./ButtonGroupAction";
 import { useAtlantisContext } from "../AtlantisContext/AtlantisContext";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface UsePreventTapWhenOfflineShape {
   readonly handlePress: (
@@ -24,7 +23,7 @@ interface UsePreventTapWhenOfflineShape {
  * online or offline
  */
 export function usePreventTapWhenOffline(): UsePreventTapWhenOfflineShape {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const { isOnline } = useAtlantisContext();
 
   const handlePress = useCallback(
@@ -33,11 +32,11 @@ export function usePreventTapWhenOffline(): UsePreventTapWhenOfflineShape {
 
       return () =>
         Alert.alert(
-          formatMessage(messages.unavailableNetworkTitle),
-          formatMessage(messages.unavailableNetworkMessage),
+          t("networkUnavailableTitle"),
+          t("networkUnavailableDescription"),
         );
     },
-    [formatMessage, isOnline],
+    [isOnline],
   );
 
   return { handlePress };

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -3,13 +3,11 @@ import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
 import { Host } from "react-native-portalize";
 import { ReactTestInstance, act } from "react-test-renderer";
-import { useIntl } from "react-intl";
 import {
   ContentOverlay,
   ContentOverlayRef,
   ModalBackgroundColor,
 } from "./ContentOverlay";
-import { messages } from "./messages";
 import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
@@ -232,8 +230,6 @@ describe("when accessibilityLabel prop passed to content overlay", () => {
 
 describe("when accessibilityLabel prop NOT passed to content overlay", () => {
   it("should use default accessibilityLabel", () => {
-    const { formatMessage } = useIntl();
-
     const options: testRendererOptions = {
       ...getDefaultOptions(),
       title: "Awesome Title",
@@ -241,14 +237,8 @@ describe("when accessibilityLabel prop NOT passed to content overlay", () => {
     };
     const contentOverlayScreen = renderAndOpenContentOverlay(options);
 
-    const defaultCloseOverlayA11YLabel = formatMessage(
-      messages.closeOverlayA11YLabel,
-      {
-        title: options.title,
-      },
-    );
     expect(
-      contentOverlayScreen.getAllByLabelText(defaultCloseOverlayA11YLabel),
+      contentOverlayScreen.getAllByLabelText(`Close ${options.title} modal`),
     ).toHaveLength(2);
   });
 });

package/src/ContentOverlay/ContentOverlay.tsx

@@ -19,10 +19,8 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { Portal } from "react-native-portalize";
-import { useIntl } from "react-intl";
 import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { styles } from "./ContentOverlay.style";
-import { messages } from "./messages";
 import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
 import {
   ContentOverlayProps,
@@ -33,6 +31,7 @@ import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { tokens } from "../utils/design";
 import { Heading } from "../Heading";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export const ContentOverlay = forwardRef(ContentOverlayPortal);
 const ContentOverlayModal = forwardRef(ContentOverlayInternal);
@@ -61,7 +60,7 @@ function ContentOverlayInternal(
 ): JSX.Element {
   isDraggable = onBeforeExit ? false : isDraggable;
   const isCloseableOnOverlayTap = onBeforeExit ? false : true;
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [position, setPosition] = useState<"top" | "initial">("initial");
@@ -203,12 +202,9 @@ function ContentOverlayInternal(
   );
 
   function renderHeader() {
-    const closeOverlayA11YLabel = formatMessage(
-      messages.closeOverlayA11YLabel,
-      {
-        title: title,
-      },
-    );
+    const closeOverlayA11YLabel = t("ContentOverlay.close", {
+      title: title,
+    });
 
     const headerStyles = [
       styles.header,

package/src/Form/Form.test.tsx

@@ -1,12 +1,8 @@
 import React from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
-import { useIntl } from "react-intl";
 import { Host } from "react-native-portalize";
 import { Form, FormBannerMessage, FormBannerMessageType } from ".";
-import { messages as formErrorBannerMessages } from "./components/FormErrorBanner/messages";
-import { messages } from "./components/FormSaveButton/messages";
-import { messages as formMessages } from "./messages";
 import { FormBannerErrors, FormSubmitErrorType } from "./types";
 import { defaultValues as contextDefaultValue } from "../AtlantisContext";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
@@ -74,7 +70,7 @@ const testCheckboxName = "testCheckbox";
 const switchLabel = "switchLabel";
 const checkboxLabel = "checkboxLabel";
 const selectLabel = "selectLabel";
-const saveButtonText = messages.saveButton.defaultMessage;
+const saveButtonText = "Save";
 
 const requiredInputText = "This field is required";
 const minLengthText = "Test is too short";
@@ -207,15 +203,15 @@ afterEach(() => {
   jest.clearAllMocks();
 });
 
+const loadingLabel = "Loading";
+const tryAgainLabel = "Try again";
 describe("Form", () => {
   describe("Initial Load", () => {
     it("should show activity indicator", () => {
       const { getByLabelText } = render(
         <FormTest initialLoading={true} onSubmit={onSubmitMock} />,
       );
-      expect(
-        getByLabelText(formMessages.loadingA11YLabel.defaultMessage),
-      ).toBeTruthy();
+      expect(getByLabelText(loadingLabel)).toBeTruthy();
     });
 
     it("should be populated with provided initialValues", () => {
@@ -362,9 +358,7 @@ describe("Form", () => {
       const saveButton = getByLabelText(saveButtonText);
       fireEvent.press(saveButton);
 
-      expect(
-        getByLabelText(formMessages.loadingA11YLabel.defaultMessage),
-      ).toBeTruthy();
+      expect(getByLabelText(loadingLabel)).toBeTruthy();
     });
 
     it("should call beforeSubmit if one is provided", async () => {
@@ -432,14 +426,13 @@ describe("Form", () => {
 
       it("should show offline alert when attempting to save while offline", async () => {
         const alertSpy = jest.spyOn(Alert, "alert");
-        const { formatMessage } = useIntl();
         setup();
 
         await act(wait);
         expect(alertSpy).toHaveBeenCalledTimes(1);
         expect(alertSpy).toHaveBeenCalledWith(
-          formatMessage(formMessages.unavailableNetworkTitle),
-          formatMessage(formMessages.unavailableNetworkMessage),
+          "Network Unavailable",
+          "Check your internet connection and try again later.",
           expect.anything(),
         );
       });
@@ -450,8 +443,7 @@ describe("Form", () => {
         await act(wait);
         const alertActions = alertSpy.mock.calls[0][2];
         const retryAction = alertActions?.find(
-          action =>
-            action.text === formMessages.retryAlertButton.defaultMessage,
+          action => action.text === tryAgainLabel,
         );
         mockSubmit.mockImplementationOnce(() => Promise.resolve());
         retryAction?.onPress?.();
@@ -467,8 +459,7 @@ describe("Form", () => {
         await act(wait);
         const alertActions = alertSpy.mock.calls[0][2];
         const retryAction = alertActions?.find(
-          action =>
-            action.text === formMessages.retryAlertButton.defaultMessage,
+          action => action.text === tryAgainLabel,
         );
         retryAction?.onPress?.();
 
@@ -489,28 +480,6 @@ describe("Form", () => {
       isOnline: false,
     });
 
-    it("renders Offline Banner when disconnected", async () => {
-      const { getByText } = render(<FormTest onSubmit={onSubmitMock} />);
-      const { formatMessage } = useIntl();
-
-      expect(
-        getByText(formatMessage(formErrorBannerMessages.offlineError)),
-      ).toBeDefined();
-    });
-
-    it("does not render Offline Banner when connected", async () => {
-      atlantisContextSpy.mockReturnValue({
-        ...contextDefaultValue,
-        isOnline: true,
-      });
-      const { queryByText } = render(<FormTest onSubmit={onSubmitMock} />);
-      const { formatMessage } = useIntl();
-
-      expect(
-        queryByText(formatMessage(formErrorBannerMessages.offlineError)),
-      ).toBeNull();
-    });
-
     it("renders user errors when provided", async () => {
       const { getByText } = render(
         <FormTest onSubmit={onSubmitMock} sendBannerErrors={true} />,

package/src/Form/components/FormErrorBanner/FormErrorBanner.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { cleanup, render } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { FormErrorBanner } from "./FormErrorBanner";
-import { messages as formErrorBannerMessages } from "./messages";
 import { defaultValues as contextDefaultValue } from "../../../AtlantisContext";
 import * as atlantisContext from "../../../AtlantisContext/AtlantisContext";
 
@@ -16,65 +14,20 @@ describe("FormErrorBanner", () => {
     });
   });
 
-  const { formatMessage } = useIntl();
-  const networkError = new Error();
+  const networkError = "An error occurred";
   const userError = {
     title: "My error",
     messages: ["userError1", "userError2"],
   };
-  const validationErrors = [
-    "This is the first validation error",
-    "This is the second validation error",
-  ];
-
-  it("should render Offline banner when offline", () => {
-    atlantisContextSpy.mockReturnValue({
-      ...contextDefaultValue,
-      isOnline: false,
-    });
-    const { getByText, queryByText } = render(
-      <FormErrorBanner
-        // @ts-expect-error tsc-ci
-        networkError={networkError}
-        bannerError={userError}
-        validationErrors={validationErrors}
-        actionLabel="Action"
-      />,
-    );
-
-    // Show: Offline Message
-    expect(
-      getByText(formatMessage(formErrorBannerMessages.offlineError)),
-    ).toBeDefined();
-
-    // Hide: Network Error, User Error, Validation Error
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.networkError)),
-    ).toBeNull();
-
-    expect(queryByText(userError.title)).toBeNull();
-  });
+  const couldNotSavechanges = "Could not save changes";
 
   it("should render network error banner when online and network errors exist", () => {
     const { getByText, queryByText } = render(
-      <FormErrorBanner
-        // @ts-expect-error tsc-ci
-        networkError={networkError}
-        bannerError={userError}
-        actionLabel="action"
-      />,
+      <FormErrorBanner networkError={networkError} bannerError={userError} />,
     );
 
-    // Show: Network Error
-    expect(
-      getByText(formatMessage(formErrorBannerMessages.networkError)),
-    ).toBeDefined();
-
-    // Hide: Offline Message, User Error, Validation Error
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.offlineError)),
-    ).toBeNull();
-
+    // Show: Network Error only
+    expect(getByText(couldNotSavechanges)).toBeDefined();
     expect(queryByText(userError.title)).toBeNull();
   });
 
@@ -83,19 +36,11 @@ describe("FormErrorBanner", () => {
       <FormErrorBanner bannerError={userError} />,
     );
 
-    // Show: User Error
+    // Show: User Error only
     expect(getByText(userError.title)).toBeDefined();
     expect(getByText(userError.messages[0])).toBeDefined();
     expect(getByText(userError.messages[1])).toBeDefined();
-
-    // Hide: Offline Message, Network Error, Validation Error
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.offlineError)),
-    ).toBeNull();
-
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.networkError)),
-    ).toBeNull();
+    expect(queryByText(couldNotSavechanges)).toBeNull();
   });
 
   it("should render user error banner with just title when online", () => {
@@ -106,17 +51,9 @@ describe("FormErrorBanner", () => {
       <FormErrorBanner bannerError={userErrorJustTitle} />,
     );
 
-    // Show: User Error
+    // Show: User Error only
     expect(getByText(userErrorJustTitle.title)).toBeDefined();
-
-    // Hide: Offline Message, Network Error, Validation Error
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.offlineError)),
-    ).toBeNull();
-
-    expect(
-      queryByText(formatMessage(formErrorBannerMessages.networkError)),
-    ).toBeNull();
+    expect(queryByText(couldNotSavechanges)).toBeNull();
   });
 });
 

package/src/Form/components/FormErrorBanner/FormErrorBanner.tsx

@@ -1,25 +1,16 @@
 import React from "react";
-import { useIntl } from "react-intl";
-import { messages } from "./messages";
 import { FormBannerErrors } from "../../types";
-import { useAtlantisContext } from "../../../AtlantisContext";
 import { Banner } from "../../../Banner";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export function FormErrorBanner({
   networkError,
   bannerError,
 }: FormBannerErrors): JSX.Element {
-  const { formatMessage } = useIntl();
-  const { isOnline } = useAtlantisContext();
+  const { t } = useAtlantisI18n();
 
-  if (!isOnline) {
-    return (
-      <Banner text={formatMessage(messages.offlineError)} type={"error"} />
-    );
-  } else if (networkError) {
-    return (
-      <Banner text={formatMessage(messages.networkError)} type={"error"} />
-    );
+  if (networkError) {
+    return <Banner type={"error"}>{t("errors.couldNotSave")}</Banner>;
   } else if (bannerError) {
     return (
       <Banner
@@ -28,7 +19,7 @@ export function FormErrorBanner({
         type={"error"}
       />
     );
-  } else {
-    return <></>;
   }
+
+  return <></>;
 }