@applicaster/zapp-react-native-ui-components 16.0.0-rc.37 → 16.0.0-rc.39

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,88 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OfflineHandler renders 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-      "position": "relative",
-    }
-  }
->
-  <View
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": undefined,
-          "flex": 1,
-          "height": 88,
-          "justifyContent": "center",
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "transform": [
-            {
-              "translateY": -88,
-            },
-          ],
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "backgroundColor": undefined,
-            "height": 44,
-          }
-        }
-      />
-      <Text
-        style={
-          {
-            "color": undefined,
-            "fontFamily": undefined,
-            "fontSize": undefined,
-            "letterSpacing": undefined,
-            "lineHeight": undefined,
-          }
-        }
-      >
-        You are back online
-      </Text>
-    </View>
-  </View>
-</View>
+exports[`OfflineHandler renders its children without wrapping them in a notification view 1`] = `
+<Text>
+  child content
+</Text>
 `;

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -1,26 +1,26 @@
 import React from "react";
+import { Text } from "react-native";
 import { render } from "@testing-library/react-native";
+import { subscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
 jest.useFakeTimers({ legacyFakeTimers: true });
 
+// `isOnline` (@applicaster/quick-brick-core/App/NetworkStatusProvider/utils)
+// only treats connectionInfo as "ready" when it has NetInfoState-shaped
+// isConnected/isInternetReachable/details fields, so the mock has to mirror
+// that shape for online/offline to actually be distinguishable.
 let mockConnectionStatus = false;
-const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
     ...jest.requireActual(
       "@applicaster/zapp-react-native-utils/reactHooks/connection"
     ),
-    useConnectionInfo: jest.fn(() => mockConnectionStatus),
-  };
-});
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
-  return {
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/utils"
-    ),
-    usePrevious: jest.fn(() => mockPreviousValue),
+    useConnectionInfo: jest.fn(() => ({
+      details: {},
+      isConnected: mockConnectionStatus,
+      isInternetReachable: mockConnectionStatus,
+    })),
   };
 });
 
@@ -54,21 +54,81 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 describe("OfflineHandler", () => {
-  const { OfflineHandler, NotificationView } = require("../");
+  const { OfflineHandler } = require("../");
+
+  beforeEach(() => {
+    mockConnectionStatus = false;
+  });
+
+  it("renders its children without wrapping them in a notification view", () => {
+    const { toJSON } = render(
+      <OfflineHandler>
+        <Text>child content</Text>
+      </OfflineHandler>
+    );
 
-  it("renders", () => {
-    const { toJSON } = render(<OfflineHandler />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders Notification mode if component was rendered while online", () => {
+  it("emits a showToast event on mount when the device starts offline", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "No internet connection",
+        timeout: 5000,
+      }),
+      // the shared event bus appends a dispose fn as the last handler arg
+      expect.any(Function)
+    );
+
+    unsubscribe();
+  });
+
+  it("does not emit a showToast event on mount when the device starts online", () => {
     mockConnectionStatus = true;
 
-    const { rerender, UNSAFE_getByType } = render(<OfflineHandler />);
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("emits a showToast event when the device comes back online", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
 
+    // ignore the offline toast emitted on mount; we only care about the
+    // offline -> online transition here
+    handleShowToast.mockClear();
+
+    mockConnectionStatus = true;
     rerender(<OfflineHandler />);
 
-    const notificationsView = UNSAFE_getByType(NotificationView);
-    expect(notificationsView).toBeDefined();
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "You are back online",
+        timeout: 2000,
+      }),
+      // the shared event bus appends a dispose fn as the last handler arg
+      expect.any(Function)
+    );
+
+    unsubscribe();
   });
 });

