@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1693300296 → 15.0.0-alpha.1844658165

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -3,17 +3,27 @@ import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-compone
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
 import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { View } from "react-native";
 
 type Props = {
   enable_video_preview: boolean;
   player_screen_id: string;
+  asset?: string | React.ReactNode;
 };
 
 export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
+  let Component;
 
-  const Component =
-    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
+  // Workaround to render an asset as component...
+  if (props.asset) {
+    Component = View;
+
+    return <Component {...props}>{props.asset}</Component>;
+  } else {
+    Component =
+      isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
+  }
 
   return <Component {...props} />;
 };

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -10,11 +10,14 @@ import {
   resolveLabelText,
 } from "./mobile/MobileActionButtons/helpers";
 
+import { createUUID } from "@applicaster/zapp-react-native-utils/stringUtils";
+
 type ChildElementProps = {
   children?: React.ReactNode;
   mobileActionRole?: string;
-  state?: string;
-  [key: string]: unknown;
+  uri?: string;
+  asset?: React.ReactNode;
+  state?: "default" | "focused";
 };
 
 type Props = {
@@ -22,6 +25,9 @@ type Props = {
   item: ZappEntry | ZappFeed;
   action?: {
     identifier?: string;
+    flavour?: "flavour_1" | "flavour_2";
+    width?: number;
+    height?: number;
   };
   style?: Record<string, unknown>;
   focusedStyles?: Record<string, unknown>;
@@ -35,6 +41,74 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
+/** retrieves asset uri for a given flavour,
+ * if flavour is not provided, returns the default asset from `asset` or selected state asset (if available)
+ * asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array.
+ * mobileButtonAssets asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array,
+ *  provided as [[] as flavour_1, [] as flavour_2] array for multiple flavours, where each flavour can be either a path or [default, alternative] array,
+ *  provided as a React component accepting flavour as prop.
+ *
+ * isActive reflect the state of the action and can be used to render different asset for active/inactive state if asset is provided as array
+ *
+ * */
+const selectByAssetFlavour = (
+  actionState: {
+    asset?: string | [string, string] | CellActionAssetComponent;
+    mobileButtonAssets?:
+      | [string, string]
+      | [string, string][]
+      | CellActionAssetComponent;
+  },
+  flavour?: "flavour_1" | "flavour_2",
+  isActive?: boolean
+): string | CellActionAssetComponent => {
+  if (actionState.mobileButtonAssets) {
+    if (typeof actionState.mobileButtonAssets === "function") {
+      return actionState.mobileButtonAssets;
+    }
+
+    if (flavour) {
+      if (flavour === "flavour_1") {
+        if (typeof actionState.mobileButtonAssets[0] === "string") {
+          return actionState.mobileButtonAssets[0];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[0])) {
+          return actionState.mobileButtonAssets[0][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[0];
+      } else if (flavour === "flavour_2") {
+        if (typeof actionState.mobileButtonAssets[1] === "string") {
+          return actionState.mobileButtonAssets[1];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[1])) {
+          return actionState.mobileButtonAssets[1][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[1];
+      }
+    }
+
+    return Array.isArray(actionState.mobileButtonAssets[0])
+      ? actionState.mobileButtonAssets[0][isActive ? 1 : 0]
+      : actionState.mobileButtonAssets[0];
+  } else {
+    if (typeof actionState?.asset === "function") {
+      return actionState.asset;
+    }
+
+    return typeof actionState?.asset === "string"
+      ? actionState.asset
+      : actionState.asset[isActive ? 1 : 0];
+  }
+};
+
 export function PressableView({
   children,
   item,
@@ -92,15 +166,13 @@ export function PressableView({
 
   const isActive = resolveIsActive(actionState, legacySelected);
 
-  const labelText = supportsEntryState
-    ? resolveLabelText(actionState?.label)
-    : "";
-
   const shouldRenderAsset = Boolean(
-    supportsEntryState ? actionState?.asset : false
+    supportsEntryState ? actionState?.mobileButtonAssets : false
   );
 
-  const shouldRenderLabel = Boolean(labelText);
+  const shouldRenderLabel = Boolean(
+    supportsEntryState && resolveLabelText(actionState?.label)
+  );
 
   const cloneChildrenWithState = (nodes?: React.ReactNode): React.ReactNode => {
     return React.Children.map(nodes, (child) => {
@@ -129,7 +201,29 @@ export function PressableView({
       const nextProps: Partial<ChildElementProps> = {};
 
       if (role === "asset") {
-        nextProps.state = isActive ? "active" : "inactive";
+        if (action.flavour) {
+          const resolvedAsset = selectByAssetFlavour(
+            actionState,
+            action.flavour,
+            isActive
+          );
+
+          if (typeof resolvedAsset === "function") {
+            const AssetComponent = resolvedAsset as CellActionAssetComponent;
+
+            // WIP: might require more changes
+            nextProps.asset = (
+              <AssetComponent
+                flavour={action.flavour}
+                width={action.width}
+                height={action.height}
+                cellUUID={createUUID()}
+              />
+            );
+          } else {
+            nextProps.uri = resolvedAsset;
+          }
+        }
       }
 
       if (role === "label") {

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -53,6 +53,15 @@ export const useTextLabel = ({ label, entry }): string => {
     });
   }, []);
 
+  React.useEffect(() => {
+    // This are properly updating when state changes (see offline-content-button action)
+    if (typeof action?.addListener === "function") {
+      return action.addListener(String(entry?.id), (nextState) => {
+        setEntryStateLocal(nextState);
+      });
+    }
+  }, []);
+
   if (context && name && action) {
     return prepareHebrewText(extractLabel(entryStateLocal.label, name), isRTL);
   }

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -3,11 +3,11 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 type Props = {
   prefix: string;
   value: Function;
-  actionIdentifier: string;
   testID?: string;
 };
 
-export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
+/** Asset used in conjunction with PressableView inside mobile action buttons, uri is provided by PressableView  */
+export const Asset = ({ prefix, value, testID }: Props) => {
   if (!value(`${prefix}_asset_enabled`)) {
     return null;
   }
@@ -35,10 +35,6 @@ export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
       },
     ],
     additionalProps: {
-      source: {
-        context: actionIdentifier,
-      },
-      state: "inactive",
       mobileActionRole: "asset",
       testID: testID ? `${testID}-asset` : undefined,
     },

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -46,9 +46,17 @@ export const Button = ({
     return null;
   }
 
+  if (
+    !value(`${stylePrefix}_asset_enabled`) &&
+    !value(`${stylePrefix}_label_enabled`)
+  ) {
+    return null;
+  }
+
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = value(`${specificPrefix}_assign_action`);
   const assetAlignment = value(`${stylePrefix}_asset_alignment`) || "left";
+  const actionAssetFlavour = value(`${stylePrefix}_action_asset_flavour`);
 
   const contentsAlignment =
     value(`${stylePrefix}_contents_alignment`) || "center";
@@ -57,8 +65,9 @@ export const Button = ({
     type: "PressableView",
     style: {
       flexDirection: getContentDirection(assetAlignment),
-      alignItems: "center",
-      justifyContent: getContentsAlignment(contentsAlignment),
+      alignContent: "center",
+      alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
+      justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
 
       marginTop: toNumberWithDefaultZero(value(`${stylePrefix}_margin_top`)),
       marginRight: toNumberWithDefaultZero(
@@ -93,6 +102,9 @@ export const Button = ({
     additionalProps: {
       action: {
         identifier: actionIdentifier,
+        flavour: actionAssetFlavour,
+        width: toNumberWithDefault(24, value(`${stylePrefix}_asset_width`)),
+        height: toNumberWithDefault(24, value(`${stylePrefix}_asset_height`)),
       },
       focusedStyles: {
         backgroundColor: value(`${stylePrefix}_focused_background_color`),
@@ -104,7 +116,6 @@ export const Button = ({
       Asset({
         prefix: stylePrefix,
         value,
-        actionIdentifier,
         testID,
       }),
       Spacer(),

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -57,6 +58,10 @@ const buildActionContext = (entryState = {}) => ({
       inactive: "https://example.com/image-inactive.png",
       active: "https://example.com/image-active.png",
     },
+    mobileButtonAssets: [
+      "https://example.com/image-inactive.png",
+      "https://example.com/image-active.png",
+    ],
     label: {
       label_1: "Play",
     },
@@ -188,4 +193,103 @@ describe("PressableView", () => {
       })
     );
   });
+
+  describe("component asset via mobileButtonAssets", () => {
+    const nodeWithFlavour1 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_1" as const,
+        },
+      },
+    };
+
+    const nodeWithFlavour2 = {
+      ...baseNode,
+      props: {
+        ...baseNode.props,
+        action: {
+          identifier: "navigation_action",
+          flavour: "flavour_2" as const,
+        },
+      },
+    };
+
+    it("renders mobileButtonAssets component instead of Image when it is a function", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} accessibilityLabel="mock-asset" />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      const { getByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(MockAssetComponent).toHaveBeenCalled();
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+
+    it("passes flavour_1 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode(nodeWithFlavour1);
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_1" }),
+        expect.anything()
+      );
+    });
+
+    it("passes flavour_2 to the mobileButtonAssets component", () => {
+      const MockAssetComponent = jest.fn(({ testID }) => (
+        <View testID={testID} />
+      ));
+
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: MockAssetComponent })
+      );
+
+      renderNode(nodeWithFlavour2);
+
+      expect(MockAssetComponent).toHaveBeenCalledWith(
+        expect.objectContaining({ flavour: "flavour_2" }),
+        expect.anything()
+      );
+    });
+
+    it("does not render asset when mobileButtonAssets is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({ mobileButtonAssets: undefined })
+      );
+
+      const { queryByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(queryByTestId("mobile-action-button-asset")).toBeNull();
+    });
+
+    it("renders asset when mobileButtonAssets exists even if asset is absent", () => {
+      mockUseActions.mockReturnValue(
+        buildActionContext({
+          asset: undefined,
+          mobileButtonAssets: [
+            "https://example.com/image-inactive.png",
+            "https://example.com/image-active.png",
+          ],
+        })
+      );
+
+      const { getByTestId } = renderNode(nodeWithFlavour1);
+
+      expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
+    });
+  });
 });

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/helpers.ts

@@ -40,12 +40,12 @@ export function getContentDirection(alignment = "left") {
   }
 }
 
-export function getContentsAlignment(alignment = "center") {
+export function getContentsAlignment(alignment = "center", direction = "left") {
   switch (alignment) {
     case "left":
-      return "flex-start";
+      return direction === "left" ? "flex-start" : "flex-end";
     case "right":
-      return "flex-end";
+      return direction === "left" ? "flex-end" : "flex-start";
     case "center":
     default:
       return "center";
@@ -75,7 +75,10 @@ export function resolveIsActive(actionState, fallbackSelected = false) {
 }
 
 export function buildLegacySelection(item, actionContext) {
-  const defaultIsSelected = (actionContext?.state || []).includes(item);
+  // Some state are not array. In this case we fallback to the default value provided by the action or false
+  const defaultIsSelected = Array.isArray(actionContext?.state)
+    ? (actionContext?.state || []).includes(item)
+    : false;
 
   return actionContext?.masterCell?.isSelected
     ? actionContext?.masterCell?.isSelected(item)

package/Components/MasterCell/MappingFunctions/index.js

@@ -1,7 +1,7 @@
-import * as R from "ramda";
 import { isDateValid } from "./Utils";
 import { masterCellLogger } from "../logger";
 import { imageSrcFromMediaItem as imageSrcFromMediaItemConfigUtils } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { pathOr, identity } from "@applicaster/zapp-react-native-utils/utils";
 
 export const imageSrcFromMediaItem = (...args) => {
   __DEV__ &&
@@ -34,11 +34,12 @@ export function stringifyDateFromPath(obj, path) {
  * @returns {any}       Found object or empty string
  */
 export function pathWithFallback(obj, path) {
-  return R.pathOr("", path)(obj);
+  return pathOr("", path, obj);
 }
 
 // prettier-ignore
 const functionsNames = {
+  "identity": identity,
   "path": pathWithFallback,
   "image_src_from_media_item": imageSrcFromMediaItemConfigUtils,
   "stringify_date_from_path": stringifyDateFromPath,

package/Components/TopCutoffOverlay/hooks/__tests__/useMarginTop.test.ts

@@ -0,0 +1,130 @@
+import { renderHook } from "@testing-library/react-native";
+import { useMarginTop } from "../useMarginTop";
+
+// Mocks
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentScreenPicker: jest.fn(),
+}));
+
+// Imports after mocks
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+
+describe("useMarginTop", () => {
+  const mockTheme = {
+    screen_margin_top: 10,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useTheme as jest.Mock).mockReturnValue(mockTheme);
+  });
+
+  it("returns 0 when ScreenPicker is first component", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: [],
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns 0 for player screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "player",
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns theme value when margin is empty string", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: "",
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and general content screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "general_content",
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and supports ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: ["something"],
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns 0 when undefined and not general content and no ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "other",
+      ui_components: null,
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns value from screenData when defined", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: 25,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(25);
+  });
+});

package/Components/TopCutoffOverlay/hooks/index.ts

@@ -0,0 +1 @@
+export { useMarginTop } from "./useMarginTop";

package/Components/TopCutoffOverlay/hooks/useMarginTop.ts

@@ -0,0 +1,59 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+/**
+ * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
+ * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
+ * In practical terms, MarginTop determines a specific vertical position (given in the 'y' coordinate)
+ * on your screen above which components aren't shown.
+ * You might visualize this as a horizontal line across your screen, and any component crossing this line becomes invisible.
+ *
+ * Classic use case for this feature is making sure that component aren't displayed underneath the navigation bar.
+ */
+
+export const useMarginTop = (targetScreenId: string): number => {
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const screenData = useCurrentScreenData(targetScreenId);
+  const isGeneralContentScreen = screenData?.plugin_type === "general_content";
+  const supportsUiComponents = screenData?.ui_components;
+
+  /**
+   * ScreenPicker is a component but should really be a screen.
+   * We need to skip margin top for it as it's already applied to the target screen
+   **/
+
+  // ignore margin on screenPicker
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
+    return 0;
+  }
+
+  const isPlayer = screenData?.plugin_type === "player";
+
+  // ignore margin on inlinePlayer (remove if better way of identifying cases for plugins that don't have marginTop)
+  if (isPlayer) {
+    return 0;
+  }
+
+  // Empty string means that value is blank in the CMS. Fallback to theme
+  if (String(screenData?.styles?.screen_margin_top) === "") {
+    return toNumberWithDefaultZero(theme.screen_margin_top);
+  }
+
+  /**
+   *  If value is undefined it means one of three things
+   *  1. Screen is not a general content screen and it doesn't handle ui components (return 0)
+   *  2. Screen is a general content screen but it doesn't have a margin top value (return theme value)
+   *  3. Screen isn't general content screen but it handles the ui components (return theme value)
+   */
+  if (screenData?.styles?.screen_margin_top === undefined) {
+    if (isGeneralContentScreen || supportsUiComponents) {
+      return toNumberWithDefaultZero(theme.screen_margin_top);
+    }
+
+    return 0;
+  }
+
+  return toNumberWithDefaultZero(screenData?.styles?.screen_margin_top);
+};

package/Components/TopCutoffOverlay/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+
+import { useMarginTop } from "./hooks";
+
+interface IProps {
+  targetScreenId?: string;
+  children?: React.ReactNode;
+  applyTopCutoff?: boolean;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export const TopCutoffOverlay: React.FC<IProps> = ({
+  targetScreenId,
+  children,
+  applyTopCutoff = true,
+}: IProps) => {
+  const cutoffHeight = useMarginTop(targetScreenId);
+
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(targetScreenId);
+
+  const theme = useTheme();
+  const themeBackgroundColor = theme?.app_background_color;
+
+  if (!applyTopCutoff) {
+    return children;
+  }
+
+  return (
+    <View style={styles.container}>
+      {children}
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: cutoffHeight,
+
+          backgroundColor:
+            screenBackgroundColor || themeBackgroundColor || "transparent",
+        }}
+      />
+    </View>
+  );
+};

package/package.json

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