@applicaster/quick-brick-core 16.0.0-rc.98 → 17.0.0-rc.1

package/App/NetworkStatusProvider/__tests__/resumeVerification.test.ts

@@ -0,0 +1,126 @@
+import { Platform } from "react-native";
+import {
+  RESUME_VERIFICATION_DELAY_MS,
+  describeNetInfo,
+  getResumeDecision,
+  isBackgroundAppState,
+  isResumeVerificationEnabled,
+} from "../resumeVerification";
+
+describe("resumeVerification", () => {
+  it("uses a 5s verification delay", () => {
+    expect(RESUME_VERIFICATION_DELAY_MS).toBe(5000);
+  });
+
+  describe("isBackgroundAppState", () => {
+    it.each([
+      ["inactive", false],
+      ["background", true],
+      ["active", false],
+      ["unknown", false],
+      ["extension", false],
+      [null, false],
+      [undefined, false],
+    ])("%s -> %s", (state, expected) => {
+      expect(isBackgroundAppState(state)).toBe(expected);
+    });
+  });
+
+  describe("getResumeDecision", () => {
+    it.each([
+      [true, true, "still_online"],
+      [true, false, "went_offline"],
+      [false, true, "back_online"],
+      [false, false, "still_offline"],
+    ])("wasOnline=%s isOnlineNow=%s -> %s", (was, now, expected) => {
+      expect(getResumeDecision(was, now)).toBe(expected);
+    });
+  });
+
+  describe("isResumeVerificationEnabled", () => {
+    const originalOS = Platform.OS;
+
+    afterEach(() => {
+      Platform.OS = originalOS;
+    });
+
+    it.each([
+      ["ios", true],
+      ["android", true],
+      ["web", false],
+      ["samsung_tv", false],
+      ["lg_tv", false],
+    ])("%s -> %s", (os, expected) => {
+      Platform.OS = os as any;
+      expect(isResumeVerificationEnabled()).toBe(expected);
+    });
+
+    it.each(["ios", "android"])(
+      "is disabled on TV platforms (%s isTV)",
+      (os) => {
+        const isTVDescriptor = Object.getOwnPropertyDescriptor(
+          Platform,
+          "isTV"
+        );
+
+        Platform.OS = os as any;
+
+        Object.defineProperty(Platform, "isTV", {
+          value: true,
+          configurable: true,
+        });
+
+        try {
+          expect(isResumeVerificationEnabled()).toBe(false);
+        } finally {
+          if (isTVDescriptor) {
+            Object.defineProperty(Platform, "isTV", isTVDescriptor);
+          } else {
+            delete (Platform as any).isTV;
+          }
+        }
+      }
+    );
+  });
+
+  describe("describeNetInfo", () => {
+    it("summarises the status without leaking details (ip, subnet, carrier)", () => {
+      const summary = describeNetInfo({
+        type: "wifi",
+        isConnected: false,
+        isInternetReachable: false,
+        details: { ipAddress: "10.0.0.2", subnet: "255.255.255.0" },
+        deviceStatus: null,
+      } as any);
+
+      expect(summary).toEqual({
+        online: false,
+        isReady: true,
+        type: "wifi",
+        isConnected: false,
+        isInternetReachable: false,
+        deviceOnline: undefined,
+        at: expect.any(String),
+      });
+
+      expect(JSON.stringify(summary)).not.toContain("10.0.0.2");
+    });
+
+    it("reports not-ready info as online (mirrors isOnline)", () => {
+      expect(
+        describeNetInfo({
+          type: "unknown",
+          isConnected: null,
+          isInternetReachable: null,
+          details: null,
+        } as any)
+      ).toEqual(expect.objectContaining({ online: true, isReady: false }));
+    });
+
+    it("handles null input", () => {
+      expect(describeNetInfo(null)).toEqual(
+        expect.objectContaining({ online: true, isReady: false })
+      );
+    });
+  });
+});

package/App/NetworkStatusProvider/__tests__/useResumeVerifiedNetInfo.test.ts

