@applicaster/zapp-react-native-utils 14.0.0-alpha.1661204539 → 14.0.0-alpha.1740013076

package/actionsExecutor/ActionExecutorContext.tsx

@@ -36,7 +36,6 @@ import {
   sessionStorageToggleFlag,
 } from "./StorageActions";
 
-import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
 import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
 
 export const { log_error, log_info, log_debug } = createLogger({
@@ -121,7 +120,6 @@ const prepareDefaultActions = (actionExecutor) => {
         loadPipesData(dataSource, {
           silentRefresh: false,
           clearCache: true,
-          callback: (_data) => {},
           riverId: context?.screenData?.id,
         })
       );
@@ -169,8 +167,7 @@ const prepareDefaultActions = (actionExecutor) => {
 
       const entry = context?.entry || {};
       const entryResolver = new EntryResolver(entry);
-      const route = context.screenRoute;
-      const screenData = ScreenSingleValueProvider.getState(route) as any;
+      const screenData = context?.screenStateStore.getState().data || {};
       const screenResolver = new EntryResolver(screenData || {});
 
       const data =
@@ -239,8 +236,14 @@ const prepareDefaultActions = (actionExecutor) => {
       context?: Record<string, any>
     ): Promise<ActionResult> => {
       const route = context?.screenRoute;
-      const { key, value } = action.options;
-      screenSetVariable(route, key, value);
+      const screenStateStore = context?.screenStateStore;
+
+      await screenSetVariable(
+        route,
+        screenStateStore,
+        { entry: context?.entry, options: action.options },
+        action
+      );
 
       return Promise.resolve(ActionResult.Success);
     }
@@ -253,9 +256,11 @@ const prepareDefaultActions = (actionExecutor) => {
       context?: Record<string, any>
     ): Promise<ActionResult> => {
       const screenRoute = context?.screenRoute;
+      const screenStateStore = context?.screenStateStore;
 
       await screenToggleFlag(
         screenRoute,
+        screenStateStore,
         { entry: context?.entry, options: action.options },
         action
       );

package/actionsExecutor/ScreenActions.ts

@@ -6,20 +6,93 @@ import { get } from "lodash";
 
 import { onMaxTagsReached } from "./StorageActions";
 import { ScreenMultiSelectProvider } from "../storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "../storage/ScreenSingleValueProvider";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
 
-export const screenSetVariable = (
-  _screenRoute: string,
-  _key: string,
-  _value: string
-) => {};
+export const screenSetVariable = async (
+  screenRoute: string,
+  screenStateStore: ReturnType<typeof useScreenStateStore>,
+  context: Record<string, any>,
+  action: ActionType
+): Promise<ActionResult> => {
+  if (!context) {
+    log_error("handleAction: screenSetVariable action missing context");
+
+    return ActionResult.Error;
+  }
+
+  const entry = context?.entry as ZappEntry;
+
+  if (!entry) {
+    log_error(
+      "handleAction: screenSetVariable action missing entry. Entry is required to get the value."
+    );
+
+    return ActionResult.Error;
+  }
+
+  const tag = action.options?.selector
+    ? get(entry, action.options.selector)
+    : (entry.extensions?.tag ?? entry.id);
+
+  const key = action.options?.key;
+
+  if (!key) {
+    log_error("handleAction: screenSetVariable action missing argument 'key'", {
+      key,
+    });
+
+    return ActionResult.Error;
+  }
+
+  if (!tag) {
+    log_error(
+      "handleAction: screenSetVariable action could not determine tag",
+      { selector: action.options?.selector, value: action.options?.value }
+    );
+
+    return ActionResult.Error;
+  }
+
+  try {
+    const singleValueProvider = ScreenSingleValueProvider.getProvider(
+      key,
+      screenRoute,
+      screenStateStore
+    );
+
+    const currentValue = await singleValueProvider.getValueAsync();
+
+    log_info(
+      `handleAction: screenSetVariable setting value: ${tag} for key: ${key}, previous value: ${currentValue}`
+    );
+
+    await singleValueProvider.setValue(String(tag));
+
+    log_info(
+      `handleAction: screenSetVariable successfully set value: ${tag} for key: ${key}`
+    );
+
+    return ActionResult.Success;
+  } catch (error) {
+    log_error("handleAction: screenSetVariable failed to set value", {
+      key,
+      tag,
+      error,
+    });
+
+    return ActionResult.Error;
+  }
+};
 
 export const screenToggleFlag = async (
   screenRoute: string,
+  screenStateStore: ReturnType<typeof useScreenStateStore>,
   context: Record<string, any>,
   action: ActionType
 ) => {
   if (!context) {
-    log_error("handleAction: localStorageToggleFlag action missing context");
+    log_error("handleAction: screenToggleFlag action missing context");
 
     return ActionResult.Error;
   }
@@ -28,7 +101,7 @@ export const screenToggleFlag = async (
 
   if (!entry) {
     log_error(
-      "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+      "handleAction: screenToggleFlag action missing entry. Entry is required to get the tag."
     );
 
     return ActionResult.Error;
@@ -38,12 +111,13 @@ export const screenToggleFlag = async (
     ? get(entry, action.options.selector)
     : (entry.extensions?.tag ?? entry.id);
 
-  const keyNamespace = action.options?.key;
+  const key = action.options?.key;
 
-  if (keyNamespace && tag) {
+  if (key && tag) {
     const multiSelectProvider = ScreenMultiSelectProvider.getProvider(
-      keyNamespace,
-      screenRoute
+      key,
+      screenRoute,
+      screenStateStore
     );
 
     const selectedItems = await multiSelectProvider.getSelectedAsync();
@@ -52,7 +126,7 @@ export const screenToggleFlag = async (
     log_info(
       `handleAction: screenToggleFlag event will ${
         isTagInSelectedItems ? "remove" : "add"
-      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+      } tag: ${tag} for key: ${key}, current selectedItems: ${selectedItems}`
     );
 
     if (selectedItems.includes(tag)) {
@@ -69,7 +143,7 @@ export const screenToggleFlag = async (
           selectedItems,
           maxItems,
           tag,
-          keyNamespace,
+          keyNamespace: key,
         });
 
         return ActionResult.Cancel;
@@ -78,10 +152,10 @@ export const screenToggleFlag = async (
       await multiSelectProvider.addItem(tag);
     }
   } else {
-    log_error(
-      "handleAction: screenToggleFlag event missing keyNamespace or tag",
-      { keyNamespace, tag }
-    );
+    log_error("handleAction: screenToggleFlag event missing key or tag", {
+      key,
+      tag,
+    });
 
     return ActionResult.Error;
   }

package/actionsExecutor/feedDecorator.ts

@@ -0,0 +1,171 @@
+import * as R from "ramda";
+import { getNamespaceAndKey } from "../appUtils/contextKeysManager/utils";
+import { createLogger } from "../logger";
+
+const { log_error, log_verbose } = createLogger({
+  subsystem: "FeedDecorator",
+  category: "General",
+});
+
+function getScope(scope) {
+  if (scope === "screen") {
+    return scope;
+  } else if (!scope || scope === "ctx") {
+    return "ctx";
+  } else {
+    log_verbose(
+      `decorateFeed: Unsupported scope "${scope}" provided in preference_editor_options. Defaulting to "ctx".`
+    );
+
+    return "ctx";
+  }
+}
+
+function makeMultiSelect(feed: ZappFeed, key, decoratedFeed) {
+  const scope = getScope(
+    decoratedFeed.extensions?.preference_editor_options?.scope
+  );
+
+  const behavior = {
+    ...feed.extensions?.["behavior"],
+    select_mode: "multi",
+    current_selection: `@{${scope}/${key}}`,
+  };
+
+  if (!feed.extensions) {
+    decoratedFeed.extensions = {
+      behavior,
+    };
+  } else {
+    decoratedFeed.extensions.behavior = behavior;
+  }
+
+  const actionType =
+    decoratedFeed.extensions?.preference_editor_options?.scope === "screen"
+      ? "screenToggleFlag"
+      : decoratedFeed.extensions?.preference_editor_options?.scope === "session"
+        ? "sessionStorageToggleFlag"
+        : "localStorageToggleFlag";
+
+  decoratedFeed.entry?.forEach((entry: ZappEntry) => {
+    entry.type.value = "action";
+    entry.id = entry.extensions?.tag || entry.id;
+
+    entry.extensions = {
+      ...(entry.extensions || {}),
+      tap_actions: {
+        actions: [
+          {
+            type: actionType,
+            options: {
+              key,
+            },
+          },
+        ],
+      },
+    };
+  });
+
+  return decoratedFeed;
+}
+
+function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
+  const scope = getScope(
+    decoratedFeed.extensions?.preference_editor_options?.scope
+  );
+
+  const behavior = {
+    ...feed.extensions?.["behavior"],
+    select_mode: "single",
+    current_selection: `@{${scope}/${key}}`,
+  };
+
+  if (!feed.extensions) {
+    decoratedFeed.extensions = {
+      behavior,
+    };
+  } else {
+    decoratedFeed.extensions.behavior = behavior;
+  }
+
+  const localStorageProducer = (entry: ZappFeed) => {
+    entry.id = entry.extensions?.tag || entry.id;
+    const { key: keyName, namespace } = getNamespaceAndKey(key);
+
+    const action =
+      decoratedFeed.extensions?.preference_editor_options?.scope === "session"
+        ? "sessionStorageSet"
+        : "localStorageSet";
+
+    return {
+      type: action,
+      options: {
+        content: {
+          [namespace]: {
+            [keyName]: entry.id,
+          },
+        },
+      },
+    };
+  };
+
+  const screenStateProducer = (entry: ZappFeed) => {
+    entry.id = entry.extensions?.tag || entry.id;
+
+    return {
+      type: "screenSetVariable",
+      options: {
+        key,
+        value: entry.id,
+      },
+    };
+  };
+
+  const producer =
+    decoratedFeed.extensions?.preference_editor_options?.scope === "screen"
+      ? screenStateProducer
+      : localStorageProducer;
+
+  decoratedFeed.entry?.forEach((entry: ZappEntry) => {
+    entry.type.value = "action";
+
+    entry.extensions = {
+      ...(entry.extensions || {}),
+      tap_actions: {
+        actions: [producer(entry)],
+      },
+    };
+  });
+
+  return decoratedFeed;
+}
+
+export const decorateFeed = (feed: ZappFeed) => {
+  if (!(feed.extensions?.["role"] === "preference_editor")) {
+    return feed;
+  }
+
+  const key = feed.extensions?.["preference_editor_options"]?.["key"];
+
+  if (!key) {
+    log_error(
+      `decorateFeed: No 'key' provided in feed titled "${feed.title}" with id "${feed.id}" in preference_editor_options. The preference_editor role requires a key for local storage.`
+    );
+
+    throw new Error(
+      "decorateFeed: No 'key' provided in feed preference_editor_options"
+    );
+  }
+
+  const decoratedFeed = R.clone(feed);
+
+  const isSingleSelect =
+    (feed.extensions?.["preference_editor_options"]?.select_mode ||
+      feed.extensions?.["behavior"]?.select_mode) === "single";
+
+  if (isSingleSelect) {
+    return makeSingleSelect(feed, key, decoratedFeed);
+  } else {
+    return makeMultiSelect(feed, key, decoratedFeed);
+  }
+};

package/actionsExecutor/screenResolver.ts

@@ -1,8 +1,11 @@
 import { useMemo } from "react";
 import { ScreenStateResolver } from "../appUtils/contextKeysManager/contextResolver";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
+
+export const useScreenResolvers = () => {
+  const screenStateStore = useScreenStateStore();
 
-export const useScreenResolvers = (screenRoute: string) => {
   return useMemo(() => {
-    return { screen: new ScreenStateResolver(screenRoute) };
-  }, [screenRoute]);
+    return { screen: new ScreenStateResolver(screenStateStore) };
+  }, [screenStateStore]);
 };

package/analyticsUtils/AnalyticsEvents/helper.ts

@@ -4,9 +4,12 @@ import {
   ANALYTICS_COMPONENT_EVENTS,
   ANALYTICS_CORE_EVENTS,
   ANALYTICS_ENTRY_EVENTS,
+  ANALYTICS_PREFERENCES_EVENTS,
   DOWNLOADS_EVENTS,
 } from "../events";
 import { isEmptyOrNil } from "../../cellUtils";
+import { get } from "lodash";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 
 export enum OfflineItemState {
   notExist = "NOT_EXISTS",
@@ -102,6 +105,84 @@ export function eventForComponent(
   return analyticsProps;
 }
 
+/**
+ * Checks if an item is currently selected in localStorage based on its actions
+ * @param item - The item to check
+ * @returns boolean indicating if the item is currently selected
+ */
+function isItemPreviouslySelected(item: any): boolean {
+  const actions = item?.extensions?.tap_actions?.actions;
+
+  if (!actions) {
+    return false;
+  }
+
+  const localStorageAction = actions.find(
+    (action) => action?.type === "localStorageToggleFlag"
+  );
+
+  if (!localStorageAction?.options?.key) {
+    return false;
+  }
+
+  const keyNamespace = localStorageAction.options.key;
+
+  const tag = localStorageAction.options?.selector
+    ? get(item, localStorageAction.options.selector)
+    : (item.extensions?.tag ?? item.id);
+
+  if (!tag) {
+    return false;
+  }
+
+  try {
+    const multiSelectProvider =
+      StorageMultiSelectProvider.getProvider(keyNamespace);
+
+    const selectedItems = multiSelectProvider.getSelectedItems();
+
+    return selectedItems.includes(tag);
+  } catch (error) {
+    return false;
+  }
+}
+
+export function getLocalStorageSetPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageSetAction = item?.extensions?.tap_actions?.actions?.some(
+    (action) => action?.type === "localStorageSet"
+  );
+
+  if (!hasLocalStorageSetAction) {
+    return null;
+  }
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: true,
+  };
+}
+
+export function getLocalStorageToggleFlagPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageToggleAction =
+    item?.extensions?.tap_actions?.actions?.some(
+      (action) => action?.type === "localStorageToggleFlag"
+    );
+
+  if (!hasLocalStorageToggleAction) {
+    return null;
+  }
+
+  const previouslySelected = isItemPreviouslySelected(item);
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: !previouslySelected,
+    [ANALYTICS_PREFERENCES_EVENTS.PREVIOUS_SELECTED_STATE]: previouslySelected,
+  };
+}
+
 export function playEventForType(item) {
   const itemType = item?.type && item.type?.value;
 

package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts

@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type SendHeaderClickEventProps = {
-  extraProps: ExtraProps;
+  extraProps: Record<string, any>;
   component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
   item?: ZappEntry;

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -1,10 +1,11 @@
+/// <reference types="../../" />
 import { log_error, log_debug } from "../logger";
 import { replaceAnalyticsPropsNils } from "./helper";
 import { postAnalyticEvent } from "../manager";
 
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
-declare type AnalyticsDefaultHelperProperties = {
+type AnalyticsDefaultHelperProperties = {
   analyticsScreenData: AnalyticsScreenProperties;
   extraProps: any;
   props;

package/analyticsUtils/AnalyticsEvents/sendOnClickEvent.ts

@@ -1,13 +1,13 @@
 import { log_error, log_debug } from "../logger";
-
-import { ANALYTICS_CORE_EVENTS } from "../events";
-
+import { ANALYTICS_CORE_EVENTS, ACTION_TYPE } from "../events";
 import { postAnalyticEvent } from "../manager";
 import {
   replaceAnalyticsPropsNils,
   eventForEntry,
   eventForComponent,
   extensionsEvents,
+  getLocalStorageSetPayload,
+  getLocalStorageToggleFlagPayload,
 } from "./helper";
 
 declare type AnalyticsDefaultHelperProperties = {
@@ -26,7 +26,16 @@ export const sendOnClickEvent = ({
   const castedExtraProps: ExtraProps = extraProps;
   const componentData = component || extraProps.component;
   const data = zappPipesData || extraProps.zappPipesData;
-  const eventName = ANALYTICS_CORE_EVENTS.TAP_CELL;
+
+  const actionCellPayload =
+    extraProps?.item?.type?.value === ACTION_TYPE
+      ? getLocalStorageSetPayload(extraProps) ||
+        getLocalStorageToggleFlagPayload(extraProps)
+      : null;
+
+  const eventName = actionCellPayload
+    ? ANALYTICS_CORE_EVENTS.TAP_SELECTABLE_CELL
+    : ANALYTICS_CORE_EVENTS.TAP_CELL;
 
   if (!analyticsScreenData) {
     log_error(
@@ -44,6 +53,7 @@ export const sendOnClickEvent = ({
     ...replaceAnalyticsPropsNils({
       ...analyticsScreenData,
     }),
+    ...actionCellPayload,
   };
 
   if (analyticsCustomProperties) {

package/analyticsUtils/__tests__/analyticsUtils.test.js

@@ -3,6 +3,9 @@ import { ANALYTICS_CORE_EVENTS } from "../events";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isWeb: jest.fn(),
+  platformSelect: jest.fn(
+    (options) => options.android || options.ios || options.web
+  ),
 }));
 
 const mock_postAnalyticEvent = jest.fn();

package/analyticsUtils/events.ts

@@ -17,8 +17,11 @@ export const SCREEN_VIEW_EVENTS = {
   TIME_ON_SCREEN: "time_on_screen",
 };
 
+export const ACTION_TYPE = "action";
+
 export const TAPPING_EVENTS = {
   TAP_CELL: "tap_cell",
+  TAP_SELECTABLE_CELL: "tap_selectable_cell",
   TAP_MENU: "tap_menu",
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
@@ -99,6 +102,11 @@ export const ANALYTICS_COMPONENT_EVENTS = {
   COMPONENT_SOURCE: "component_source",
 };
 
+export const ANALYTICS_PREFERENCES_EVENTS = {
+  ITEM_SELECTED_STATUS: "item_selected_status",
+  PREVIOUS_SELECTED_STATE: "previous_selected_state",
+};
+
 // ---------------- EVENTS ---------------------
 export const AD_EVENT = {
   ad_break_start: "player_ad_break_start",

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/analyticsUtils/playerAnalyticsTracker.ts

@@ -105,7 +105,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
       return this.getDateTimestamp();
     }
 
-    this.mediaTime = this.playerState?.currentTime || eventData?.currentTime;
+    this.mediaTime =
+      this.playerState?.contentPosition || eventData?.currentTime;
 
     return this.mediaTime;
   }

package/appUtils/HooksManager/Hook.ts

@@ -65,10 +65,6 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
-    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
-      return;
-    }
-
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }
@@ -198,4 +194,8 @@ export class Hook implements HookInterface {
       R.eqProps("weight", nextHook, this)
     );
   }
+
+  isCancelled(): boolean {
+    return this.state === hookState(HOOKS_EVENTS.CANCEL);
+  }
 }

package/appUtils/HooksManager/index.ts

@@ -255,7 +255,7 @@ export function HooksManager({
    * @param {Array<Hook>} restOfHooks to run
    * @returns {function} callback function
    */
-  function hookCallback(hookPlugin, restOfHooks, initialPayload) {
+  function hookCallback(hookPlugin: Hook, restOfHooks: Hook[], initialPayload) {
     /**
      * callback invoked after a hook is executed
      * @param {object} options
@@ -273,6 +273,16 @@ export function HooksManager({
     }) {
       let callback = callbackArg;
 
+      if (hookPlugin.isCancelled()) {
+        logHookEvent(
+          hooksManagerLogger.info,
+          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          {}
+        );
+
+        return;
+      }
+
       if (error) {
         logHookEvent(
           hooksManagerLogger.error,