@applicaster/quick-brick-core 16.0.0-rc.124 → 16.0.0-rc.125

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/usePresentSchemeHandler.ts

@@ -28,6 +28,7 @@ import {
 
 import { log_error, log_info } from "../../logger";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { rememberLayoutPreview } from "../../../layoutPreview/persistence";
 
 const getFeed = (query) => ({
   content: { src: query.data_source },
@@ -155,6 +156,8 @@ export function usePresentSchemeHandler({
           rivers_configuration_id
         );
 
+        await rememberLayoutPreview(rivers_configuration_id);
+
         onFinish((done) => {
           actions?.setAppReady();
           navigator.replace(homeRiver);

package/App/index.tsx

@@ -32,6 +32,7 @@ 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";
 
@@ -82,6 +83,7 @@ const App = ({
                   <ModalProvider />
                 </URLSchemeListener>
                 <LoadingOverlay />
+                <LayoutPreviewReminder />
               </ErrorBoundary>
               <LogicAggregatorContainer
                 components={React.useMemo(

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;
+}

package/App/layoutPreview/__tests__/persistence.test.ts

@@ -0,0 +1,63 @@
+import { NativeModules } from "react-native";
+
+import {
+  SUPPRESSION_MS,
+  applyPersistedLayoutPreview,
+  leavePreviewForDefault,
+  shouldKeepOverride,
+  shouldShowReminder,
+} from "../persistence";
+
+const mockStore: Record<string, string> = {};
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: {
+      getItem: async (key: string) => mockStore[key] ?? null,
+      setItem: async (key: string, value: string) => {
+        mockStore[key] = value;
+      },
+      removeItem: async (key: string) => {
+        delete mockStore[key];
+      },
+    },
+  })
+);
+
+describe("layout preview persistence", () => {
+  it("keeps a non-default layout id and drops the version default", () => {
+    expect(shouldKeepOverride("preview", "default")).toBe(true);
+    expect(shouldKeepOverride("default", "default")).toBe(false);
+    expect(shouldKeepOverride(null, "default")).toBe(false);
+    expect(shouldKeepOverride("preview", null)).toBe(true);
+  });
+
+  it("suppresses the reminder for two hours after acknowledgment", () => {
+    const now = 1_000_000;
+
+    expect(shouldShowReminder(true, null, now)).toBe(true);
+    expect(shouldShowReminder(false, null, now)).toBe(false);
+
+    expect(shouldShowReminder(true, now - SUPPRESSION_MS + 1, now)).toBe(false);
+
+    expect(shouldShowReminder(true, now - SUPPRESSION_MS, now)).toBe(true);
+  });
+
+  it("keeps the version default for exactly one load after Back to Default", async () => {
+    const switchLayout = jest.fn(async () => true);
+
+    NativeModules.AppLoaderBridge = {
+      getDefaultLayoutId: async () => "default",
+      switchLayout,
+    };
+
+    mockStore.layout_preview_id = "preview";
+
+    await leavePreviewForDefault();
+
+    expect(await applyPersistedLayoutPreview()).toBe("default");
+    expect(switchLayout).toHaveBeenLastCalledWith("default", null);
+    expect(await applyPersistedLayoutPreview()).toBe("absent");
+  });
+});

package/App/layoutPreview/persistence.ts

@@ -0,0 +1,228 @@
+import { NativeModules } from "react-native";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+
+// Separate from active_layout_id, which the switchLayout action owns.
+export const LAYOUT_PREVIEW_ID_KEY = "layout_preview_id";
+
+export const LAYOUT_PREVIEW_ACK_KEY = "layout_preview_ack_at";
+
+// Set by Back to Default; makes the reload that follows skip layout selectors once.
+export const LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY =
+  "layout_preview_restore_default";
+
+export const SUPPRESSION_MS = 2 * 60 * 60 * 1000;
+
+export const PREVIEW_TITLE = "You're Viewing a Preview Layout";
+
+export const PREVIEW_MESSAGE =
+  "This device is currently displaying a preview layout instead of the version default layout.";
+
+export const PREVIEW_CONTINUE = "Continue Preview";
+
+export const PREVIEW_BACK = "Back to Default Layout";
+
+export const UNAVAILABLE_TITLE = "Preview layout unavailable";
+
+export const UNAVAILABLE_MESSAGE =
+  "This device was returned to the version default layout.";
+
+export type PreviewApplyResult = "applied" | "absent" | "invalid" | "default";
+
+let unavailableNotice = false;
+
+export function shouldKeepOverride(
+  layoutId: string | null | undefined,
+  defaultId: string | null | undefined
+): boolean {
+  return Boolean(layoutId) && layoutId !== defaultId;
+}
+
+export function shouldShowReminder(
+  hasOverride: boolean,
+  ackAt: number | null,
+  now: number
+): boolean {
+  if (!hasOverride) return false;
+  if (ackAt == null || Number.isNaN(ackAt)) return true;
+
+  return now - ackAt >= SUPPRESSION_MS;
+}
+
+export function markPreviewUnavailable(): void {
+  unavailableNotice = true;
+}
+
+export function consumePreviewUnavailable(): boolean {
+  const pending = unavailableNotice;
+  unavailableNotice = false;
+
+  return pending;
+}
+
+async function removeKey(key: string): Promise<void> {
+  try {
+    await localStorage.removeItem(key);
+  } catch {
+    // key was already absent
+  }
+}
+
+async function readOverrideId(): Promise<string | null> {
+  try {
+    const id = await localStorage.getItem(LAYOUT_PREVIEW_ID_KEY);
+
+    return id || null;
+  } catch {
+    return null;
+  }
+}
+
+export async function getDefaultLayoutId(): Promise<string | null> {
+  try {
+    const id = await NativeModules.AppLoaderBridge?.getDefaultLayoutId?.();
+
+    return id || null;
+  } catch {
+    return null;
+  }
+}
+
+export async function clearLayoutPreview(): Promise<void> {
+  await removeKey(LAYOUT_PREVIEW_ID_KEY);
+  await removeKey(LAYOUT_PREVIEW_ACK_KEY);
+}
+
+/**
+ * Drops the pin and points the loader at the version default.
+ * Used by Back to Default and by a preview link that targets the default layout.
+ */
+export async function returnToDefaultLayout(): Promise<void> {
+  const defaultId = await getDefaultLayoutId();
+
+  await clearLayoutPreview();
+
+  if (!defaultId || !NativeModules.AppLoaderBridge?.switchLayout) return;
+
+  try {
+    await NativeModules.AppLoaderBridge.switchLayout(defaultId, null);
+  } catch {
+    // the pin is already gone; the next load uses the version default
+  }
+}
+
+/** Back to Default from the reminder. The app reloads next, and that load must stay on the version default. */
+export async function leavePreviewForDefault(): Promise<void> {
+  await localStorage.setItem(LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY, "true");
+  await returnToDefaultLayout();
+}
+
+/** Same as returnToDefaultLayout, plus a one-shot unavailable notice. */
+export async function restoreInvalidPreview(): Promise<void> {
+  markPreviewUnavailable();
+  await returnToDefaultLayout();
+}
+
+/**
+ * Pins a layout id, or clears the pin when the id is the version default.
+ * A storage failure still leaves the in-session preview in place.
+ */
+export async function rememberLayoutPreview(layoutId: string): Promise<void> {
+  if (!layoutId) return;
+
+  try {
+    const defaultId = await getDefaultLayoutId();
+
+    if (!shouldKeepOverride(layoutId, defaultId)) {
+      await returnToDefaultLayout();
+
+      return;
+    }
+
+    const current = await readOverrideId();
+
+    if (current !== layoutId) {
+      await removeKey(LAYOUT_PREVIEW_ACK_KEY);
+    }
+
+    await localStorage.setItem(LAYOUT_PREVIEW_ID_KEY, layoutId);
+  } catch {
+    // this session already loaded the layout; the pin is best-effort
+  }
+}
+
+export async function acknowledgeLayoutPreview(): Promise<void> {
+  await localStorage.setItem(LAYOUT_PREVIEW_ACK_KEY, String(Date.now()));
+}
+
+export async function readReminderState(): Promise<{
+  hasOverride: boolean;
+  ackAt: number | null;
+}> {
+  const layoutId = await readOverrideId();
+  const defaultId = await getDefaultLayoutId();
+  let ackRaw: string | null = null;
+
+  try {
+    ackRaw = await localStorage.getItem(LAYOUT_PREVIEW_ACK_KEY);
+  } catch {
+    ackRaw = null;
+  }
+
+  const ackAt = ackRaw == null || ackRaw === "" ? null : Number(ackRaw);
+
+  return {
+    hasOverride: shouldKeepOverride(layoutId, defaultId),
+    ackAt: ackAt != null && !Number.isNaN(ackAt) ? ackAt : null,
+  };
+}
+
+/**
+ * Re-applies a stored preview before layout-manager selection.
+ * "invalid" means the pin was cleared and the version default was restored,
+ * so the caller must not run selectLayout over the top of that fallback.
+ */
+export async function applyPersistedLayoutPreview(): Promise<PreviewApplyResult> {
+  let restoreDefault = null;
+
+  try {
+    restoreDefault = await localStorage.getItem(
+      LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY
+    );
+  } catch {
+    restoreDefault = null;
+  }
+
+  if (restoreDefault) {
+    await removeKey(LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY);
+
+    const defaultId = await getDefaultLayoutId();
+
+    if (defaultId) {
+      await NativeModules.AppLoaderBridge.switchLayout(defaultId, null);
+    }
+
+    return "default";
+  }
+
+  const layoutId = await readOverrideId();
+
+  if (!layoutId) return "absent";
+
+  const defaultId = await getDefaultLayoutId();
+
+  if (!shouldKeepOverride(layoutId, defaultId)) {
+    await clearLayoutPreview();
+
+    return "absent";
+  }
+
+  try {
+    await NativeModules.AppLoaderBridge.switchLayout(layoutId, null);
+
+    return "applied";
+  } catch {
+    await restoreInvalidPreview();
+
+    return "invalid";
+  }
+}

package/App/remoteContextReloader/getRemoteContextData/getNativeRemoteContextData.ts

@@ -14,6 +14,56 @@ import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "../consts";
 const { AppLoaderBridge } = NativeModules;
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { useErrorStore } from "../../ErrorBoundary/store";
+import {
+  PreviewApplyResult,
+  applyPersistedLayoutPreview,
+  restoreInvalidPreview,
+} from "../../layoutPreview/persistence";
+
+/**
+ * Points the loader at the layout to fetch. A persisted device preview wins
+ * over the layout-manager plugin (experiment, geo, language) and over active_layout_id.
+ */
+async function selectActiveLayout(
+  runtimeConfigurationUrls,
+  plugins,
+  isTabletDevice: boolean
+): Promise<PreviewApplyResult> {
+  let preview: PreviewApplyResult = "absent";
+
+  try {
+    preview = await applyPersistedLayoutPreview();
+
+    if (preview !== "absent") return preview;
+
+    const layoutManagerPlugin = R.find(
+      R.pathSatisfies(R.is(Function), ["module", "selectLayout"])
+    )(plugins);
+
+    if (layoutManagerPlugin) {
+      await layoutManagerPlugin.module?.selectLayout({
+        runtimeConfigurationUrls,
+        plugin: layoutManagerPlugin,
+        isTablet: isTabletDevice,
+      });
+
+      return preview;
+    }
+
+    const layoutId = await localStorage.getItem(ACTIVE_LAYOUT_ID_STORAGE_KEY);
+
+    if (layoutId) {
+      await AppLoaderBridge?.switchLayout(layoutId, null);
+    }
+  } catch (error) {
+    logger.error({
+      message: "Error selecting layout using layout manager plugin",
+      data: error,
+    });
+  }
+
+  return preview;
+}
 
 export async function getNativeRemoteContextData(
   dispatch,
@@ -35,32 +85,27 @@ export async function getNativeRemoteContextData(
 
   loadAppContextData(dispatch, R.mergeAll([...generalConfiguration]));
 
-  try {
-    const layoutManagerPlugin = R.find(
-      R.pathSatisfies(R.is(Function), ["module", "selectLayout"])
-    )(plugins);
+  const preview = await selectActiveLayout(
+    runtimeConfigurationUrls,
+    plugins,
+    isTabletDevice
+  );
 
-    if (layoutManagerPlugin) {
-      await layoutManagerPlugin.module?.selectLayout({
-        runtimeConfigurationUrls,
-        plugin: layoutManagerPlugin,
-        isTablet: isTabletDevice,
-      });
-    } else {
-      const layoutId = await localStorage.getItem(ACTIVE_LAYOUT_ID_STORAGE_KEY);
+  let layout;
 
-      if (layoutId) {
-        await AppLoaderBridge?.switchLayout(layoutId, null);
-      }
-    }
+  try {
+    layout = await getPromiseForType("layout");
   } catch (error) {
+    if (preview !== "applied") throw error;
+
     logger.error({
-      message: "Error selecting layout using layout manager plugin",
+      message: "Persisted preview layout failed to load",
       data: error,
     });
-  }
 
-  const layout = await getPromiseForType("layout");
+    await restoreInvalidPreview();
+    layout = await getPromiseForType("layout");
+  }
 
   const layoutLoadingErrorMessage = "Failed to load layout data";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-rc.124",
+  "version": "16.0.0-rc.125",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.124",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.124",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.124",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.124",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.124",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.124",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.124",
+    "@applicaster/applicaster-types": "16.0.0-rc.125",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.125",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.125",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.125",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.125",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.125",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.125",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",