@jobber/components-native 0.34.0 → 0.35.0

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { UseControllerProps } from "react-hook-form";
+import { XOR } from "ts-xor";
+import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+    /**
+     * Defaulted to "always" so user can clear the time whenever there's a value.
+     */
+    readonly clearable?: Extract<Clearable, "always" | "never">;
+    /**
+     * Add a custom value to display when no time is selected
+     * @default undefined
+     */
+    readonly emptyValueLabel?: string;
+    /**
+     * Adjusts the UX of the time picker based on where you'd use it.
+     *
+     * - `"granular"` - allows the user to pick a very specific time
+     * - `"scheduling"` - only allows user to select between 5 minutes interval.
+     *    If your design is catered towards "scheduling", you should use this type.
+     *
+     * @default scheduling
+     */
+    readonly type?: "granular" | "scheduling";
+    /**
+     * Hide or show the timer icon.
+     */
+    readonly showIcon?: boolean;
+}
+export interface InputTimeFormControlled extends InputTimeBaseProps {
+    /**
+     * Adding a `name` would make this component "Form controlled" and must be
+     * nested within a `<Form />` component.
+     *
+     * Cannot be declared if `value` prop is used.
+     */
+    readonly name: string;
+    /**
+     * Shows an error message below the field and highlights it red when the
+     * value is invalid. Only applies when nested within a `<Form />` component.
+     */
+    readonly validations?: UseControllerProps["rules"];
+    /**
+     * The callback that fires whenever a time gets selected.
+     */
+    readonly onChange?: (value?: Date | null) => void;
+}
+interface InputTimeDevControlled extends InputTimeBaseProps {
+    /**
+     * The value shown on the field. This gets automatically formatted to the
+     * account's time format.
+     */
+    readonly value: Date | string | undefined;
+    /**
+     * The callback that fires whenever a time gets selected.
+     */
+    readonly onChange: (value?: Date) => void;
+}
+export type InputTimeProps = XOR<InputTimeFormControlled, InputTimeDevControlled>;
+export declare function InputTime(props: InputTimeProps): JSX.Element;
+export {};

package/dist/types/src/InputTime/InputTime.style.d.ts

@@ -0,0 +1,6 @@
+export declare const styles: {
+    container: {
+        width: string;
+        justifyContent: "center";
+    };
+};

package/dist/types/src/InputTime/index.d.ts

@@ -0,0 +1,2 @@
+export { InputTime } from "./InputTime";
+export { roundUpToNearestMinutes } from "./utils";

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

@@ -0,0 +1,7 @@
+export declare const messages: {
+    time: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/InputTime/utils/index.d.ts

@@ -0,0 +1,11 @@
+export type MinutesIncrement = 15 | 30 | 60;
+/**
+ * Rounds up the time by increment.
+ * - 15 mins - rounds to the next quarter time of `00:15`, `00:30`, `00:45`,
+ *   and `01:00`
+ * - 30 mins - rounds to the next half hour be it `00:30` or `01:00`
+ * - 60 mins - rounds to the next hour. I.e., `02:01` gets rounded up
+ *   to `03:00`.
+ */
+export declare function roundUpToNearestMinutes(date: Date, minutes: MinutesIncrement): Date;
+export declare function getTimeZoneOffsetInMinutes(timeZone: string, date?: Date): number;

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

@@ -23,6 +23,7 @@ export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
+export * from "./InputTime";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -67,8 +67,12 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
+    "@react-native-community/datetimepicker": ">=6.7.0",
+    "date-fns": "^2.0.0",
+    "date-fns-tz": "*",
     "react": "^18",
-    "react-native": ">=0.69.2"
+    "react-native": ">=0.69.2",
+    "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "74d12fc40b92e5b3575256deaba1840a96387764"
+  "gitHead": "5028c2bd4c97479b567b031432a331e3884afcaa"
 }

package/src/InputTime/InputTime.style.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    justifyContent: "center",
+  },
+});

package/src/InputTime/InputTime.test.tsx

