@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1334507601 → 16.0.0-alpha.1444784746

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -92,6 +92,8 @@ type ModalComponentProps = {
   contentComponentProps?: Record<string, any>;
   styleOverrides?: ModalBlocksConfig | Record<string, any>;
   measurementPhase?: boolean;
+  /** Copy under Next Up when the queue has no upcoming items. */
+  emptyMessage?: string;
 };
 
 function _BottomSheetModalContent(props: ModalComponentProps) {
@@ -115,6 +117,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     contentComponentProps = {},
     styleOverrides: propStyleOverrides,
     measurementPhase = false,
+    emptyMessage,
   } = props;
 
   const route = useRef(currentRoute);
@@ -150,17 +153,81 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     [plugins, themePluginId]
   );
 
-  const styleOverrides = useMemo(() => {
-    if (propStyleOverrides) {
-      return propStyleOverrides;
-    }
-
+  const styleOverrides = useMemo<ModalBlocksConfig | null>(() => {
     const configuration =
       plugin?.configuration || (plugin as any)?.configuration_json;
 
-    if (!configuration || !themePluginId) return null;
+    const parsed =
+      configuration && themePluginId
+        ? parseModalBlocksConfiguration(configuration, themePluginId)
+        : null;
+
+    if (!propStyleOverrides) {
+      return parsed;
+    }
+
+    // hydrate(QueueStyles) only emits sectionHeader after the plugin class
+    // includes it. Until then, Studio/local keys in configuration_json still
+    // apply via the parser.
+    const hydratedSection = propStyleOverrides.sectionHeader;
+
+    const hasTitleStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.alignment)
+      );
+
+    const hasActionStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.backgroundColor ||
+            style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.borderRadius !== undefined ||
+            style.cornerRadius !== undefined ||
+            style.paddingTop !== undefined ||
+            style.paddingRight !== undefined ||
+            style.paddingBottom !== undefined ||
+            style.paddingLeft !== undefined)
+      );
 
-    return parseModalBlocksConfiguration(configuration, themePluginId);
+    const actionNode = hydratedSection?.actionButtons;
+
+    // An empty `default: {}` is truthy and would hide fields set on the flat
+    // object or on the focused bucket.
+    const hasHydratedSection =
+      hasTitleStyle(hydratedSection?.title?.default) ||
+      hasTitleStyle(hydratedSection?.title) ||
+      hasActionStyle(actionNode?.default) ||
+      hasActionStyle(actionNode?.focused) ||
+      hasActionStyle(actionNode?.focus) ||
+      hasActionStyle(actionNode);
+
+    return {
+      ...parsed,
+      ...propStyleOverrides,
+      sectionHeader: hasHydratedSection
+        ? hydratedSection
+        : parsed?.sectionHeader,
+    };
   }, [propStyleOverrides, plugin, themePluginId]);
 
   const pluginLocalizations = useLocalizedStrings({
@@ -178,17 +245,26 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const nextUpTitle =
     pluginLocalizations?.next_up_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_next_up`]
       : undefined) ||
     "Next Up";
 
   const nowPlayingTitle =
     pluginLocalizations?.now_playing_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_now_playing`]
       : undefined) ||
     "Now Playing";
 
