@jobber/components-native 0.45.0 → 0.46.0

package/dist/types/src/AutoLink/utils.d.ts

@@ -1,6 +1,6 @@
 import { Match } from "autolinker";
-import { MessageDescriptor } from "react-intl";
+import { useAtlantisI18nValue } from "../hooks/useAtlantisI18n";
 export declare function shouldIgnoreURL(text: string, match: Match): boolean;
 export declare function getUrl(match: Match, immediateOpen?: boolean): string;
-export declare function onLongPressLink(match: Match, bottomTabsVisible: boolean, formatMessage: (message: MessageDescriptor) => string): void;
+export declare function onLongPressLink(match: Match, bottomTabsVisible: boolean, t: useAtlantisI18nValue["t"]): void;
 export declare function onPressLink(match: Match): void;

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

@@ -1,6 +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;
-    readonly t: (message: keyof typeof en, values?: Record<string, string>) => 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.0",
+  "version": "0.46.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": "90e9d2a124e1d65d678364063f6ef57e066939af"
+  "gitHead": "6ff59b16b38fdf784fa15bcfa41eb97181d2f6b0"
 }

package/src/AutoLink/AutoLink.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { copyTextToClipboard } from "./clipboard";
 import { AutoLink } from "./AutoLink";
-import { messages } from "./messages";
 
 const mockOpenUrl = jest.fn();
 jest.mock("react-native/Libraries/Linking/Linking", () => ({
@@ -48,7 +47,7 @@ describe("AutoLink", () => {
       fireEvent(getByText(linkText), "onLongPress");
 
       const expectedToastConfig = {
-        message: messages.urlCopied.defaultMessage,
+        message: "URL copied",
         bottomTabsVisible: true,
       };
       expect(copyTextToClipboard).toHaveBeenCalledWith(
@@ -104,7 +103,7 @@ describe("AutoLink", () => {
       fireEvent(getByText(emailText), "onLongPress");
 
       const expectedToastConfig = {
-        message: messages.emailCopied.defaultMessage,
+        message: "Email copied",
         bottomTabsVisible: true,
       };
       expect(copyTextToClipboard).toHaveBeenCalledWith(
@@ -158,7 +157,7 @@ describe("AutoLink", () => {
       fireEvent(getByText(phoneText), "onLongPress");
 
       const expectedToastConfig = {
-        message: messages.phoneCopied.defaultMessage,
+        message: "Phone number copied",
         bottomTabsVisible: true,
       };
       expect(copyTextToClipboard).toHaveBeenCalledWith(

package/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { useIntl } from "react-intl";
 import { Platform } from "react-native";
 import { ComposeTextWithLinksProps } from "../../types";
 import { onLongPressLink, onPressLink } from "../../utils";
 import { Link } from "../Link/Link";
 import { Text } from "../../../Text";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 export function ComposeTextWithLinks({
   part,
@@ -13,7 +13,7 @@ export function ComposeTextWithLinks({
   bottomTabsVisible,
   selectable = true,
 }: ComposeTextWithLinksProps): JSX.Element {
-  const { formatMessage } = useIntl();
+  const { t } = useAtlantisI18n();
 
   const isLink = match?.getType();
 
@@ -26,7 +26,7 @@ export function ComposeTextWithLinks({
           if (selectable && Platform.OS === "android") {
             return;
           }
-          onLongPressLink(match, bottomTabsVisible, formatMessage);
+          onLongPressLink(match, bottomTabsVisible, t);
         }}
       >
         {match.getAnchorText()}

package/src/AutoLink/utils.ts

@@ -1,9 +1,7 @@
 import { EmailMatch, Match, PhoneMatch } from "autolinker";
-import { MessageDescriptor } from "react-intl";
 import { Linking } from "react-native";
-import { messages } from "./messages";
-import { LinkType } from "./types";
 import { copyTextToClipboard } from "./clipboard";
+import { I18nKeys, useAtlantisI18nValue } from "../hooks/useAtlantisI18n";
 
 function hasPrefix(text: string, prefixes: string[]): boolean {
   return prefixes.some(prefix => text.includes(prefix));
@@ -46,12 +44,12 @@ export function getUrl(match: Match, immediateOpen = true): string {
 export function onLongPressLink(
   match: Match,
   bottomTabsVisible: boolean,
-  formatMessage: (message: MessageDescriptor) => string,
+  t: useAtlantisI18nValue["t"],
 ): void {
   const linkUrl = getUrl(match, false);
 
   const toastConfig = {
-    message: formatMessage(messages[`${match.getType() as LinkType}Copied`]),
+    message: t(getMessageKey(match)),
     bottomTabsVisible,
   };
   copyTextToClipboard(linkUrl, toastConfig);
@@ -61,3 +59,16 @@ export function onPressLink(match: Match): void {
   const linkUrl = getUrl(match);
   Linking.openURL(linkUrl);
 }
+
+function getMessageKey(match: Match): I18nKeys {
+  switch (match.getType()) {
+    case "email":
+      return "AutoLink.emailCopied";
+    case "phone":
+      return "AutoLink.phoneCopied";
+    case "url":
+      return "AutoLink.urlCopied";
+    default:
+      return "copied";
+  }
+}

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/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/locales/en.json

@@ -1,6 +1,10 @@
 {
+  "AutoLink.emailCopied": "Email copied",
+  "AutoLink.phoneCopied": "Phone number copied",
+  "AutoLink.urlCopied": "URL copied",
   "cancel": "Cancel",
   "confirm": "Confirm",
+  "copied": "Copied",
   "date": "Date",
   "dismiss": "Dismiss",
   "done": "Done",

package/src/hooks/useAtlantisI18n/locales/es.json

@@ -1,6 +1,10 @@
 {
+  "AutoLink.emailCopied": "Correo electrónico copiado",
+  "AutoLink.phoneCopied": "Número de teléfono copiado",
+  "AutoLink.urlCopied": "URL copiada",
   "cancel": "Cancelar",
   "confirm": "Confirmar",
+  "copied": "Copiado",
   "date": "Fecha",
   "dismiss": "Descartar",
   "done": "Listo",

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,7 +36,6 @@ describe("useAtlantisI18n", () => {
 
   describe("Español", () => {
     it("should return español", () => {
-      const spy = jest.spyOn(context, "useAtlantisContext");
       spy.mockReturnValueOnce({ ...context.defaultValues, locale: "es" });
       const { result } = renderHook(useAtlantisI18n);
 
@@ -37,7 +45,6 @@ describe("useAtlantisI18n", () => {
 
   describe("Unsupported language", () => {
     it("should return the english translation", () => {
-      const spy = jest.spyOn(context, "useAtlantisContext");
       spy.mockReturnValueOnce({ ...context.defaultValues, locale: "fr" });
       const { result } = renderHook(useAtlantisI18n);
 
@@ -50,4 +57,77 @@ 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.defaultValues, 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.defaultValues, 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.defaultValues, 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.defaultValues, 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.defaultValues, timeZone });
+
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.formatTime(dateAfterSpringForward)).toBe(
+          expected,
+        );
+      });
+    });
+  });
 });

package/src/hooks/useAtlantisI18n/useAtlantisI18n.ts

@@ -1,21 +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;
-  readonly t: (
-    message: keyof typeof en,
-    values?: Record<string, string>,
-  ) => 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;
+  }
+}

package/dist/src/AutoLink/messages.js

@@ -1,18 +0,0 @@
-import { defineMessages } from "react-intl";
-export const messages = defineMessages({
-    phoneCopied: {
-        id: "phoneCopied",
-        defaultMessage: "Phone number copied",
-        description: "Message shown after copying a phone number",
-    },
-    emailCopied: {
-        id: "emailCopied",
-        defaultMessage: "Email copied",
-        description: "Message shown after copying an email",
-    },
-    urlCopied: {
-        id: "urlCopied",
-        defaultMessage: "URL copied",
-        description: "Message shown after copying a URL",
-    },
-});

package/dist/types/src/AutoLink/messages.d.ts

@@ -1,17 +0,0 @@
-export declare const messages: {
-    phoneCopied: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    emailCopied: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    urlCopied: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/src/AutoLink/messages.ts

@@ -1,19 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const messages = defineMessages({
-  phoneCopied: {
-    id: "phoneCopied",
-    defaultMessage: "Phone number copied",
-    description: "Message shown after copying a phone number",
-  },
-  emailCopied: {
-    id: "emailCopied",
-    defaultMessage: "Email copied",
-    description: "Message shown after copying an email",
-  },
-  urlCopied: {
-    id: "urlCopied",
-    defaultMessage: "URL copied",
-    description: "Message shown after copying a URL",
-  },
-});