@jobber/components-native 0.44.2 → 0.45.1

package/src/InputCurrency/InputCurrency.tsx

@@ -11,10 +11,10 @@ import {
   limitInputWholeDigits,
   parseGivenInput,
 } from "./utils";
-import { messages } from "./messages";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputText, InputTextProps } from "../InputText";
 import { useFormController } from "../hooks/useFormController";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface InputCurrencyProps
   extends Omit<
@@ -164,7 +164,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
     }
   };
 
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   return (
     <>
@@ -186,7 +186,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
         validations={{
           pattern: {
             value: NUMBER_VALIDATION_REGEX,
-            message: formatMessage(messages.notANumberError),
+            message: t("errors.notANumber"),
           },
           ...props.validations,
         }}

package/src/InputDate/InputDate.tsx

@@ -3,14 +3,13 @@ import DateTimePicker from "react-native-modal-datetime-picker";
 import { Platform } from "react-native";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { useIntl } from "react-intl";
 import { utcToZonedTime } from "date-fns-tz";
 import { format as formatDate } from "date-fns";
-import { messages } from "./messages";
 import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisContext } from "../AtlantisContext";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface BaseInputDateProps
   extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
@@ -154,7 +153,7 @@ function InternalInputDate({
   accessibilityHint,
 }: InputDateProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { formatMessage } = useIntl();
+  const { t, locale } = useAtlantisI18n();
   const { timeZone, dateFormat } = useAtlantisContext();
 
   const date = useMemo(() => {
@@ -173,8 +172,7 @@ function InternalInputDate({
 
   const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
 
-  const placeholderLabel =
-    placeholder ?? formatMessage(messages.datePlaceholder);
+  const placeholderLabel = placeholder ?? t("date");
 
   return (
     <>
@@ -198,6 +196,9 @@ function InternalInputDate({
         maximumDate={maxDate}
         minimumDate={minDate}
         mode="date"
+        confirmTextIOS={t("confirm")}
+        cancelTextIOS={t("cancel")}
+        locale={locale}
         onCancel={handleCancel}
         onConfirm={handleConfirm}
       />

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
 // eslint-disable-next-line no-restricted-imports
 import { Text, ViewStyle } from "react-native";
-import { useIntl } from "react-intl";
 import {
   InputFieldWrapper,
   InputFieldWrapperProps,
   commonInputStyles,
 } from ".";
-import { messages as clearMessages } from "./components/ClearAction";
 import { styles } from "./InputFieldWrapper.style";
 import { typographyStyles } from "../Typography";
 
@@ -32,6 +30,7 @@ function renderWithSuffixLabel(hasValue: boolean): RenderAPI {
   return renderInputFieldWrapper({ suffix: mockLabel, hasValue });
 }
 
+const clearInput = "Clear input";
 describe("InputFieldWrapper", () => {
   it("renders an invalid InputFieldWrapper", () => {
     const { getByTestId } = renderInputFieldWrapper({ invalid: true });
@@ -120,36 +119,26 @@ describe("InputFieldWrapper", () => {
 
   describe("ClearAction", () => {
     it("renders the Clear Action Button when showClearAction is true", () => {
-      const { formatMessage } = useIntl();
       const { getByLabelText } = renderInputFieldWrapper({
         showClearAction: true,
       });
-      expect(
-        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
-      ).toBeDefined();
+      expect(getByLabelText(clearInput)).toBeDefined();
     });
 
     it("does not render the Clear Action Button when showClearAction is false", () => {
-      const { formatMessage } = useIntl();
       const { queryByLabelText } = renderInputFieldWrapper({
         showClearAction: false,
       });
-      expect(
-        queryByLabelText(formatMessage(clearMessages.clearTextLabel)),
-      ).toBeNull();
+      expect(queryByLabelText(clearInput)).toBeNull();
     });
 
     it("calls onClear when the Clear Action button is pressed", () => {
-      const { formatMessage } = useIntl();
       const onClear = jest.fn();
       const { getByLabelText } = renderInputFieldWrapper({
         showClearAction: true,
         onClear: onClear,
       });
-      fireEvent(
-        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
-        "press",
-      );
+      fireEvent(getByLabelText(clearInput), "press");
       expect(onClear).toHaveBeenCalled();
     });
   });

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

@@ -1,15 +1,11 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
-import { useIntl } from "react-intl";
 import { ClearAction } from "./ClearAction";
-import { messages } from "./messages";
 
 it("should call the handler", () => {
   const pressHandler = jest.fn();
-  const { formatMessage } = useIntl();
-
   const { getByLabelText } = render(<ClearAction onPress={pressHandler} />);
 
-  fireEvent.press(getByLabelText(formatMessage(messages.clearTextLabel)));
+  fireEvent.press(getByLabelText("Clear input"));
   expect(pressHandler).toHaveBeenCalled();
 });

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}