@applicaster/zapp-react-native-utils 15.1.0-rc.1 → 16.0.0-rc.1

package/errorUtils/__tests__/getParsedResponse.test.ts

@@ -0,0 +1,188 @@
+import { getParsedResponse } from "../index";
+import { RESPONSES } from "../errorCodes";
+
+describe("getParsedResponse", () => {
+  it("should parse error with response status code from response.data", () => {
+    const err = {
+      response: {
+        data: {
+          statusCode: 404,
+          message: "Resource not found",
+        },
+        config: {
+          url: "https://api.example.com/data",
+          params: { id: 123 },
+        },
+      },
+      name: "AxiosError",
+      context: { userId: "user123" },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe("Error: Resource not found");
+    expect(result.data.statusCode).toBe("404");
+    expect(result.data.url).toBe("https://api.example.com/data");
+    expect(result.data.params).toEqual({ id: 123 });
+    expect(result.data.context).toEqual({ userId: "user123" });
+    expect(result.data.name).toBe("AxiosError");
+    expect(result.jsOnly).toBe(false);
+    expect(result.exception).toBe(result.message);
+  });
+
+  it("should parse error with response status code from response.status", () => {
+    const err = {
+      response: {
+        status: 500,
+        config: {
+          url: "https://api.example.com/data",
+        },
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe(`Error: ${RESPONSES[500]}`);
+    expect(result.data.statusCode).toBe("500");
+  });
+
+  it("should handle error with request but no response", () => {
+    const err = {
+      request: {},
+      message: "Network timeout",
+      config: {
+        url: "https://api.example.com/data",
+        params: { test: "value" },
+      },
+      name: "NetworkError",
+      context: { app: "test" },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe("Error: Network timeout");
+    expect(result.data.url).toBe("https://api.example.com/data");
+    expect(result.data.params).toEqual({ test: "value" });
+    expect(result.data.name).toBe("NetworkError");
+    expect(result.data.context).toEqual({ app: "test" });
+    expect(result.jsOnly).toBe(false);
+  });
+
+  it("should handle error with request but no response and no message", () => {
+    const err = {
+      request: {},
+      config: {
+        url: "https://api.example.com/data",
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe(`Error: ${RESPONSES.noResponse}`);
+  });
+
+  it("should handle error with neither response nor request", () => {
+    const err = {
+      message: "Failed to set up request",
+      config: {
+        url: "https://api.example.com/data",
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe("Error: Failed to set up request");
+  });
+
+  it("should handle error with neither response nor request and no message", () => {
+    const err = {
+      config: {
+        url: "https://api.example.com/data",
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe(`Error: ${RESPONSES.unknown}`);
+  });
+
+  it("should handle null error", () => {
+    const err = null;
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe(`Error: ${RESPONSES.unknown}`);
+
+    expect(result.data).toEqual({
+      context: undefined,
+      name: undefined,
+      params: undefined,
+      url: undefined,
+    });
+  });
+
+  it("should handle undefined error", () => {
+    const err = undefined;
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe(`Error: ${RESPONSES.unknown}`);
+  });
+
+  it("should extract params from err.config when response is not present", () => {
+    const err = {
+      request: {},
+      message: "Request failed",
+      config: {
+        url: "https://api.example.com/data",
+        params: { key: "value" },
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.data.params).toEqual({ key: "value" });
+    expect(result.data.url).toBe("https://api.example.com/data");
+  });
+
+  it("should prioritize response config over error config", () => {
+    const err = {
+      response: {
+        status: 404,
+        config: {
+          url: "https://api.example.com/response-url",
+          params: { from: "response" },
+        },
+      },
+      config: {
+        url: "https://api.example.com/error-url",
+        params: { from: "error" },
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.data.url).toBe("https://api.example.com/response-url");
+    expect(result.data.params).toEqual({ from: "response" });
+  });
+
+  it("should handle response with custom status codes", () => {
+    const err = {
+      response: {
+        data: {
+          statusCode: 418,
+          message: "I'm a teapot",
+        },
+        status: 418,
+        config: {
+          url: "https://api.example.com/coffee",
+        },
+      },
+    };
+
+    const result = getParsedResponse(err);
+
+    expect(result.message).toBe("Error: I'm a teapot");
+    expect(result.data.statusCode).toBe("418");
+  });
+});

package/errorUtils/__tests__/invariant.test.ts

@@ -0,0 +1,112 @@
+import { invariant } from "../index";
+
+// Mock __DEV__ global
+declare global {
+  var __DEV__: boolean;
+}
+
+describe("invariant", () => {
+  const originalDev = global.__DEV__;
+
+  afterEach(() => {
+    global.__DEV__ = originalDev;
+  });
+
+  describe("in development mode", () => {
+    beforeEach(() => {
+      global.__DEV__ = true;
+    });
+
+    it("should not throw when condition is true", () => {
+      expect(() => {
+        invariant(true, "This should not throw");
+      }).not.toThrow();
+    });
+
+    it("should throw when condition is false", () => {
+      expect(() => {
+        invariant(false, "This should throw");
+      }).toThrow("This should throw");
+    });
+
+    it("should throw with correct error message", () => {
+      const errorMessage = "Custom error message";
+
+      expect(() => {
+        invariant(false, errorMessage);
+      }).toThrow(errorMessage);
+    });
+
+    it("should not throw when condition is truthy value", () => {
+      expect(() => {
+        invariant(1 as any, "Should not throw");
+      }).not.toThrow();
+
+      expect(() => {
+        invariant("string" as any, "Should not throw");
+      }).not.toThrow();
+
+      expect(() => {
+        invariant({} as any, "Should not throw");
+      }).not.toThrow();
+
+      expect(() => {
+        invariant([] as any, "Should not throw");
+      }).not.toThrow();
+    });
+
+    it("should throw when condition is falsy value", () => {
+      expect(() => {
+        invariant(0 as any, "Should throw for 0");
+      }).toThrow("Should throw for 0");
+
+      expect(() => {
+        invariant("" as any, "Should throw for empty string");
+      }).toThrow("Should throw for empty string");
+
+      expect(() => {
+        invariant(null as any, "Should throw for null");
+      }).toThrow("Should throw for null");
+
+      expect(() => {
+        invariant(undefined as any, "Should throw for undefined");
+      }).toThrow("Should throw for undefined");
+
+      expect(() => {
+        invariant(NaN as any, "Should throw for NaN");
+      }).toThrow("Should throw for NaN");
+    });
+  });
+
+  describe("in production mode", () => {
+    beforeEach(() => {
+      global.__DEV__ = false;
+    });
+
+    it("should not throw when condition is true", () => {
+      expect(() => {
+        invariant(true, "This should not throw");
+      }).not.toThrow();
+    });
+
+    it("should not throw when condition is false", () => {
+      expect(() => {
+        invariant(false, "This should not throw in production");
+      }).not.toThrow();
+    });
+
+    it("should not throw for any condition", () => {
+      expect(() => {
+        invariant(0 as any, "Should not throw in production");
+      }).not.toThrow();
+
+      expect(() => {
+        invariant(null as any, "Should not throw in production");
+      }).not.toThrow();
+
+      expect(() => {
+        invariant(undefined as any, "Should not throw in production");
+      }).not.toThrow();
+    });
+  });
+});

package/focusManager/aux/index.ts

@@ -49,7 +49,7 @@ export const findSelectedMenuId = (
 ) => {
   const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
 
-  return pathOr(
+  return pathOr<string | undefined>(
     undefined,
     ["children", index, "id"],
     focusableTree.find(sectionName)

package/headersUtils/__tests__/headersUtils.test.js

@@ -1,6 +1,15 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { getAppDataHeaders } from "../index";
 
+const mockUILanguage = "en-US";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper",
+  () => ({
+    getUILanguage: jest.fn(() => mockUILanguage),
+  })
+);
+
 describe("getAppDataHeaders", () => {
   const mockAppData = {
     riversConfigurationId: "test-layout",
@@ -25,7 +34,7 @@ describe("getAppDataHeaders", () => {
     const expectedHeaders = {
       "x-applicaster-layout-id": mockAppData.riversConfigurationId,
       "x-applicaster-screen-id": screenId,
-      "x-applicaster-language-code": mockAppData.languageCode,
+      "x-applicaster-language-code": mockUILanguage,
       "x-applicaster-version-number": mockAppData.version_name,
       "x-applicaster-platform": mockAppData.platform,
       "x-applicaster-country-code": mockAppData.countryCode,
@@ -33,6 +42,7 @@ describe("getAppDataHeaders", () => {
         mockAppData.signedDeviceInfoToken,
       "x-applicaster-device-make": mockAppData.deviceMake,
       "x-applicaster-device-model": mockAppData.deviceModel,
+      "x-applicaster-uuid": undefined,
     };
 
     const headers = getAppDataHeaders(screenId);

package/headersUtils/index.ts

@@ -1,6 +1,7 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { getPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { utilsLogger } from "../logger";
+import { getUILanguage } from "../localizationUtils";
 
 const logger = utilsLogger.addSubsystem("headersUtils");
 
@@ -21,7 +22,7 @@ export const getAppDataHeaders = (screenId: string) => {
     "x-applicaster-layout-id":
       appData.riversConfigurationId || appData.rivers_configuration_id,
     "x-applicaster-screen-id": screenId,
-    "x-applicaster-language-code": appData.languageCode,
+    "x-applicaster-language-code": getUILanguage(),
     "x-applicaster-version-number": appData.version_name || appData.versionName,
     "x-applicaster-platform": (platform || appData.platform).toLowerCase(),
     "x-applicaster-country-code": appData.countryCode,

package/manifestUtils/_internals/__tests__/index.test.js

@@ -0,0 +1,41 @@
+const {
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
+} = require("..");
+
+describe("manifestUtils/_internals helpers", () => {
+  it("checks a key suffix", () => {
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_button_enabled")
+    ).toBe(true);
+
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_assign_action")
+    ).toBe(false);
+  });
+
+  it("checks key against multiple suffixes", () => {
+    const suffixes = ["font_color", "focused_font_color", "text_transform"];
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_text_transform")
+    ).toBe(true);
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_asset_alignment")
+    ).toBe(false);
+  });
+
+  it("generates stable key names using a prefix", () => {
+    const withMobileButtonPrefix = getKeyWithPrefixGenerator("mobile_button_2");
+
+    expect(withMobileButtonPrefix("display_mode")).toBe(
+      "mobile_button_2_display_mode"
+    );
+
+    expect(withMobileButtonPrefix("asset_enabled")).toBe(
+      "mobile_button_2_asset_enabled"
+    );
+  });
+});

package/manifestUtils/_internals/index.js

@@ -174,6 +174,36 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
   )(fields);
 }
 
+/**
+ * Checks whether a generated manifest field key ends with the given suffix.
+ *
+ * @param {string} suffix
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasSuffix = (suffix, key) => key.endsWith(`_${suffix}`);
+
+/**
+ * Checks whether a generated manifest field key ends with any supported suffix.
+ *
+ * @param {string[]} suffixes
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasAnyOfSuffixes = (suffixes, key) =>
+  suffixes.some((suffix) => key.endsWith(`_${suffix}`));
+
+/**
+ * Creates a helper that prefixes a manifest field suffix with a shared key stem.
+ *
+ * @param {string} prefix
+ * @returns {(suffix: string) => string}
+ */
+function getKeyWithPrefixGenerator(prefix) {
+  // expect prefix as lower snake case, e.g. "mobile_buttons_container"
+  return (suffix) => `${prefix}_${suffix}`;
+}
+
 module.exports = {
   toSnakeCase,
   toCamelCase,
@@ -185,4 +215,7 @@ module.exports = {
   getDefaultConfiguration,
   compact,
   replaceUnderscoreToSpace,
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
 };

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -370,6 +370,20 @@ function getPlayerConfiguration({ platform, version }) {
   };
 
   if (isTV(platform)) {
+    localizations.fields.push({
+      key: "back_to_live_label",
+      label: "Back to live label",
+      initial_value: "Back To Live",
+      type: "text_input",
+    });
+
+    localizations.fields.push({
+      key: "start_over_label",
+      label: "Start over label",
+      initial_value: "Start Over",
+      type: "text_input",
+    });
+
     styles.fields.push(
       fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
         {
@@ -482,7 +496,7 @@ function getPlayerConfiguration({ platform, version }) {
       ),
       fieldsGroup(
         "Skip Button",
-        "This section allows you to configure the skip button styles for tv",
+        "This section allows you to configure the skip button behaviour",
         [
           {
             type: "switch",
@@ -499,6 +513,12 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Persistent Button Toggle",
             initial_value: true,
           },
+        ]
+      ),
+      fieldsGroup(
+        "Labeled Button Style",
+        "This section allows you to configure the labeled button styles",
+        [
           {
             type: "color_picker_rgba",
             label_tooltip: "",
@@ -654,6 +674,44 @@ function getPlayerConfiguration({ platform, version }) {
     );
   }
 
+  if (isTV(platform)) {
+    general.fields.push(
+      {
+        key: "liveSeekingEnabled",
+        label: "Live Seeking Enabled",
+        initial_value: false,
+        type: "switch",
+        label_tooltip: "Enable Live Seek",
+      },
+      {
+        key: "minimumAllowedSeekableDurationInSeconds",
+        label: "Minimum allowed seekable duration in seconds",
+        initial_value: 300,
+        type: "number_input",
+        label_tooltip:
+          "If duration less than this value, player will disable 'liveSeekingEnabled' value",
+      },
+      {
+        key: "live_image",
+        label: "Live badge",
+        type: "uploader",
+        label_tooltip: "Override default live badge / icon",
+      },
+      {
+        key: "live_width",
+        label: "Live badge width",
+        type: "number_input",
+        initial_value: 85,
+      },
+      {
+        key: "live_height",
+        label: "Live badge height",
+        type: "number_input",
+        initial_value: 50,
+      }
+    );
+  }
+
   if (isMobile(platform)) {
     general.fields.push(
       {

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -0,0 +1,49 @@
+const {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+} = require("..");
+
+describe("manifestUtils/fieldUtils", () => {
+  it("appends conditions and adds all_conditions when there is more than one condition", () => {
+    const config = {
+      key: "mobile_button_1_width",
+      conditional_fields: [
+        { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      ],
+    };
+
+    const result = withConditional([
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ])(config);
+
+    expect(result.conditional_fields).toEqual([
+      { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ]);
+
+    expect(result.rules).toBe("all_conditions");
+  });
+
+  it("creates category-prefixed conditional key", () => {
+    expect(
+      getConditionalKey("mobile_buttons_container_position", "styles")
+    ).toBe("styles/mobile_buttons_container_position");
+  });
+
+  it("creates conditional fields with default category and with raw key", () => {
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true)
+    ).toEqual({
+      key: "styles/mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true, null)
+    ).toEqual({
+      key: "mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+  });
+});

package/manifestUtils/fieldUtils/index.js

@@ -0,0 +1,54 @@
+/**
+ * Appends new conditional_fields from conditions array
+ * to config.conditional_fields
+ * if there are more than 1 condition, sets rules to "all_conditions"
+ *
+ * @param {Array<{key: string, condition_value: unknown}>} conditions
+ * @returns {(config: object) => object}
+ */
+const withConditional = (conditions) => (config) => {
+  const conditional_fields = [
+    ...(config.conditional_fields || []),
+    ...conditions,
+  ];
+
+  const next = { ...config, conditional_fields };
+
+  if (conditional_fields.length > 1) {
+    return { ...next, rules: "all_conditions" };
+  }
+
+  return next;
+};
+
+/**
+ * Builds key for conditional fields prepending category, e.g. "styles/mobile_buttons_container_position"
+ *
+ * @param {string} key
+ * @param {string} category
+ * @returns {string}
+ */
+function getConditionalKey(key, category) {
+  return `${category}/${key}`;
+}
+
+/**
+ * Returns a conditional field object for manifest visibility rules.
+ *
+ * @param {string} key
+ * @param {unknown} condition_value
+ * @param {string|null} [category="styles"] Pass `null` to use the key as-is.
+ * @returns {{key: string, condition_value: unknown}}
+ */
+function createConditionalField(key, condition_value, category = "styles") {
+  return {
+    key: category ? getConditionalKey(key, category) : key,
+    condition_value,
+  };
+}
+
+module.exports = {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+};

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { buildMobileActionButtonGroups } = require("./mobileAction/groups");
 const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
@@ -43,6 +44,7 @@ module.exports = {
   tvMenuLabel,
   tvActionButtonsContainer,
   tvActionButton,
+  buildMobileActionButtonGroups,
   mobileCellLabel,
   tvCellLabel,
   tvBadges,