@jobber/components-native 0.89.4 → 0.90.0

package/dist/types/src/Form/hooks/useInternalForm.d.ts

@@ -2,7 +2,7 @@ import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } fro
 import type { MutableRefObject, RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { InternalFormProps } from "../types";
-type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<InternalFormProps<T, SubmitResponseType>, "mode" | "reValidateMode" | "initialValues" | "formRef" | "localCacheKey" | "localCacheExclude" | "localCacheId"> & {
+type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<InternalFormProps<T, SubmitResponseType>, "mode" | "reValidateMode" | "initialValues" | "formRef" | "localCacheKey" | "localCacheExclude" | "localCacheId" | "UNSAFE_allowDiscardLocalCacheWhenOffline"> & {
     scrollViewRef?: RefObject<KeyboardAwareScrollView>;
     readonly saveButtonHeight: number;
     readonly messageBannerHeight: number;
@@ -15,5 +15,5 @@ interface UseInternalForm<T extends FieldValues> {
     readonly removeListenerRef: MutableRefObject<() => void>;
     readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
-export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
+export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, UNSAFE_allowDiscardLocalCacheWhenOffline, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
 export {};

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

@@ -131,6 +131,12 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * If a user opens the same form the data will only be loaded if the `localCacheId` matches
      */
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.89.4",
+  "version": "0.90.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "adc76ab79cbad1b62fa1d3ff35020f061b390292"
+  "gitHead": "39c1c0fc8175f82c32c7636b972712a710fbf527"
 }

package/src/Form/Form.test.tsx

@@ -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

@@ -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/hooks/useInternalForm.ts

@@ -20,6 +20,7 @@ type UseInternalFormProps<T extends FieldValues, SubmitResponseType> = Pick<
   | "localCacheKey"
   | "localCacheExclude"
   | "localCacheId"
+  | "UNSAFE_allowDiscardLocalCacheWhenOffline"
 > & {
   scrollViewRef?: RefObject<KeyboardAwareScrollView>;
   readonly saveButtonHeight: number;
@@ -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

@@ -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
    */