+  const clearLabel =
+    pluginLocalizations?.clear_label ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_label_clear`]
+      : undefined) ||
+    "Clear";
+
   const resolvedTitle = props.title || localizedHeaderTitle || title;
 
   const itemsToRender = viewModel ? fetchedItems : items;
@@ -312,6 +388,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
   const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
   const hasAdd = hasOperation(operations, OPERATIONS.ADD);
+  const isQueueEmpty = hasNowPlaying && (itemsToRender?.length ?? 0) === 0;
 
   const handleDeleteCollection = useCallback(() => {
     editableCollection?.deleteCollection?.();
@@ -336,6 +413,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ),
       });
@@ -361,6 +441,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     handleDeleteCollection,
     nextUpTitle,
     nowPlayingTitle,
+    isQueueEmpty,
+    emptyMessage,
+    clearLabel,
     hasAdd,
     handleCreatePlaylist,
   ]);
@@ -470,6 +553,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ) : null}
         {hasAdd ? (

package/Components/ModalComponent/SortableList.tsx

@@ -87,9 +87,7 @@ export const SortableList = ({
   const [localData, setLocalData] = useState(sortableData);
 
   useEffect(() => {
-    setLocalData((localData) =>
-      localData !== sortableData ? sortableData : localData
-    );
+    setLocalData(sortableData);
   }, [sortableData]);
 
   const handleDragEnd = useCallback(
@@ -142,6 +140,7 @@ export const SortableList = ({
     >
       {renderHeader}
       <Sortable.Grid
+        key={`sortable-grid-${localData.length}`}
         scrollableRef={scrollableRef}
         customHandle
         columns={columns}

package/Components/ModalComponent/TextInputContent.tsx

@@ -9,6 +9,7 @@ import {
   AudioPlayerButton,
   VARIANT_TEXT_ONLY,
 } from "./AudioPlayer/Components/Button";
+import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 export type TextInputContentProps = {
   /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
@@ -19,17 +20,25 @@ export type TextInputContentProps = {
   inputLabel?: string;
   defaultValue?: string;
   buttonLabel: string;
+  validationLabel?: string;
+  maxLength?: number;
   actions: ActionType[];
   actionContext?: Record<string, any>;
 };
 
+// Spacing mirrors the `component_style_*` keys in text input component.
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 20,
-    paddingBottom: 8,
+    backgroundColor: "transparent", // component_style_background_color
+    paddingLeft: 40, // component_style_padding_left
+    paddingRight: 40, // component_style_padding_right
+    paddingTop: 0, // component_style_padding_top
+    paddingBottom: 0, // component_style_padding_bottom
+    marginTop: 20, // component_style_margin_top
+    marginBottom: 20, // component_style_margin_bottom
   },
   inputWrap: {
-    marginTop: 8,
+    // Gap down to the submit button; owned by the modal, not the reference.
     marginBottom: 24,
   },
 });
@@ -45,11 +54,24 @@ export function TextInputContent(props: TextInputContentProps) {
     buttonLabel,
     actions,
     actionContext,
+    maxLength = 255,
+    validationLabel,
   } = props;
 
   const [textValue, setTextValue] = useState(defaultValue);
   const [submitting, setSubmitting] = useState(false);
 
+  const validationMessage =
+    textValue.length > maxLength
+      ? validationLabel || "Too many characters"
+      : undefined;
+
+  if (!validationLabel) {
+    logger.warn(
+      "Modal/TextInputContent: Validation label (validationLabel) is not provided, using default message 'Too many characters'."
+    );
+  }
+
   const onSubmit = useCallback(async () => {
     if (submitting) {
       return;
@@ -97,6 +119,7 @@ export function TextInputContent(props: TextInputContentProps) {
             label: inputLabel,
           }}
           value={textValue}
+          validationMessage={validationMessage}
           onChangeText={setTextValue}
           onClearPress={() => setTextValue("")}
         />
@@ -105,7 +128,7 @@ export function TextInputContent(props: TextInputContentProps) {
         configuration={VARIANT_TEXT_ONLY}
         data={{ title: buttonLabel }}
         onPress={onSubmit}
-        disabled={submitting}
+        disabled={!!validationMessage || submitting}
       />
     </View>
   );

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -83,9 +83,14 @@ jest.mock("../AudioPlayer/Components/Item", () => ({
 }));
 
 const mockAudioPlayerButtonProps: Array<any> = [];
+const mockNowPlayingHeaderProps: Array<any> = [];
 
 jest.mock("../AudioPlayer/Components", () => ({
-  NowPlayingHeaderSection: () => null,
+  NowPlayingHeaderSection: (props: any) => {
+    mockNowPlayingHeaderProps.push(props);
+
+    return null;
+  },
   AudioPlayerButton: (props: any) => {
     const { Text } = require("react-native");
 
@@ -216,6 +221,74 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     });
   });
 
+  it("shows the empty Next Up message only when now playing is on and the list is empty", () => {
+    mockNowPlayingHeaderProps.length = 0;
+    const { BehaviorSubject } = require("rxjs");
+
+    const emptyQueue = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    emptyQueue.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    const { rerender } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[]}
+        emptyMessage="Queued items will be added here"
+        viewModel={emptyQueue}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: true,
+      emptyMessage: "Queued items will be added here",
+    });
+
+    const withItem = new ContentViewModel({
+      title: "Queue",
+      items: [{ id: "t1", title: "Track 1" }],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    withItem.editableCollection = {
+      items$: new BehaviorSubject([{ id: "t1", title: "Track 1" }]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    rerender(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[{ id: "t1", title: "Track 1", label: "Track 1" }]}
+        emptyMessage="Queued items will be added here"
+        viewModel={withItem}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: false,
+    });
+
+    mockNowPlayingHeaderProps.length = 0;
+
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(mockNowPlayingHeaderProps).toHaveLength(0);
+  });
+
   it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
     const CustomComponent = () => (
       <React.Fragment>Custom Content</React.Fragment>

package/Components/ModalComponent/__tests__/TextInputContent.test.tsx

@@ -19,7 +19,7 @@ jest.mock(
 );
 
 jest.mock("../AudioPlayer/Components/Input", () => ({
-  AudioPlayerInput: ({ value, onChangeText, data }: any) => {
+  AudioPlayerInput: ({ value, onChangeText, data, validationMessage }: any) => {
     const { TextInput, Text } = require("react-native");
 
     return (
@@ -31,6 +31,9 @@ jest.mock("../AudioPlayer/Components/Input", () => ({
           onChangeText={onChangeText}
           placeholder={data?.placeholder}
         />
+        {validationMessage ? (
+          <Text testID="input-validation-message">{validationMessage}</Text>
+        ) : null}
       </>
     );
   },
@@ -87,6 +90,16 @@ describe("TextInputContent", () => {
     expect(screen.getByText("Update")).toBeTruthy();
   });
 
+  it("shows validation below the input when its value is too long", () => {
+    render(<TextInputContent maxLength={100} {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "x".repeat(101));
+
+    expect(screen.getByTestId("input-validation-message")).toHaveTextContent(
+      "Too many characters"
+    );
+  });
+
   it("on submit merges name into sendCloudEvent data then dismisses", async () => {
     render(<TextInputContent {...baseProps} />);
 

package/Components/ModalComponent/showTextInput.ts

@@ -13,8 +13,15 @@ export async function showTextInputAction(
   action: ActionType,
   context?: Record<string, any>
 ): Promise<ActionResult> {
-  const { headerTitle, inputLabel, defaultValue, buttonLabel, actions } =
-    action.options || {};
+  const {
+    headerTitle,
+    inputLabel,
+    defaultValue,
+    buttonLabel,
+    validationLabel,
+    actions,
+    maxLength,
+  } = action.options || {};
 
   if (!headerTitle || !buttonLabel || !actions || !actions.length) {
     return ActionResult.Error;
@@ -30,10 +37,12 @@ export async function showTextInputAction(
         content: {
           component: TextInputContent,
           props: {
+            maxLength,
             inputLabel,
             defaultValue: defaultValue ?? "",
             buttonLabel,
             actions,
+            validationLabel,
           },
         },
       },

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

@@ -10,6 +10,28 @@ jest.useFakeTimers({ legacyFakeTimers: true });
 // isConnected/isInternetReachable/details fields, so the mock has to mirror
 // that shape for online/offline to actually be distinguishable.
 let mockConnectionStatus = false;
+let mockStillOfflineAfterResumeCount = 0;
+
+const mockComponentsLogger = {
+  log: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  warning: jest.fn(),
+  error: jest.fn(),
+};
+
+jest.mock("../../../Helpers/logger", () => {
+  const proxy = {
+    log: (event) => mockComponentsLogger.log(event),
+    debug: (event) => mockComponentsLogger.debug(event),
+    info: (event) => mockComponentsLogger.info(event),
+    warning: (event) => mockComponentsLogger.warning(event),
+    error: (event) => mockComponentsLogger.error(event),
+    addSubsystem: () => proxy,
+  };
+
+  return { componentsLogger: proxy };
+});
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
@@ -20,6 +42,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
       details: {},
       isConnected: mockConnectionStatus,
       isInternetReachable: mockConnectionStatus,
+      stillOfflineAfterResumeCount: mockStillOfflineAfterResumeCount,
     })),
   };
 });
@@ -58,6 +81,7 @@ describe("OfflineHandler", () => {
 
   beforeEach(() => {
     mockConnectionStatus = false;
+    mockStillOfflineAfterResumeCount = 0;
   });
 
   it("renders its children without wrapping them in a notification view", () => {
@@ -131,4 +155,89 @@ describe("OfflineHandler", () => {
 
     unsubscribe();
   });
+
+  it("re-shows the offline toast when still offline after app resume", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
+    handleShowToast.mockClear();
+
+    mockStillOfflineAfterResumeCount = 1;
+    rerender(<OfflineHandler />);
+
+    expect(handleShowToast).toHaveBeenCalledTimes(1);
+
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "No internet connection",
+        timeout: 5000,
+      }),
+      expect.any(Function)
+    );
+
+    // further renders with the same counter must not re-emit
+    rerender(<OfflineHandler />);
+    expect(handleShowToast).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+  });
+
+  it("does not re-show the offline toast for a counter bump while online", () => {
+    mockConnectionStatus = true;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
+
+    mockStillOfflineAfterResumeCount = 1;
+    rerender(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("does not emit on mount just because the counter is already > 0", () => {
+    mockConnectionStatus = true;
+    mockStillOfflineAfterResumeCount = 3;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("logs toast emissions at info level", () => {
+    mockConnectionStatus = false;
+    mockComponentsLogger.info.mockClear();
+    mockComponentsLogger.warning.mockClear();
+
+    const { rerender } = render(<OfflineHandler />);
+
+    mockConnectionStatus = true;
+    rerender(<OfflineHandler />);
+
+    expect(mockComponentsLogger.info).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "OfflineHandler: device is offline, emit toast",
+      })
+    );
+
+    expect(mockComponentsLogger.info).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "OfflineHandler: device is back online, emit toast",
+      })
+    );
+
+    expect(mockComponentsLogger.warning).not.toHaveBeenCalled();
+  });
 });

package/Components/OfflineHandler/index.tsx

@@ -29,12 +29,22 @@ export const OfflineHandler = ({ children }: Props) => {
   const { online } = parseConnectionInfo(connectionInfo);
   const prevOnline = usePrevious(online);
 
+  const stillOfflineAfterResumeCount =
+    connectionInfo?.stillOfflineAfterResumeCount ?? 0;
+
+  const prevStillOfflineAfterResumeCount = usePrevious(
+    stillOfflineAfterResumeCount
+  );
+
   const emitShowToast = useSubscriberFor(SHOW_TOAST_EVENT);
 
   const { message, extraMessage, style } = useOfflineHandlerProps(online);
 
   const showOnlineToast = useCallback(() => {
-    logger.log("Device is back online, emit toast");
+    logger.info({
+      message: "OfflineHandler: device is back online, emit toast",
+      data: { online, prevOnline },
+    });
 
     emitShowToast({
       id: OFFLINE_STATUS_TOAST_ID,
@@ -43,10 +53,13 @@ export const OfflineHandler = ({ children }: Props) => {
       style,
       timeout: timers.goingOnline,
     });
-  }, [emitShowToast, message, extraMessage, style]);
+  }, [emitShowToast, message, extraMessage, style, online, prevOnline]);
 
   const showOfflineToast = useCallback(() => {
-    logger.log("Device went offline, emit toast");
+    logger.info({
+      message: "OfflineHandler: device is offline, emit toast",
+      data: { online, prevOnline, stillOfflineAfterResumeCount },
+    });
 
     emitShowToast({
       id: OFFLINE_STATUS_TOAST_ID,
@@ -55,7 +68,15 @@ export const OfflineHandler = ({ children }: Props) => {
       style,
       timeout: timers.goingOffline,
     });
-  }, [emitShowToast, message, extraMessage, style]);
+  }, [
+    emitShowToast,
+    message,
+    extraMessage,
+    style,
+    online,
+    prevOnline,
+    stillOfflineAfterResumeCount,
+  ]);
 
   useEffect(() => {
     // On mount there is no previous state yet: only surface the offline toast
@@ -79,5 +100,22 @@ export const OfflineHandler = ({ children }: Props) => {
     }
   }, [online, prevOnline, showOfflineToast, showOnlineToast]);
 
+  useEffect(() => {
+    // NetworkStatusProvider bumps this counter when the app resumed while offline
+    // and is still offline after the verification delay: remind the user.
+    if (
+      prevStillOfflineAfterResumeCount !== undefined &&
+      stillOfflineAfterResumeCount > prevStillOfflineAfterResumeCount &&
+      !online
+    ) {
+      showOfflineToast();
+    }
+  }, [
+    stillOfflineAfterResumeCount,
+    prevStillOfflineAfterResumeCount,
+    online,
+    showOfflineToast,
+  ]);
+
   return children;
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -404,10 +404,17 @@ const PlayerContainerComponent = (props: Props) => {
         const { eventType } = event;
 
         if (!isLanguageOverlayVisible && eventType === "menu") {
+          // First Back dismisses Play Next, the next one closes the player
+          if (playNextOverlayState) {
+            playNextOverlayState.handleUserCancelPlayNext();
+
+            return;
+          }
+
           close();
         }
       },
-    [close]
+    [close, playNextOverlayState]
   );
 
   // Effects

package/Components/Transitioner/AnimationManager.js

@@ -66,7 +66,7 @@ export class AnimationManager {
    *
    * @param {object} to contains style to animate and scenes index
    * @param {string} action push|back
-   * @param {number} stepsBack number of steps back
+   * @param {number} [stepsBack] number of steps back, used by the back action only
    */
   stateForAction({ to, scenes }, action, stepsBack) {
     let rootIndex = to.index;

package/Components/Transitioner/Scene.tsx

@@ -17,13 +17,14 @@ const fullWidthDimensions = {
 type Props = {
   children: any;
   style: any;
-  pointerEvents: ViewProps["pointerEvents"];
-  overlayStyle: ViewStyle;
-  animating: boolean;
+  pointerEvents?: ViewProps["pointerEvents"];
+  overlayStyle?: ViewStyle;
+  animating?: boolean;
   contentStyle: ViewStyle;
   pathname: string;
   isActive: boolean;
   screenData: NavigationScreenData;
+  screenUniqueId?: string;
 };
 
 export function CurrentScreenContextProvider({