@applicaster/zapp-react-native-utils 13.0.0-alpha.2510266138 → 13.0.0-alpha.2535725541

package/actionsExecutor/ActionExecutorContext.tsx

@@ -26,6 +26,8 @@ import {
   useContentTypes,
   usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
+import { postEvent } from "../reactHooks/useSubscriberFor";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -74,6 +76,19 @@ function findParentComponent(
   return null;
 }
 
+// send all data just in case (like for message string formatting)
+// Type is not exported for now
+type MaxTagsReachedEvent = {
+  selectedItems: string[];
+  maxItems: number;
+  tag: string;
+  keyNamespace: string;
+};
+
+async function onMaxTagsReached(data: MaxTagsReachedEvent) {
+  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -234,6 +249,23 @@ const prepareDefaultActions = (actionExecutor) => {
         if (selectedItems.includes(tag)) {
           await multiSelectProvider.removeItem(tag);
         } else {
+          const maxItems = action.options?.max_items;
+
+          if (maxItems && selectedItems.length >= maxItems) {
+            log_info(
+              `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+            );
+
+            await onMaxTagsReached({
+              selectedItems,
+              maxItems,
+              tag,
+              keyNamespace,
+            });
+
+            return ActionResult.Cancel;
+          }
+
           await multiSelectProvider.addItem(tag);
         }
       } else {

package/actionsExecutor/consts.ts

@@ -0,0 +1,4 @@
+export const TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT =
+  "action.localStorageToggleFlag.maxItemsReached";
+
+export const ACTION_EXECUTOR_EVENT_SOURCE = "ActionExecutor";

package/appUtils/__tests__/__snapshots__/localizationsHelper.test.ts.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toDayJSLocaleMap [af] returns a valid dayjs locale 1`] = `"af"`;
+
+exports[`toDayJSLocaleMap [ar] returns a valid dayjs locale 1`] = `"ar"`;
+
+exports[`toDayJSLocaleMap [bg] returns a valid dayjs locale 1`] = `"bg"`;
+
+exports[`toDayJSLocaleMap [bn] returns a valid dayjs locale 1`] = `"bn"`;
+
+exports[`toDayJSLocaleMap [bo] returns a valid dayjs locale 1`] = `"bo"`;
+
+exports[`toDayJSLocaleMap [ca] returns a valid dayjs locale 1`] = `"ca"`;
+
+exports[`toDayJSLocaleMap [cs] returns a valid dayjs locale 1`] = `"cs"`;
+
+exports[`toDayJSLocaleMap [da] returns a valid dayjs locale 1`] = `"da"`;
+
+exports[`toDayJSLocaleMap [de] returns a valid dayjs locale 1`] = `"de"`;
+
+exports[`toDayJSLocaleMap [el] returns a valid dayjs locale 1`] = `"el"`;
+
+exports[`toDayJSLocaleMap [en] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [en-GB] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [en-UK] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [es] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-LA] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-MX] returns a valid dayjs locale 1`] = `"es-mx"`;
+
+exports[`toDayJSLocaleMap [es-US] returns a valid dayjs locale 1`] = `"es-us"`;
+
+exports[`toDayJSLocaleMap [et] returns a valid dayjs locale 1`] = `"et"`;
+
+exports[`toDayJSLocaleMap [eu] returns a valid dayjs locale 1`] = `"eu"`;
+
+exports[`toDayJSLocaleMap [fa] returns a valid dayjs locale 1`] = `"fa"`;
+
+exports[`toDayJSLocaleMap [fi] returns a valid dayjs locale 1`] = `"fi"`;
+
+exports[`toDayJSLocaleMap [fj] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [fr] returns a valid dayjs locale 1`] = `"fr"`;
+
+exports[`toDayJSLocaleMap [ga] returns a valid dayjs locale 1`] = `"ga"`;
+
+exports[`toDayJSLocaleMap [gu] returns a valid dayjs locale 1`] = `"gu"`;
+
+exports[`toDayJSLocaleMap [he] returns a valid dayjs locale 1`] = `"he"`;
+
+exports[`toDayJSLocaleMap [hi] returns a valid dayjs locale 1`] = `"hi"`;
+
+exports[`toDayJSLocaleMap [hr] returns a valid dayjs locale 1`] = `"hr"`;
+
+exports[`toDayJSLocaleMap [hu] returns a valid dayjs locale 1`] = `"hu"`;
+
+exports[`toDayJSLocaleMap [hy] returns a valid dayjs locale 1`] = `"hy-am"`;
+
+exports[`toDayJSLocaleMap [id] returns a valid dayjs locale 1`] = `"id"`;
+
+exports[`toDayJSLocaleMap [is] returns a valid dayjs locale 1`] = `"is"`;
+
+exports[`toDayJSLocaleMap [it] returns a valid dayjs locale 1`] = `"it"`;
+
+exports[`toDayJSLocaleMap [ja] returns a valid dayjs locale 1`] = `"ja"`;
+
+exports[`toDayJSLocaleMap [ka] returns a valid dayjs locale 1`] = `"ka"`;
+
+exports[`toDayJSLocaleMap [km] returns a valid dayjs locale 1`] = `"km"`;
+
+exports[`toDayJSLocaleMap [ko] returns a valid dayjs locale 1`] = `"ko"`;
+
+exports[`toDayJSLocaleMap [la] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [lt] returns a valid dayjs locale 1`] = `"lt"`;
+
+exports[`toDayJSLocaleMap [lv] returns a valid dayjs locale 1`] = `"lv"`;
+
+exports[`toDayJSLocaleMap [mi] returns a valid dayjs locale 1`] = `"mi"`;
+
+exports[`toDayJSLocaleMap [mk] returns a valid dayjs locale 1`] = `"mk"`;
+
+exports[`toDayJSLocaleMap [ml] returns a valid dayjs locale 1`] = `"ml"`;
+
+exports[`toDayJSLocaleMap [mn] returns a valid dayjs locale 1`] = `"mn"`;
+
+exports[`toDayJSLocaleMap [mr] returns a valid dayjs locale 1`] = `"mr"`;
+
+exports[`toDayJSLocaleMap [ms] returns a valid dayjs locale 1`] = `"ms"`;
+
+exports[`toDayJSLocaleMap [mt] returns a valid dayjs locale 1`] = `"mt"`;
+
+exports[`toDayJSLocaleMap [ne] returns a valid dayjs locale 1`] = `"ne"`;
+
+exports[`toDayJSLocaleMap [nl] returns a valid dayjs locale 1`] = `"nl"`;
+
+exports[`toDayJSLocaleMap [no] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [pa] returns a valid dayjs locale 1`] = `"pa-in"`;
+
+exports[`toDayJSLocaleMap [pl] returns a valid dayjs locale 1`] = `"pl"`;
+
+exports[`toDayJSLocaleMap [pt] returns a valid dayjs locale 1`] = `"pt"`;
+
+exports[`toDayJSLocaleMap [pt-BR] returns a valid dayjs locale 1`] = `"pt-br"`;
+
+exports[`toDayJSLocaleMap [qu] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [ro] returns a valid dayjs locale 1`] = `"ro"`;
+
+exports[`toDayJSLocaleMap [ru] returns a valid dayjs locale 1`] = `"ru"`;
+
+exports[`toDayJSLocaleMap [sk] returns a valid dayjs locale 1`] = `"sk"`;
+
+exports[`toDayJSLocaleMap [sl] returns a valid dayjs locale 1`] = `"sl"`;
+
+exports[`toDayJSLocaleMap [sm] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [sq] returns a valid dayjs locale 1`] = `"sq"`;
+
+exports[`toDayJSLocaleMap [sr] returns a valid dayjs locale 1`] = `"sr"`;
+
+exports[`toDayJSLocaleMap [sv] returns a valid dayjs locale 1`] = `"sv"`;
+
+exports[`toDayJSLocaleMap [sw] returns a valid dayjs locale 1`] = `"sw"`;
+
+exports[`toDayJSLocaleMap [ta] returns a valid dayjs locale 1`] = `"ta"`;
+
+exports[`toDayJSLocaleMap [te] returns a valid dayjs locale 1`] = `"te"`;
+
+exports[`toDayJSLocaleMap [th] returns a valid dayjs locale 1`] = `"th"`;
+
+exports[`toDayJSLocaleMap [to] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [tr] returns a valid dayjs locale 1`] = `"tr"`;
+
+exports[`toDayJSLocaleMap [tt] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [uk] returns a valid dayjs locale 1`] = `"uk"`;
+
+exports[`toDayJSLocaleMap [ur] returns a valid dayjs locale 1`] = `"ur"`;
+
+exports[`toDayJSLocaleMap [uz] returns a valid dayjs locale 1`] = `"uz"`;
+
+exports[`toDayJSLocaleMap [vi] returns a valid dayjs locale 1`] = `"vi"`;
+
+exports[`toDayJSLocaleMap [zh] returns a valid dayjs locale 1`] = `"zh"`;

package/appUtils/__tests__/allZappLocales.ts

@@ -0,0 +1,79 @@
+export default [
+  // common locales from https://rubygems.org/gems/language_list
+  "en",
+  "fr",
+  "de",
+  "nl",
+  "ru",
+  "es",
+  "he",
+  "hy",
+  "sq",
+  "af",
+  "ar",
+  "eu",
+  "bn",
+  "bg",
+  "zh",
+  "cs",
+  "km",
+  "ca",
+  "hr",
+  "da",
+  "et",
+  "fj",
+  "fi",
+  "gu",
+  "ka",
+  "hu",
+  "hi",
+  "it",
+  "is",
+  "id",
+  "ga",
+  "ja",
+  "ko",
+  "la",
+  "lv",
+  "lt",
+  "ms",
+  "mi",
+  "mn",
+  "mt",
+  "mk",
+  "el",
+  "mr",
+  "ml",
+  "ne",
+  "no",
+  "pa",
+  "pl",
+  "pt",
+  "fa",
+  "qu",
+  "ro",
+  "sk",
+  "sm",
+  "sr",
+  "sw",
+  "sv",
+  "sl",
+  "to",
+  "tr",
+  "th",
+  "te",
+  "bo",
+  "tt",
+  "ta",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  // Extra locales https://github.com/applicaster/zapp/blob/5604794f15cfd270ae494b0db85e542de4cebfaa/config/additional_languages.yml
+  "en-UK",
+  "en-GB",
+  "es-LA",
+  "pt-BR",
+  "es-MX",
+  "es-US",
+];

package/appUtils/__tests__/{localizationsHelper.test.js → localizationsHelper.test.ts}

@@ -8,6 +8,7 @@ const {
   getLocale,
   getLanguageCode,
   getCountryCode,
+  toDayJSLocaleMap,
 } = require("../localizationsHelper");
 
 describe("getLocale", () => {
@@ -69,3 +70,13 @@ describe("getCountryCode", () => {
     expect(currentValue).toEqual(expectedValue);
   });
 });
+
+describe("toDayJSLocaleMap", () => {
+  const allZappLocales: string[] = require("./allZappLocales").default;
+
+  it.each(allZappLocales)("[%s] returns a valid dayjs locale", (locale) => {
+    const dayJSLocale = toDayJSLocaleMap(locale);
+    expect(dayJSLocale).toBeDefined();
+    expect(dayJSLocale).toMatchSnapshot();
+  });
+});

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -5,6 +5,7 @@ exports[`focusManager should be defined 1`] = `
   "blur": [Function],
   "disableFocus": [Function],
   "enableFocus": [Function],
+  "findPreferredFocusChild": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -60,6 +61,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getCurrentGroup": [Function],
   "getGroupById": [Function],
   "getGroupRootById": [Function],
+  "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,8 +1,10 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
+import { findChild } from "./utils";
 
 const { FocusableManagerModule } = NativeModules;
 
@@ -52,10 +54,7 @@ export const focusManager = (function () {
     const node = focusableTree.findInTree(groupId);
 
     if (node?.children?.length > 0) {
-      const preferredFocus = R.compose(
-        R.find(R.pathEq(["component", "props", "preferredFocus"], true)),
-        R.prop("children")
-      )(node);
+      const preferredFocus = findChild(true, node);
 
       if (preferredFocus?.component?.isGroup) {
         return getPreferredFocusInGroup({ groupId: preferredFocus?.id });
@@ -382,6 +381,16 @@ export const focusManager = (function () {
     forceFocusOnItem({ focusableItem, callback });
   }
 
+  function getPreferredFocusChild(id) {
+    const node = focusableTree.findInTree(id);
+
+    if (node?.children?.length > 0) {
+      return findChild(true, node) || findChild(false, node);
+    }
+
+    return node;
+  }
+
   return {
     on,
     invokeHandler,
@@ -402,5 +411,6 @@ export const focusManager = (function () {
     getCurrentGroup,
     getGroupRootById,
     isGroupItemFocused,
+    getPreferredFocusChild,
   };
 })();

package/appUtils/focusManager/index.ts

@@ -534,6 +534,18 @@ export const focusManager = (function () {
 
   const { on, invokeHandler, removeHandler } = eventHandler;
 
+  function findPreferredFocusChild(id) {
+    const node = getCurrentFocusNode(id);
+
+    const preferredFocus = findPriorityItem([node]);
+
+    if (isNilOrEmpty(preferredFocus)) {
+      return undefined;
+    }
+
+    return preferredFocus[0];
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -563,5 +575,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    findPreferredFocusChild,
   };
 })();

package/appUtils/focusManager/utils/__tests__/findChild.test.ts

@@ -0,0 +1,35 @@
+import { findChild } from "../index";
+
+describe("findChild", () => {
+  const makeNode = (children = []) => ({ children });
+
+  const child = (preferredFocus: boolean) => ({
+    component: { props: { preferredFocus } },
+  });
+
+  it("returns the child with preferredFocus=true", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(true, node)).toBe(node.children[1]);
+  });
+
+  it("returns the child with preferredFocus=false", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(false, node)).toBe(node.children[0]);
+  });
+
+  it("returns undefined if no child matches preferredFocus", () => {
+    const node = makeNode([child(false), child(false)]);
+    expect(findChild(true, node)).toBeUndefined();
+  });
+
+  it("returns undefined if node has no children", () => {
+    const node = makeNode();
+    expect(findChild(true, node)).toBeUndefined();
+    expect(findChild(false, node)).toBeUndefined();
+  });
+
+  it("returns undefined if children is not an array", () => {
+    const node = { children: null };
+    expect(findChild(true, node)).toBeUndefined();
+  });
+});

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,8 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findChild = (preferredFocus: boolean, node) =>
+  (node?.children || []).find(
+    (child) => child?.component?.props?.preferredFocus === preferredFocus
+  );

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,37 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+/**
+ * fallback to en for missing dayjslocalization
+ * converts the locale code to a dayjs compatible locale code
+ * lowercase input code is expected, e.g. "en-GB" => "en-gb"
+ * @param {string} code - locale code, e.g. "en", "fr", "es-LA"
+ * */
+export const toDayJSLocaleMap = (code) => {
+  const map = {
+    hy: "hy-am",
+    fj: null,
+    la: null,
+    no: null,
+    pa: "pa-in",
+    qu: null,
+    sm: null,
+    to: null,
+    xh: null,
+    tt: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code.toLowerCase();
+  }
+};
+
 /**
  * returns the localization for the app based on the locale. If the locale is null
  * or undefined, or if the given locale doesn't exist in the localizations,

package/appUtils/playerManager/usePlayerTitleSummaryOverlay.tsx

@@ -3,12 +3,18 @@ import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { useFeedLoader } from "../../reactHooks";
 import { usePlayer } from "./usePlayer";
 
+const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
 export const useTitleSummaryOverlay = (
-  feedUrl,
   entry,
   isLive = false,
   interval: number
 ) => {
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
   const player = usePlayer();
   const [title, setTitle] = useState<string | number>(entry?.title || "");
   const [summary, setSummary] = useState<string | number>(entry?.summary || "");

package/componentsUtils/__tests__/isFirstComponentGallery.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentGallery } from "../index";
+
+describe("isFirstComponentGallery", () => {
+  it("should return true if the first component is a gallery", () => {
+    const components = [
+      { component_type: "gallery-qb" },
+      { component_type: "other-component" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(true);
+  });
+
+  it("should return false if the first component is not a gallery", () => {
+    const components = [
+      { component_type: "other-component" },
+      { component_type: "gallery-qb" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is empty", () => {
+    const components = [];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is undefined", () => {
+    const components = undefined;
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isFirstComponentScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentScreenPicker } from "..";
+
+describe("isFirstComponentScreenPicker", () => {
+  it("should return true if the first component screen-picker", () => {
+    const items = [{ component_type: "screen-picker-qb-tv" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(true);
+  });
+
+  it("should return false if the first component type is not screen-picker", () => {
+    const items = [{ component_type: "other-component" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const items = [{ component_type: undefined }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const items = null;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const items = undefined;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const items = {};
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isGallery.test.ts

@@ -0,0 +1,33 @@
+import { isGallery } from "..";
+
+describe("isGallery", () => {
+  it("should return true if the component type is 'gallery-qb'", () => {
+    const item = { component_type: "gallery-qb" };
+    expect(isGallery(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'gallery-qb'", () => {
+    const item = { component_type: "other-component" };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isGallery(item)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isScreenPicker } from "..";
+
+describe("isScreenPicker", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "screen-picker-qb-tv" };
+    expect(isScreenPicker(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isScreenPicker(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -0,0 +1,32 @@
+const GROUP = "group-qb";
+const GROUP_INFO = "group-info-qb";
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
+const GALLERY = "gallery-qb";
+
+const SCREEN_PICKER = "screen-picker-qb-tv";
+
+export const isGallery = (item): boolean => item?.component_type === GALLERY;
+
+export const isScreenPicker = (item): boolean =>
+  item?.component_type === SCREEN_PICKER;
+
+export const isFirstComponentScreenPicker = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isScreenPicker(components?.[0]);
+};
+
+export const isFirstComponentGallery = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isGallery(components?.[0]);
+};
+
+export const isGroup = (item): boolean => item?.component_type === GROUP;
+
+export const isEmptyGroup = (item): boolean =>
+  item?.component_type === EMPTY_GROUP_COMPONENT;
+
+export const isGroupInfo = (item): boolean =>
+  item?.component_type === GROUP_INFO;