@kontextso/sdk-react-native 3.0.7-rc.3 → 3.0.8-rc.0

package/dist/index.mjs

@@ -20,12 +20,55 @@ function handleIframeMessage(handler, opts) {
 // src/formats/Format.tsx
 import {
   AdsContext,
-  useBid
+  convertParamsToString,
+  ErrorBoundary,
+  useBid,
+  useIframeUrl
 } from "@kontextso/sdk-react";
-import { useContext, useRef } from "react";
-import { View } from "react-native";
+import { useContext, useEffect, useRef, useState } from "react";
+import { Keyboard, Linking, Modal, useWindowDimensions, View } from "react-native";
+
+// src/frame-webview.tsx
+import { forwardRef } from "react";
 import { WebView } from "react-native-webview";
 import { jsx } from "react/jsx-runtime";
+var FrameWebView = forwardRef(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      WebView,
+      {
+        ref: forwardedRef,
+        source: {
+          uri: iframeUrl
+        },
+        onMessage,
+        style,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsFullscreenVideo: false,
+        originWhitelist: ["*"],
+        sharedCookiesEnabled: true,
+        thirdPartyCookiesEnabled: true,
+        injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `,
+        onError,
+        onLoad
+      }
+    );
+  }
+);
+var frame_webview_default = FrameWebView;
+
+// src/formats/Format.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -37,24 +80,55 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var getUrl = (code, messageId, bidId) => {
-  const context = useContext(AdsContext);
-  if (!context || !bidId) {
+var getCachedContent = (context, bidId) => {
+  if (!bidId) {
     return null;
   }
-  const adServerUrl = context?.adServerUrl;
-  const params = new URLSearchParams({
-    code,
-    messageId,
-    sdk: "sdk-react-native"
-  });
-  return `${adServerUrl}/api/frame/${bidId}?${params}`;
+  return context?.cachedContentRef?.current?.get(bidId) ?? null;
 };
 var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const context = useContext(AdsContext);
   const bid = useBid({ code, messageId });
-  const iframeUrl = getUrl(code, messageId, bid?.bidId);
+  const [height, setHeight] = useState(0);
+  const cachedContent = getCachedContent(context, bid?.bidId);
+  const iframeUrl = useIframeUrl(bid, code, messageId, "sdk-react-native", otherParams.theme, cachedContent);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
+  const [showIframe, setShowIframe] = useState(false);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalShown, setModalShown] = useState(false);
+  const [modalLoaded, setModalLoaded] = useState(false);
+  const [containerStyles, setContainerStyles] = useState({});
+  const [iframeStyles, setIframeStyles] = useState({});
+  const containerRef = useRef(null);
   const webViewRef = useRef(null);
+  const modalWebViewRef = useRef(null);
+  const messageStatusRef = useRef("none" /* None */);
+  const modalInitTimeoutRef = useRef(null);
+  const isModalInitRef = useRef(false);
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  const keyboardHeightRef = useRef(0);
+  const isAdViewVisible = showIframe && iframeLoaded;
+  const reset = () => {
+    setHeight(0);
+    setShowIframe(false);
+    setContainerStyles({});
+    setIframeStyles({});
+    setIframeLoaded(false);
+    resetModal();
+    context?.resetAll();
+    context?.captureError(new Error("Processing iframe error"));
+  };
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current);
+      modalInitTimeoutRef.current = null;
+    }
+    isModalInitRef.current = false;
+    setModalOpen(false);
+    setModalLoaded(false);
+    setModalShown(false);
+  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -62,36 +136,41 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       otherParams,
       bid,
       iframeUrl,
+      iframeLoaded,
+      showIframe,
+      height,
+      containerStyles,
+      iframeStyles,
       ...data
     });
   };
-  debug("Format:updateState", {
-    params: {
-      messageId,
+  const debugModal = (name, data = {}) => {
+    context?.onDebugEventInternal?.(name, {
       code,
-      otherParams
-    }
-  });
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data
+    });
+  };
+  debug("format-update-state");
   const onMessage = (event) => {
     try {
       const data = JSON.parse(event.nativeEvent.data);
-      debug("Format:iframeMessage", {
-        message: data,
-        params: { data, messageId, code, otherParams }
+      debug("iframe-message", {
+        message: data
       });
       const messageHandler = handleIframeMessage(
         (message) => {
           switch (message.type) {
             case "init-iframe":
-              debug("Format:iframePostMessage", {
-                params: {
-                  code,
-                  messages: context?.messages,
-                  sdk: "sdk-react-native",
-                  otherParams,
-                  messageId
-                }
-              });
+              setIframeLoaded(true);
+              debug("iframe-post-message");
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               sendMessage(webViewRef, "update-iframe", code, {
                 messages: context?.messages,
                 sdk: "sdk-react-native",
@@ -99,9 +178,50 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
                 messageId
               });
               break;
+            case "error-iframe":
+              reset();
+              break;
+            case "resize-iframe":
+              setHeight(message.data.height);
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+            case "view-iframe":
+              context?.onAdViewInternal(message.data);
+              break;
+            case "ad-done-iframe":
+              if (bid?.bidId && message.data.cachedContent) {
+                context?.cachedContentRef?.current?.set(bid.bidId, message.data.cachedContent);
+              }
+              break;
+            case "show-iframe":
+              setShowIframe(true);
+              break;
+            case "hide-iframe":
+              setShowIframe(false);
+              break;
+            case "set-styles-iframe":
+              setContainerStyles(message.data.containerStyles);
+              setIframeStyles(message.data.iframeStyles);
+              break;
+            case "open-component-iframe":
+              setModalOpen(true);
+              modalInitTimeoutRef.current = setTimeout(() => {
+                if (!isModalInitRef.current) {
+                  resetModal();
+                }
+              }, message.data.timeout ?? 5e3);
+              break;
             case "event-iframe":
               onEvent?.(message.data);
               context?.onAdEventInternal(message.data);
+              messageStatusRef.current = "message-received" /* MessageReceived */;
               break;
           }
         },
@@ -111,145 +231,226 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       );
       messageHandler({ data });
     } catch (e) {
-      debug("Format:iframeMessageError", {
-        params: { error: e, messageId, code, otherParams },
+      debug("iframe-message-error", {
         error: e
       });
       console.error("error parsing message from webview", e);
+      reset();
     }
   };
-  if (!context || !bid || !iframeUrl) {
-    debug("Format:noContextOrBidOrIframeUrl", {
-      params: {
-        context,
-        bid,
-        iframeUrl,
-        messageId,
-        code,
-        otherParams
+  const onModalMessage = (event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      debugModal("modal-iframe-message", {
+        message: data
+      });
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case "close-component-iframe":
+              resetModal();
+              break;
+            case "init-component-iframe":
+              isModalInitRef.current = true;
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current);
+                modalInitTimeoutRef.current = null;
+              }
+              setModalShown(true);
+              break;
+            case "error-component-iframe":
+            case "error-iframe":
+              resetModal();
+              context?.captureError(new Error("Processing modal iframe error"));
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+            case "event-iframe":
+              onEvent?.(message.data);
+              context?.onAdEventInternal(message.data);
+              break;
+          }
+        },
+        {
+          code,
+          component: "modal"
+        }
+      );
+      messageHandler({ data });
+    } catch (e) {
+      debugModal("modal-iframe-message-error", {
+        error: e
+      });
+      console.error("error parsing message from webview", e);
+      resetModal();
+    }
+  };
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (messageStatusRef.current === "none" /* None */) {
+        return;
       }
+      if (messageStatusRef.current === "message-received" /* MessageReceived */) {
+        clearInterval(interval);
+        return;
+      }
+      debug("iframe-post-message-use-effect");
+      setIframeLoaded(true);
+      sendMessage(webViewRef, "update-iframe", code, {
+        messages: context?.messages,
+        sdk: "sdk-react-native",
+        otherParams: {
+          ...otherParams,
+          _useEffect: true
+        },
+        messageId
+      });
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  const paramsString = convertParamsToString(otherParams);
+  useEffect(() => {
+    if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
+      return;
+    }
+    debug("iframe-post-message");
+    sendMessage(webViewRef, "update-iframe", code, {
+      data: { otherParams },
+      code
+    });
+  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code]);
+  const checkIfInViewport = () => {
+    if (!containerRef.current) return;
+    containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+      sendMessage(webViewRef, "update-dimensions-iframe", code, {
+        windowWidth,
+        windowHeight,
+        containerWidth,
+        containerHeight,
+        containerX,
+        containerY,
+        keyboardHeight: keyboardHeightRef.current
+      });
+    });
+  };
+  useEffect(() => {
+    if (!isAdViewVisible) return;
+    const interval = setInterval(() => {
+      checkIfInViewport();
+    }, 250);
+    return () => clearInterval(interval);
+  }, [isAdViewVisible]);
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      keyboardHeightRef.current = 0;
     });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      keyboardHeightRef.current = 0;
+    };
+  }, []);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    View,
+  const inlineContent = /* @__PURE__ */ jsx2(
+    frame_webview_default,
     {
+      ref: webViewRef,
+      iframeUrl,
+      onMessage,
       style: {
-        height: 300,
+        height,
         width: "100%",
         backgroundColor: "transparent",
-        borderWidth: 0
+        borderWidth: 0,
+        ...iframeStyles
+      },
+      onError: () => {
+        debug("iframe-error");
+        reset();
       },
-      children: /* @__PURE__ */ jsx(
-        WebView,
+      onLoad: () => {
+        debug("iframe-load");
+        messageStatusRef.current = "initialized" /* Initialized */;
+      }
+    }
+  );
+  const interstitialContent = /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      visible: modalOpen,
+      transparent: true,
+      onRequestClose: resetModal,
+      animationType: "slide",
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsx2(
+        View,
         {
-          ref: webViewRef,
-          source: {
-            uri: iframeUrl
-          },
-          onMessage,
           style: {
-            height: 300,
-            width: "100%",
-            backgroundColor: "transparent",
-            borderWidth: 0
-          },
-          allowsInlineMediaPlayback: true,
-          mediaPlaybackRequiresUserAction: false,
-          javaScriptEnabled: true,
-          domStorageEnabled: true,
-          allowsFullscreenVideo: false,
-          injectedJavaScript: `
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
-            }
-          }, false);
-      `,
-          onLoadStart: () => {
-            debug("Format:iframeLoadStart", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onError: () => {
-            debug("Format:iframeError", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onLoad: () => {
-            debug("Format:iframeLoad", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
+            flex: 1,
+            // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+            ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
           },
-          onLoadProgress: () => {
-            debug("Format:iframeLoadProgress", {
-              params: {
-                messageId,
-                code,
-                otherParams
+          children: /* @__PURE__ */ jsx2(
+            frame_webview_default,
+            {
+              ref: modalWebViewRef,
+              iframeUrl: modalUrl,
+              onMessage: onModalMessage,
+              style: {
+                backgroundColor: "transparent",
+                height: "100%",
+                width: "100%",
+                borderWidth: 0
+              },
+              onError: () => {
+                debug("modal-error");
+                resetModal();
+              },
+              onLoad: () => {
+                debug("modal-load");
+                setModalLoaded(true);
               }
-            });
-          },
-          onHttpError: () => {
-            debug("Format:iframeHttpError", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onRenderProcessGone: () => {
-            debug("Format:iframeRenderProcessGone", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onNavigationStateChange: () => {
-            debug("Format:iframeNavigationStateChange", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onContentProcessDidTerminate: () => {
-            debug("Format:iframeContentProcessDidTerminate", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          }
+            }
+          )
         }
       )
     }
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      View,
+      {
+        style: isAdViewVisible ? containerStyles : {
+          height: 0,
+          overflow: "hidden"
+        },
+        ref: containerRef,
+        children: wrapper ? wrapper(inlineContent) : inlineContent
+      }
+    ),
+    interstitialContent
+  ] });
 };
-var Format_default = Format;
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { children: /* @__PURE__ */ jsx2(Format, { ...props }) });
+var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ jsx2(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ jsx3(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -263,14 +464,14 @@ import { Appearance, Dimensions, PixelRatio, Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
 
 // package.json
-var version = "3.0.7-rc.3";
+var version = "3.0.7";
 
 // src/NativeRNKontext.ts
 import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     log.warn(error);
@@ -364,7 +565,7 @@ var getSdk = async () => ({
   version
 });
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ jsx3(AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
+  return /* @__PURE__ */ jsx4(AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
 };
 export {
   AdsProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "3.0.7-rc.3",
+  "version": "3.0.8-rc.0",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -54,7 +54,7 @@
     "react-native-webview": "^13.10.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^3.0.7-rc.1"
+    "@kontextso/sdk-react": "^3.0.5"
   },
   "files": [
     "dist/*",