@applicaster/zapp-react-native-ui-components 16.0.0-rc.11 → 16.0.0-rc.110

package/Components/OfflineHandler/NotificationView/NotificationView.tsx

@@ -1,153 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import * as R from "ramda";
-import {
-  View,
-  Text,
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-} from "react-native";
-
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useNotificationHeight } from "../utils";
-
-export const onlinePhrase = "You are back online";
-
-export const offlinePhrase = "No internet connection";
-
-const styles = StyleSheet.create({
-  notificationView: {
-    flex: 1,
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  dismiss: () => void;
-};
-
-type NumberBoolean = 0 | 1;
-
-const OFFLINE_EXPERIENCE = "offline-experience";
-
-export const NotificationView = ({
-  children,
-  hidden = true,
-  online = true,
-  dismiss,
-}: Props) => {
-  const plugins = usePlugins();
-  const { statusHeight, notificationHeight } = useNotificationHeight();
-
-  const offlinePlugin = R.find(
-    R.propEq("identifier", OFFLINE_EXPERIENCE),
-    plugins
-  );
-
-  const { useOfflineExperienceConfiguration } = offlinePlugin.module;
-
-  const {
-    configurationFields,
-    localizations,
-  }: {
-    configurationFields: OfflineExperiencePluginConfiguration;
-    localizations: OfflineExperienceLocalizations;
-  } = useOfflineExperienceConfiguration?.();
-
-  const [notificationOpacity, setNotificationOpacity] =
-    useState<NumberBoolean>(0);
-
-  const yPosition = useRef(new Animated.Value(0)).current;
-
-  const showNotification = () => {
-    setNotificationOpacity(1);
-
-    Animated.timing(yPosition, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration: 300,
-    }).start();
-  };
-
-  const hideNotification = () => {
-    Animated.timing(yPosition, {
-      toValue: 0,
-      useNativeDriver: true,
-      duration: 300,
-    }).start(() => {
-      setNotificationOpacity(0);
-    });
-  };
-
-  useEffect(() => {
-    hidden ? hideNotification() : showNotification();
-  }, [hidden]);
-
-  const backgroundColor = online
-    ? configurationFields.offline_toast_online_background_color
-    : configurationFields.offline_toast_offline_background_color;
-
-  const animatedViewStyles = {
-    ...styles.notificationView,
-    transform: [
-      {
-        translateY: yPosition.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-notificationHeight, 0],
-        }),
-      },
-    ],
-    opacity: notificationOpacity,
-    height: notificationHeight,
-    width: "100%",
-    backgroundColor,
-  };
-
-  const textStyles = {
-    color: online
-      ? configurationFields.offline_toast_message_online_font_color
-      : configurationFields.offline_toast_message_font_color,
-    fontFamily: platformSelect({
-      ios: configurationFields.offline_toast_message_ios_font_family,
-      android: configurationFields.offline_toast_message_android_font_family,
-    }),
-    fontSize: configurationFields.offline_toast_message_font_size,
-    lineHeight: configurationFields.offline_toast_message_line_height,
-    letterSpacing: platformSelect({
-      ios: configurationFields.offline_toast_message_letter_spacing_ios,
-      android: configurationFields.offline_toast_message_letter_spacing_android,
-    }),
-  };
-
-  const message = textTransform(
-    configurationFields.offline_toast_message_text_transform,
-    online
-      ? localizations.online_toast_message
-      : localizations.offline_toast_message
-  );
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      {children}
-      <TouchableWithoutFeedback
-        style={styles.notificationView}
-        onPress={dismiss}
-      >
-        <Animated.View style={animatedViewStyles}>
-          <View style={{ height: statusHeight, backgroundColor }} />
-          <Text style={textStyles}>{message}</Text>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    </View>
-  );
-};

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { Text, Animated } from "react-native";
-import { render } from "@testing-library/react-native";
-
-import {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} from "../NotificationView";
-
-jest.mock("@applicaster/zapp-react-native-redux", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
-  usePlugins: () => [
-    {
-      name: "offline experience",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        useOfflineExperienceConfiguration: () => ({
-          configurationFields: {},
-          localizations: {
-            offline_toast_message: "No internet connection",
-            online_toast_message: "You are back online",
-          },
-        }),
-      },
-    },
-  ],
-}));
-
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 44 }),
-}));
-
-const dismiss = jest.fn();
-
-describe("NotificationView", () => {
-  it("Show online message when Online", () => {
-    const component = render(<NotificationView online dismiss={dismiss} />);
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
-  });
-
-  it("Show offline message when Online", () => {
-    const component = render(
-      <NotificationView online={false} dismiss={dismiss} />
-    );
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
-  });
-
-  it("When hidden is false to true notification is visible", () => {
-    const component = render(
-      <NotificationView online={false} hidden={false} dismiss={dismiss} />
-    );
-
-    component.rerender(
-      <NotificationView online={false} hidden={true} dismiss={dismiss} />
-    );
-
-    const animatedView = component.UNSAFE_getByType(Animated.View);
-    const animatedViewStyles = animatedView.props.style;
-
-    expect(animatedViewStyles.opacity).toBe(1);
-  });
-});

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -1,34 +0,0 @@
-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/Components/Screen/utils.ts