@@ -0,0 +1,323 @@
+import React from "react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { FormProvider, useForm } from "react-hook-form";
+import { InputTime } from "./InputTime";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+import { Button } from "../Button";
+
+afterEach(() => {
+  cleanup();
+  jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
+});
+
+describe("Visuals", () => {
+  const placeholder = "Start time";
+  const expectedTime = "11:00 AM";
+  const value = new Date(2022, 2, 2, 11, 0);
+  const handleChange = jest.fn();
+
+  const setup = (showIcon = true) =>
+    render(
+      <InputTime
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+        showIcon={showIcon}
+      />,
+    );
+
+  it("should show a timer prefix icon", () => {
+    const screen = setup();
+
+    const timerIcon = screen.getByTestId("timer");
+    expect(timerIcon).toBeDefined();
+    expect(timerIcon.type).toBe("RNSVGSvgView");
+  });
+
+  it("should not show a timer icon if showIcon is false", () => {
+    const screen = setup(false);
+    const timerIcon = screen.queryByTestId("timer");
+
+    expect(timerIcon).toBeNull();
+  });
+
+  it("should show a formatted time", () => {
+    const screen = setup();
+    expect(
+      screen.getByText(expectedTime, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("should be clearable when there's a value", () => {
+    const screen = setup();
+    const clearAction = screen.getByLabelText("Clear input");
+    expect(clearAction).toBeDefined();
+
+    fireEvent.press(clearAction);
+    expect(handleChange).toHaveBeenCalledWith(undefined);
+  });
+});
+
+describe("String value", () => {
+  const handleChange = jest.fn();
+
+  it("should show a formatted time", () => {
+    const expectedTime = "11:00 AM";
+    const value = new Date(2022, 2, 2, 11, 0).toISOString();
+    const screen = render(<InputTime value={value} onChange={handleChange} />);
+
+    expect(
+      screen.getByText(expectedTime, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+});
+
+describe("With emptyValueLabel", () => {
+  const handleChange = jest.fn();
+
+  it("should show the emptyValueLabel when there's no value", () => {
+    const label = "Unscheduled";
+    const screen = render(<InputTime name="test" emptyValueLabel={label} />);
+
+    expect(
+      screen.getByText(label, { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(
+      screen.queryByLabelText("Clear input", { includeHiddenElements: true }),
+    ).toBeNull();
+  });
+
+  it("should not show the emptyValueLabel when there's a value", () => {
+    const label = "Unscheduled";
+    const screen = render(
+      <InputTime
+        emptyValueLabel={label}
+        value={new Date()}
+        onChange={handleChange}
+      />,
+    );
+
+    expect(screen.queryByText(label)).toBeNull();
+    expect(screen.getByLabelText("Clear input")).toBeDefined();
+  });
+});
+
+describe("Time picker", () => {
+  const placeholder = "Tap me";
+  const handleChange = jest.fn();
+  const getType = jest.fn().mockReturnValue(undefined);
+
+  function renderTimePicker(value?: Date) {
+    const screen = render(
+      <InputTime
+        placeholder={placeholder}
+        onChange={handleChange}
+        value={value}
+        type={getType()}
+      />,
+    );
+
+    fireEvent.press(screen.getByLabelText(placeholder));
+    expect(screen.getByTestId("inputTime-Picker")).toBeDefined();
+
+    return screen;
+  }
+
+  it("should not show a time picker", () => {
+    const screen = render(<InputTime name="test" />);
+    expect(screen.queryByTestId("inputTime-Picker")).toBeNull();
+  });
+
+  it("should fire the onChange with the current value after canceling a time selection", () => {
+    const value = new Date();
+    const screen = renderTimePicker(value);
+
+    fireEvent.press(screen.getByLabelText("Cancel"));
+    expect(handleChange).toHaveBeenCalledWith(value);
+  });
+
+  it("should fire the onChange after confirming a time selection", () => {
+    const screen = renderTimePicker();
+
+    fireEvent.press(screen.getByLabelText("Confirm"));
+    expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
+  });
+
+  it("should be a time picker", () => {
+    const screen = renderTimePicker();
+    expect(screen.getByTestId("inputTime-Picker").props.mode).toBe("time");
+  });
+
+  describe("Locale", () => {
+    it("should be set to 12 hours", () => {
+      const screen = renderTimePicker();
+      expect(screen.getByTestId("inputTime-Picker").props.locale).toBe("en_US");
+    });
+
+    it("should be set to 24 hours", () => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+        ...atlantisContext.defaultValues,
+        timeZone: "UTC",
+        timeFormat: "HH:mm",
+      });
+      const screen = renderTimePicker();
+      expect(screen.getByTestId("inputTime-Picker").props.locale).toBe("en_GB");
+    });
+  });
+
+  it("should set the minute interval to 5 by default", () => {
+    const screen = renderTimePicker();
+    expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(5);
+  });
+
+  it("should set the minute interval to 5 when the type is scheduling", () => {
+    getType.mockReturnValueOnce("scheduling");
+    const screen = renderTimePicker();
+    expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(5);
+  });
+
+  it("should set the minute interval to 1 when the type is granular", () => {
+    getType.mockReturnValueOnce("granular");
+    const screen = renderTimePicker();
+    expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(1);
+  });
+});
+const mockOnSubmit = jest.fn();
+const saveButtonText = "Submit";
+
+const requiredError = "This is required";
+function SimpleFormWithProvider({ children, defaultValues }) {
+  const formMethods = useForm({
+    reValidateMode: "onChange",
+    defaultValues,
+    mode: "onTouched",
+  });
+
+  return (
+    <FormProvider {...formMethods}>
+      {children}
+      <Button
+        onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+        label={saveButtonText}
+        accessibilityLabel={saveButtonText}
+      />
+    </FormProvider>
+  );
+}
+
+describe("Form controlled", () => {
+  const pickerName = "timePicker";
+  const expectedTime = "11:00 AM";
+  const value = new Date(2022, 2, 2, 11, 0);
+  const handleChange = jest.fn();
+
+  const setup = () =>
+    render(
+      <SimpleFormWithProvider defaultValues={{ [pickerName]: value }}>
+        <Host>
+          <InputTime
+            name={pickerName}
+            onChange={handleChange}
+            validations={{ required: requiredError }}
+          />
+        </Host>
+      </SimpleFormWithProvider>,
+    );
+
+  it("should show the initial value", async () => {
+    const screen = setup();
+    expect(
+      screen.getByText(expectedTime, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("should update the value", async () => {
+    const screen = setup();
+
+    fireEvent.press(
+      screen.getByText(expectedTime, { includeHiddenElements: true }),
+    );
+
+    const expectedNewTime = "10:00 AM";
+    fireEvent(
+      screen.getByTestId("inputTime-Picker"),
+      "onConfirm",
+      new Date(2022, 2, 2, 10, 0),
+    );
+
+    expect(
+      screen.getByText(expectedNewTime, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("should show the required message", async () => {
+    const screen = setup();
+
+    const clearAction = screen.getByLabelText("Clear input");
+    expect(clearAction).toBeDefined();
+
+    fireEvent.press(clearAction);
+    screen.debug();
+    await waitFor(() => {
+      expect(
+        screen.getByText(requiredError, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+
+  it("should clear the input with null value when it is in a form", async () => {
+    const screen = setup();
+    const clearAction = screen.getByLabelText("Clear input");
+    expect(clearAction).toBeDefined();
+
+    fireEvent.press(clearAction);
+    expect(handleChange).toHaveBeenCalledWith(null);
+  });
+});
+
+describe("Timezone conversion", () => {
+  const placeholder = "Start time";
+  const value = new Date(2022, 2, 2, 11, 0);
+  const handleChange = jest.fn();
+  const setup = () =>
+    render(
+      <InputTime
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+      />,
+    );
+  it("should display the time in the account timezone", async () => {
+    jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+      ...atlantisContext.defaultValues,
+      timeZone: "America/Los_Angeles",
+    });
+
+    const screen = setup();
+    const expectedTimezonedTime = "3:00 AM";
+
+    expect(
+      screen.getByText(expectedTimezonedTime, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("should have the correct offset on the time picker", async () => {
+    jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+      ...atlantisContext.defaultValues,
+      timeZone: "America/Los_Angeles",
+    });
+
+    const screen = setup();
+
+    fireEvent.press(screen.getByLabelText(placeholder));
+    expect(
+      screen.getByTestId("inputTime-Picker").props.timeZoneOffsetInMinutes,
+    ).toBe(-8 * 60);
+  });
+});

package/src/InputTime/InputTime.tsx

@@ -0,0 +1,221 @@
+import React, { useMemo, useState } from "react";
+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";
+
+interface InputTimeBaseProps
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  /**
+   * Defaulted to "always" so user can clear the time whenever there's a value.
+   */
+  readonly clearable?: Extract<Clearable, "always" | "never">;
+
+  /**
+   * Add a custom value to display when no time is selected
+   * @default undefined
+   */
+  readonly emptyValueLabel?: string;
+
+  /**
+   * Adjusts the UX of the time picker based on where you'd use it.
+   *
+   * - `"granular"` - allows the user to pick a very specific time
+   * - `"scheduling"` - only allows user to select between 5 minutes interval.
+   *    If your design is catered towards "scheduling", you should use this type.
+   *
+   * @default scheduling
+   */
+  readonly type?: "granular" | "scheduling";
+
+  /**
+   * Hide or show the timer icon.
+   */
+  readonly showIcon?: boolean;
+}
+
+export interface InputTimeFormControlled extends InputTimeBaseProps {
+  /**
+   * Adding a `name` would make this component "Form controlled" and must be
+   * nested within a `<Form />` component.
+   *
+   * Cannot be declared if `value` prop is used.
+   */
+  readonly name: string;
+
+  /**
+   * Shows an error message below the field and highlights it red when the
+   * value is invalid. Only applies when nested within a `<Form />` component.
+   */
+  readonly validations?: UseControllerProps["rules"];
+
+  /**
+   * The callback that fires whenever a time gets selected.
+   */
+  readonly onChange?: (value?: Date | null) => void;
+}
+
+interface InputTimeDevControlled extends InputTimeBaseProps {
+  /**
+   * The value shown on the field. This gets automatically formatted to the
+   * account's time format.
+   */
+  readonly value: Date | string | undefined;
+
+  /**
+   * The callback that fires whenever a time gets selected.
+   */
+  readonly onChange: (value?: Date) => void;
+}
+
+export type InputTimeProps = XOR<
+  InputTimeFormControlled,
+  InputTimeDevControlled
+>;
+
+const LOCALE_24_HOURS = "en_GB";
+const LOCALE_12_HOURS = "en_US";
+
+function formatInvalidState(
+  error: FieldError | undefined,
+  invalid: InputFieldWrapperProps["invalid"],
+): boolean | string {
+  if (invalid) return invalid;
+
+  if (error && error.message) {
+    return error.message;
+  }
+
+  return Boolean(error);
+}
+
+export function InputTime(props: InputTimeProps): JSX.Element {
+  if (props.name) {
+    return (
+      <FormField name={props.name} validations={props.validations}>
+        {(field, error) => (
+          <InternalInputTime
+            {...props}
+            value={field.value}
+            onChange={(newValue?: Date | null) => {
+              field.onChange(newValue);
+              field.onBlur();
+              props.onChange?.(newValue);
+            }}
+            invalid={formatInvalidState(error, props.invalid)}
+          />
+        )}
+      </FormField>
+    );
+  }
+
+  return <InternalInputTime {...props} />;
+}
+
+function InternalInputTime({
+  clearable = "always",
+  disabled,
+  emptyValueLabel,
+  invalid,
+  placeholder,
+  value,
+  name,
+  type = "scheduling",
+  onChange,
+  showIcon = true,
+}: InputTimeProps): JSX.Element {
+  const [showPicker, setShowPicker] = useState(false);
+  const { formatMessage } = useIntl();
+
+  const { timeZone, timeFormat } = useAtlantisContext();
+  const is24Hour = timeFormat === "HH:mm";
+
+  const dateTime = useMemo(
+    () => (typeof value === "string" ? new Date(value) : value),
+    [value],
+  );
+
+  const formattedTime = useMemo(() => {
+    if (dateTime) {
+      const zonedTime = utcToZonedTime(dateTime, timeZone);
+      return formatTime(zonedTime, timeFormat);
+    }
+
+    return emptyValueLabel;
+  }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
+
+  const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
+
+  return (
+    <View style={styles.container}>
+      <InputPressable
+        clearable={canClearTime}
+        disabled={disabled}
+        invalid={invalid}
+        placeholder={placeholder ?? formatMessage(messages.time)}
+        prefix={showIcon ? { icon: "timer" } : undefined}
+        value={formattedTime}
+        onClear={handleClear}
+        onPress={showDatePicker}
+      />
+      <DateTimePicker
+        testID="inputTime-Picker"
+        minuteInterval={getMinuteInterval(type)}
+        date={getInitialPickerDate(dateTime)}
+        timeZoneOffsetInMinutes={getTimeZoneOffsetInMinutes(timeZone, dateTime)}
+        isVisible={showPicker}
+        mode="time"
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+        is24Hour={is24Hour}
+        locale={is24Hour ? LOCALE_24_HOURS : LOCALE_12_HOURS}
+      />
+    </View>
+  );
+
+  function showDatePicker() {
+    setShowPicker(true);
+  }
+
+  function handleConfirm(newValue: Date) {
+    setShowPicker(false);
+    onChange?.(newValue);
+  }
+
+  function handleCancel() {
+    setShowPicker(false);
+
+    // Call onChange with the current value to trigger form's validation.
+    onChange?.(dateTime);
+  }
+
+  function handleClear() {
+    // Returns null only for Form controlled scenarios due to a limitation of
+    // react-hook-form that doesn't allow passing undefined to form values.
+    if (name) {
+      onChange?.(null);
+    } else {
+      onChange?.(undefined);
+    }
+  }
+}
+
+function getInitialPickerDate(date?: Date | null): Date {
+  if (date) return date;
+  return roundUpToNearestMinutes(new Date(), 30);
+}
+
+function getMinuteInterval(type: InputTimeBaseProps["type"]) {
+  if (type === "granular") return 1;
+  return 5;
+}

package/src/InputTime/index.tsx

@@ -0,0 +1,2 @@
+export { InputTime } from "./InputTime";
+export { roundUpToNearestMinutes } from "./utils";

package/src/InputTime/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  time: {
+    id: "timeLabel",
+    defaultMessage: "Time",
+    description: "Label for DateTimePicker with time variant",
+  },
+});