package/Components/OfflineHandler/hooks.ts

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+
+import {
+  isWeb,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+const OFFLINE_EXPERIENCE = "offline-experience";
+
+const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
+
+const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
+
+export const useNotificationHeight = () => {
+  const insets = useSafeAreaInsets();
+
+  const navBarHeight = platformSelect({ ios: 44, android: 56 });
+
+  const statusHeight = insets.top;
+  const notificationHeight = statusHeight + navBarHeight;
+
+  return { statusHeight, notificationHeight };
+};
+
+export function useNetworkStatusLocalizations() {
+  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
+    string,
+    string
+  > | null>(null);
+
+  React.useEffect(() => {
+    async function loadStoredLocalizations() {
+      try {
+        const stored = await sessionStorage.getItem(
+          NETWORK_STATUS_LOCALIZATIONS_KEY,
+          THEME_STORAGE_NAMESPACE
+        );
+
+        if (stored) {
+          setStoredLocalizations(stored);
+        }
+      } catch (error) {
+        console.error("Error loading network status localizations", error);
+      }
+    }
+
+    loadStoredLocalizations();
+  }, []);
+
+  return storedLocalizations;
+}
+
+export function useOfflineHandlerProps(online: boolean) {
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+  const plugins = usePlugins();
+  const offlinePlugin = findPluginByIdentifier(OFFLINE_EXPERIENCE, plugins);
+  const { useOfflineExperienceConfiguration } = offlinePlugin?.module ?? {};
+
+  const {
+    configurationFields,
+    localizations,
+  }: {
+    configurationFields: OfflineExperiencePluginConfiguration;
+    localizations: OfflineExperienceLocalizations;
+  } = useOfflineExperienceConfiguration?.() ?? {};
+
+  let title, subtitle, style;
+
+  if (isWeb()) {
+    title = online
+      ? (theme?.online_notification_title ??
+        storedLocalizations?.online_notification_title)
+      : (theme?.offline_notification_title ??
+        storedLocalizations?.offline_notification_title);
+
+    subtitle = online
+      ? (theme?.online_notification_subtitle ??
+        storedLocalizations?.online_notification_subtitle)
+      : (theme?.offline_notification_subtitle ??
+        storedLocalizations?.offline_notification_subtitle);
+  } else {
+    title = textTransform(
+      configurationFields.offline_toast_message_text_transform,
+      online
+        ? localizations.online_toast_message
+        : localizations.offline_toast_message
+    );
+
+    style = {
+      color: online
+        ? configurationFields.offline_toast_message_online_font_color
+        : configurationFields.offline_toast_message_font_color,
+      backgroundColor: online
+        ? configurationFields.offline_toast_online_background_color
+        : configurationFields.offline_toast_offline_background_color,
+      fontFamily: platformSelect({
+        ios: configurationFields.offline_toast_message_ios_font_family,
+        android: configurationFields.offline_toast_message_android_font_family,
+      }),
+      fontSize: configurationFields.offline_toast_message_font_size,
+      lineHeight: configurationFields.offline_toast_message_line_height,
+      letterSpacing: platformSelect({
+        ios: configurationFields.offline_toast_message_letter_spacing_ios,
+        android:
+          configurationFields.offline_toast_message_letter_spacing_android,
+      }),
+    };
+  }
+
+  return useMemo(
+    () => ({ message: title, extraMessage: subtitle, style }),
+    [title, subtitle, style]
+  );
+}

package/Components/OfflineHandler/index.tsx

@@ -1,105 +1,83 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, StyleSheet } from "react-native";
-import { NotificationView as NotificationViewNative } from "./NotificationView/NotificationView";
-import { NotificationView as NotificationViewSamsung } from "./NotificationView/NotificationView.samsung";
-import { NotificationView as NotificationViewLG } from "./NotificationView/NotificationView.lg";
-
+import React, { useCallback, useEffect } from "react";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
+import { useOfflineHandlerProps } from "./hooks";
 import { componentsLogger } from "../../Helpers/logger";
 import { parseConnectionInfo } from "./utils";
 
 const logger = componentsLogger.addSubsystem("OfflineHandler");
 
+// mirrors NOTIFICATION_TOAST_EVENTS.SHOW_TOAST in
+// @applicaster/quick-brick-core/App/NotificationToastRenderer/NotificationToastManager
+// (kept as a literal here since this package must not depend on quick-brick-core)
+const SHOW_TOAST_EVENT = "showToast";
+const OFFLINE_STATUS_TOAST_ID = "offline-status";
+
 type Props = {
   children?: React.ReactElement<any>;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: "relative",
-  },
-});
-
 const timers = {
   goingOffline: 5000,
   goingOnline: 2000,
 };
 
