@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9530606740 → 16.0.0-alpha.9739533780

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -123,7 +123,7 @@ export type ActionButtonsStyleConfiguration = {
 };
 
 export type HeaderConfiguration = {
-  paddingTop?: number;
+  paddingTop: undefined;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -211,7 +211,6 @@ export type AudioPlayerTrackItemProps = {
   onPress?: () => void;
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
-  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 // ---------------------------------------------------------------------------
@@ -705,7 +704,6 @@ type ItemButtonsProps = {
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
   isSelected?: boolean;
-  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 function ItemButtons({
@@ -716,7 +714,6 @@ function ItemButtons({
   onLeadingButtonPress,
   onTrailingButtonPress,
   isSelected = false,
-  renderHandle,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -736,32 +733,12 @@ function ItemButtons({
         </>
       ) : null}
       {trailingButton ? (
-        trailingButton === "drag" ? (
-          renderHandle ? (
-            renderHandle(
-              <ItemButton
-                action={trailingButton}
-                focused={focusedTrailingButton}
-                onPress={onTrailingButtonPress}
-                isSelected={isSelected}
-              />
-            )
-          ) : (
-            <ItemButton
-              action={trailingButton}
-              focused={focusedTrailingButton}
-              onPress={onTrailingButtonPress}
-              isSelected={isSelected}
-            />
-          )
-        ) : (
-          <ItemButton
-            action={trailingButton}
-            focused={focusedTrailingButton}
-            onPress={onTrailingButtonPress}
-            isSelected={isSelected}
-          />
-        )
+        <ItemButton
+          action={trailingButton}
+          focused={focusedTrailingButton}
+          onPress={onTrailingButtonPress}
+          isSelected={isSelected}
+        />
       ) : null}
     </View>
   );
@@ -780,7 +757,6 @@ export function AudioPlayerTrackItem({
   onPress,
   onLeadingButtonPress,
   onTrailingButtonPress,
-  renderHandle,
 }: AudioPlayerTrackItemProps) {
   const {
     background,
@@ -831,7 +807,6 @@ export function AudioPlayerTrackItem({
           onLeadingButtonPress={onLeadingButtonPress}
           onTrailingButtonPress={onTrailingButtonPress}
           isSelected={data.isSelected}
-          renderHandle={renderHandle}
         />
       </View>
     </ItemContainer>

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -23,6 +23,12 @@ type ModalComponentProps = {
   maxHeight?: number;
   dismiss: () => void;
   headerComponent?: React.ComponentType;
+
+  scrollViewContent?: {
+    renderItem: (item: any, index: number) => React.ReactNode;
+    items: any[];
+  } | null;
+
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -50,6 +56,9 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     summary,
     title,
     headerComponent: ModalHeader = DefaultModalHeader,
+
+    scrollViewContent = null,
+
     buttonComponent: ButtonComponent = Button,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
@@ -109,24 +118,31 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
+        {scrollViewContent
+          ? scrollViewContent.items.map((item, index) =>
+              scrollViewContent.renderItem(item, index)
+            )
+          : null}
+
+        {!scrollViewContent &&
+          items.map((item, index) =>
+            item ? (
+              <ButtonComponent
+                key={index}
+                configuration={theme}
+                selectedItem={current_selection}
+                item={item}
+                onPress={handlePress}
+                label={theme[item?.label] ?? item?.label}
+                iconBaseProps={iconBaseProps}
+                itemBaseProps={itemBaseProps}
+                labelBaseProps={labelBaseProps}
+                selectedItemIcon={getSelectedItemIcon(theme)}
+                defaultItemIcon={getDefaultItemIcon(theme)}
+                iconPlacement={iconPlacement}
+              />
+            ) : null
+          )}
       </ScrollView>
     </View>
   );

package/Components/ModalComponent/Button/index.tsx

@@ -43,13 +43,11 @@ export function Button({
 }: ButtonProps) {
   const [focused, setFocused] = useState(false);
 
-  const selected = selectedItem && item?.value === selectedItem?.value;
+  const selected = selectedItem && item.value === selectedItem?.value;
 
   const itemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
-    () =>
-      (item ? (configuration[item.asset] ?? item.asset) : undefined) ??
-      defaultItemIcon,
-    [item?.asset, defaultItemIcon]
+    () => configuration[item.asset] ?? item.asset ?? defaultItemIcon,
+    [item.asset, defaultItemIcon]
   );
 
   const selectedItemIconPropsAssets = useMemo<ItemIconProps["asset"]>(

package/Components/ModalComponent/index.tsx

@@ -2,13 +2,6 @@ import React, { useCallback, useState } from "react";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
-import { modalOrchestrator } from "@applicaster/zapp-react-native-utils/modalState";
-import { MultiLevelBottomSheetContent } from "./AudioPlayer/MultiLevelBottomSheetContent";
-
-// Register MultiLevelBottomSheetContent component dynamically if modalOrchestrator is defined (e.g. not mocked out in tests)
-if (modalOrchestrator && typeof modalOrchestrator.registerSheetContentComponent === "function") {
-  modalOrchestrator.registerSheetContentComponent(MultiLevelBottomSheetContent);
-}
 
 export type PluginConfiguration = {
   [key: string]: any;

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,88 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OfflineHandler renders 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-      "position": "relative",
-    }
-  }
->
-  <View
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": undefined,
-          "flex": 1,
-          "height": 88,
-          "justifyContent": "center",
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "transform": [
-            {
-              "translateY": -88,
-            },
-          ],
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "backgroundColor": undefined,
-            "height": 44,
-          }
-        }
-      />
-      <Text
-        style={
-          {
-            "color": undefined,
-            "fontFamily": undefined,
-            "fontSize": undefined,
-            "letterSpacing": undefined,
-            "lineHeight": undefined,
-          }
-        }
-      >
-        You are back online
-      </Text>
-    </View>
-  </View>
-</View>
+exports[`OfflineHandler renders its children without wrapping them in a notification view 1`] = `
+<Text>
+  child content
+</Text>
 `;

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

@@ -1,26 +1,26 @@
 import React from "react";
+import { Text } from "react-native";
 import { render } from "@testing-library/react-native";
+import { subscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
 jest.useFakeTimers({ legacyFakeTimers: true });
 
+// `isOnline` (@applicaster/quick-brick-core/App/NetworkStatusProvider/utils)
+// only treats connectionInfo as "ready" when it has NetInfoState-shaped
+// isConnected/isInternetReachable/details fields, so the mock has to mirror
+// that shape for online/offline to actually be distinguishable.
 let mockConnectionStatus = false;
-const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
     ...jest.requireActual(
       "@applicaster/zapp-react-native-utils/reactHooks/connection"
     ),
-    useConnectionInfo: jest.fn(() => mockConnectionStatus),
-  };
-});
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
-  return {
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/utils"
-    ),
-    usePrevious: jest.fn(() => mockPreviousValue),
+    useConnectionInfo: jest.fn(() => ({
+      details: {},
+      isConnected: mockConnectionStatus,
+      isInternetReachable: mockConnectionStatus,
+    })),
   };
 });
 
@@ -54,21 +54,81 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 describe("OfflineHandler", () => {
-  const { OfflineHandler, NotificationView } = require("../");
+  const { OfflineHandler } = require("../");
+
+  beforeEach(() => {
+    mockConnectionStatus = false;
+  });
+
+  it("renders its children without wrapping them in a notification view", () => {
+    const { toJSON } = render(
+      <OfflineHandler>
+        <Text>child content</Text>
+      </OfflineHandler>
+    );
 
-  it("renders", () => {
-    const { toJSON } = render(<OfflineHandler />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders Notification mode if component was rendered while online", () => {
+  it("emits a showToast event on mount when the device starts offline", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "No internet connection",
+        timeout: 5000,
+      }),
+      // the shared event bus appends a dispose fn as the last handler arg
+      expect.any(Function)
+    );
+
+    unsubscribe();
+  });
+
+  it("does not emit a showToast event on mount when the device starts online", () => {
     mockConnectionStatus = true;
 
-    const { rerender, UNSAFE_getByType } = render(<OfflineHandler />);
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("emits a showToast event when the device comes back online", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
 
+    // ignore the offline toast emitted on mount; we only care about the
+    // offline -> online transition here
+    handleShowToast.mockClear();
+
+    mockConnectionStatus = true;
     rerender(<OfflineHandler />);
 
-    const notificationsView = UNSAFE_getByType(NotificationView);
-    expect(notificationsView).toBeDefined();
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "You are back online",
+        timeout: 2000,
+      }),
+      // the shared event bus appends a dispose fn as the last handler arg
+      expect.any(Function)
+    );
+
+    unsubscribe();
   });
 });

package/Components/OfflineHandler/hooks.ts

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+
+import {
+  isWeb,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+const OFFLINE_EXPERIENCE = "offline-experience";
+
+const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
+
+const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
+
+export const useNotificationHeight = () => {
+  const insets = useSafeAreaInsets();
+
+  const navBarHeight = platformSelect({ ios: 44, android: 56 });
+
+  const statusHeight = insets.top;
+  const notificationHeight = statusHeight + navBarHeight;
+
+  return { statusHeight, notificationHeight };
+};
+
+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;
+}
+
+export function useOfflineHandlerProps(online: boolean) {
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+  const plugins = usePlugins();
+  const offlinePlugin = findPluginByIdentifier(OFFLINE_EXPERIENCE, plugins);
+  const { useOfflineExperienceConfiguration } = offlinePlugin?.module ?? {};
+
+  const {
+    configurationFields,
+    localizations,
+  }: {
+    configurationFields: OfflineExperiencePluginConfiguration;
+    localizations: OfflineExperienceLocalizations;
+  } = useOfflineExperienceConfiguration?.() ?? {};
+
+  let title, subtitle, style;
+
+  if (isWeb()) {
+    title = online
+      ? (theme?.online_notification_title ??
+        storedLocalizations?.online_notification_title)
+      : (theme?.offline_notification_title ??
+        storedLocalizations?.offline_notification_title);
+
+    subtitle = online
+      ? (theme?.online_notification_subtitle ??
+        storedLocalizations?.online_notification_subtitle)
+      : (theme?.offline_notification_subtitle ??
+        storedLocalizations?.offline_notification_subtitle);
+  } else {
+    title = textTransform(
+      configurationFields.offline_toast_message_text_transform,
+      online
+        ? localizations.online_toast_message
+        : localizations.offline_toast_message
+    );
+
+    style = {
+      color: online
+        ? configurationFields.offline_toast_message_online_font_color
+        : configurationFields.offline_toast_message_font_color,
+      backgroundColor: online
+        ? configurationFields.offline_toast_online_background_color
+        : configurationFields.offline_toast_offline_background_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,
+      }),
+    };
+  }
+
+  return useMemo(
+    () => ({ message: title, extraMessage: subtitle, style }),
+    [title, subtitle, style]
+  );
+}