@@ -1,16 +0,0 @@
-import { map, split, replace, compose, trim } from "ramda";
-
-function colorIsNotTransparent(color) {
-  const layers = compose(
-    map(trim),
-    split(","),
-    replace(")", ""),
-    replace("rgba(", "")
-  )(color);
-
-  return Number(layers?.[3]) > 0;
-}
-
-export function isValidColor(string) {
-  return string && string !== "transparent" && colorIsNotTransparent(string);
-}

package/Helpers/Analytics/index.js

@@ -1,95 +0,0 @@
-import * as R from "ramda";
-import { postAnalyticEvent } from "@applicaster/zapp-react-native-tvos-app/AnalyticsManager";
-import { extensionsEvents } from "@applicaster/zapp-react-native-utils/analyticsUtils/AnalyticsEvents/helper";
-import {
-  ANALYTICS_CORE_EVENTS,
-  ANALYTICS_ENTRY_EVENTS,
-  ANALYTICS_COMPONENT_EVENTS,
-  ANALYTICS_MENU_ITEM_EVENTS,
-} from "../";
-
-export function sendTapCellEvent(item, component, headerTitle, itemIndex) {
-  const itemReadableIndex = itemIndex + 1;
-
-  const analyticsProperties = R.compose(
-    R.reject(R.isNil),
-    R.merge(eventForEntry(item, itemReadableIndex))
-  )(eventForComponent(component, headerTitle));
-
-  postEvent(ANALYTICS_CORE_EVENTS.TAP_CELL, analyticsProperties);
-}
-
-export function sendTapMenuItem({ item, index, isHome }) {
-  const analyticsProperties = R.compose(R.reject(R.isNil))(
-    eventForMenuItemEntry({ item, index, isHome })
-  );
-
-  postEvent(ANALYTICS_CORE_EVENTS.TAP_MENU_ICON, analyticsProperties);
-
-  if (isHome) {
-    postEvent(ANALYTICS_CORE_EVENTS.HOME_SCREEN_VIEWED, null);
-  }
-}
-
-function postEvent(event, properties) {
-  postAnalyticEvent(event, properties);
-}
-
-function eventForEntry(item, itemIndex) {
-  const {
-    title,
-    type: { value: valueType },
-    id,
-  } = item;
-
-  const analyticsCustomProperties = extensionsEvents(item.extensions);
-
-  const analyticsEvents = {
-    [ANALYTICS_ENTRY_EVENTS.ITEM_TYPE]: valueType,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_TITLE]: title,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_ID]: id,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_INDEX]:
-      (itemIndex && itemIndex.toString()) || null,
-  };
-
-  if (analyticsCustomProperties) {
-    analyticsEvents.analyticsCustomProperties = analyticsCustomProperties;
-  }
-
-  return analyticsEvents;
-}
-
-function eventForComponent(
-  component,
-  headerTitle, // Zapp Pipes data passed for group components
-  zappPipesData = null
-) {
-  const { id, component_type, styles, data } = component;
-  const { cell_style } = styles;
-  const source = data?.source || zappPipesData?.data?.url || null;
-
-  return {
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_ID]: id,
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_TYPE]: component_type,
-    [ANALYTICS_COMPONENT_EVENTS.CELL_STYLE]:
-      cell_style || ANALYTICS_CORE_EVENTS.ITEM_NOT_AVAILABLE,
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_SOURCE]:
-      (source && encodeURIComponent(source)) || null,
-    [ANALYTICS_COMPONENT_EVENTS.HEADER_TITLE]: headerTitle,
-  };
-}
-
-function eventForMenuItemEntry({ item, index, isHome }) {
-  const { title, type, id } = item;
-
-  const itemReadableIndex = index + 1;
-
-  return {
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_INDEX]:
-      (itemReadableIndex && itemReadableIndex.toString()) || null,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_TYPE]: type,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_TITLE]: title,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_ID]: id,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_HOME_SCREEN]: isHome ? "YES" : "NO",
-  };
-}