@@ -0,0 +1,204 @@
+import React from "react";
+import { renderHook, act } from "@testing-library/react-native";
+import { AppState, Platform } from "react-native";
+
+import { useResumeVerifiedNetInfo } from "../useResumeVerifiedNetInfo";
+import { RESUME_VERIFICATION_DELAY_MS } from "../resumeVerification";
+import { isOnline } from "../utils";
+
+const mockLogger = {
+  warning: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  log: jest.fn(),
+  error: jest.fn(),
+};
+
+// subsystemLogger runs at module load, before mockLogger is initialised: delegate lazily
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/logger"
+  );
+
+  return {
+    ...actual,
+    // Only the logger of this subsystem is replaced; every other module keeps its real one.
+    subsystemLogger: (subsystem: string) => {
+      if (subsystem !== "network/reachability") {
+        return actual.subsystemLogger(subsystem);
+      }
+
+      const logger = {
+        warning: (event) => mockLogger.warning(event),
+        debug: (event) => mockLogger.debug(event),
+        info: (event) => mockLogger.info(event),
+        log: (event) => mockLogger.log(event),
+        error: (event) => mockLogger.error(event),
+        addSubsystem: () => logger,
+      };
+
+      return logger;
+    },
+  };
+});
+
+jest.mock("react-native/Libraries/AppState/AppState", () => {
+  const { EventEmitter } = require("events");
+  const emitter = new EventEmitter();
+
+  return {
+    emitter,
+    currentState: "active",
+    addEventListener: (type, handler) => {
+      emitter.addListener(type, handler);
+
+      return { remove: () => emitter.removeListener(type, handler) };
+    },
+  };
+});
+
+const ONLINE = {
+  type: "wifi",
+  details: { isConnectionExpensive: false },
+  isConnected: true,
+  isInternetReachable: true,
+  deviceStatus: null,
+} as any;
+
+const OFFLINE = {
+  type: "wifi",
+  details: { isConnectionExpensive: false },
+  isConnected: false,
+  isInternetReachable: false,
+  deviceStatus: null,
+} as any;
+
+const mockAppState = AppState as any;
+
+const changeAppState = (state: string) =>
+  act(() => {
+    mockAppState.currentState = state;
+    mockAppState.emitter.emit("change", state);
+  });
+
+const advance = (ms: number) =>
+  act(() => {
+    jest.advanceTimersByTime(ms);
+  });
+
+const setup = (initial = ONLINE, options = {}) => {
+  const hook = renderHook(({ info }) => useResumeVerifiedNetInfo(info), {
+    initialProps: { info: initial },
+    ...options,
+  });
+
+  const setLive = (info) => hook.rerender({ info });
+  const publishedOnline = () => isOnline(hook.result.current.netInfo) === true;
+
+  return { ...hook, setLive, publishedOnline };
+};
+
+const infoMessages = () =>
+  mockLogger.info.mock.calls.map(([event]) => event.message);
+
+describe("useResumeVerifiedNetInfo", () => {
+  const originalOS = Platform.OS;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    Platform.OS = "ios";
+    mockAppState.currentState = "active";
+    mockAppState.emitter.removeAllListeners();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    Platform.OS = originalOS;
+  });
+
+  it("publishes live changes immediately while active", () => {
+    const { setLive, result } = setup(ONLINE);
+
+    setLive(OFFLINE);
+
+    expect(result.current.netInfo).toBe(OFFLINE);
+    expect(result.current.stillOfflineAfterResumeCount).toBe(0);
+  });
+
+  it("holds the state in background and publishes the verified state 5s after resume", () => {
+    const { setLive, publishedOnline } = setup(ONLINE);
+
+    changeAppState("background");
+    setLive(OFFLINE);
+    changeAppState("active");
+
+    advance(RESUME_VERIFICATION_DELAY_MS - 1);
+    expect(publishedOnline()).toBe(true);
+
+    advance(1);
+    expect(publishedOnline()).toBe(false);
+  });
+
+  it("logs the resume verification at info level (delegates to the controller)", () => {
+    setup(ONLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(infoMessages()).toEqual(
+      expect.arrayContaining([
+        "NetworkStatus: resume verification started",
+        "NetworkStatus: resume verification finished",
+      ])
+    );
+
+    expect(mockLogger.warning).not.toHaveBeenCalled();
+  });
+
+  it("exposes stillOfflineAfterResumeCount after an offline resume", () => {
+    const { result } = setup(OFFLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(result.current.stillOfflineAfterResumeCount).toBe(1);
+  });
+
+  it("stops the controller on unmount (no AppState listener, pending window never finishes)", () => {
+    const { setLive, unmount } = setup(ONLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    setLive(OFFLINE);
+
+    unmount();
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(mockAppState.emitter.listenerCount("change")).toBe(0);
+
+    expect(infoMessages()).not.toContain(
+      "NetworkStatus: resume verification finished"
+    );
+  });
+
+  it("works under React.StrictMode (double-invoked effects)", () => {
+    const { setLive, publishedOnline } = setup(ONLINE, {
+      wrapper: React.StrictMode,
+    });
+
+    expect(mockAppState.emitter.listenerCount("change")).toBe(1);
+
+    changeAppState("background");
+    changeAppState("active");
+    setLive(OFFLINE);
+
+    advance(RESUME_VERIFICATION_DELAY_MS - 1);
+    expect(publishedOnline()).toBe(true);
+
+    advance(1);
+    expect(publishedOnline()).toBe(false);
+  });
+});

package/App/NetworkStatusProvider/resumeVerification.ts

@@ -0,0 +1,54 @@
+import { Platform } from "react-native";
+import { NetInfoState } from "@react-native-community/netinfo";
+import { isConnectionInfoReady, isOnline } from "./utils";
+
+type ConnectionInfo = NetInfoState & { deviceStatus?: NetStatus };
+
+export type ResumeDecision =
+  | "still_online"
+  | "went_offline"
+  | "back_online"
+  | "still_offline";
+
+/**
+ * Time to wait after the app returns to foreground before trusting NetInfo.
+ * On iOS the JS reachability check (NetInfo internetReachability) is suspended
+ * with the app and reports a stale failure right after resume/unlock.
+ */
+export const RESUME_VERIFICATION_DELAY_MS = 5000;
+
+// Only "background" suspends JS (and NetInfo's reachability check). "inactive"
+// (Control Center, Notification Center, system alerts) keeps JS running, and is
+// where users toggle airplane mode / Wi-Fi, so changes there must pass through.
+export const isBackgroundAppState = (state?: string | null): boolean =>
+  state === "background";
+
+// Mobile only: tvOS / Android TV report Platform.OS "ios" / "android" too
+export const isResumeVerificationEnabled = (): boolean =>
+  (Platform.OS === "ios" || Platform.OS === "android") && !Platform.isTV;
+
+export const getResumeDecision = (
+  wasOnline: boolean,
+  isOnlineNow: boolean
+): ResumeDecision => {
+  if (wasOnline) {
+    return isOnlineNow ? "still_online" : "went_offline";
+  }
+
+  return isOnlineNow ? "back_online" : "still_offline";
+};
+
+// Log-safe summary: details holds ipAddress/subnet/carrier, never log it as is
+export const describeNetInfo = (info: ConnectionInfo | null) => {
+  const safeInfo = (info ?? {}) as ConnectionInfo;
+
+  return {
+    online: isOnline(safeInfo) === true,
+    isReady: !!isConnectionInfoReady(safeInfo),
+    type: safeInfo.type,
+    isConnected: safeInfo.isConnected,
+    isInternetReachable: safeInfo.isInternetReachable,
+    deviceOnline: safeInfo.deviceStatus?.online,
+    at: new Date().toISOString(),
+  };
+};

package/App/NetworkStatusProvider/useResumeVerifiedNetInfo.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import {
+  ConnectionInfo,
+  ResumeVerificationController,
+  ResumeVerifiedState,
+} from "./ResumeVerificationController";
+
+/**
+ * Network status verified after the app returns from background,
+ * see ResumeVerificationController.
+ * liveNetInfo must keep its reference until it really changes (memoize it),
+ * every new reference is treated as a network update.
+ */
+export function useResumeVerifiedNetInfo<T extends ConnectionInfo>(
+  liveNetInfo: T
+): ResumeVerifiedState<T> {
+  const [controller] = React.useState(
+    () => new ResumeVerificationController(liveNetInfo)
+  );
+
+  React.useLayoutEffect(() => {
+    controller.start();
+
+    return () => controller.stop();
+  }, [controller]);
+
+  React.useLayoutEffect(() => {
+    controller.setNetInfo(liveNetInfo);
+  }, [controller, liveNetInfo]);
+
+  return React.useSyncExternalStore(controller.subscribe, controller.getState);
+}

package/App/ThemeManager/index.tsx

@@ -100,7 +100,12 @@ const MemoizedThemeContextProvider = React.memo(
 function ThemeManagerComponent({ children, plugins }: Props) {
   const isTablet = useIsTablet();
 
-  const themes = selectThemes(isTablet, plugins);
+  // Stable reference keeps MemoizedThemeContextProvider's byReference check
+  // effective, so theme consumers don't re-render on every parent render
+  const themes = React.useMemo(
+    () => selectThemes(isTablet, plugins),
+    [isTablet, plugins]
+  );
 
   const [selectedThemeId, setSelectedThemeId] =
     React.useState(DEFAULT_THEME_ID);

package/App/appLifeCycleManager/index.tsx

@@ -12,13 +12,13 @@ import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUti
 import { networkStatusReady } from "../NetworkStatusProvider/networkStatusReady";
 import { updateSessionNumber } from "../SessionCounter/sessionCounter";
 
-import { coreAppLogger } from "../logger";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { requiredSessionKeys } from "../../const";
 import { initializeActionSetters, useActionSetters } from "../ActionSetters";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const logger = coreAppLogger.addSubsystem("AppLifeCycleManager");
+const logger = subsystemLogger("app/lifecycle", "AppLifeCycleManager");
 
 const isAndroid = isAndroidPlatform();
 

package/App/appRemoteDataLoader/index.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import { getRemoteContextData } from "../remoteContextReloader/getRemoteContextData";
 
-import { coreAppLogger } from "../logger";
 import { UnknownAction, Dispatch } from "@reduxjs/toolkit";
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const logger = coreAppLogger.addSubsystem("AppRemoteDataLoader");
+const logger = subsystemLogger("app/loading", "AppRemoteDataLoader");
 
 /**
  * adds a call to the QuickBrickManager to tell the app is ready, reloads remote

package/App/appRemoteDataLoader/remoteDataLoader.ts

@@ -5,8 +5,8 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { coreAppLogger } from "../logger";
 
 const logger = createLogger({
-  category: "PlayerController",
-  subsystem: "RemoteDataLoader",
+  category: "RemoteDataLoader",
+  subsystem: "app/loading",
   parent: coreAppLogger,
 });
 

package/App/index.tsx

@@ -32,7 +32,9 @@ import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui
 import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
 import { LoadingOverlay } from "./LoadingOverlay";
 import { NotificationToastRenderer } from "./NotificationToastRenderer";
+import { LayoutPreviewReminder } from "./layoutPreview/LayoutPreviewReminder";
 import { ZappAppWrapper } from "./components/ZappAppWrapper";
+import { registerCoreUIActions } from "./uiActions";
 
 interface AppOptions {
   Layout: React.ComponentType;
@@ -52,8 +54,10 @@ const App = ({
   OfflineHandler,
   SplashLoader,
   InteractionManager,
-}: AppOptions): ZappApp =>
-  React.memo(function ZappApp(props: AppComponentProps) {
+}: AppOptions): ZappApp => {
+  registerCoreUIActions();
+
+  return React.memo(function ZappApp(props: AppComponentProps) {
     const {
       styles,
       components: { AppContainer },
@@ -79,6 +83,7 @@ const App = ({
                   <ModalProvider />
                 </URLSchemeListener>
                 <LoadingOverlay />
+                <LayoutPreviewReminder />
               </ErrorBoundary>
               <LogicAggregatorContainer
                 components={React.useMemo(
@@ -92,6 +97,7 @@ const App = ({
       </ZappAppWrapper>
     );
   });
+};
 
 export function createQuickBrickApp(options): ZappApp {
   const {

package/App/layoutPreview/LayoutPreviewReminder.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import { AppState, Platform } from "react-native";
+
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "@applicaster/zapp-react-native-utils/alertUtils";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { notificationToastManager } from "../NotificationToastRenderer/NotificationToastManager";
+import {
+  PREVIEW_BACK,
+  PREVIEW_CONTINUE,
+  PREVIEW_MESSAGE,
+  PREVIEW_TITLE,
+  UNAVAILABLE_MESSAGE,
+  UNAVAILABLE_TITLE,
+  acknowledgeLayoutPreview,
+  consumePreviewUnavailable,
+  leavePreviewForDefault,
+  readReminderState,
+  shouldShowReminder,
+} from "./persistence";
+
+let promptOpen = false;
+let checkingPrompt = false;
+
+function showUnavailableNotice(): void {
+  if (Platform.isTV && !isWeb()) {
+    showAlertDialog({
+      title: UNAVAILABLE_TITLE,
+      message: UNAVAILABLE_MESSAGE,
+      okButtonText: "OK",
+    });
+
+    return;
+  }
+
+  notificationToastManager.showToast({
+    message: UNAVAILABLE_TITLE,
+    extraMessage: UNAVAILABLE_MESSAGE,
+  });
+}
+
+function showPreviewDialog(): void {
+  const onContinue = () => {
+    promptOpen = false;
+    void acknowledgeLayoutPreview();
+  };
+
+  const onBack = () => {
+    promptOpen = false;
+
+    void leavePreviewForDefault().finally(() => {
+      QuickBrickManager.sendQuickBrickEvent(
+        QUICK_BRICK_EVENTS.FORCE_APP_RELOAD
+      );
+    });
+  };
+
+  showConfirmationDialog({
+    title: PREVIEW_TITLE,
+    message: PREVIEW_MESSAGE,
+    cancelButtonText: PREVIEW_CONTINUE,
+    okButtonText: PREVIEW_BACK,
+    cancelCompletion: onContinue,
+    confirmCompletion: onBack,
+  });
+
+  if (!isWeb()) return;
+
+  // Remote Back hides the web dialog without calling either completion.
+  const unsubscribe = confirmationDialogStore.subscribe((state) => {
+    if (state.isDialogVisible) return;
+
+    promptOpen = false;
+    unsubscribe();
+  });
+}
+
+async function presentLayoutPreviewPrompt(): Promise<void> {
+  if (promptOpen || checkingPrompt) return;
+
+  checkingPrompt = true;
+
+  try {
+    if (consumePreviewUnavailable()) {
+      showUnavailableNotice();
+
+      return;
+    }
+
+    const { hasOverride, ackAt } = await readReminderState();
+
+    if (!shouldShowReminder(hasOverride, ackAt, Date.now())) return;
+
+    promptOpen = true;
+    showPreviewDialog();
+  } finally {
+    checkingPrompt = false;
+  }
+}
+
+export function LayoutPreviewReminder(): null {
+  const appReady = useAppSelector(selectAppReady);
+  const checkedForeground = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!appReady) return;
+
+    const showIfNeeded = () => {
+      if (checkedForeground.current) return;
+
+      checkedForeground.current = true;
+      void presentLayoutPreviewPrompt();
+    };
+
+    showIfNeeded();
+
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "background") {
+        checkedForeground.current = false;
+      }
+
+      if (state === "active") showIfNeeded();
+    });
+
+    return () => subscription.remove();
+  }, [appReady]);
+
+  return null;
+}