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

package/src/formats/Format.tsx

@@ -7,12 +7,17 @@ import {
 } from '@kontextso/sdk-common'
 import {
   AdsContext,
+  type ContextType,
+  convertParamsToString,
+  ErrorBoundary,
   type FormatProps,
   useBid,
+  useIframeUrl,
 } from '@kontextso/sdk-react'
-import { useContext, useRef } from 'react'
-import { View } from 'react-native'
-import { WebView, type WebViewMessageEvent } from 'react-native-webview'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { Keyboard, Linking, Modal, useWindowDimensions, View } from 'react-native'
+import type { WebView, WebViewMessageEvent } from 'react-native-webview'
+import FrameWebView from '../frame-webview'
 
 const sendMessage = (
   webViewRef: React.RefObject<WebView>,
@@ -32,30 +37,68 @@ const sendMessage = (
   `)
 }
 
-const getUrl = (code: string, messageId: string, bidId?: string) => {
-  const context = useContext(AdsContext)
-  if (!context || !bidId) {
+const getCachedContent = (context: ContextType, bidId?: string) => {
+  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
 }
 
 const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatProps) => {
   const context = useContext(AdsContext)
 
   const bid = useBid({ code, messageId })
-  const iframeUrl = getUrl(code, messageId, bid?.bidId)
+  const [height, setHeight] = useState<number>(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<boolean>(false)
+  const [iframeLoaded, setIframeLoaded] = useState<boolean>(false)
 
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+  const [modalShown, setModalShown] = useState<boolean>(false)
+  const [modalLoaded, setModalLoaded] = useState<boolean>(false)
+
+  const [containerStyles, setContainerStyles] = useState<any>({})
+  const [iframeStyles, setIframeStyles] = useState<any>({})
+
+  const containerRef = useRef<View>(null)
   const webViewRef = useRef<WebView>(null)
+  const modalWebViewRef = useRef<WebView>(null)
+  const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isModalInitRef = useRef<boolean>(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: string, data: any = {}) => {
     context?.onDebugEventInternal?.(name, {
@@ -64,40 +107,45 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
       otherParams,
       bid,
       iframeUrl,
+      iframeLoaded,
+      showIframe,
+      height,
+      containerStyles,
+      iframeStyles,
       ...data,
     })
   }
 
-  debug('Format:updateState', {
-    params: {
-      messageId,
+  const debugModal = (name: string, data: any = {}) => {
+    context?.onDebugEventInternal?.(name, {
       code,
-      otherParams
-    }
-  })
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data,
+    })
+  }
+
+  debug('format-update-state')
 
   const onMessage = (event: WebViewMessageEvent) => {
     try {
       const data = JSON.parse(event.nativeEvent.data) as IframeMessage
 
-      debug('Format:iframeMessage', {
+      debug('iframe-message', {
         message: data,
-        params: { data, messageId, code, otherParams }
       })
 
       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',
@@ -106,6 +154,56 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
               })
               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 ?? 5000)
+              break
+
             case 'event-iframe':
               onEvent?.(message.data)
               context?.onAdEventInternal(message.data)
@@ -118,139 +216,221 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
       )
       messageHandler({ data } as IframeMessageEvent)
     } 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: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
+
+      debugModal('modal-iframe-message', {
+        message: data,
+      })
+
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case 'close-component-iframe':
+              resetModal()
+              break
+
+            case 'init-component-iframe':
+              // Just clearing the timeoutRef didn't work in Android, so we need to set a flag and check it in the timeout callback
+              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 } as IframeMessageEvent)
+    } catch (e) {
+      debugModal('modal-iframe-message-error', {
+        error: e,
+      })
+      console.error('error parsing message from webview', e)
+      resetModal()
+    }
+  }
+
+  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,
+    })
+    // because we use the rest params, the object is alaways new and useEffect would be called on every render
+  }, [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 (
-    <View
+  const inlineContent = (
+    <FrameWebView
+      ref={webViewRef}
+      iframeUrl={iframeUrl}
+      onMessage={onMessage}
       style={{
-        height: 300,
+        height,
         width: '100%',
         backgroundColor: 'transparent',
         borderWidth: 0,
+        ...iframeStyles,
       }}
-    >
+      onError={() => {
+        debug('iframe-error')
+        reset()
+      }}
+      onLoad={() => {
+        debug('iframe-load')
+      }}
+    />
+  )
 
-      <WebView
-        ref={webViewRef}
-        source={{
-          uri: iframeUrl,
-        }}
-        onMessage={onMessage}
+  const interstitialContent = (
+    <Modal
+      visible={modalOpen}
+      transparent={true}
+      onRequestClose={resetModal}
+      animationType="slide"
+      statusBarTranslucent={true}
+    >
+      <View
         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,
-            }
-          })
-        }}
-        onLoadProgress={() => {
-          debug('Format:iframeLoadProgress', {
-            params: {
-              messageId,
-              code,
-              otherParams,
-            }
-          })
-        }}
-        onHttpError={() => {
-          debug('Format:iframeHttpError', {
-            params: {
-              messageId,
-              code,
-              otherParams,
-            }
-          })
-        }}
-        onRenderProcessGone={() => {
-          debug('Format:iframeRenderProcessGone', {
-            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' }),
         }}
-        onNavigationStateChange={() => {
-          debug('Format:iframeNavigationStateChange', {
-            params: {
-              messageId,
-              code,
-              otherParams,
-            }
-          })
-        }}
-        onContentProcessDidTerminate={() => {
-          debug('Format:iframeContentProcessDidTerminate', {
-            params: {
-              messageId,
-              code,
-              otherParams,
-            }
-          })
-        }}
-        
-      />
-    </View>
+      >
+        <FrameWebView
+          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)
+          }}
+        />
+      </View>
+    </Modal>
+  )
+
+  return (
+    <>
+      <View
+        style={
+          isAdViewVisible
+            ? containerStyles
+            : {
+                height: 0,
+                overflow: 'hidden',
+              }
+        }
+        ref={containerRef}
+      >
+        {wrapper ? wrapper(inlineContent) : inlineContent}
+      </View>
+
+      {interstitialContent}
+    </>
   )
 }
 
-export default Format
+const FormatWithErrorBoundary = (props: FormatProps) => (
+  <ErrorBoundary>
+    <Format {...props} />
+  </ErrorBoundary>
+)
+
+export default FormatWithErrorBoundary

package/src/frame-webview.tsx

@@ -25,6 +25,9 @@ const FrameWebView = forwardRef<WebView, FrameWebViewProps>(
         javaScriptEnabled={true}
         domStorageEnabled={true}
         allowsFullscreenVideo={false}
+        originWhitelist={['*']}
+        sharedCookiesEnabled={true}
+        thirdPartyCookiesEnabled={true}
         injectedJavaScript={`
           window.addEventListener("message", function(event) {
             if (window.ReactNativeWebView && event.data) {