-export const NotificationView = platformSelect({
-  samsung_tv: NotificationViewSamsung,
-  lg_tv: NotificationViewLG,
-  default: NotificationViewNative,
-});
-
 export const OfflineHandler = ({ children }: Props) => {
   const connectionInfo = useConnectionInfo(false);
-  const { online, deviceOnline } = parseConnectionInfo(connectionInfo);
+  const { online } = parseConnectionInfo(connectionInfo);
+  const prevOnline = usePrevious(online);
 
-  const [hidden, setHidden] = useState<boolean>(true);
-  const previousOnline: boolean = usePrevious(online);
-  const timer = useRef<NodeJS.Timeout | null>(null);
-  const initialRender = useRef(false);
+  const emitShowToast = useSubscriberFor(SHOW_TOAST_EVENT);
 
-  const dismiss = useCallback(() => {
-    setHidden(true);
+  const { message, extraMessage, style } = useOfflineHandlerProps(online);
 
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
-  }, []);
+  const showOnlineToast = useCallback(() => {
+    logger.log("Device is back online, emit toast");
 
-  const setTimer = useCallback((cb, duration) => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOnline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
+
+  const showOfflineToast = useCallback(() => {
+    logger.log("Device went offline, emit toast");
 
-    timer.current = setTimeout(cb, duration);
-  }, []);
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOffline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
 
   useEffect(() => {
-    if (initialRender.current) {
-      const wentOffline = previousOnline && online === false;
-      const wentOnline = !previousOnline && online;
-      const renderedOffline = !online && previousOnline === null;
-
-      if (!deviceOnline || wentOffline || renderedOffline) {
-        logger.log("Device went offline");
-        setTimer(() => setHidden(true), timers.goingOffline);
-        setHidden(false);
+    // On mount there is no previous state yet: only surface the offline toast
+    // for a device that starts offline. Don't announce "back online" for a
+    // device that was online to begin with.
+    if (prevOnline === undefined) {
+      if (!online) {
+        showOfflineToast();
       }
 
-      if (wentOnline) {
-        logger.log("Device is back online");
-        setHidden(false);
-        setTimer(() => setHidden(true), timers.goingOnline);
-      }
-    } else {
-      initialRender.current = true;
+      return;
     }
 
-    return () => {
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = null;
+    // On subsequent renders, only emit a toast when the online/offline state changes.
+    if (prevOnline !== online) {
+      if (!online) {
+        showOfflineToast();
+      } else {
+        showOnlineToast();
       }
-    };
-  }, [connectionInfo]);
-
-  return (
-    <View style={styles.container}>
-      <NotificationView
-        hidden={hidden}
-        online={online}
-        previousOnline={previousOnline}
-        dismiss={dismiss}
-      >
-        {children}
-      </NotificationView>
-    </View>
-  );
+    }
+  }, [online, prevOnline, showOfflineToast, showOnlineToast]);
+
+  return children;
 };

package/Components/OfflineHandler/utils/index.ts

@@ -1,9 +1,8 @@
 import * as R from "ramda";
-
 import { NetInfoState } from "@react-native-community/netinfo";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isOnline as isOnlineUtils } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { Platform } from "react-native";
 
 type ConnectionInfo = NetInfoState & { deviceStatus: NetStatus };
@@ -51,14 +50,3 @@ export const parseConnectionInfo: typeof parseConnectionInfoForDefault =
     samsung_tv: parseConnectionInfoForSamsung,
     default: parseConnectionInfoForDefault,
   });
