@applicaster/zapp-react-native-ui-components 15.0.0-rc.92 → 15.0.0-rc.94

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,9 +1,15 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   it("returns the first valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -15,10 +21,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns the second valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -31,19 +46,37 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns undefined when there are no assign_action keys", () => {
+    expect.assertions(2);
+
     const configuration = {};
     const index = 0;
 
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("skips undefined values and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
       tv_buttons_button_2_assign_action: undefined,
@@ -53,10 +86,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("handles missing intermediate keys and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
       tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
@@ -65,10 +107,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("skips empty string values and returns the first non-empty assign_action", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "",
       tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
@@ -77,10 +128,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns undefined for negative index", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_button_2_assign_action: "b",
@@ -89,10 +149,19 @@ describe("getPluginIdentifier", () => {
     const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("returns undefined for out-of-bounds index", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_button_2_assign_action: "b",
@@ -101,10 +170,19 @@ describe("getPluginIdentifier", () => {
     const index = 5;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("ignores keys with wrong prefix or format", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_wrongprefix_2_assign_action: "b",
@@ -114,10 +192,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("returns undefined if all assign_actions are null or empty", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: null,
       tv_buttons_button_2_assign_action: undefined,
@@ -127,10 +214,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("handles non-string values correctly", () => {
+    expect.assertions(6);
+
     const configuration = {
       tv_buttons_button_1_assign_action: 123,
       tv_buttons_button_2_assign_action: true,
@@ -143,10 +239,21 @@ describe("getPluginIdentifier", () => {
     expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
       nested: "value",
     });
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
   });
 });
 
 describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -155,16 +262,34 @@ describe("getPluginIdentifier - when configuration has duplicate values", () =>
   };
 
   it("returns the first plugin identifier when values are identical", () => {
+    expect.assertions(2);
+
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns the second plugin identifier when values are identical", () => {
+    expect.assertions(2);
+
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -40,9 +40,7 @@ export const getPluginIdentifier = (
   return undefined;
 };
 
-export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier, {
-  primitive: true,
-});
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 type Label = {
   name: string;

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

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -10,13 +12,6 @@ type Props = {
 
 const NOTIF_DURATION = 4500;
 
-export const ONLINE_MSG = "You are back online";
-
-export const OFFLINE_MSG = "No internet connection";
-
-const EXTRA_OFFLINE_MSG = "Please check your connection";
-const EXTRA_ONLINE_MSG = "Feel free to continue where you left off";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +42,9 @@ const styles: Record<any, React.CSSProperties> = {
 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>();
@@ -84,8 +82,18 @@ export const NotificationView = (props: Props) => {
   }, [hidden, online]);
 
   const showOnlineMsg = wentOnline || online;
-  const MSG = showOnlineMsg ? ONLINE_MSG : OFFLINE_MSG;
-  const EXTRA_MSG = showOnlineMsg ? EXTRA_ONLINE_MSG : EXTRA_OFFLINE_MSG;
+
+  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}>

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

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -9,12 +11,6 @@ type Props = {
 
 const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
 
-const ONLINE_TITLE = "You are back online";
-const ONLINE_SUBTITLE = "Feel free to continue where you left off";
-
-const OFFLINE_TITLE = "No internet connection";
-const OFFLINE_SUBTITLE = "Please check your connection";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +43,9 @@ 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 = () => {
@@ -79,8 +78,17 @@ export const NotificationView = (props: Props) => {
     }
   }, [online, previousOnline]);
 
-  const title = online ? ONLINE_TITLE : OFFLINE_TITLE;
-  const subtitle = online ? ONLINE_SUBTITLE : OFFLINE_SUBTITLE;
+  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}>

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -0,0 +1,34 @@
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.92",
+  "version": "15.0.0-rc.94",
   "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": "15.0.0-rc.92",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.92",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.92",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.92",
+    "@applicaster/applicaster-types": "15.0.0-rc.94",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.94",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.94",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.94",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",