@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

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

@@ -127,7 +127,7 @@ describe("when a secondaryActions is passed in", () => {
     const beforeSubmitMock = jest.fn().mockImplementation(() => {
       return Promise.resolve(true);
     });
-    const { getByLabelText } = render(
+    const { findByLabelText, getByLabelText } = render(
       <ButtonGroupForTest
         primaryAction={pressHandler}
         loading={false}
@@ -145,7 +145,7 @@ describe("when a secondaryActions is passed in", () => {
       />,
     );
     fireEvent.press(getByLabelText("More"));
-    expect(getByLabelText("hi")).toBeDefined();
+    expect(await findByLabelText("hi")).toBeDefined();
     fireEvent.press(getByLabelText("hi"));
     expect(beforeSubmitMock).toHaveBeenCalled();
     await waitFor(() => {

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -13,7 +13,7 @@ export function FormSaveButton({
   setSecondaryActionLoading,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: FormSaveButtonProps): JSX.Element {
+}: FormSaveButtonProps) {
   const { t } = useAtlantisI18n();
   const formContext = useFormContext();
   const buttonActions = useButtonGroupAction(secondaryActions);

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

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import type { AtlantisFormContextProps } from "./types";
 import {
   AtlantisFormContext,

package/src/Form/context/AtlantisFormContext.tsx

@@ -11,6 +11,7 @@ export const atlantisFormContextDefaultValues = {
     setLocalCache: () => undefined,
     removeLocalCache: () => undefined,
   }),
+  edgeToEdgeEnabled: false,
 };
 
 export const AtlantisFormContext = createContext<AtlantisFormContextProps>(

package/src/Form/context/types.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -27,7 +27,8 @@ export interface AtlantisFormContextProps {
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: TData) => void;
+    setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
+  edgeToEdgeEnabled?: boolean;
 }

package/src/Form/hooks/useFormViewRefs.ts

@@ -4,15 +4,14 @@ import type { View } from "react-native";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 interface UseFormViewRefsReturn {
-  readonly scrollViewRef: RefObject<KeyboardAwareScrollView>;
-  readonly bottomViewRef: RefObject<View>;
+  readonly scrollViewRef: RefObject<KeyboardAwareScrollView | null>;
+  readonly bottomViewRef: RefObject<View | null>;
   readonly scrollToTop: () => void;
 }
 
 export function useFormViewRefs(): UseFormViewRefsReturn {
-  const scrollViewRef: RefObject<KeyboardAwareScrollView> =
-    useRef<KeyboardAwareScrollView>(null);
-  const bottomViewRef: RefObject<View> = useRef<View>(null);
+  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
+  const bottomViewRef = useRef<View>(null);
   const scrollToTop = useCallback(() => {
     scrollViewRef.current?.scrollToPosition(0, 0);
   }, [scrollViewRef]);

package/src/Form/hooks/useInternalForm.ts

@@ -1,4 +1,5 @@
 import type {
+  DeepPartial,
   FieldValues,
   UseFormHandleSubmit,
   UseFormReturn,
@@ -19,8 +20,9 @@ type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<
   | "localCacheKey"
   | "localCacheExclude"
   | "localCacheId"
+  | "UNSAFE_allowDiscardLocalCacheWhenOffline"
 > & {
-  scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+  scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
   readonly saveButtonHeight: number;
   readonly messageBannerHeight: number;
 };
@@ -31,7 +33,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
   readonly removeListenerRef: MutableRefObject<() => void>;
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function useInternalForm<T extends FieldValues, SubmitResponseType>({
@@ -44,6 +46,7 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
   scrollViewRef,
   saveButtonHeight,
   messageBannerHeight,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T> {
   const { useConfirmBeforeBack, useInternalFormLocalCache } =
     useAtlantisFormContext();
@@ -81,11 +84,16 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
     };
   }
 
+  const shouldRemoveCacheOnBack = UNSAFE_allowDiscardLocalCacheWhenOffline
+    ? true
+    : isOnline;
+
   const removeListenerRef = useConfirmBeforeBack({
     alwaysPreventBack: isSubmitting,
     shouldShowAlert: isDirty,
-    onAcceptEvent: isOnline ? removeLocalCache : undefined,
-    showLostProgressMessage: isOnline || !clientSideSaveOn ? true : false,
+    onAcceptEvent: shouldRemoveCacheOnBack ? removeLocalCache : undefined,
+    showLostProgressMessage:
+      shouldRemoveCacheOnBack || !clientSideSaveOn ? true : false,
   });
 
   return {

package/src/Form/hooks/useScrollToError/useScrollToError.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { useScrollToError } from "./useScrollToError";
 
 const mockFormState = {
@@ -25,6 +25,7 @@ jest.mock("../../../ErrorMessageWrapper", () => ({
       el: {
         measure: jest.fn((_, callback) => callback()),
         hasErrorMessage: true,
+        accessibilityFocus: jest.fn(),
       },
     },
     register: jest.fn(),

package/src/Form/types.ts

@@ -1,17 +1,16 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { ReactElement, RefObject } from "react";
 import type {
   ControllerProps,
-  DeepPartial,
+  DefaultValues,
   FieldPath,
   FieldValues,
   Mode,
-  UnpackNestedValue,
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -55,7 +54,7 @@ interface FormNoticeMessage {
 
 export type FormRef<T extends FieldValues = FieldValues> =
   | (UseFormReturn<T> & {
-      scrollViewRef?: RefObject<KeyboardAwareScrollView>;
+      scrollViewRef?: RefObject<KeyboardAwareScrollView | null>;
       saveButtonHeight?: number;
       messageBannerHeight?: number;
     })
@@ -109,7 +108,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * The initial values of the form inputs
    * This should be available as soon as initialLoading is set to false
    */
-  initialValues?: FormValues<DeepPartial<T>>;
+  initialValues?: DefaultValues<T>;
 
   /**
    * When the validation should happen.
@@ -128,7 +127,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
   /**
    * ref object to access react hook form methods and state
    */
-  formRef?: MutableRefObject<FormRef<T> | undefined>;
+  formRef?: RefObject<FormRef<T> | undefined>;
 
   /**
    * Label to be displayed for the save button
@@ -143,7 +142,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
 
   /**
    * Adding a key will save a local copy of the form data that will be used to
@@ -172,6 +171,13 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    */
   localCacheId?: string | string[];
 
+  /**
+   * If true, the local cache will be removed when the user navigates away from
+   * the dirty form even when offline. By default, cache is only removed on back when online.
+   * Defaults to false.
+   */
+  UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
+
   /**
    * Secondary Action for ButtonGroup
    */

package/src/FormField/FormField.tsx

@@ -39,7 +39,7 @@ export function FormField<T>({
   children,
   defaultValue: value,
   validations,
-}: FormFieldProps<T>): JSX.Element {
+}: FormFieldProps<T>) {
   const { error, field } = useFormController({
     name,
     value,

package/src/FormatFile/FormatFile.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert } from "react-native";
+import { Host } from "react-native-portalize";
 import type { File } from ".";
 import { FormatFile } from ".";
 import {
@@ -117,12 +117,12 @@ function basicRenderTestWithValue() {
       );
     });
 
-    it("renders ProgressBar state advancing with the upload percentage", () => {
+    it("renders ProgressBar state advancing with the upload percentage", async () => {
       jest.useFakeTimers();
       const { getByTestId } = renderFormatFile(file);
       jest.advanceTimersByTime(progressBarAnimationTime);
-      const formatFileInnerProgressBar = getByTestId(
-        "format-file-inner-progress-bar",
+      const formatFileInnerProgressBar = await waitFor(() =>
+        getByTestId("format-file-inner-progress-bar"),
       );
       const innerProgressBarWidth = parseInt(
         formatFileInnerProgressBar.props.style.width,
@@ -210,59 +210,59 @@ function basicRenderTestWithValue() {
         jest.advanceTimersByTime(progressBarAnimationTime);
       });
 
-      it("shows a BottomSheet with a remove option when tapped", () => {
-        const { getByTestId, getByLabelText } = tree;
+      it("shows a BottomSheet with a remove option when tapped", async () => {
+        const { getByTestId, findByLabelText } = tree;
         fireEvent.press(getByTestId(testId));
-        expect(getByLabelText(removeLabel)).toBeDefined();
+        expect(await findByLabelText(removeLabel)).toBeDefined();
       });
 
       describe("when the BottomSheet remove option is tapped", () => {
-        it("calls the onRemove action", () => {
-          const { getByTestId, getByLabelText } = tree;
+        it("calls the onRemove action", async () => {
+          const { getByTestId, findByLabelText } = tree;
           fireEvent.press(getByTestId(testId));
-          fireEvent.press(getByLabelText(removeLabel));
+          fireEvent.press(await findByLabelText(removeLabel));
           expect(onRemove).toHaveBeenCalledTimes(1);
         });
       });
 
       it("creates a thumbnail when a media file is used", () => {
-        const expectedCalls = testId.includes("image") ? 2 : 0;
+        const expectedCalls = testId.includes("image") ? 1 : 0;
         expect(mockCreateThumbnail).toHaveBeenCalledTimes(expectedCalls);
       });
     },
   );
 
   describe("when the preview option is tapped", () => {
-    it("calls onPreview with a valid image", () => {
+    it("calls onPreview with a valid image", async () => {
       const previewLabel = "Preview image";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_IMAGE({ progress: 1, status: StatusCode.Completed }),
         "image",
       );
       fireEvent.press(getByTestId("test-image"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 
-    it("calls onPreview with a valid pdf file", () => {
+    it("calls onPreview with a valid pdf file", async () => {
       const previewLabel = "Preview file";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_UPLOAD_MOCK_PDF({ progress: 1, status: StatusCode.Completed }),
         "file",
       );
       fireEvent.press(getByTestId("test-file"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 
-    it("calls onPreview with a valid external PDF file", () => {
+    it("calls onPreview with a valid external PDF file", async () => {
       const previewLabel = "Preview file";
-      const { getByTestId, getByLabelText } = renderFormatFile(
+      const { getByTestId, findByLabelText } = renderFormatFile(
         FILE_MOCK_PDF,
         "file",
       );
       fireEvent.press(getByTestId("test-file"));
-      fireEvent.press(getByLabelText(previewLabel));
+      fireEvent.press(await findByLabelText(previewLabel));
       expect(mockOnPreview).toHaveBeenCalledTimes(1);
     });
 

package/src/FormatFile/FormatFile.tsx

@@ -88,7 +88,7 @@ function FormatFileContent({
   styleInGrid,
   onUploadComplete,
   isMedia,
-}: FormatFileContentProps): JSX.Element {
+}: FormatFileContentProps) {
   const styles = useStyles();
 
   return (
@@ -204,7 +204,7 @@ export function FormatFile<T extends File | FileUpload>({
   showFileTypeIndicator = true,
   createThumbnail,
   onPreviewPress,
-}: FormatFileProps<T>): JSX.Element {
+}: FormatFileProps<T>) {
   const onTapModified = onTap ? () => onTap(file) : () => undefined;
 
   const formattedFile = parseFile(file, showFileTypeIndicator);
@@ -236,7 +236,7 @@ function FormatFileInternal({
   onPreviewPress,
   testID,
   createThumbnail: createThumbnailProp,
-}: FormatFileInternalProps): JSX.Element {
+}: FormatFileInternalProps) {
   const [showOverlay, setShowOverlay] = useState<boolean>(
     file.status !== StatusCode.Completed,
   );

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 
-export function ErrorIcon(): JSX.Element {
+export function ErrorIcon() {
   const styles = useStyles();
 
   return (

package/src/FormatFile/components/FileView/FileView.tsx

@@ -27,7 +27,7 @@ export function FileView({
   showOverlay,
   showError,
   onUploadComplete,
-}: FileViewProps): JSX.Element {
+}: FileViewProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.test.tsx

@@ -39,11 +39,11 @@ const basicRenderTestWithValue = () => {
       const removeLabel = `Remove ${bottomSheetOptionsSuffix}`;
       let tree: RenderAPI;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         tree = renderBottomSheet(
           bottomSheetOptionsSuffix as BottomSheetOptionsSuffix,
         );
-        act(() => {
+        await act(async () => {
           bottomSheetRef.current?.open();
         });
       });
@@ -52,29 +52,29 @@ const basicRenderTestWithValue = () => {
       });
 
       describe("onPreviewPress", () => {
-        it("renders the preview option", () => {
-          const { getByLabelText } = tree;
+        it("renders the preview option", async () => {
+          const { findByLabelText } = tree;
 
-          expect(getByLabelText(previewLabel)).toBeDefined();
+          expect(await findByLabelText(previewLabel)).toBeDefined();
         });
 
-        it("is called when pressed", () => {
-          const { getByLabelText } = tree;
-          fireEvent.press(getByLabelText(previewLabel));
+        it("is called when pressed", async () => {
+          const { findByLabelText } = tree;
+          fireEvent.press(await findByLabelText(previewLabel));
           expect(onPreview).toHaveBeenCalledTimes(1);
         });
       });
 
       describe("onRemovePress", () => {
-        it("renders the remove option", () => {
-          const { getByLabelText } = tree;
+        it("renders the remove option", async () => {
+          const { findByLabelText } = tree;
 
-          expect(getByLabelText(removeLabel)).toBeDefined();
+          expect(await findByLabelText(removeLabel)).toBeDefined();
         });
 
-        it("is called when pressed", () => {
-          const { getByLabelText } = tree;
-          fireEvent.press(getByLabelText(removeLabel));
+        it("is called when pressed", async () => {
+          const { findByLabelText } = tree;
+          fireEvent.press(await findByLabelText(removeLabel));
 
           expect(onRemove).toHaveBeenCalledTimes(1);
         });

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -9,7 +9,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
 
 interface FormatFileBottomSheetProps {
-  readonly bottomSheetRef: RefObject<BottomSheetRef>;
+  readonly bottomSheetRef: RefObject<BottomSheetRef | null>;
   readonly onPreviewPress?: () => void;
   readonly onRemovePress?: () => void;
   readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
@@ -20,7 +20,7 @@ export const FormatFileBottomSheet = ({
   onPreviewPress,
   onRemovePress,
   bottomSheetOptionsSuffix,
-}: FormatFileBottomSheetProps): JSX.Element => {
+}: FormatFileBottomSheetProps) => {
   const { t } = useAtlantisI18n();
 
   const handlePress = (onPressAction: () => void) => {