-
-export const useNotificationHeight = () => {
-  const insets = useSafeAreaInsets();
-
-  const navBarHeight = platformSelect({ ios: 44, android: 56 });
-
-  const statusHeight = insets.top;
-  const notificationHeight = statusHeight + navBarHeight;
-
-  return { statusHeight, notificationHeight };
-};

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -50,16 +51,16 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -283,8 +284,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +296,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +318,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +346,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.37",
+  "version": "16.0.0-rc.39",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.37",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.37",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.37",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.37",
+    "@applicaster/applicaster-types": "16.0.0-rc.39",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.39",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.39",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.39",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,112 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const NOTIF_DURATION = 4500;
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    bottom: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-export const NotificationView = (props: Props) => {
-  const { children, hidden, dismiss, previousOnline, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [open, setOpen] = React.useState<boolean | null>(null);
-
-  const timeout = React.useRef<NodeJS.Timeout>();
-  const wentOnline = !previousOnline && props.online;
-
-  const onClose = () => {
-    setOpen(false);
-    dismiss();
-  };
-
-  const closeNotification = () => {
-    clearTimeout(timeout.current as NodeJS.Timeout);
-
-    timeout.current = setTimeout(() => {
-      setOpen(false);
-    }, NOTIF_DURATION);
-  };
-
-  const openNotification = () => {
-    if (!open && !hidden) {
-      setOpen(true);
-    }
-  };
-
-  const handleNotificationChange = () => {
-    if (open !== null) {
-      openNotification();
-    }
-
-    closeNotification();
-  };
-
-  React.useEffect(() => {
-    handleNotificationChange();
-  }, [hidden, online]);
-
-  const showOnlineMsg = wentOnline || online;
-
-  const MSG = showOnlineMsg
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const EXTRA_MSG = showOnlineMsg
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {open ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{MSG}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    top: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingTop: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-let timer: NodeJS.Timeout;
-
-export const NotificationView = (props: Props) => {
-  const { children, dismiss, previousOnline = true, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [shown, setShown] = React.useState<boolean>(false);
-
-  const onClose = () => {
-    setShown(false);
-    dismiss();
-  };
-
-  React.useEffect(() => {
-    if (previousOnline && online) {
-      return;
-    }
-
-    if (!previousOnline && !online) {
-      return;
-    }
-
-    if (previousOnline && !online) {
-      // went to offline
-      clearTimeout(timer);
-      setShown(true);
-    }
-
-    if (!previousOnline && online) {
-      // back to online
-      setShown(true);
-
-      timer = setTimeout(() => {
-        setShown(false);
-      }, DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE);
-    }
-  }, [online, previousOnline]);
-
-  const title = online
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const subtitle = online
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {shown ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{title}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{subtitle}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/Components/OfflineHandler/NotificationView/NotificationView.tsx

@@ -1,153 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import * as R from "ramda";
-import {
-  View,
-  Text,
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-} from "react-native";
-
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useNotificationHeight } from "../utils";
-
-export const onlinePhrase = "You are back online";
-
-export const offlinePhrase = "No internet connection";
-
-const styles = StyleSheet.create({
-  notificationView: {
-    flex: 1,
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  dismiss: () => void;
-};
-
-type NumberBoolean = 0 | 1;
-
-const OFFLINE_EXPERIENCE = "offline-experience";
-
-export const NotificationView = ({
-  children,
-  hidden = true,
-  online = true,
-  dismiss,
-}: Props) => {
-  const plugins = usePlugins();
-  const { statusHeight, notificationHeight } = useNotificationHeight();
-
-  const offlinePlugin = R.find(
-    R.propEq("identifier", OFFLINE_EXPERIENCE),
-    plugins
-  );
-
-  const { useOfflineExperienceConfiguration } = offlinePlugin.module;
-
-  const {
-    configurationFields,
-    localizations,
-  }: {
-    configurationFields: OfflineExperiencePluginConfiguration;
-    localizations: OfflineExperienceLocalizations;
-  } = useOfflineExperienceConfiguration?.();
-
-  const [notificationOpacity, setNotificationOpacity] =
-    useState<NumberBoolean>(0);
-
-  const yPosition = useRef(new Animated.Value(0)).current;
-
-  const showNotification = () => {
-    setNotificationOpacity(1);
-
-    Animated.timing(yPosition, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration: 300,
-    }).start();
-  };
-
-  const hideNotification = () => {
-    Animated.timing(yPosition, {
-      toValue: 0,
-      useNativeDriver: true,
-      duration: 300,
-    }).start(() => {
-      setNotificationOpacity(0);
-    });
-  };
-
-  useEffect(() => {
-    hidden ? hideNotification() : showNotification();
-  }, [hidden]);
-
-  const backgroundColor = online
-    ? configurationFields.offline_toast_online_background_color
-    : configurationFields.offline_toast_offline_background_color;
-
-  const animatedViewStyles = {
-    ...styles.notificationView,
-    transform: [
-      {
-        translateY: yPosition.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-notificationHeight, 0],
-        }),
-      },
-    ],
-    opacity: notificationOpacity,
-    height: notificationHeight,
-    width: "100%",
-    backgroundColor,
-  };
-
-  const textStyles = {
-    color: online
-      ? configurationFields.offline_toast_message_online_font_color
-      : configurationFields.offline_toast_message_font_color,
-    fontFamily: platformSelect({
-      ios: configurationFields.offline_toast_message_ios_font_family,
-      android: configurationFields.offline_toast_message_android_font_family,
-    }),
-    fontSize: configurationFields.offline_toast_message_font_size,
-    lineHeight: configurationFields.offline_toast_message_line_height,
-    letterSpacing: platformSelect({
-      ios: configurationFields.offline_toast_message_letter_spacing_ios,
-      android: configurationFields.offline_toast_message_letter_spacing_android,
-    }),
-  };
-
-  const message = textTransform(
-    configurationFields.offline_toast_message_text_transform,
-    online
-      ? localizations.online_toast_message
-      : localizations.offline_toast_message
-  );
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      {children}
-      <TouchableWithoutFeedback
-        style={styles.notificationView}
-        onPress={dismiss}
-      >
-        <Animated.View style={animatedViewStyles}>
-          <View style={{ height: statusHeight, backgroundColor }} />
-          <Text style={textStyles}>{message}</Text>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    </View>
-  );
-};

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { Text, Animated } from "react-native";
-import { render } from "@testing-library/react-native";
-
-import {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} from "../NotificationView";
-
-jest.mock("@applicaster/zapp-react-native-redux", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
-  usePlugins: () => [
-    {
-      name: "offline experience",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        useOfflineExperienceConfiguration: () => ({
-          configurationFields: {},
-          localizations: {
-            offline_toast_message: "No internet connection",
-            online_toast_message: "You are back online",
-          },
-        }),
-      },
-    },
-  ],
-}));
-
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 44 }),
-}));
-
-const dismiss = jest.fn();
-
-describe("NotificationView", () => {
-  it("Show online message when Online", () => {
-    const component = render(<NotificationView online dismiss={dismiss} />);
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
-  });
-
-  it("Show offline message when Online", () => {
-    const component = render(
-      <NotificationView online={false} dismiss={dismiss} />
-    );
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
-  });
-
-  it("When hidden is false to true notification is visible", () => {
-    const component = render(
-      <NotificationView online={false} hidden={false} dismiss={dismiss} />
-    );
-
-    component.rerender(
-      <NotificationView online={false} hidden={true} dismiss={dismiss} />
-    );
-
-    const animatedView = component.UNSAFE_getByType(Animated.View);
-    const animatedViewStyles = animatedView.props.style;
-
-    expect(animatedViewStyles.opacity).toBe(1);
-  });
-});

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-
-export const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
-
-export const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
-
-export function useNetworkStatusLocalizations() {
-  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
-    string,
-    string
-  > | null>(null);
-
-  React.useEffect(() => {
-    async function loadStoredLocalizations() {
-      try {
-        const stored = await sessionStorage.getItem(
-          NETWORK_STATUS_LOCALIZATIONS_KEY,
-          THEME_STORAGE_NAMESPACE
-        );
-
-        if (stored) {
-          setStoredLocalizations(stored);
-        }
-      } catch (error) {
-        console.error("Error loading network status localizations", error);
-      }
-    }
-
-    loadStoredLocalizations();
-  }, []);
-
-  return storedLocalizations;
-}