@jobber/components-native 0.89.5-JOB-140604-2d32fc8.44 → 0.89.5-JOB-140604-8777ec5.52

package/src/Form/Form.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
@@ -94,7 +94,7 @@ interface FormTestProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly initialLoading?: boolean;
   readonly initialValues?: FormFields;
   readonly bannerMessages?: FormBannerMessage[];
@@ -104,6 +104,7 @@ interface FormTestProps {
   readonly onBeforeSubmit?: jest.Mock;
   readonly renderFooter?: React.ReactNode;
   readonly saveButtonOffset?: number;
+  readonly UNSAFE_allowDiscardLocalCacheWhenOffline?: boolean;
 }
 
 function FormTest(props: FormTestProps) {
@@ -125,6 +126,7 @@ function MockForm({
   localCacheId,
   renderFooter,
   saveButtonOffset,
+  UNSAFE_allowDiscardLocalCacheWhenOffline = false,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
 
@@ -154,6 +156,9 @@ function MockForm({
         onBeforeSubmit={onBeforeSubmit}
         renderFooter={renderFooter}
         saveButtonOffset={saveButtonOffset}
+        UNSAFE_allowDiscardLocalCacheWhenOffline={
+          UNSAFE_allowDiscardLocalCacheWhenOffline
+        }
       >
         <InputText
           name={testInputTextName}
@@ -561,4 +566,142 @@ describe("Form", () => {
       expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
     });
   });
+
+  describe("Leaving the form", () => {
+    let mockUseConfirmBeforeBack: jest.Mock;
+    let mockRemoveLocalCache: jest.Mock;
+    const atlantisContextSpy = jest.spyOn(
+      atlantisContext,
+      "useAtlantisContext",
+    );
+
+    beforeEach(() => {
+      mockUseConfirmBeforeBack = jest
+        .fn()
+        .mockReturnValue({ current: jest.fn() });
+      mockRemoveLocalCache = jest.fn();
+
+      jest
+        .spyOn(
+          require("../Form/context/AtlantisFormContext"),
+          "useAtlantisFormContext",
+        )
+        .mockReturnValue({
+          useConfirmBeforeBack: mockUseConfirmBeforeBack,
+          useInternalFormLocalCache: () => ({
+            setLocalCache: jest.fn(),
+            removeLocalCache: mockRemoveLocalCache,
+          }),
+          edgeToEdgeEnabled: false,
+        });
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is false", () => {
+      it("should NOT pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBeUndefined();
+        expect(callArgs.showLostProgressMessage).toBe(false);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is true", () => {
+      it("should pass onAcceptEvent when offline", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+
+      it("should pass onAcceptEvent when online", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: true,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={true}
+            localCacheKey="testCacheKey"
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+
+    describe("without localCacheKey", () => {
+      it("should always show lost progress message when no cache key is provided", () => {
+        atlantisContextSpy.mockReturnValue({
+          ...atlantisContextDefaultValues,
+          isOnline: false,
+        });
+
+        render(
+          <FormTest
+            onSubmit={onSubmitMock}
+            UNSAFE_allowDiscardLocalCacheWhenOffline={false}
+          />,
+        );
+
+        expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+        const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+        expect(callArgs.showLostProgressMessage).toBe(true);
+      });
+    });
+  });
 });

package/src/Form/Form.tsx

@@ -34,7 +34,7 @@ import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form<T extends FieldValues, S>({
   initialLoading,
   ...rest
-}: FormProps<T, S>): JSX.Element {
+}: FormProps<T, S>) {
   const child = initialLoading ? <FormMask /> : <InternalForm {...rest} />;
 
   return (
@@ -66,6 +66,7 @@ function InternalForm<T extends FieldValues, S>({
   saveButtonOffset,
   showStickySaveButton = false,
   renderFooter,
+  UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -87,6 +88,7 @@ function InternalForm<T extends FieldValues, S>({
     scrollViewRef,
     saveButtonHeight,
     messageBannerHeight,
+    UNSAFE_allowDiscardLocalCacheWhenOffline,
   });
   const { windowHeight, headerHeight } = useScreenInformation();
   const [keyboardHeight, setKeyboardHeight] = useState(0);

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
@@ -18,7 +18,7 @@ export interface FormActionBarProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly secondaryActions?: SecondaryActionProp[];
   readonly setSecondaryActionLoading?: (bool: boolean) => void;
 }
@@ -32,7 +32,7 @@ export function FormActionBar({
   setSaveButtonHeight,
   secondaryActions,
   setSecondaryActionLoading,
-}: FormActionBarProps): JSX.Element {
+}: FormActionBarProps) {
   const styles = useStyles();
 
   const buttonStyle = StyleSheet.flatten([

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { type ReactElement, useMemo } from "react";
 import { View } from "react-native";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
@@ -7,7 +7,7 @@ import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  readonly children: JSX.Element;
+  readonly children: ReactElement;
   readonly shouldRenderActionBar?: boolean;
   readonly saveButtonOffset?: number;
 }
@@ -24,7 +24,7 @@ export function FormBody({
   setSecondaryActionLoading,
   setSaveButtonHeight,
   saveButtonOffset,
-}: FormBodyProps): JSX.Element {
+}: FormBodyProps) {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();

package/src/Form/components/FormCache/FormCache.tsx

@@ -14,7 +14,7 @@ export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,
   setLocalCache,
-}: FormCacheProps<T>): JSX.Element {
+}: FormCacheProps<T>) {
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 

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

@@ -6,7 +6,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormErrorBanner({
   networkError,
   bannerError,
-}: FormBannerErrors): JSX.Element {
+}: FormBannerErrors) {
   const { t } = useAtlantisI18n();
 
   if (networkError) {

package/src/Form/components/FormMask/FormMask.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
-export function FormMask(): JSX.Element {
+export function FormMask() {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -17,7 +17,7 @@ let close: (() => void) | undefined;
  * message to the user. Use `FormMessage.close()` to close the most
  * recent message.
  */
-export const FormMessage = (): JSX.Element => {
+export const FormMessage = () => {
   const [data, setData] = useState<FormMessageData[]>([]);
 
   open = useCallback(

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -15,7 +15,7 @@ interface FormMessageProps {
 export function InternalFormMessage({
   data,
   onRequestClose,
-}: FormMessageProps): JSX.Element {
+}: FormMessageProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -8,9 +8,7 @@ interface FormMessageBannerProps {
   readonly bannerMessages?: FormBannerMessage[];
 }
 
-export function FormMessageBanner({
-  bannerMessages,
-}: FormMessageBannerProps): JSX.Element {
+export function FormMessageBanner({ bannerMessages }: FormMessageBannerProps) {
   return (
     <>
       {bannerMessages?.map((message, index) => (

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/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
@@ -21,7 +21,7 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
   useConfirmBeforeBack: (
     props: UseConfirmBeforeBackProps,
-  ) => MutableRefObject<() => void>;
+  ) => RefObject<() => void>;
   useInternalFormLocalCache: <TData extends FieldValues>(
     formMethods: UseFormReturn<TData>,
     cacheKey?: string,

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

@@ -5,7 +5,7 @@ import type {
   UseFormReturn,
 } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
@@ -20,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 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly handleSubmit: UseFormHandleSubmit<T>;
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
-  readonly removeListenerRef: MutableRefObject<() => void>;
+  readonly removeListenerRef: RefObject<() => void>;
   readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
@@ -45,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();
@@ -82,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/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { ReactElement, RefObject } from "react";
 import type {
   ControllerProps,
   DefaultValues,
@@ -54,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;
     })
@@ -127,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
@@ -142,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
@@ -171,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.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.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) => {