zh-web-sdk 2.16.1 → 2.17.0

package/src/iframe-container/hooks/__tests__/use-style-updates.test.ts

@@ -1,430 +0,0 @@
-import { renderHook, act } from "@testing-library/react";
-import { useStyleUpdates, type StyleConfig } from "../use-style-updates";
-
-// Jest mock for setTimeout
-jest.useFakeTimers();
-
-describe("useStyleUpdates", () => {
-  const defaultStyles: StyleConfig = {
-    appWrapperStyle: { position: "fixed", zIndex: 999999 },
-    modalStyle: { padding: 0, backgroundColor: "#FFF" },
-    iframeWrapperStyle: { overflow: "hidden" },
-    iframeStyle: { width: "100%", height: "100%" },
-  };
-
-  const zeroHashAppURL = "https://app.example.com/";
-
-  beforeEach(() => {
-    // Reset console.log mock and window.location.origin
-    jest.clearAllMocks();
-    jest.clearAllTimers();
-    Object.defineProperty(window, "location", {
-      value: {
-        origin: "http://localhost",
-      },
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-  });
-
-  describe("initial state", () => {
-    it("should initialize with default styles", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(result.current.styles).toEqual(defaultStyles);
-      expect(result.current.stylesLoaded).toBe(false);
-    });
-
-    it("should have handleStyleConfig function", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(typeof result.current.handleStyleConfig).toBe("function");
-    });
-  });
-
-  describe("handleStyleConfig with valid origins", () => {
-    it("should accept styles from matching zeroHashAppURL origin", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const incomingStyles: Partial<StyleConfig> = {
-        iframeStyle: { borderRadius: "8px" },
-      };
-
-      let success = false;
-      act(() => {
-        success = result.current.handleStyleConfig(
-          incomingStyles,
-          "https://app.example.com"
-        );
-      });
-
-      expect(success).toBe(true);
-      expect(result.current.stylesLoaded).toBe(true);
-      expect(result.current.styles.iframeStyle.borderRadius).toBe("8px");
-      expect(result.current.styles.iframeStyle.width).toBe("100%");
-    });
-
-    it("should accept styles from window.location.origin", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const incomingStyles: Partial<StyleConfig> = {
-        modalStyle: { padding: "20px" },
-      };
-
-      let success = false;
-      act(() => {
-        success = result.current.handleStyleConfig(
-          incomingStyles,
-          "http://localhost"
-        );
-      });
-
-      expect(success).toBe(true);
-      expect(result.current.stylesLoaded).toBe(true);
-      expect(result.current.styles.modalStyle.padding).toBe("20px");
-      expect(result.current.styles.modalStyle.backgroundColor).toBe("#FFF");
-    });
-
-    it("should merge partial styles with defaults", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const incomingStyles: Partial<StyleConfig> = {
-        appWrapperStyle: { opacity: 0.9 },
-        iframeStyle: { border: "1px solid red" },
-      };
-
-      act(() => {
-        result.current.handleStyleConfig(
-          incomingStyles,
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.styles.appWrapperStyle).toEqual({
-        position: "fixed",
-        zIndex: 999999,
-        opacity: 0.9,
-      });
-      expect(result.current.styles.iframeStyle).toEqual({
-        width: "100%",
-        height: "100%",
-        border: "1px solid red",
-      });
-      expect(result.current.styles.modalStyle).toEqual(defaultStyles.modalStyle);
-      expect(result.current.styles.iframeWrapperStyle).toEqual(
-        defaultStyles.iframeWrapperStyle
-      );
-    });
-
-    it("should override existing styles when called multiple times", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      // First update
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { borderRadius: "8px" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.styles.iframeStyle.borderRadius).toBe("8px");
-
-      // Second update - should merge, not replace
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { border: "1px solid blue" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.styles.iframeStyle.borderRadius).toBe("8px");
-      expect(result.current.styles.iframeStyle.border).toBe("1px solid blue");
-      expect(result.current.styles.iframeStyle.width).toBe("100%");
-    });
-  });
-
-  describe("handleStyleConfig with invalid origins", () => {
-    it("should reject styles from mismatched origin", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const incomingStyles: Partial<StyleConfig> = {
-        iframeStyle: { borderRadius: "16px" },
-      };
-
-      let success = false;
-      act(() => {
-        success = result.current.handleStyleConfig(
-          incomingStyles,
-          "https://untrusted.com"
-        );
-      });
-
-      expect(success).toBe(false);
-      expect(result.current.stylesLoaded).toBe(false);
-      expect(result.current.styles).toEqual(defaultStyles);
-    });
-
-    it("should not modify state when origin validation fails", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      act(() => {
-        result.current.handleStyleConfig(
-          { modalStyle: { backgroundColor: "#000" } },
-          "https://malicious.com"
-        );
-      });
-
-      expect(result.current.styles.modalStyle.backgroundColor).toBe("#FFF");
-      expect(result.current.stylesLoaded).toBe(false);
-    });
-  });
-
-  describe("style merging behavior", () => {
-    it("should preserve all style properties when merging partial updates", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const complexStyles: Partial<StyleConfig> = {
-        modalStyle: {
-          padding: "20px",
-          backgroundColor: "#000",
-          height: "calc(100% - 50px)",
-          maxWidth: "calc(100% - 60px)",
-        },
-        appWrapperStyle: { zIndex: 9999 },
-        iframeWrapperStyle: { overflow: "visible" },
-        iframeStyle: { borderRadius: "8px" },
-      };
-
-      act(() => {
-        result.current.handleStyleConfig(
-          complexStyles,
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.styles.modalStyle).toEqual(complexStyles.modalStyle);
-      expect(result.current.styles.appWrapperStyle).toEqual({
-        position: "fixed",
-        zIndex: 9999,
-      });
-      expect(result.current.styles.iframeWrapperStyle).toEqual({
-        overflow: "visible",
-      });
-      expect(result.current.styles.iframeStyle).toEqual({
-        width: "100%",
-        height: "100%",
-        borderRadius: "8px",
-      });
-    });
-
-    it("should not include undefined styles from incoming updates", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      const incomingStyles: Partial<StyleConfig> = {
-        iframeStyle: { width: "50%" },
-        // modalStyle is intentionally not included
-      };
-
-      act(() => {
-        result.current.handleStyleConfig(
-          incomingStyles,
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.styles.iframeStyle).toEqual({
-        width: "50%",
-        height: "100%",
-      });
-      expect(result.current.styles.modalStyle).toEqual(defaultStyles.modalStyle);
-    });
-  });
-
-  describe("stylesLoaded flag", () => {
-    it("should set stylesLoaded to true after successful style config", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(result.current.stylesLoaded).toBe(false);
-
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { borderRadius: "8px" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.stylesLoaded).toBe(true);
-    });
-
-    it("should remain true after multiple successful updates", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { borderRadius: "8px" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.stylesLoaded).toBe(true);
-
-      act(() => {
-        result.current.handleStyleConfig(
-          { modalStyle: { padding: "10px" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.stylesLoaded).toBe(true);
-    });
-
-    it("should remain false after failed origin validation", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { borderRadius: "8px" } },
-          "https://untrusted.com"
-        );
-      });
-
-      expect(result.current.stylesLoaded).toBe(false);
-    });
-  });
-
-  describe("timeout fallback", () => {
-    it("should set stylesLoaded to true after 4.5 seconds if STYLE_CONFIG is not received", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(result.current.stylesLoaded).toBe(false);
-
-      act(() => {
-        jest.advanceTimersByTime(4500);
-      });
-
-      expect(result.current.stylesLoaded).toBe(true);
-    });
-
-    it("should not change stylesLoaded if STYLE_CONFIG is received before timeout", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(result.current.stylesLoaded).toBe(false);
-
-      // Receive STYLE_CONFIG before timeout
-      act(() => {
-        result.current.handleStyleConfig(
-          { iframeStyle: { borderRadius: "8px" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(result.current.stylesLoaded).toBe(true);
-
-      // Advance timers past the timeout
-      act(() => {
-        jest.advanceTimersByTime(5000);
-      });
-
-      // Should still be true
-      expect(result.current.stylesLoaded).toBe(true);
-    });
-
-    it("should preserve default styles until timeout triggers", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      expect(result.current.styles).toEqual(defaultStyles);
-
-      act(() => {
-        jest.advanceTimersByTime(4500);
-      });
-
-      // Styles should remain unchanged (defaults)
-      expect(result.current.styles).toEqual(defaultStyles);
-      expect(result.current.stylesLoaded).toBe(true);
-    });
-
-    it("should clean up timeout on unmount", () => {
-      const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
-
-      const { unmount } = renderHook(() =>
-        useStyleUpdates(zeroHashAppURL, defaultStyles)
-      );
-
-      unmount();
-
-      expect(clearTimeoutSpy).toHaveBeenCalled();
-      clearTimeoutSpy.mockRestore();
-    });
-  });
-
-  describe("origin validation scenarios", () => {
-    it("should handle zeroHashAppURL with trailing slash", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates("https://app.example.com/", defaultStyles)
-      );
-
-      let success = false;
-      act(() => {
-        success = result.current.handleStyleConfig(
-          { iframeStyle: { width: "50%" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(success).toBe(true);
-      expect(result.current.styles.iframeStyle.width).toBe("50%");
-    });
-
-    it("should handle zeroHashAppURL without trailing slash", () => {
-      const { result } = renderHook(() =>
-        useStyleUpdates("https://app.example.com", defaultStyles)
-      );
-
-      let success = false;
-      act(() => {
-        success = result.current.handleStyleConfig(
-          { iframeStyle: { width: "50%" } },
-          "https://app.example.com"
-        );
-      });
-
-      expect(success).toBe(true);
-      expect(result.current.styles.iframeStyle.width).toBe("50%");
-    });
-  });
-});

package/src/iframe-container/hooks/use-style-updates.ts

@@ -1,82 +0,0 @@
-import { CSSProperties, useCallback, useEffect, useState } from "react";
-
-export type StyleConfig = {
-  appWrapperStyle: CSSProperties;
-  modalStyle: CSSProperties;
-  iframeWrapperStyle: CSSProperties;
-  iframeStyle: CSSProperties;
-};
-
-/**
- * Hook to manage style state and updates from postMessage events.
- *
- * Encapsulates:
- * - Style state management (current styles and loaded status)
- * - Style merging logic via postMessage
- * - Origin validation
- * - Fallback timeout to ensure modal displays even if STYLE_CONFIG is not received
- *
- * @param zeroHashAppURL - The app URL used for origin validation
- * @param defaultStyles - Default style configuration to use as fallback
- * @returns Object containing current styles, loaded status, and handler function
- */
-export const useStyleUpdates = (
-  zeroHashAppURL: string,
-  defaultStyles: StyleConfig,
-) => {
-  const [styles, setStyles] = useState<StyleConfig>(defaultStyles);
-  const [stylesLoaded, setStylesLoaded] = useState(false);
-
-  /**
-   * Fallback timeout to ensure modal is displayed even if STYLE_CONFIG postMessage
-   * is not received or the app crashes before sending it. After 4.5 seconds,
-   * if stylesLoaded is still false, we mark it as true to show the modal with default styles.
-   */
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setStylesLoaded((prevState) => prevState || true);
-    }, 4500);
-
-    return () => clearTimeout(timeoutId);
-  }, []);
-
-  const handleStyleConfig = useCallback(
-    (incomingStyles: Partial<StyleConfig>, eventOrigin: string): boolean => {
-      const zhAppsURLOrigin = new URL(zeroHashAppURL).origin;
-      /**
-       * Here we have 2 scenarios, one where the postMessage comes from sdk-ui-apps and another one where
-       * the postMessage comes from Connect (Auth).
-       * 1. In the first scenario, the eventOrigin will always be the same as zhAppsURLOrigin, which is expected and valid.
-       * 2. In the second scenario, the eventOrigin will always be the same as window.location.origin, which is also expected
-       * and valid since Connect (Auth) is served from the same origin as the main app (no iframe).
-       */
-      const isValidOrigin =
-        eventOrigin === zhAppsURLOrigin ||
-        eventOrigin === window.location.origin;
-
-      if (!isValidOrigin) {
-        return false;
-      }
-
-      setStyles((prev) => ({
-        appWrapperStyle: incomingStyles.appWrapperStyle
-          ? { ...prev.appWrapperStyle, ...incomingStyles.appWrapperStyle }
-          : prev.appWrapperStyle,
-        modalStyle: incomingStyles.modalStyle
-          ? { ...prev.modalStyle, ...incomingStyles.modalStyle }
-          : prev.modalStyle,
-        iframeWrapperStyle: incomingStyles.iframeWrapperStyle
-          ? { ...prev.iframeWrapperStyle, ...incomingStyles.iframeWrapperStyle }
-          : prev.iframeWrapperStyle,
-        iframeStyle: incomingStyles.iframeStyle
-          ? { ...prev.iframeStyle, ...incomingStyles.iframeStyle }
-          : prev.iframeStyle,
-      }));
-      setStylesLoaded(true);
-      return true;
-    },
-    [zeroHashAppURL],
-  );
-
-  return { styles, stylesLoaded, handleStyleConfig };
-};