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

package/dist/index.js

@@ -56,10 +56,50 @@ function handleIframeMessage(handler, opts) {
 
 // src/formats/Format.tsx
 var import_sdk_react = require("@kontextso/sdk-react");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_native = require("react-native");
+
+// src/frame-webview.tsx
+var import_react = require("react");
 var import_react_native_webview = require("react-native-webview");
 var import_jsx_runtime = require("react/jsx-runtime");
+var FrameWebView = (0, import_react.forwardRef)(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native_webview.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -71,24 +111,54 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var getUrl = (code, messageId, bidId) => {
-  const context = (0, import_react.useContext)(import_sdk_react.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 = (0, import_react.useContext)(import_sdk_react.AdsContext);
+  const context = (0, import_react2.useContext)(import_sdk_react.AdsContext);
   const bid = (0, import_sdk_react.useBid)({ code, messageId });
-  const iframeUrl = getUrl(code, messageId, bid?.bidId);
-  const webViewRef = (0, import_react.useRef)(null);
+  const [height, setHeight] = (0, import_react2.useState)(0);
+  const cachedContent = getCachedContent(context, bid?.bidId);
+  const iframeUrl = (0, import_sdk_react.useIframeUrl)(bid, code, messageId, "sdk-react-native", otherParams.theme, cachedContent);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
+  const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
+  const [iframeLoaded, setIframeLoaded] = (0, import_react2.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react2.useState)(false);
+  const [modalShown, setModalShown] = (0, import_react2.useState)(false);
+  const [modalLoaded, setModalLoaded] = (0, import_react2.useState)(false);
+  const [containerStyles, setContainerStyles] = (0, import_react2.useState)({});
+  const [iframeStyles, setIframeStyles] = (0, import_react2.useState)({});
+  const containerRef = (0, import_react2.useRef)(null);
+  const webViewRef = (0, import_react2.useRef)(null);
+  const modalWebViewRef = (0, import_react2.useRef)(null);
+  const modalInitTimeoutRef = (0, import_react2.useRef)(null);
+  const isModalInitRef = (0, import_react2.useRef)(false);
+  const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
+  const keyboardHeightRef = (0, import_react2.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,
@@ -96,36 +166,40 @@ 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");
               sendMessage(webViewRef, "update-iframe", code, {
                 messages: context?.messages,
                 sdk: "sdk-react-native",
@@ -133,6 +207,46 @@ 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) {
+                import_react_native.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);
@@ -145,145 +259,200 @@ 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) {
+                import_react_native.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();
+    }
+  };
+  const paramsString = (0, import_sdk_react.convertParamsToString)(otherParams);
+  (0, import_react2.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
+      });
     });
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!isAdViewVisible) return;
+    const interval = setInterval(() => {
+      checkIfInViewport();
+    }, 250);
+    return () => clearInterval(interval);
+  }, [isAdViewVisible]);
+  (0, import_react2.useEffect)(() => {
+    const showSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", (e) => {
+      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
+    });
+    const hideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", () => {
+      keyboardHeightRef.current = 0;
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      keyboardHeightRef.current = 0;
+    };
+  }, []);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native.View,
+  const inlineContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    frame_webview_default,
     {
+      ref: webViewRef,
+      iframeUrl,
+      onMessage,
       style: {
-        height: 300,
+        height,
         width: "100%",
         backgroundColor: "transparent",
-        borderWidth: 0
+        borderWidth: 0,
+        ...iframeStyles
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native_webview.WebView,
+      onError: () => {
+        debug("iframe-error");
+        reset();
+      },
+      onLoad: () => {
+        debug("iframe-load");
+      }
+    }
+  );
+  const interstitialContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native.Modal,
+    {
+      visible: modalOpen,
+      transparent: true,
+      onRequestClose: resetModal,
+      animationType: "slide",
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native.View,
         {
-          ref: webViewRef,
-          source: {
-            uri: iframeUrl
-          },
-          onMessage,
           style: {
-            height: 300,
-            width: "100%",
-            backgroundColor: "transparent",
-            borderWidth: 0
+            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" }
           },
-          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
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            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);
               }
-            });
-          },
-          onError: () => {
-            debug("Format:iframeError", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onLoad: () => {
-            debug("Format:iframeLoad", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          onLoadProgress: () => {
-            debug("Format:iframeLoadProgress", {
-              params: {
-                messageId,
-                code,
-                otherParams
-              }
-            });
-          },
-          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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native.View,
+      {
+        style: isAdViewVisible ? containerStyles : {
+          height: 0,
+          overflow: "hidden"
+        },
+        ref: containerRef,
+        children: wrapper ? wrapper(inlineContent) : inlineContent
+      }
+    ),
+    interstitialContent
+  ] });
 };
-var Format_default = Format;
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format, { ...props }) });
+var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -294,14 +463,14 @@ var import_react_native3 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
 
 // package.json
-var version = "3.0.7-rc.3";
+var version = "3.0.7";
 
 // src/NativeRNKontext.ts
 var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     import_sdk_react2.log.warn(error);
@@ -395,7 +564,7 @@ var getSdk = async () => ({
   version
 });
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {