@jobber/components-native 0.44.2 → 0.45.0

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { useIntl } from "react-intl";
 import { styles } from "./ClearAction.style";
-import { messages } from "./messages";
 import { Icon } from "../../../Icon";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 interface ClearActionProps {
   /**
@@ -17,12 +16,12 @@ export function ClearAction({
   onPress,
   hasMarginRight = false,
 }: ClearActionProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   return (
     <Pressable
       style={[styles.container, hasMarginRight && styles.addedMargin]}
       onPress={onPress}
-      accessibilityLabel={formatMessage(messages.clearTextLabel)}
+      accessibilityLabel={t("InputFieldWrapper.clear")}
     >
       <View style={styles.circle}>
         <Icon size="small" name="cross" color="interactiveSubtle" />

package/src/InputFieldWrapper/components/ClearAction/index.ts

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

package/src/InputNumber/InputNumber.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { InputNumber } from ".";
-import { messages } from "./messages";
 
 type OS = "ios" | "android";
 let Platform: { OS: OS };
@@ -28,8 +26,9 @@ it.each(platforms)(
   },
 );
 
+const notANumberErrorMessage = "Enter a number";
+
 it("Displays a validation message when the value is not a number", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { getByText, getByLabelText } = render(
@@ -42,7 +41,7 @@ it("Displays a validation message when the value is not a number", async () => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
   expect(
-    getByText(formatMessage(messages.notANumberError), {
+    getByText(notANumberErrorMessage, {
       includeHiddenElements: true,
     }),
   ).toBeDefined();
@@ -74,7 +73,6 @@ it("doesn't change the value when the input is controlled without an onChange",
 });
 
 it("passes validation when decimal value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -86,12 +84,11 @@ it("passes validation when decimal value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
 });
 
 it("passes validation when negative value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -104,12 +101,11 @@ it("passes validation when negative value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
 });
 
 it("passes validation when negative decimal value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -121,12 +117,11 @@ it("passes validation when negative decimal value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
 });
 
 it("passes validation when explicit positive value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -139,12 +134,11 @@ it("passes validation when explicit positive value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
 });
 
 it("passes validation when e notation value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -157,12 +151,11 @@ it("passes validation when e notation value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
 });
 
 it("passes validation when e notation decimal value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -175,12 +168,11 @@ it("passes validation when e notation decimal value is entered", async () => {
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
 });
 
 it("passes validation when e notation for representing decimal value is entered", async () => {
-  const { formatMessage } = useIntl();
   const a11yLabel = "InputNumberTest";
   const onChange = jest.fn();
   const { queryByText, getByLabelText } = render(
@@ -193,7 +185,7 @@ it("passes validation when e notation for representing decimal value is entered"
   await waitFor(() => {
     fireEvent(getByLabelText(a11yLabel), "blur");
   });
-  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(queryByText(notANumberErrorMessage)).toBeNull();
   expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
 });
 

package/src/InputNumber/InputNumber.tsx

@@ -1,10 +1,9 @@
 import React, { Ref, forwardRef, useState } from "react";
 import { Platform } from "react-native";
-import { useIntl } from "react-intl";
 import flow from "lodash/flow";
 import identity from "lodash/identity";
-import { messages } from "./messages";
 import { InputText, InputTextProps, InputTextRef } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 type NumberKeyboard = "decimal-pad" | "numbers-and-punctuation";
 export interface InputNumberProps
@@ -36,7 +35,7 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       return "numeric";
     }
   };
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const handleChange = (newValue: number | string | undefined) => {
     props.onChange?.(newValue);
   };
@@ -58,7 +57,7 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       validations={{
         pattern: {
           value: NUMBER_VALIDATION_REGEX,
-          message: formatMessage(messages.notANumberError),
+          message: t("errors.notANumber"),
         },
         ...props.validations,
       }}

package/src/InputPassword/InputPassword.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { InputPassword } from "./InputPassword";
-import { messages } from "./messages";
 import { InputFieldWrapperProps } from "../InputFieldWrapper";
 
 const MockInputFieldWrapper = jest.fn();
@@ -30,7 +29,7 @@ describe("InputPassword", () => {
     });
 
     expect(
-      getByText(messages.passwordRequired.defaultMessage, {
+      getByText("Enter a password", {
         includeHiddenElements: true,
       }),
     ).toBeDefined();

package/src/InputPassword/InputPassword.tsx

@@ -1,8 +1,7 @@
 import React, { Ref, forwardRef, useState } from "react";
-import { useIntl } from "react-intl";
 import { IconNames } from "@jobber/design";
-import { messages } from "./messages";
 import { InputText, InputTextProps, InputTextRef } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export const InputPassword = forwardRef(InputPasswordInternal);
 
@@ -23,7 +22,7 @@ function InputPasswordInternal(
   { usePrivacyEye = true, ...props }: InputPasswordProps,
   ref: Ref<InputTextRef>,
 ): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
   const [passwordHidden, setPasswordHidden] = useState(true);
   const [privacyEye, setPrivacyEye] = useState<IconNames>("eye");
 
@@ -59,7 +58,7 @@ function InputPasswordInternal(
       validations={{
         required: {
           value: true,
-          message: formatMessage(messages.passwordRequired),
+          message: t("InputPassword.enterPassword"),
         },
         ...props.validations,
       }}

package/src/InputSearch/InputSearch.test.tsx

@@ -5,9 +5,7 @@ import {
   render,
   waitFor,
 } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { InputSearch } from "./InputSearch";
-import { messages as clearMessages } from "../InputFieldWrapper/components/ClearAction";
 
 const accessibilityLabelSearch = "Search";
 const accessibilityHint = "Search clients, properties, quotes, etc.";
@@ -63,14 +61,11 @@ describe("InputSearch", () => {
 
   it("clears the search value when the clear button is pressed", () => {
     searchValue = "test search value";
-    const { formatMessage } = useIntl();
     const { getByLabelText } = setup();
 
     fireEvent(getByLabelText(accessibilityLabelSearch), "focus");
 
-    const inputSearchClearButton = getByLabelText(
-      formatMessage(clearMessages.clearTextLabel),
-    );
+    const inputSearchClearButton = getByLabelText("Clear input");
     fireEvent.press(inputSearchClearButton);
     expect(mockOnChange).toHaveBeenCalledWith("");
   });

package/src/InputText/InputText.test.tsx

@@ -5,11 +5,9 @@ import {
   render,
   waitFor,
 } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { Platform, TextStyle } from "react-native";
 import { InputText, InputTextProps } from "./InputText";
 import { InputAccessoriesProvider } from "./context";
-import { messages as ClearMessages } from "../InputFieldWrapper/components/ClearAction/messages";
 import {
   Clearable,
   InputFieldWrapperProps,
@@ -39,6 +37,7 @@ function renderInputText(props: InputTextProps): RenderAPI {
   return render(<InputText {...props} />);
 }
 
+const clearInput = "Clear input";
 // eslint-disable-next-line max-statements
 describe("InputText", () => {
   describe("InputFieldWrapper gets the expected props", () => {
@@ -323,30 +322,23 @@ describe("InputText", () => {
 
     describe("clearable set to always", () => {
       it("renders the clear button when there is a value", () => {
-        const { formatMessage } = useIntl();
         const { getByLabelText } = setup({
           clearable: "always",
           value: "test value",
         });
 
-        const clearButton = getByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = getByLabelText(clearInput);
         expect(clearButton).toBeDefined();
       });
 
       it("doesn't render the clear button if there is no value", () => {
-        const { formatMessage } = useIntl();
         const { queryByLabelText } = setup({ clearable: "always", value: "" });
 
-        const clearButton = queryByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = queryByLabelText(clearInput);
         expect(clearButton).toBeNull();
       });
 
       it("renders the clear button when there is a value and you are focused", async () => {
-        const { formatMessage } = useIntl();
         const { getByLabelText } = setup({
           clearable: "always",
           value: "test value",
@@ -354,16 +346,13 @@ describe("InputText", () => {
         });
         await fireEvent(getByLabelText("clearableTest"), "focus");
 
-        const clearButton = getByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = getByLabelText(clearInput);
         expect(clearButton).toBeDefined();
       });
     });
 
     describe("clearable set to when editing", () => {
       it("renders the clear button when there is a value and it is being edited", async () => {
-        const { formatMessage } = useIntl();
         const { getByLabelText } = setup({
           clearable: "while-editing",
           value: "Test Input",
@@ -371,29 +360,23 @@ describe("InputText", () => {
         });
         await fireEvent(getByLabelText("clearableTest"), "focus");
 
-        const clearButton = getByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = getByLabelText(clearInput);
         expect(clearButton).toBeDefined();
       });
 
       it("doesn't render the clear button if the user isn't editing", () => {
-        const { formatMessage } = useIntl();
         const { queryByLabelText } = setup({
           clearable: "while-editing",
           value: "Test value",
         });
 
-        const clearButton = queryByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = queryByLabelText(clearInput);
         expect(clearButton).toBeNull();
       });
     });
 
     describe("clearable set to never", () => {
       it("shouldn't show the button when it is being edited", async () => {
-        const { formatMessage } = useIntl();
         const { getByLabelText, queryByLabelText } = setup({
           clearable: "never",
           value: "Test Input",
@@ -401,29 +384,23 @@ describe("InputText", () => {
         });
         await fireEvent(getByLabelText("clearableTest"), "focus");
 
-        const clearButton = queryByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = queryByLabelText(clearInput);
         expect(clearButton).toBeNull();
       });
 
       it("shouldn't show the clear button when the user is not editing", () => {
-        const { formatMessage } = useIntl();
         const { queryByLabelText } = setup({
           clearable: "never",
           value: "Test Input",
           accessibilityLabel: "clearableTest",
         });
 
-        const clearButton = queryByLabelText(
-          formatMessage(ClearMessages.clearTextLabel),
-        );
+        const clearButton = queryByLabelText(clearInput);
         expect(clearButton).toBeNull();
       });
     });
 
     it("should clear the value when the clear button is pressed", () => {
-      const { formatMessage } = useIntl();
       const onChangeHandler = jest.fn();
       const { getByLabelText } = setup({
         clearable: "always",
@@ -431,15 +408,12 @@ describe("InputText", () => {
         onChangeText: onChangeHandler,
       });
 
-      const clearButton = getByLabelText(
-        formatMessage(ClearMessages.clearTextLabel),
-      );
+      const clearButton = getByLabelText(clearInput);
       fireEvent(clearButton, "press");
       expect(onChangeHandler).toHaveBeenCalledWith("");
     });
 
     it("shouldn't render the clear button if the input is disabled", () => {
-      const { formatMessage } = useIntl();
       const { queryByLabelText } = setup({
         clearable: "always",
         value: "Test value",
@@ -447,9 +421,7 @@ describe("InputText", () => {
         disabled: true,
       });
 
-      const clearButton = queryByLabelText(
-        formatMessage(ClearMessages.clearTextLabel),
-      );
+      const clearButton = queryByLabelText(clearInput);
       expect(clearButton).toBeNull();
     });
   });

package/src/InputTime/InputTime.tsx

@@ -3,16 +3,15 @@ import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { utcToZonedTime } from "date-fns-tz";
 import { format as formatTime } from "date-fns";
 import { styles } from "./InputTime.style";
-import { messages } from "./messages";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
 import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface InputTimeBaseProps
   extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
@@ -135,7 +134,7 @@ function InternalInputTime({
   showIcon = true,
 }: InputTimeProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   const { timeZone, timeFormat } = useAtlantisContext();
   const is24Hour = timeFormat === "HH:mm";
@@ -162,7 +161,7 @@ function InternalInputTime({
         clearable={canClearTime}
         disabled={disabled}
         invalid={invalid}
-        placeholder={placeholder ?? formatMessage(messages.time)}
+        placeholder={placeholder ?? t("time")}
         prefix={showIcon ? { icon: "timer" } : undefined}
         value={formattedTime}
         onClear={handleClear}

package/src/Menu/Menu.test.tsx

@@ -4,7 +4,6 @@ import { Host } from "react-native-portalize";
 import { View } from "react-native";
 import { tokens } from "@jobber/design/foundation";
 import { Menu, MenuOptionProps, MenuProps } from ".";
-import { messages } from "./messages";
 import { Icon } from "../Icon";
 import { Button } from "../Button";
 
@@ -24,6 +23,8 @@ const setup = (props?: MenuProps) => {
   );
 };
 
+const menuLabel = "Menu";
+
 describe("Menu", () => {
   beforeEach(() => {
     mockOnPress.mockClear();
@@ -35,7 +36,7 @@ describe("Menu", () => {
     });
 
     expect(getByTestId("more")).toBeDefined();
-    expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+    expect(getByLabelText(menuLabel)).toBeDefined();
   });
 
   it("renders every menu option when menu is opened", () => {
@@ -48,7 +49,7 @@ describe("Menu", () => {
       menuOptions,
     });
 
-    fireEvent.press(getByLabelText(messages.more.defaultMessage));
+    fireEvent.press(getByLabelText(menuLabel));
     expect(getByLabelText(menuOptions[0].label)).toBeDefined();
     expect(getByLabelText(menuOptions[1].label)).toBeDefined();
     expect(getByLabelText(menuOptions[2].label)).toBeDefined();
@@ -116,7 +117,7 @@ describe("Menu", () => {
         ],
       });
 
-      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText(menuLabel));
       fireEvent.press(getByLabelText("hi"));
       expect(mockOnPress).toHaveBeenCalled();
     });
@@ -128,7 +129,7 @@ describe("Menu", () => {
         ],
       });
 
-      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText(menuLabel));
       expect(getByTestId("add").props.style).toContainEqual({
         display: "flex",
         fill: tokens["color-critical"],
@@ -150,7 +151,7 @@ describe("Menu", () => {
         ],
       });
 
-      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText(menuLabel));
       fireEvent.press(getByLabelText("hi"));
       expect(mockOnPress).toHaveBeenCalled();
       expect(queryByLabelText("hi")).toBeNull();
@@ -167,7 +168,7 @@ describe("Menu", () => {
           },
         ],
       });
-      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText(menuLabel));
       expect(getByText("Hi")).toBeDefined();
     });
 
@@ -182,7 +183,7 @@ describe("Menu", () => {
           },
         ],
       });
-      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText(menuLabel));
       expect(getByText("hi")).toBeDefined();
     });
   });
@@ -192,7 +193,7 @@ describe("Menu", () => {
       menuOptions: [{ label: "hi", icon: "add", onPress: mockOnPress }],
     });
 
-    fireEvent.press(getByLabelText(messages.more.defaultMessage));
+    fireEvent.press(getByLabelText(menuLabel));
 
     expect(getByTestId("ATL-MENU-OPTIONS")).toBeDefined();
     expect(getByTestId("add")).toBeDefined();

package/src/Menu/Menu.tsx

@@ -6,10 +6,8 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { Portal } from "react-native-portalize";
-import { useIntl } from "react-intl";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { styles } from "./Menu.style";
-import { messages } from "./messages";
 import { findViewpoint } from "./utils";
 import { MenuProps } from "./types";
 import { MenuOption } from "./components/MenuOption";
@@ -18,6 +16,7 @@ import { tokens } from "../utils/design";
 import { Button } from "../Button";
 import { Content } from "../Content";
 import { useAtlantisContext } from "../AtlantisContext";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
@@ -26,7 +25,7 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
   const menuButtonRef = useRef<View | null>();
   const screenInfo = useScreenInformation();
 
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   const findMenuLayout = useCallback(() => {
     if (activatorLayout.current) {
@@ -78,7 +77,7 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
         {!customActivator && (
           <Button
             icon="more"
-            accessibilityLabel={formatMessage(messages.more)}
+            accessibilityLabel={t("menu")}
             variation="cancel"
             type="tertiary"
             onPress={() => {

package/src/ProgressBar/ProgressBar.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { View } from "react-native";
-import { useIntl } from "react-intl";
 import { ProgressBarProps } from "./types";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
-import { messages } from "./messages";
 import { tokens } from "../utils/design";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export function ProgressBar({
   loading,
@@ -15,17 +14,13 @@ export function ProgressBar({
   reverseTheme = false,
   header,
 }: ProgressBarProps): JSX.Element {
-  const { formatMessage } = useIntl();
-  const accessibilityLabel = [];
-  accessibilityLabel.push(formatMessage(messages.complete, { current, total }));
-  inProgress &&
-    accessibilityLabel.push(formatMessage(messages.inProgress, { inProgress }));
+  const { t } = useAtlantisI18n();
 
   return (
     <View
       accessible
       accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel.join(", ")}
+      accessibilityLabel={getA11yLabel()}
     >
       {header}
       <View style={styles.progressBarContainer}>
@@ -55,4 +50,18 @@ export function ProgressBar({
       </View>
     </View>
   );
+
+  function getA11yLabel(): string {
+    const a11yLabelValues = {
+      current: String(current),
+      total: String(total),
+      inProgress: String(inProgress),
+    };
+
+    if (inProgress) {
+      return t("ProgressBar.inProgress", a11yLabelValues);
+    }
+
+    return t("ProgressBar.complete", a11yLabelValues);
+  }
 }

package/src/Select/Select.test.tsx

@@ -8,7 +8,6 @@ import {
 import { tokens } from "@jobber/design/foundation";
 import { AccessibilityInfo } from "react-native";
 import { Option, Select } from ".";
-import { messages } from "./messages";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
 
 const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
@@ -24,6 +23,8 @@ afterEach(() => {
   jest.resetAllMocks();
 });
 
+const defaultPlaceholder = "Select an option";
+
 describe("Select", () => {
   it("renders a Select", () => {
     const component = render(
@@ -34,7 +35,7 @@ describe("Select", () => {
     );
     expect(component.getByTestId("arrowDown")).toBeDefined();
     expect(
-      component.getByText(messages.emptyValue.defaultMessage, {
+      component.getByText(defaultPlaceholder, {
         includeHiddenElements: true,
       }),
     ).toBeDefined();
@@ -191,9 +192,7 @@ describe("Select", () => {
       );
 
       expect(
-        getByText(messages.emptyValue.defaultMessage, {
-          includeHiddenElements: true,
-        }),
+        getByText(defaultPlaceholder, { includeHiddenElements: true }),
       ).toBeDefined();
     });