@jobber/components-native 0.89.3 → 0.89.5-JOB-139254-4e3c64d.7

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" | "removeLocalCacheOnBackOffline"> & {
     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, removeLocalCacheOnBackOffline, }: 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.
+     */
+    removeLocalCacheOnBackOffline?: boolean;
     /**
      * Secondary Action for ButtonGroup
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.89.3",
+  "version": "0.89.5-JOB-139254-4e3c64d.7+4e3c64d19",
   "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": "2c7acf83ee31c0923a22c1fd3c2d28b2036fced5"
+  "gitHead": "4e3c64d1982cb68580827ad583b4812b3a240e7c"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -51,24 +51,24 @@ describe("ThemeContext", () => {
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
-  it("updates the theme and tokens", () => {
+  it("updates the theme and tokens", async () => {
     const { result } = renderHook(useAtlantisTheme, {
       wrapper: (props: AtlantisThemeContextProviderProps) => (
         <Wrapper {...props} />
       ),
     });
 
-    act(() => result.current.setTheme("dark"));
+    await act(async () => result.current.setTheme("dark"));
     expect(result.current.theme).toBe("dark");
     expect(result.current.tokens).toEqual(expectedDarkTokens);
 
-    act(() => result.current.setTheme("light"));
+    await act(async () => result.current.setTheme("light"));
     expect(result.current.theme).toBe("light");
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
   describe("when theme is forced for provider", () => {
-    it("ignores updates to the global theme", () => {
+    it("ignores updates to the global theme", async () => {
       const { result } = renderHook(useAtlantisTheme, {
         wrapper: (props: AtlantisThemeContextProviderProps) => (
           <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
@@ -76,7 +76,7 @@ describe("ThemeContext", () => {
       });
 
       // Update the global theme
-      act(() => result.current.setTheme("dark"));
+      await act(async () => result.current.setTheme("dark"));
 
       // This hook shouldn't be affected by it because it's set to the light theme
       expect(result.current.theme).toBe("light");

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -111,7 +111,7 @@ async function renderAndOpenContentOverlay(
 ) {
   const rendered = renderContentOverlay(defaultOptions);
 
-  act(() => {
+  await act(async () => {
     fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
   });
 
@@ -144,7 +144,7 @@ describe("when the close button is clicked on an open content overlay", () => {
     };
     const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );
@@ -165,7 +165,7 @@ describe("when the close button is clicked on an open content overlay with a def
     };
     const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );
@@ -301,7 +301,7 @@ describe("when the close button is clicked on an open content overlay with a def
     };
     const contentOverlayScreen = await renderAndOpenContentOverlay(options);
 
-    act(() => {
+    await act(async () => {
       fireEvent.press(
         contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
       );

package/src/ContentOverlay/hooks/useKeyboardVisibility.test.ts

@@ -8,19 +8,19 @@ const keyboardEvent: Partial<KeyboardEvent> = {
 };
 
 describe("when the user is typing", () => {
-  it("sets the isKeyboardVisible to true", () => {
+  it("sets the isKeyboardVisible to true", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
     });
 
     expect(result.current.isKeyboardVisible).toBe(true);
   });
-  it("the keyboardDidShow event emits the keyboard height", () => {
+  it("the keyboardDidShow event emits the keyboard height", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
     });
 
@@ -31,10 +31,10 @@ describe("when the user is typing", () => {
 });
 
 describe("when the user not typing", () => {
-  it("sets the isKeyboardVisible to false", () => {
+  it("sets the isKeyboardVisible to false", async () => {
     const { result } = renderHook(() => useKeyboardVisibility());
 
-    act(() => {
+    await act(async () => {
       DeviceEventEmitter.emit("keyboardDidHide");
     });
 

package/src/Form/Form.tsx

@@ -66,6 +66,7 @@ function InternalForm<T extends FieldValues, S>({
   saveButtonOffset,
   showStickySaveButton = false,
   renderFooter,
+  removeLocalCacheOnBackOffline,
 }: 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,
+    removeLocalCacheOnBackOffline,
   });
   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"
+  | "removeLocalCacheOnBackOffline"
 > & {
   scrollViewRef?: RefObject<KeyboardAwareScrollView>;
   readonly saveButtonHeight: number;
@@ -45,6 +46,7 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
   scrollViewRef,
   saveButtonHeight,
   messageBannerHeight,
+  removeLocalCacheOnBackOffline = false,
 }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T> {
   const { useConfirmBeforeBack, useInternalFormLocalCache } =
     useAtlantisFormContext();
@@ -82,11 +84,16 @@ export function useInternalForm<T extends FieldValues, SubmitResponseType>({
     };
   }
 
+  const shouldRemoveCacheOnBack = removeLocalCacheOnBackOffline
+    ? 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.
+   */
+  removeLocalCacheOnBackOffline?: boolean;
+
   /**
    * Secondary Action for ButtonGroup
    */

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();
         });
       });

package/src/Glimmer/Glimmer.test.tsx

@@ -46,7 +46,7 @@ describe("Glimmer", () => {
     );
   });
 
-  it("renders sets the correct width", () => {
+  it("renders sets the correct width", async () => {
     jest.useFakeTimers();
 
     // Spy on Animated.timing to verify the animation configuration
@@ -54,7 +54,7 @@ describe("Glimmer", () => {
 
     render(<Glimmer />);
 
-    act(() => {
+    await act(async () => {
       fireEvent(screen.getByTestId(GLIMMER_TEST_ID), "onLayout", {
         nativeEvent: { layout: { width: 300 } },
       });