@applicaster/quick-brick-core 16.0.0-rc.53 → 16.0.0-rc.55

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -24,12 +24,19 @@ export interface ToastStyle {
   letterSpacing?: number;
 }
 
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
 export interface ToastPayload {
   id?: string;
   message: string;
   extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
-  timeout?: number; // ms; if omitted, toast stays until dismissed
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
   style?: ToastStyle;
+  // stamped by the showToast action; Theme confirmation styles apply when
+  // source === CONFIRMATION_TOAST_SOURCE ("confirmation")
+  source?: string;
   [key: string]: unknown;
 }
 
@@ -122,7 +129,11 @@ class NotificationToastManager {
   };
 
   private handleShowToast = (payload: ToastPayload) => {
-    const item = { ...payload, id: payload.id ?? String(this.nextId++) };
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
 
     const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
 

package/App/NotificationToastRenderer/NotificationToastRenderer.tsx

@@ -1,16 +1,22 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
 import {
-  View,
-  Text,
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  ViewStyle,
-} from "react-native";
-
-import { notificationToastManager } from "./NotificationToastManager";
+  Directions,
+  Gesture,
+  GestureDetector,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
 import { useNotificationToastState } from "./useNotificationToastState";
 import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
 
 const styles = StyleSheet.create({
   notificationView: {
@@ -28,6 +34,7 @@ type NumberBoolean = 0 | 1;
 
 export const NotificationToastRenderer = ({ children }) => {
   const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const toast = useNotificationToastState();
 
@@ -36,15 +43,22 @@ export const NotificationToastRenderer = ({ children }) => {
 
   const yPosition = useRef(new Animated.Value(0)).current;
 
-  const backgroundColor = toast?.style?.backgroundColor ?? "#000";
-  const color = toast?.style?.color ?? "#fff";
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
 
   const textStyles = {
     color,
-    fontFamily: toast?.style?.fontFamily,
-    fontSize: toast?.style?.fontSize,
-    lineHeight: toast?.style?.lineHeight,
-    letterSpacing: toast?.style?.letterSpacing,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
   };
 
   const animatedViewStyles: ViewStyle = {
@@ -64,6 +78,20 @@ export const NotificationToastRenderer = ({ children }) => {
     backgroundColor,
   };
 
+  const flingGesture = useMemo(
+    () =>
+      Gesture.Fling()
+        .direction(Directions.UP)
+        .enabled(!!toast)
+        .runOnJS(true)
+        .onEnd((_event, success) => {
+          if (success) {
+            notificationToastManager.dismiss();
+          }
+        }),
+    [toast]
+  );
+
   useEffect(() => {
     if (toast) {
       setNotificationOpacity(1);
@@ -83,20 +111,24 @@ export const NotificationToastRenderer = ({ children }) => {
   }, [toast]);
 
   return (
-    <View testID="NotificationToastRenderer" style={StyleSheet.absoluteFill}>
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
       {children}
-      <TouchableWithoutFeedback
-        testID="NotificationToastRenderer-touchable"
-        style={styles.notificationView}
-        onPress={() => notificationToastManager.dismiss()}
-      >
-        <Animated.View style={animatedViewStyles}>
+      <GestureDetector gesture={flingGesture}>
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
           <View style={{ height: statusHeight, backgroundColor }} />
           <Text testID="NotificationToastRenderer-message" style={textStyles}>
             {toast?.message}
           </Text>
         </Animated.View>
-      </TouchableWithoutFeedback>
+      </GestureDetector>
     </View>
   );
 };

package/App/NotificationToastRenderer/__tests__/NotificationToastManager.test.ts

@@ -1,6 +1,7 @@
 import {
   notificationToastManager,
   NOTIFICATION_TOAST_EVENTS,
+  DEFAULT_TOAST_TIMEOUT,
 } from "../NotificationToastManager";
 import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
@@ -210,4 +211,27 @@ describe("NotificationToastManager", () => {
 
     expect(onShow).not.toHaveBeenCalled();
   });
+
+  it("defaults timeout to DEFAULT_TOAST_TIMEOUT (4000ms) when omitted and auto-hides", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      message: "Added to queue",
+    });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Added to queue",
+        timeout: DEFAULT_TOAST_TIMEOUT,
+      }),
+      expect.any(Function)
+    );
+
+    jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
 });

package/App/NotificationToastRenderer/__tests__/NotificationToastRenderer.test.tsx

@@ -1,14 +1,68 @@
 import React from "react";
 import { Text } from "react-native";
 import { act, fireEvent, render } from "@testing-library/react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
-import { notificationToastManager } from "../NotificationToastManager";
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "../NotificationToastManager";
 import { NotificationToastRenderer } from "../NotificationToastRenderer";
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const GestureDetector = ReactActual.forwardRef(
+    ({ gesture, children }: any, ref: any) => {
+      const onEnd = gesture?.handlers?.onEnd;
+
+      return (
+        <RN.View
+          ref={ref}
+          testID="NotificationToastRenderer-fling-handler"
+          accessibilityState={{ disabled: gesture?.config?.enabled === false }}
+          // drive Gesture.Fling().onEnd via a test-only event
+          onEnd={() => onEnd?.({}, true)}
+          onEndFailed={() => onEnd?.({}, false)}
+        >
+          {children}
+        </RN.View>
+      );
+    }
+  );
+
+  return {
+    __esModule: true,
+    ...actual,
+    GestureDetector,
+  };
+});
+
+const mockedUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+const confirmationTheme: Partial<BaseThemePropertiesMobile> = {
+  confirmation_toast_style_background_color: "#0188FF",
+  confirmation_toast_style_color: "#EFEFEF",
+  confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+  confirmation_toast_style_android_font_family: "Roboto-Medium",
+  confirmation_toast_style_ios_font_size: 14,
+  confirmation_toast_style_android_font_size: 14,
+  confirmation_toast_style_ios_line_height: 44,
+  confirmation_toast_style_android_line_height: 44,
+  confirmation_toast_style_ios_letter_spacing: -1.4,
+  confirmation_toast_style_android_letter_spacing: -1.4,
+};
+
 describe("NotificationToastRenderer", () => {
   beforeAll(() => {
     jest.spyOn(console, "log").mockImplementation(() => {});
@@ -18,6 +72,12 @@ describe("NotificationToastRenderer", () => {
     (console.log as jest.Mock).mockRestore();
   });
 
+  beforeEach(() => {
+    mockedUseTheme.mockReturnValue(
+      confirmationTheme as BaseThemePropertiesMobile
+    );
+  });
+
   afterEach(() => {
     // drain whatever is left showing/queued so the next test starts clean
     for (let i = 0; i < 10; i++) {
@@ -73,13 +133,101 @@ describe("NotificationToastRenderer", () => {
     ).toEqual(expect.objectContaining({ color: "#123456", fontSize: 20 }));
   });
 
-  it("dismisses the toast when the touchable area is pressed", () => {
+  it("applies Theme confirmation styles when source is confirmation", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Added to queue",
+        source: CONFIRMATION_TOAST_SOURCE,
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 14,
+        lineHeight: 44,
+        letterSpacing: -1.4,
+      })
+    );
+  });
+
+  it("shallow-merges style overrides onto Theme confirmation defaults", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Playlist created",
+        source: CONFIRMATION_TOAST_SOURCE,
+        style: { backgroundColor: "#00FF00", fontSize: 20 },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 20,
+        lineHeight: 44,
+      })
+    );
+  });
+
+  it("does not apply Theme confirmation styles for non-confirmation toasts", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "You are offline",
+        style: { color: "#abcdef" },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#abcdef",
+      })
+    );
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style.fontSize
+    ).toBeUndefined();
+  });
+
+  it("dismisses the toast on a successful upward fling", () => {
     const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
 
     const { getByTestId } = render(<NotificationToastRenderer />);
 
-    fireEvent.press(getByTestId("NotificationToastRenderer-touchable"));
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(getByTestId("NotificationToastRenderer-fling-handler"), "end");
 
     expect(dismissSpy).toHaveBeenCalled();
   });
