@jobber/components-native 0.38.0 → 0.40.0

package/src/Form/types.ts

@@ -0,0 +1,255 @@
+import { MutableRefObject, RefObject } from "react";
+import {
+  ControllerProps,
+  DeepPartial,
+  FieldPath,
+  FieldValues,
+  Mode,
+  UnpackNestedValue,
+  UseFormReturn,
+} from "react-hook-form";
+import { IconNames } from "@jobber/design";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
+export type FormValues<T> = UnpackNestedValue<T>;
+export type FormErrors = FormNetworkErrors | FormUserErrors;
+export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
+
+export enum FormSubmitErrorType {
+  NetworkError = "NetworkError",
+  UserError = "UserErrors",
+}
+
+export enum FormBannerMessageType {
+  WarningMessage = "WarningMessage",
+  NoticeMessage = "NoticeMessage",
+}
+
+export interface FormBannerErrors {
+  networkError?: string | undefined;
+  bannerError?: {
+    title: string;
+    messages?: string[];
+  };
+}
+
+interface FormNetworkErrors {
+  errorType: FormSubmitErrorType.NetworkError;
+  networkErrors: string;
+}
+
+export interface FormUserErrors {
+  errorType: FormSubmitErrorType.UserError;
+  userErrors: Record<string, string>;
+}
+
+interface FormWarningMessage {
+  messageType: FormBannerMessageType.WarningMessage;
+  message: string;
+}
+
+interface FormNoticeMessage {
+  messageType: FormBannerMessageType.NoticeMessage;
+  message: string;
+}
+
+export type FormRef<T extends FieldValues = FieldValues> =
+  | (UseFormReturn<T> & {
+      scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+      saveButtonHeight?: number;
+      messageBannerHeight?: number;
+    })
+  | undefined;
+
+export interface FormProps<T extends FieldValues, SubmitResponseType> {
+  /**
+   * Content to be passed into the form
+   */
+  children: React.ReactNode;
+
+  /**
+   * A callback function that is run before invoking onSubmit. Form submission is canceled if the promise resolves to false.
+   */
+  onBeforeSubmit?: (data: FormValues<T>) => Promise<boolean>;
+
+  /**
+   * A callback function that handles the submission of form data
+   */
+  onSubmit: (data: FormValues<T>) => Promise<SubmitResponseType>;
+
+  /**
+   * A callback function that handles any error that occurs during "onSubmit"
+   */
+  onSubmitError: (error: FormErrors) => void;
+
+  /**
+   * A callback function that handles a successful form submission from "onSubmit"
+   */
+  onSubmitSuccess: (data: SubmitResponseType) => void;
+
+  /**
+   * Network or user errors to be displayed as a banner at the top of the form
+   */
+  bannerErrors?: FormBannerErrors;
+
+  /**
+   * Status messages to be displayed as a banner at the top of the form
+   */
+  bannerMessages?: FormBannerMessage[];
+
+  /**
+   * Loading when the initial form data is being fetched
+   */
+  initialLoading?: boolean;
+
+  /**
+   * The initial values of the form inputs
+   * This should be available as soon as initialLoading is set to false
+   */
+  initialValues?: FormValues<DeepPartial<T>>;
+
+  /**
+   * When the validation should happen.
+   * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".
+   * The default value is "onTouched"
+   */
+  mode?: Mode;
+
+  /**
+   * When the validation after submission should happen.
+   * Possible values are "onBlur", "onChange", and "onSubmit".
+   * The default value is "onChange"
+   */
+  reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+
+  /**
+   * ref object to access react hook form methods and state
+   */
+  formRef?: MutableRefObject<FormRef<T> | undefined>;
+
+  /**
+   * Label to be displayed for the save button
+   */
+  saveButtonLabel?: string;
+
+  /**
+   * @deprecated use `secondaryAction` instead.
+   * Override default save button in the sticky section of the form with another element.
+   */
+  renderStickySection?: (
+    onSubmit: () => void,
+    label: string | undefined,
+    isSubmitting: boolean,
+  ) => JSX.Element;
+
+  /**
+   * Adding a key will save a local copy of the form data that will be used to
+   * recover values when the app is backgrounded or has crashed.
+   */
+  localCacheKey?: string;
+
+  /**
+   * Forms field names that will not be considered for caching.
+   * Useful for omitting sensitive data.
+   */
+  localCacheExclude?: string[];
+
+  /**
+   * A string or array of strings that can be used to identify the pre-filled
+   * data on the form. This can be used to support local caching for forms that
+   * prefill data without inadvertently applying the cache at the wrong time.
+   *
+   * For example this can be used to when an object is based on data from
+   * another object (Quote being converted into a Job). This will allow
+   * the user to retrieve data from the cache when trying to create the
+   * same object (same Quote being converted into a Job) following an app crash.
+   *
+   * There is still only one copy of data for each `localCacheKey`.
+   * If a user opens the same form the data will only be loaded if the `localCacheId` matches
+   */
+  localCacheId?: string | string[];
+
+  /**
+   * Secondary Action for ButtonGroup
+   */
+  secondaryActions?: SecondaryActionProp[];
+
+  /**
+   * A number that will pull down the save button when the position is sticky.
+   * Useful when there's a footer or content below the form that is pulling
+   * the button up.
+   */
+  saveButtonOffset?: number;
+
+  /**
+   * Forces to render the sticky save button instead of the inline.
+   * The sticky save button is default for iOS but not for Android due to
+   * limitations. Use this prop with caution on Android.
+   */
+  showStickySaveButton?: boolean;
+
+  /**
+   * Renders a footer below the save button.
+   */
+  renderFooter?: React.ReactNode;
+}
+
+export type InternalFormProps<T extends FieldValues, SubmitResponseType> = Omit<
+  FormProps<T, SubmitResponseType>,
+  "initialLoading"
+>;
+
+export type ValidationRulesByFieldPath<T extends FieldValues> = {
+  [p in FieldPath<T>]: ControllerProps<T, p>["rules"];
+};
+
+export interface FormSaveButtonProps {
+  /**
+   * Press handler
+   */
+  primaryAction: () => Promise<void> | void;
+
+  /**
+   * Primary Button is loading
+   */
+  loading: boolean;
+
+  /**
+   * Label for the save button
+   */
+  label?: string;
+  /**
+   * Props and information regarding the secondary Action button(s)
+   */
+  secondaryActions?: SecondaryActionProp[];
+
+  /**
+   * Set whether secondary Button is loading
+   */
+  setSecondaryActionLoading?: (bool: boolean) => void;
+
+  /**
+   * Callback that is called when the secondary actions bottom sheet is opened.
+   */
+  onOpenBottomSheet?: () => void;
+
+  /**
+   * Callback that is called when the secondary actions bottom sheet is closed.
+   */
+  onCloseBottomSheet?: () => void;
+}
+
+interface SecondaryActionOnPress {
+  onBeforeSubmit?: () => Promise<boolean>;
+  onSubmit: (formSubmit: FormSaveButtonProps["primaryAction"]) => Promise<void>;
+  onSubmitSuccess?: () => void;
+  onSubmitError?: (error: FormErrors) => void;
+  resetFormOnSubmit?: boolean;
+}
+
+export interface SecondaryActionProp {
+  label: string;
+  icon?: IconNames | undefined;
+  handleAction: SecondaryActionOnPress;
+  destructive?: boolean;
+}

