@jobber/components-native 0.45.1 → 0.46.1

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

@@ -51,6 +51,6 @@ export interface AtlantisContextProps {
      */
     readonly setHeaderHeight: (height: number) => void;
 }
-export declare const defaultValues: AtlantisContextProps;
+export declare const atlantisContextDefaultValues: AtlantisContextProps;
 export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;
 export declare function useAtlantisContext(): AtlantisContextProps;

package/dist/types/src/Form/context/AtlantisFormContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AtlantisFormContextProps } from "./types";
-export declare const defaultValues: {
+export declare const atlantisFormContextDefaultValues: {
     useConfirmBeforeBack: () => import("react").MutableRefObject<() => undefined>;
     useInternalFormLocalCache: () => {
         setLocalCache: () => undefined;

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

@@ -1,7 +1,24 @@
 import en from "./locales/en.json";
 export type I18nKeys = keyof typeof en;
 export interface useAtlantisI18nValue {
+    /**
+     * The set locale based on the AtlantisContext.
+     */
     readonly locale: string;
+    /**
+     * Returns the translated string depending on the locale. This accepts a 2nd
+     * param for string interpolation.
+     */
     readonly t: (message: I18nKeys, values?: Record<string, string>) => string;
+    /**
+     * Returns a formatted date string based on the locale and the `dateFormat`
+     * set in AtlantisContext.
+     */
+    readonly formatDate: (date: Date) => string;
+    /**
+     * Returns a formatted time string based on the locale and the `timeFormat`
+     * set in AtlantisContext.
+     */
+    readonly formatTime: (date: Date) => string;
 }
 export declare function useAtlantisI18n(): useAtlantisI18nValue;

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

@@ -0,0 +1,6 @@
+interface DateFormatterOptions {
+    readonly locale: string;
+    readonly timeZone: string;
+}
+export declare function dateFormatter(date: Date, dateTimeFormat: string, { locale, timeZone }: DateFormatterOptions): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.45.1",
+  "version": "0.46.1",
   "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": "8764198c93cfc2812f504b6f6509595ad6b3195c"
+  "gitHead": "ebd19569f57d6c7ef08de4992894952452dfe583"
 }

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -4,7 +4,7 @@ import { cleanup, renderHook } from "@testing-library/react-hooks";
 import {
   AtlantisContext,
   AtlantisContextProps,
-  defaultValues,
+  atlantisContextDefaultValues,
   useAtlantisContext,
 } from "./AtlantisContext";
 
@@ -14,6 +14,7 @@ const providerValues: AtlantisContextProps = {
   dateFormat: "MM/DD/YYYY",
   timeFormat: "hh:mm a",
   timeZone: "America/Edmonton",
+  locale: "en",
   isOnline: false,
   onLogError: _ => {
     return;
@@ -31,7 +32,7 @@ describe("AtlantisContext", () => {
     it("should get the default values", () => {
       const { result } = renderHook(() => useAtlantisContext());
 
-      expect(result.current).toMatchObject(defaultValues);
+      expect(result.current).toMatchObject(atlantisContextDefaultValues);
     });
   });
 

package/src/AtlantisContext/AtlantisContext.tsx

@@ -64,7 +64,7 @@ export interface AtlantisContextProps {
   readonly setHeaderHeight: (height: number) => void;
 }
 
-export const defaultValues: AtlantisContextProps = {
+export const atlantisContextDefaultValues: AtlantisContextProps = {
   dateFormat: "PP",
   // The system time is "p"
   timeFormat: "p",
@@ -82,7 +82,7 @@ export const defaultValues: AtlantisContextProps = {
   },
 };
 
-export const AtlantisContext = createContext(defaultValues);
+export const AtlantisContext = createContext(atlantisContextDefaultValues);
 
 export function useAtlantisContext(): AtlantisContextProps {
   return useContext(AtlantisContext);

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -5,7 +5,7 @@ import { Alert } from "react-native";
 import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
 import { Button } from "../Button";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
-import { defaultValues as contextDefaultValue } from "../AtlantisContext";
+import { atlantisContextDefaultValues } from "../AtlantisContext";
 
 const mockOnOpen = jest.fn();
 
@@ -300,7 +300,7 @@ describe("ButtonGroup Offline/Online", () => {
   it("should show an alert and not fire the onPress", () => {
     const alertSpy = jest.spyOn(Alert, "alert");
     atlantisContextSpy.mockReturnValue({
-      ...contextDefaultValue,
+      ...atlantisContextDefaultValues,
       isOnline: false,
     });
 

package/src/Form/Form.test.tsx

@@ -4,7 +4,7 @@ import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
 import { Form, FormBannerMessage, FormBannerMessageType } from ".";
 import { FormBannerErrors, FormSubmitErrorType } from "./types";
-import { defaultValues as contextDefaultValue } from "../AtlantisContext";
+import { atlantisContextDefaultValues } from "../AtlantisContext";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
 import { Text } from "../Text";
 import { Checkbox } from "../Checkbox";
@@ -476,7 +476,7 @@ describe("Form", () => {
     );
 
     atlantisContextSpy.mockReturnValue({
-      ...contextDefaultValue,
+      ...atlantisContextDefaultValues,
       isOnline: false,
     });
 

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { cleanup, render } from "@testing-library/react-native";
 import { FormErrorBanner } from "./FormErrorBanner";
-import { defaultValues as contextDefaultValue } from "../../../AtlantisContext";
+import { atlantisContextDefaultValues } from "../../../AtlantisContext";
 import * as atlantisContext from "../../../AtlantisContext/AtlantisContext";
 
 describe("FormErrorBanner", () => {
@@ -9,7 +9,7 @@ describe("FormErrorBanner", () => {
 
   beforeEach(() => {
     atlantisContextSpy.mockReturnValue({
-      ...contextDefaultValue,
+      ...atlantisContextDefaultValues,
       isOnline: true,
     });
   });

package/src/Form/context/AtlantisFormContext.test.tsx

@@ -3,7 +3,7 @@ import { renderHook } from "@testing-library/react-hooks";
 import { AtlantisFormContextProps } from "./types";
 import {
   AtlantisFormContext,
-  defaultValues,
+  atlantisFormContextDefaultValues,
   useAtlantisFormContext,
 } from "./AtlantisFormContext";
 
@@ -13,7 +13,6 @@ const useInternalFormLocalCacheMock = jest.fn();
 const providerValues: AtlantisFormContextProps = {
   useConfirmBeforeBack: useConfirmBeforeBackMock,
   useInternalFormLocalCache: useInternalFormLocalCacheMock,
-  headerHeight: 50,
 };
 
 describe("AtlantisFormContext", () => {
@@ -25,7 +24,7 @@ describe("AtlantisFormContext", () => {
     it("should get the default values", () => {
       const { result } = renderHook(() => useAtlantisFormContext());
 
-      expect(result.current).toMatchObject(defaultValues);
+      expect(result.current).toMatchObject(atlantisFormContextDefaultValues);
     });
   });
 

package/src/Form/context/AtlantisFormContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useRef } from "react";
 import { AtlantisFormContextProps } from "./types";
 
-export const defaultValues = {
+export const atlantisFormContextDefaultValues = {
   useConfirmBeforeBack: () => {
     const ref = useRef(() => undefined);
     return ref;
@@ -12,8 +12,9 @@ export const defaultValues = {
   }),
 };
 
-export const AtlantisFormContext =
-  createContext<AtlantisFormContextProps>(defaultValues);
+export const AtlantisFormContext = createContext<AtlantisFormContextProps>(
+  atlantisFormContextDefaultValues,
+);
 
 export function useAtlantisFormContext(): AtlantisFormContextProps {
   return useContext(AtlantisFormContext);

package/src/InputCurrency/InputCurrency.test.tsx

@@ -4,12 +4,12 @@ import { InputCurrency } from "./InputCurrency";
 import {
   AtlantisContext,
   AtlantisContextProps,
-  defaultValues,
+  atlantisContextDefaultValues,
 } from "../AtlantisContext";
 
 const mockCurrencySymbol = "£";
 const atlantisContext: AtlantisContextProps = {
-  ...defaultValues,
+  ...atlantisContextDefaultValues,
   currencySymbol: mockCurrencySymbol,
   timeFormat: "p",
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,

package/src/InputDate/InputDate.test.tsx

@@ -238,7 +238,7 @@ describe("InputDate", () => {
 
     it("should display MM/DD/YYYY when dateFormat is 'P'", () => {
       jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-        ...atlantisContext.defaultValues,
+        ...atlantisContext.atlantisContextDefaultValues,
         dateFormat: "P",
       });
       const expectedDate = "05/24/2023";
@@ -252,7 +252,7 @@ describe("InputDate", () => {
 
     it("should display mmmm d, yyyy when dateFormat is 'PP'", () => {
       jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-        ...atlantisContext.defaultValues,
+        ...atlantisContext.atlantisContextDefaultValues,
         dateFormat: "PP",
       });
       const expectedDate = "Feb 20, 2023";
@@ -266,7 +266,7 @@ describe("InputDate", () => {
 
     it("should display mmmmm d, yyyy when dateFormat is 'PPP'", () => {
       jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-        ...atlantisContext.defaultValues,
+        ...atlantisContext.atlantisContextDefaultValues,
         dateFormat: "PPP",
       });
       const expectedDate = "July 7th, 2023";
@@ -280,7 +280,7 @@ describe("InputDate", () => {
 
     it("should display dddd, mmmmm d, yyyy when dateFormat is 'PPPP'", () => {
       jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-        ...atlantisContext.defaultValues,
+        ...atlantisContext.atlantisContextDefaultValues,
         dateFormat: "PPPP",
       });
       const expectedDate = "Thursday, June 22nd, 2023";

package/src/InputDate/InputDate.tsx

@@ -3,12 +3,9 @@ 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 { utcToZonedTime } from "date-fns-tz";
-import { format as formatDate } from "date-fns";
 import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
-import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface BaseInputDateProps
@@ -153,8 +150,7 @@ function InternalInputDate({
   accessibilityHint,
 }: InputDateProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { t, locale } = useAtlantisI18n();
-  const { timeZone, dateFormat } = useAtlantisContext();
+  const { t, locale, formatDate } = useAtlantisI18n();
 
   const date = useMemo(() => {
     if (typeof value === "string") return new Date(value);
@@ -163,12 +159,11 @@ function InternalInputDate({
 
   const formattedDate = useMemo(() => {
     if (date) {
-      const zonedTime = utcToZonedTime(date, timeZone);
-      return formatDate(zonedTime, dateFormat);
+      return formatDate(date);
     }
 
     return emptyValueLabel;
-  }, [date, emptyValueLabel, timeZone, dateFormat]);
+  }, [date, emptyValueLabel]);
 
   const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
 

package/src/InputText/context/InputAccessoriesContext.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 import { InputAccessoriesContextProps } from "./types";
 
-const defaultValues: InputAccessoriesContextProps = {
+const inputAccessoriesContextDefaultValues: InputAccessoriesContextProps = {
   elements: {},
   focusedInput: "",
   canFocusNext: false,
@@ -14,7 +14,9 @@ const defaultValues: InputAccessoriesContextProps = {
   setFocusedInput: () => undefined,
 };
 
-export const InputAccessoriesContext = createContext(defaultValues);
+export const InputAccessoriesContext = createContext(
+  inputAccessoriesContextDefaultValues,
+);
 
 export function useInputAccessoriesContext(): InputAccessoriesContextProps {
   return useContext(InputAccessoriesContext);

package/src/InputTime/InputTime.test.tsx

@@ -162,7 +162,7 @@ describe("Time picker", () => {
 
     it("should be set to 24 hours", () => {
       jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-        ...atlantisContext.defaultValues,
+        ...atlantisContext.atlantisContextDefaultValues,
         timeZone: "UTC",
         timeFormat: "HH:mm",
       });
@@ -295,7 +295,7 @@ describe("Timezone conversion", () => {
     );
   it("should display the time in the account timezone", async () => {
     jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-      ...atlantisContext.defaultValues,
+      ...atlantisContext.atlantisContextDefaultValues,
       timeZone: "America/Los_Angeles",
     });
 
@@ -309,7 +309,7 @@ describe("Timezone conversion", () => {
 
   it("should have the correct offset on the time picker", async () => {
     jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
-      ...atlantisContext.defaultValues,
+      ...atlantisContext.atlantisContextDefaultValues,
       timeZone: "America/Los_Angeles",
     });
 

package/src/InputTime/InputTime.tsx

@@ -3,8 +3,6 @@ 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 { utcToZonedTime } from "date-fns-tz";
-import { format as formatTime } from "date-fns";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
@@ -134,9 +132,9 @@ function InternalInputTime({
   showIcon = true,
 }: InputTimeProps): JSX.Element {
   const [showPicker, setShowPicker] = useState(false);
-  const { t } = useAtlantisI18n();
-
+  const { t, formatTime } = useAtlantisI18n();
   const { timeZone, timeFormat } = useAtlantisContext();
+
   const is24Hour = timeFormat === "HH:mm";
 
   const dateTime = useMemo(
@@ -146,12 +144,11 @@ function InternalInputTime({
 
   const formattedTime = useMemo(() => {
     if (dateTime) {
-      const zonedTime = utcToZonedTime(dateTime, timeZone);
-      return formatTime(zonedTime, timeFormat);
+      return formatTime(dateTime);
     }
 
     return emptyValueLabel;
-  }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
+  }, [dateTime, emptyValueLabel]);
 
   const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
 

package/src/hooks/useAtlantisI18n/useAtlantisI18n.test.ts

@@ -10,6 +10,15 @@ jest.mock("../../AtlantisContext", () => ({
   ...jest.requireActual("../../AtlantisContext"),
 }));
 
+const spy = jest.spyOn(context, "useAtlantisContext");
+const testDate = new Date("2020-01-01T00:00:00.000Z");
+const dateAfterSpringForward = new Date("2020-04-10T00:00:00.000Z");
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(testDate);
+});
+
 describe("useAtlantisI18n", () => {
   it("should return english by default", () => {
     const { result } = renderHook(useAtlantisI18n);
@@ -27,8 +36,10 @@ describe("useAtlantisI18n", () => {
 
   describe("Español", () => {
     it("should return español", () => {
-      const spy = jest.spyOn(context, "useAtlantisContext");
-      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
+      spy.mockReturnValueOnce({
+        ...context.atlantisContextDefaultValues,
+        locale: "es",
+      });
       const { result } = renderHook(useAtlantisI18n);
 
       expect(result.current.t("cancel")).toBe("Cancelar");
@@ -37,8 +48,10 @@ describe("useAtlantisI18n", () => {
 
   describe("Unsupported language", () => {
     it("should return the english translation", () => {
-      const spy = jest.spyOn(context, "useAtlantisContext");
-      spy.mockReturnValueOnce({ ...context.defaultValues, locale: "fr" });
+      spy.mockReturnValueOnce({
+        ...context.atlantisContextDefaultValues,
+        locale: "fr",
+      });
       const { result } = renderHook(useAtlantisI18n);
 
       expect(result.current.t("cancel")).toBe("Cancel");
@@ -50,4 +63,92 @@ describe("useAtlantisI18n", () => {
       expect(Object.keys(en)).toEqual(Object.keys(es));
     });
   });
+
+  describe("formatDate", () => {
+    it("should return the formatted date", () => {
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
+    });
+
+    it("should return the date formatted for es", () => {
+      spy.mockReturnValueOnce({
+        ...context.atlantisContextDefaultValues,
+        locale: "es",
+      });
+
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatDate(testDate)).toBe("1 ene 2020");
+    });
+
+    describe("Timezone", () => {
+      it.each([
+        ["America/New_York", "Dec 31, 2019"],
+        ["America/Chicago", "Dec 31, 2019"],
+        ["America/Denver", "Dec 31, 2019"],
+        ["Europe/London", "Jan 1, 2020"],
+        ["Australia/Sydney", "Jan 1, 2020"],
+      ])("should return the %s time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          timeZone,
+        });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatDate(testDate)).toBe(expected);
+      });
+    });
+  });
+
+  describe("formatTime", () => {
+    it("should return the formatted time", () => {
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatTime(testDate)).toBe("12:00 AM");
+    });
+
+    it("should return the date formatted for es", () => {
+      spy.mockReturnValueOnce({
+        ...context.atlantisContextDefaultValues,
+        locale: "es",
+      });
+
+      const { result } = renderHook(useAtlantisI18n);
+      expect(result.current.formatTime(testDate)).toBe("00:00");
+    });
+
+    describe("Timezone", () => {
+      it.each([
+        ["America/New_York", "7:00 PM"],
+        ["America/Chicago", "6:00 PM"],
+        ["America/Denver", "5:00 PM"],
+        ["Europe/London", "12:00 AM"],
+        ["Australia/Sydney", "11:00 AM"],
+      ])("should return the %s zoned time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          timeZone,
+        });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(testDate)).toBe(expected);
+      });
+
+      it.each([
+        ["America/New_York", "8:00 PM"],
+        ["America/Chicago", "7:00 PM"],
+        ["America/Denver", "6:00 PM"],
+        ["Europe/London", "1:00 AM"],
+        ["Australia/Sydney", "10:00 AM"],
+      ])("should return the %s spring zoned time", (timeZone, expected) => {
+        spy.mockReturnValueOnce({
+          ...context.atlantisContextDefaultValues,
+          timeZone,
+        });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(dateAfterSpringForward)).toBe(
+          expected,
+        );
+      });
+    });
+  });
 });

package/src/hooks/useAtlantisI18n/useAtlantisI18n.ts

@@ -1,20 +1,56 @@
+import { useCallback } from "react";
 import en from "./locales/en.json";
 import es from "./locales/es.json";
+import { dateFormatter } from "./utils/dateFormatter";
 import { useAtlantisContext } from "../../AtlantisContext";
 
 export type I18nKeys = keyof typeof en;
 
 export interface useAtlantisI18nValue {
+  /**
+   * The set locale based on the AtlantisContext.
+   */
   readonly locale: string;
+
+  /**
+   * Returns the translated string depending on the locale. This accepts a 2nd
+   * param for string interpolation.
+   */
   readonly t: (message: I18nKeys, values?: Record<string, string>) => string;
+
+  /**
+   * Returns a formatted date string based on the locale and the `dateFormat`
+   * set in AtlantisContext.
+   */
+  readonly formatDate: (date: Date) => string;
+
+  /**
+   * Returns a formatted time string based on the locale and the `timeFormat`
+   * set in AtlantisContext.
+   */
+  readonly formatTime: (date: Date) => string;
 }
 
 export function useAtlantisI18n(): useAtlantisI18nValue {
-  const { locale } = useAtlantisContext();
-  const t = (messageKey: keyof typeof en, values?: Record<string, string>) =>
-    formatMessage(messageKey, values, locale);
+  const { locale, dateFormat, timeFormat, timeZone } = useAtlantisContext();
+
+  const t = useCallback(
+    (messageKey: keyof typeof en, values?: Record<string, string>) =>
+      formatMessage(messageKey, values, locale),
+    [formatMessage, locale],
+  );
+
+  const formatDate = useCallback(
+    (date: Date) => dateFormatter(date, dateFormat, { locale, timeZone }),
+    [dateFormatter, locale],
+  );
+
+  const formatTime = useCallback(
+    (date: Date) => dateFormatter(date, timeFormat, { locale, timeZone }),
+    [dateFormatter, locale],
+  );
 
-  return { locale, t };
+  return { locale, t, formatDate, formatTime };
 }
 
 function getLocalizedStrings(locale: string): typeof en {

package/src/hooks/useAtlantisI18n/utils/dateFormatter.ts

@@ -0,0 +1,31 @@
+import { format } from "date-fns";
+import { utcToZonedTime } from "date-fns-tz";
+import { es } from "date-fns/locale";
+
+interface DateFormatterOptions {
+  readonly locale: string;
+  readonly timeZone: string;
+}
+
+export function dateFormatter(
+  date: Date,
+  dateTimeFormat: string,
+  { locale, timeZone }: DateFormatterOptions,
+): string {
+  const zonedTime = utcToZonedTime(date, timeZone);
+  return format(zonedTime, dateTimeFormat, {
+    locale: getDateFnsLocale(locale),
+  });
+}
+
+/**
+ * Change locale string to date-fns locale object.
+ */
+function getDateFnsLocale(locale?: string): Locale | undefined {
+  switch (locale) {
+    case "es":
+      return es;
+    default:
+      return;
+  }
+}