+
+  it("does not dismiss when the fling ends unsuccessfully", () => {
+    const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
+
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(
+      getByTestId("NotificationToastRenderer-fling-handler"),
+      "endFailed"
+    );
+
+    expect(dismissSpy).not.toHaveBeenCalled();
+  });
 });

package/App/NotificationToastRenderer/__tests__/resolveConfirmationToastStyle.test.ts

@@ -0,0 +1,118 @@
+import { resolveConfirmationToastStyle } from "../resolveConfirmationToastStyle";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // manifestKeyParser captures currentPlatform at module load from this map
+  platformSelect: jest.fn((platforms) => {
+    if (platforms?.ios === "ios" && platforms?.android === "android") {
+      return "ios";
+    }
+
+    return platforms?.default;
+  }),
+}));
+
+describe("resolveConfirmationToastStyle", () => {
+  const theme = {
+    confirmation_toast_style_background_color: "#0188FF",
+    confirmation_toast_style_color: "#EFEFEF",
+    confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+    confirmation_toast_style_android_font_family: "Roboto-Medium",
+    confirmation_toast_style_ios_font_size: 14,
+    confirmation_toast_style_android_font_size: 16,
+    confirmation_toast_style_ios_line_height: 44,
+    confirmation_toast_style_android_line_height: 40,
+    confirmation_toast_style_ios_letter_spacing: -1.4,
+    confirmation_toast_style_android_letter_spacing: -0.5,
+  };
+
+  it("maps Theme confirmation_toast_style_* keys via getAllSpecificStyles (iOS platform)", () => {
+    expect(resolveConfirmationToastStyle(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 14,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("ignores other-platform keys for the current platform", () => {
+    const result = resolveConfirmationToastStyle(theme);
+
+    expect(result.fontFamily).toBe("SFProText-Semibold");
+    expect(result.fontSize).toBe(14);
+
+    expect(result).not.toEqual(
+      expect.objectContaining({
+        fontFamily: "Roboto-Medium",
+        fontSize: 16,
+      })
+    );
+  });
+
+  it("shallow-merges override style on top of Theme defaults", () => {
+    expect(
+      resolveConfirmationToastStyle(theme, {
+        backgroundColor: "#00FF00",
+        fontSize: 20,
+      })
+    ).toEqual({
+      backgroundColor: "#00FF00",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 20,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("returns override fields when Theme is missing", () => {
+    expect(resolveConfirmationToastStyle(undefined, { color: "#fff" })).toEqual(
+      {
+        color: "#fff",
+      }
+    );
+  });
+});
+
+describe("resolveConfirmationToastStyle (android platform)", () => {
+  it("maps android platform Theme keys", () => {
+    jest.resetModules();
+
+    jest.doMock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+      platformSelect: jest.fn((platforms) => {
+        if (platforms?.ios === "ios" && platforms?.android === "android") {
+          return "android";
+        }
+
+        return platforms?.default;
+      }),
+    }));
+
+    const {
+      resolveConfirmationToastStyle: resolveAndroid,
+    } = require("../resolveConfirmationToastStyle");
+
+    const theme = {
+      confirmation_toast_style_background_color: "#0188FF",
+      confirmation_toast_style_color: "#EFEFEF",
+      confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+      confirmation_toast_style_android_font_family: "Roboto-Medium",
+      confirmation_toast_style_ios_font_size: 14,
+      confirmation_toast_style_android_font_size: 16,
+      confirmation_toast_style_ios_line_height: 44,
+      confirmation_toast_style_android_line_height: 40,
+      confirmation_toast_style_ios_letter_spacing: -1.4,
+      confirmation_toast_style_android_letter_spacing: -0.5,
+    };
+
+    expect(resolveAndroid(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "Roboto-Medium",
+      fontSize: 16,
+      lineHeight: 40,
+      letterSpacing: -0.5,
+    });
+  });
+});

package/App/NotificationToastRenderer/index.tsx

@@ -1,5 +1,11 @@
 export { notificationToastManager } from "./NotificationToastManager";
 
+export type { ToastPayload, ToastStyle } from "./NotificationToastManager";
+
+export { CONFIRMATION_TOAST_SOURCE } from "./NotificationToastManager";
+
 export { NotificationToastRenderer } from "./NotificationToastRenderer";
 
 export { useNotificationHeight } from "./useNotificationHeight";
+
+export { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";

package/App/NotificationToastRenderer/resolveConfirmationToastStyle.ts

@@ -0,0 +1,33 @@
+import { getAllSpecificStyles } from "@applicaster/zapp-react-native-utils/configurationUtils/manifestKeyParser";
+
+import { ToastStyle } from "./NotificationToastManager";
+
+const CONFIRMATION_TOAST_STYLE_COMPONENT = "confirmation_toast";
+
+/**
+ * Builds confirmation-toast style from Theme defaults via getAllSpecificStyles,
+ * then shallow-merges any caller override on top.
+ *
+ * Expected Theme keys follow:
+ * `confirmation_toast_style_[platform_]<style_name>`
+ * e.g. confirmation_toast_style_background_color,
+ *      confirmation_toast_style_ios_font_family
+ */
+export function resolveConfirmationToastStyle(
+  theme: Partial<BaseThemePropertiesMobile> | null | undefined,
+  overrideStyle?: ToastStyle | null
+): ToastStyle {
+  const outStyles: Record<string, ToastStyle> = {};
+
+  getAllSpecificStyles({
+    configuration: { ...(theme ?? {}) },
+    componentName: CONFIRMATION_TOAST_STYLE_COMPONENT,
+    subComponentName: "",
+    outStyles,
+  });
+
+  return {
+    ...outStyles.default,
+    ...overrideStyle,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-rc.53",
+  "version": "16.0.0-rc.55",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.53",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.53",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.53",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.53",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.53",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.53",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.53",
+    "@applicaster/applicaster-types": "16.0.0-rc.55",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.55",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.55",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.55",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.55",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.55",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.55",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",