package/src/InputDate/InputDate.test.tsx

@@ -0,0 +1,295 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { FormProvider, useForm } from "react-hook-form";
+import { InputDate } from "./InputDate";
+import { Button } from "../Button";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+
+describe("InputDate", () => {
+  describe("Visuals", () => {
+    const placeholder = "Start time";
+    const expectedDate = "May 30, 2022";
+    const value = new Date(2022, 4, 30);
+    const handleChange = jest.fn();
+
+    const setup = () =>
+      render(
+        <InputDate
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+        />,
+      );
+
+    it("should show a calendar prefix icon", () => {
+      const screen = setup();
+
+      const calendarIcon = screen.getByTestId("calendar");
+      expect(calendarIcon).toBeDefined();
+      expect(calendarIcon.type).toBe("RNSVGSvgView");
+    });
+
+    it("should show a formatted date", () => {
+      const screen = setup();
+      expect(
+        screen.getByText(expectedDate, { 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", () => {
+    it("should show a formatted date", () => {
+      const expectedDate = "May 31, 2022";
+      const value = new Date(2022, 4, 31).toISOString();
+      const screen = render(<InputDate value={value} onChange={jest.fn()} />);
+
+      expect(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+
+  describe("With emptyValueLabel", () => {
+    it("should show the emptyValueLabel when there's no value", () => {
+      const label = "Unscheduled";
+      const screen = render(<InputDate name="test" emptyValueLabel={label} />);
+
+      expect(
+        screen.getByText(label, { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(screen.queryByLabelText("Clear input")).toBeNull();
+    });
+
+    it("should not show the emptyValueLabel when there's a value", () => {
+      const label = "Unscheduled";
+      const screen = render(
+        <InputDate
+          emptyValueLabel={label}
+          value={new Date()}
+          onChange={jest.fn()}
+        />,
+      );
+
+      expect(screen.queryByText(label)).toBeNull();
+      expect(screen.getByLabelText("Clear input")).toBeDefined();
+    });
+  });
+
+  describe("with a defaultValue", () => {
+    it("renders the supplied value", () => {
+      const { getByText } = render(
+        <InputDate name="test" defaultValue={new Date("2022-01-17")} />,
+      );
+
+      expect(
+        getByText("Jan 17, 2022", { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+
+  describe("Date picker", () => {
+    const placeholder = "Tap me";
+    const handleChange = jest.fn();
+
+    function renderDatePicker() {
+      const screen = render(
+        <InputDate
+          placeholder={placeholder}
+          value={undefined}
+          onChange={handleChange}
+        />,
+      );
+
+      fireEvent.press(screen.getByLabelText(placeholder));
+      expect(screen.getByTestId("inputDate-datePicker")).toBeDefined();
+
+      return screen;
+    }
+
+    it("should not show a date picker", () => {
+      const screen = render(<InputDate name="test" />);
+      expect(screen.queryByTestId("inputDate-datePicker")).toBeNull();
+    });
+
+    it("should fire the onChange with the current value after canceling a date selection", () => {
+      const screen = renderDatePicker();
+
+      fireEvent.press(screen.getByLabelText("Cancel"));
+      expect(handleChange).toHaveBeenCalledWith(undefined);
+    });
+
+    it("should fire the onChange after confirming a date selection", () => {
+      const screen = renderDatePicker();
+
+      fireEvent.press(screen.getByLabelText("Confirm"));
+      expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
+    });
+  });
+  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 = "datePicker";
+    const expectedDate = "May 29, 2022";
+    const value = new Date(2022, 4, 29);
+    const handleChange = jest.fn();
+
+    const setup = () =>
+      render(
+        <SimpleFormWithProvider defaultValues={{ [pickerName]: value }}>
+          <Host>
+            <InputDate
+              name={pickerName}
+              onChange={handleChange}
+              validations={{ required: requiredError }}
+            />
+          </Host>
+        </SimpleFormWithProvider>,
+      );
+
+    it("should show the initial value", async () => {
+      const screen = setup();
+      expect(
+        screen.getByText(expectedDate, {
+          includeHiddenElements: true,
+        }),
+      ).toBeDefined();
+    });
+
+    it("should update the value", async () => {
+      const screen = await setup();
+
+      fireEvent.press(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      );
+
+      const expectedNewDate = "Jun 17, 2022";
+      const newSelectedDate = new Date(2022, 5, 17);
+      fireEvent(
+        screen.getByTestId("inputDate-datePicker"),
+        "onConfirm",
+        newSelectedDate,
+      );
+
+      expect(
+        screen.getByText(expectedNewDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(handleChange).toHaveBeenCalledWith(newSelectedDate);
+    });
+
+    it("should show the client side validation error", async () => {
+      const screen = setup();
+
+      const clearAction = screen.getByLabelText("Clear input");
+      expect(clearAction).toBeDefined();
+
+      fireEvent.press(clearAction);
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByText(requiredError, { includeHiddenElements: true }),
+        ).toHaveLength(1);
+      });
+    });
+
+    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("dateFormat pattern", () => {
+    afterEach(() => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
+    });
+
+    it("should display MM/DD/YYYY when dateFormat is 'P'", () => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+        ...atlantisContext.defaultValues,
+        dateFormat: "P",
+      });
+      const expectedDate = "05/24/2023";
+      const value = new Date(2023, 4, 24).toISOString();
+      const screen = render(<InputDate value={value} onChange={jest.fn()} />);
+
+      expect(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+
+    it("should display mmmm d, yyyy when dateFormat is 'PP'", () => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+        ...atlantisContext.defaultValues,
+        dateFormat: "PP",
+      });
+      const expectedDate = "Feb 20, 2023";
+      const value = new Date(2023, 1, 20).toISOString();
+      const screen = render(<InputDate value={value} onChange={jest.fn()} />);
+
+      expect(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+
+    it("should display mmmmm d, yyyy when dateFormat is 'PPP'", () => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+        ...atlantisContext.defaultValues,
+        dateFormat: "PPP",
+      });
+      const expectedDate = "July 7th, 2023";
+      const value = new Date(2023, 6, 7).toISOString();
+      const screen = render(<InputDate value={value} onChange={jest.fn()} />);
+
+      expect(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+
+    it("should display dddd, mmmmm d, yyyy when dateFormat is 'PPPP'", () => {
+      jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue({
+        ...atlantisContext.defaultValues,
+        dateFormat: "PPPP",
+      });
+      const expectedDate = "Thursday, June 22nd, 2023";
+      const value = new Date(2023, 5, 22).toISOString();
+      const screen = render(<InputDate value={value} onChange={jest.fn()} />);
+
+      expect(
+        screen.getByText(expectedDate, { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+});