@botonic/react 0.31.1-alpha.0 → 0.31.1

package/src/webchat/context/index.tsx

@@ -13,6 +13,9 @@ export const WebchatContext = createContext<WebchatContextProps>({
   getThemeProperty: () => {
     return
   }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
+  closeWebview: async () => {
+    return
+  },
   openWebview: () => {
     return
   },
@@ -72,7 +75,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
   trackEvent: async () => {
     return
   },
-  webchatRef: { current: null },
+  webchatContainerRef: { current: null },
   chatAreaRef: { current: null },
   inputPanelRef: { current: null },
   headerRef: { current: null },

package/src/webchat/context/types.ts

@@ -5,6 +5,7 @@ import {
 } from '@botonic/core'
 
 import { Reply, WebchatSettingsProps, Webview } from '../../components'
+import { CloseWebviewOptions } from '../../contexts'
 import { TrackEventFunction, WebchatMessage } from '../../index-types'
 import { WebchatStateTheme } from '../index-types'
 import { ThemeProps } from '../theme/types'
@@ -54,6 +55,7 @@ export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
 export interface WebchatContextProps {
   addMessage: (message: WebchatMessage) => void
   getThemeProperty: (property: string, defaultValue?: any) => any
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
   openWebview: (webviewComponent: Webview, params?: any) => void
   resetUnreadMessages: () => void
   resolveCase: () => void
@@ -75,7 +77,7 @@ export interface WebchatContextProps {
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   trackEvent?: TrackEventFunction
   webchatState: WebchatState
-  webchatRef: React.MutableRefObject<HTMLDivElement | null> // Rename this to webchatContainerRef
+  webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
   chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
   inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
   headerRef: React.MutableRefObject<HTMLDivElement | null>

package/src/webchat/context/use-webchat.ts

@@ -79,7 +79,7 @@ export interface UseWebchat {
   removeReplies: () => void
   removeWebview: () => void
   webchatState: WebchatState
-  webchatRef: React.MutableRefObject<HTMLDivElement | null> // TODO: Change name, already exists WebchatRef for useImperativeHandle
+  webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
   headerRef: React.MutableRefObject<HTMLDivElement | null>
   chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
   scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
@@ -93,7 +93,7 @@ export function useWebchat(): UseWebchat {
     webchatInitialState
   )
 
-  const webchatRef = useRef<HTMLDivElement | null>(null)
+  const webchatContainerRef = useRef<HTMLDivElement | null>(null)
   const chatAreaRef = useRef<HTMLDivElement | null>(null)
   const inputPanelRef = useRef<HTMLDivElement | null>(null)
   const headerRef = useRef<HTMLDivElement | null>(null)
@@ -281,7 +281,7 @@ export function useWebchat(): UseWebchat {
     removeReplies,
     removeWebview,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     headerRef,
     chatAreaRef,
     scrollableMessagesListRef,

package/src/webchat/hooks/use-scrollbar-controller.ts

@@ -25,8 +25,12 @@ const stopAtScrollLimit = element => {
 }
 
 export const useScrollbarController = (currentDevice, host) => {
-  const { webchatRef, chatAreaRef, repliesRef, scrollableMessagesListRef } =
-    useContext(WebchatContext)
+  const {
+    webchatContainerRef,
+    chatAreaRef,
+    repliesRef,
+    scrollableMessagesListRef,
+  } = useContext(WebchatContext)
 
   const hasScrollbar = () => {
     if (chatAreaRef.current && scrollableMessagesListRef.current) {
@@ -70,25 +74,25 @@ export const useScrollbarController = (currentDevice, host) => {
   }
 
   const toggleOnTouchMoveEvents = () => {
-    if (webchatRef.current && scrollableMessagesListRef.current) {
+    if (webchatContainerRef.current && scrollableMessagesListRef.current) {
       if (hasScrollbar()) {
         scrollableMessagesListRef.current.style.touchAction = 'auto'
-        webchatRef.current.style.touchAction = 'auto'
-        webchatRef.current.ontouchmove = null
-        webchatRef.current.ontouchstart = null
+        webchatContainerRef.current.style.touchAction = 'auto'
+        webchatContainerRef.current.ontouchmove = null
+        webchatContainerRef.current.ontouchstart = null
         return
       }
 
       scrollableMessagesListRef.current.style.touchAction = 'none'
-      webchatRef.current.style.touchAction = 'none'
+      webchatContainerRef.current.style.touchAction = 'none'
     }
-    if (webchatRef.current) {
-      webchatRef.current.ontouchstart = e => {
+    if (webchatContainerRef.current) {
+      webchatContainerRef.current.ontouchstart = e => {
         if (e.target === e.currentTarget) {
           e.preventDefault()
         }
       }
-      webchatRef.current.ontouchmove = e => {
+      webchatContainerRef.current.ontouchmove = e => {
         if (e.target === e.currentTarget) {
           e.preventDefault()
         }
@@ -122,22 +126,23 @@ export const useScrollbarController = (currentDevice, host) => {
   }
 
   const handleScrollEvents = () => {
-    if (webchatRef.current) {
+    if (webchatContainerRef.current) {
       if (isMobileDevice()) {
         if (currentDevice !== DEVICES.MOBILE.IPHONE) return
 
         limitScrollBoundaries()
 
-        webchatRef.current.ontouchstart = handleOnTouchMoveEvents
-        webchatRef.current.ontouchmove = handleOnTouchMoveEvents
+        webchatContainerRef.current.ontouchstart = handleOnTouchMoveEvents
+        webchatContainerRef.current.ontouchmove = handleOnTouchMoveEvents
       } else {
-        webchatRef.current.onmouseover = e => handleOnMouseOverEvents(e)
+        webchatContainerRef.current.onmouseover = e =>
+          handleOnMouseOverEvents(e)
       }
     }
   }
 
   useEffect(() => {
-    const webchat = webchatRef.current
+    const webchat = webchatContainerRef.current
 
     handleScrollEvents()
 

package/src/webchat/hooks/use-webchat-dimensions.ts

@@ -4,14 +4,14 @@ import { WebchatContext } from '../../webchat/context'
 
 export const useWebchatDimensions = () => {
   const {
-    webchatRef,
+    webchatContainerRef,
     headerRef,
     inputPanelRef,
     webchatState: { isWebchatOpen },
   } = useContext(WebchatContext)
 
   const calculateResizedPercentualWebchatHeight = useCallback(() => {
-    const webchatElement = webchatRef.current
+    const webchatElement = webchatContainerRef.current
     if (!isWebchatOpen || !webchatElement) return 0
     const webchatHeight = webchatElement.clientHeight || 0
     const keyboardOffset =
@@ -24,7 +24,7 @@ export const useWebchatDimensions = () => {
   }, [isWebchatOpen])
 
   const calculateResizedPxChatAreaHeight = useCallback(() => {
-    const webchatElement = webchatRef.current
+    const webchatElement = webchatContainerRef.current
     const headerElement = headerRef.current
     const inputPanelElement = inputPanelRef.current
 

package/src/webchat/hooks/use-webchat-resizer.ts

@@ -4,7 +4,7 @@ import { WebchatContext } from '../../webchat/context'
 import { useWebchatDimensions } from './use-webchat-dimensions'
 
 export const useWebchatResizer = () => {
-  const { webchatRef, chatAreaRef, inputPanelRef, headerRef } =
+  const { webchatContainerRef, chatAreaRef, inputPanelRef, headerRef } =
     useContext(WebchatContext)
 
   const {
@@ -14,24 +14,24 @@ export const useWebchatResizer = () => {
 
   const handleKeyboardShown = () => {
     if (
-      webchatRef.current &&
+      webchatContainerRef.current &&
       chatAreaRef.current &&
       headerRef.current &&
       inputPanelRef.current
     ) {
-      webchatRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`
+      webchatContainerRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`
       chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
     }
   }
 
   const handleKeyboardHidden = () => {
     if (
-      webchatRef.current &&
+      webchatContainerRef.current &&
       chatAreaRef.current &&
       inputPanelRef.current &&
       headerRef.current
     ) {
-      webchatRef.current.style.height = '100%'
+      webchatContainerRef.current.style.height = '100%'
       chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
     }
   }

package/src/webchat/webchat.tsx

@@ -3,7 +3,6 @@ import {
   INPUT,
   isMobile,
   params2queryString,
-  Session as CoreSession,
 } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, {
@@ -27,7 +26,7 @@ import {
   WebchatSettingsProps,
 } from '../components'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
-import { CloseWebviewOptions, WebviewRequestContext } from '../contexts'
+import { CloseWebviewOptions } from '../contexts'
 import { SENDERS, WebchatProps, WebchatRef } from '../index-types'
 import {
   getMediaType,
@@ -71,7 +70,7 @@ import {
 import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
-import { WebviewContainer } from './webview'
+import { WebviewContainer } from './webview/index'
 
 // eslint-disable-next-line complexity, react/display-name
 const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
@@ -104,7 +103,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     removeWebview,
     removeReplies,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     chatAreaRef,
     inputPanelRef,
     headerRef,
@@ -319,8 +318,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
   )
 
   const darkBackgroundMenu = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu,
-    false
+    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu
   )
 
   const getBlockInputs = (rule, inputData) => {
@@ -577,13 +575,6 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     }
   }
 
-  const webviewRequestContext = {
-    closeWebview: async (options?: CloseWebviewOptions) =>
-      await closeWebview(options),
-    params: webchatState.webviewParams || ({} as Record<string, any>),
-    session: webchatState.session || ({} as Partial<CoreSession>),
-  }
-
   useEffect(() => {
     if (firstUpdate.current) {
       firstUpdate.current = false
@@ -609,18 +600,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
 
   const userInputEnabled = isUserInputEnabled()
 
-  const webchatWebview = () => (
-    <WebviewRequestContext.Provider value={webviewRequestContext}>
-      <WebviewContainer
-        style={{
-          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
-          ...mobileStyle,
-        }}
-        webview={webchatState.webview}
-      />
-    </WebviewRequestContext.Provider>
-  )
-
+  // TODO: Create a default theme that include mobileStyle
   let mobileStyle = {}
   if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
     mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
@@ -671,6 +651,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
       value={{
         addMessage,
         getThemeProperty,
+        closeWebview,
         openWebview,
         resolveCase,
         resetUnreadMessages,
@@ -691,9 +672,9 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         updateWebchatDevSettings: updateWebchatDevSettings,
         trackEvent: props.onTrackEvent,
         webchatState,
-        // TODO: Review if need theme inside Context, already exist innside webchatState
+        // TODO: Review if need theme inside Context, already exist inside webchatState
         theme,
-        webchatRef,
+        webchatContainerRef,
         chatAreaRef,
         inputPanelRef,
         headerRef,
@@ -706,7 +687,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
       {webchatState.isWebchatOpen && (
         <StyledWebchat
           id={BotonicContainerId.Webchat}
-          ref={webchatRef}
+          ref={webchatContainerRef}
           // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
           role={ROLES.WEBCHAT}
           width={webchatState.width}
@@ -749,7 +730,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
                 />
               )}
 
-              {webchatState.webview && webchatWebview()}
+              {webchatState.webview && <WebviewContainer />}
 
               {webchatState.isCustomComponentRendered &&
                 customComponent &&

package/src/webchat/webview/header.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebviewRequestContext } from '../../contexts'
+import { WebchatContext } from '../context'
+import { StyledCloseHeader, StyledWebviewHeader } from './styles'
+
+export const WebviewHeader = () => {
+  const { closeWebview } = useContext(WebviewRequestContext)
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  return (
+    <StyledWebviewHeader
+      role={ROLES.WEBVIEW_HEADER}
+      style={{
+        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle),
+      }}
+    >
+      <StyledCloseHeader onClick={() => closeWebview()}>✕</StyledCloseHeader>
+    </StyledWebviewHeader>
+  )
+}

package/src/webchat/webview/index.tsx

@@ -0,0 +1,80 @@
+import { isMobile, Session as CoreSession } from '@botonic/core'
+import React, { useContext, useEffect } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { CloseWebviewOptions, WebviewRequestContext } from '../../contexts'
+import { WebchatContext } from '../context'
+import { WebviewHeader } from './header'
+import {
+  StyledFrame,
+  StyledFrameAsDiv,
+  StyledWebview,
+  StyledWebviewContent,
+} from './styles'
+
+export const WebviewContainer = () => {
+  const { closeWebview, getThemeProperty, webchatState } =
+    useContext(WebchatContext)
+
+  const webviewRequestContext = {
+    closeWebview: async (options?: CloseWebviewOptions) =>
+      await closeWebview(options),
+    params: webchatState.webviewParams || ({} as Record<string, any>),
+    session: webchatState.session || ({} as Partial<CoreSession>),
+  }
+
+  // TODO: Remove this code and use theme or webchatState.theme from the context,
+  // this code is duplicated from webchat.tsx
+  let mobileStyle = {}
+  if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
+    mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
+      width: '100%',
+      height: '100%',
+      right: 0,
+      bottom: 0,
+      borderRadius: 0,
+    }
+  }
+
+  const Webview = webchatState.webview as string | React.ComponentType
+
+  const close = async (e: any) => {
+    if (e.data === 'botonicCloseWebview') {
+      console.log('Received close message from webview')
+      await closeWebview()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', close, false)
+
+    return () => window.removeEventListener('message', close, false)
+  }, [])
+
+  // TODO: Review how to split the logic of rendering a webview in local development and production
+  // In local development, Webview is a component. In production it is the URL of the webview
+  const isUrlToWebview = typeof Webview === 'string'
+
+  return (
+    <StyledWebview
+      role={ROLES.WEBVIEW}
+      style={{
+        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
+        ...mobileStyle,
+      }}
+    >
+      <WebviewHeader />
+      <StyledWebviewContent>
+        {isUrlToWebview ? (
+          <StyledFrame src={Webview} />
+        ) : (
+          <WebviewRequestContext.Provider value={webviewRequestContext}>
+            <StyledFrameAsDiv>
+              <Webview />
+            </StyledFrameAsDiv>
+          </WebviewRequestContext.Provider>
+        )}
+      </StyledWebviewContent>
+    </StyledWebview>
+  )
+}

package/src/webchat/webview/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const StyledWebview = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${COLORS.SOLID_WHITE};
+  z-index: 2;
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+`
+
+export const StyledWebviewHeader = styled.div`
+  flex: none;
+  text-align: right;
+  background-color: ${COLORS.WILD_SAND_WHITE};
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+`
+export const StyledCloseHeader = styled.div`
+  display: inline-block;
+  padding: 8px 12px;
+  cursor: pointer;
+`
+
+export const StyledWebviewContent = styled.div`
+  flex: 1;
+  overflow: auto;
+`
+
+export const FrameStyles = `
+  border-style: none;
+  width: 100%;
+  height: 100%;
+`
+
+export const StyledFrame = styled.iframe`
+  ${FrameStyles}
+`
+
+export const StyledFrameAsDiv = styled.div`
+  ${FrameStyles}
+`

package/lib/cjs/webchat/webview.d.ts

@@ -1,2 +0,0 @@
-export function WebviewHeader(): import("react/jsx-runtime").JSX.Element;
-export function WebviewContainer(props: any): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/webchat/webview.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewContainer = exports.WebviewHeader = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const contexts_1 = require("../contexts");
-const context_1 = require("../webchat/context");
-const StyledWebview = styled_components_1.default.div `
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${constants_1.COLORS.SOLID_WHITE};
-  z-index: 2;
-  border-radius: ${constants_1.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`;
-const StyledWebviewHeader = styled_components_1.default.div `
-  text-align: right;
-  background-color: ${constants_1.COLORS.WILD_SAND_WHITE};
-  border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-bottom: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-radius: ${constants_1.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`;
-const StyledCloseHeader = styled_components_1.default.div `
-  display: inline-block;
-  padding: 8px 12px;
-  cursor: pointer;
-`;
-const StyledWebviewContent = styled_components_1.default.div `
-  flex: 1;
-  overflow: auto;
-`;
-const FrameStyles = `
-  border-style: none;
-  width: 100%;
-  height: 100%;
-`;
-const StyledFrame = styled_components_1.default.iframe `
-  ${FrameStyles}
-`;
-const StyledFrameAsDiv = styled_components_1.default.div `
-  ${FrameStyles}
-`;
-const WebviewHeader = () => {
-    const { closeWebview } = (0, react_1.useContext)(contexts_1.WebviewRequestContext);
-    const { getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
-    return ((0, jsx_runtime_1.jsx)(StyledWebviewHeader, Object.assign({ role: constants_1.ROLES.WEBVIEW_HEADER, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle)) }, { children: (0, jsx_runtime_1.jsx)(StyledCloseHeader, Object.assign({ onClick: closeWebview }, { children: "\u2715" })) })));
-};
-exports.WebviewHeader = WebviewHeader;
-const WebviewContainer = props => {
-    const { webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
-    const { closeWebview } = (0, react_1.useContext)(contexts_1.WebviewRequestContext);
-    const Webview = webchatState.webview;
-    const close = (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        if (e.data === 'botonicCloseWebview') {
-            yield closeWebview();
-        }
-    });
-    (0, react_1.useEffect)(() => {
-        if (window.addEventListener) {
-            window.addEventListener('message', close, false);
-        }
-        else if (window.attachEvent) {
-            // ie8
-            window.attachEvent('onmessage', close);
-        }
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(StyledWebview, Object.assign({ role: constants_1.ROLES.WEBVIEW, style: Object.assign({}, props.style) }, { children: [(0, jsx_runtime_1.jsx)(exports.WebviewHeader, { style: { flex: 'none' } }), (0, jsx_runtime_1.jsx)(StyledWebviewContent, { children: typeof Webview === 'string' ? ((0, jsx_runtime_1.jsx)(StyledFrame, { src: Webview })) : ((0, jsx_runtime_1.jsx)(StyledFrameAsDiv, { children: (0, jsx_runtime_1.jsx)(Webview, {}) })) })] })));
-};
-exports.WebviewContainer = WebviewContainer;
-//# sourceMappingURL=webview.js.map

package/lib/cjs/webchat/webview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"webview.js","sourceRoot":"","sources":["../../../src/webchat/webview.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAoD;AACpD,kFAAsC;AAEtC,4CAAqD;AACrD,0CAAmD;AACnD,gDAAmD;AAEnD,MAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;sBAOV,kBAAM,CAAC,WAAW;;mBAErB,mBAAO,CAAC,QAAQ,CAAC,yBAAyB;CAC5D,CAAA;AAED,MAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,CAAA;;sBAEhB,kBAAM,CAAC,eAAe;0BAClB,kBAAM,CAAC,qBAAqB;6BACzB,kBAAM,CAAC,qBAAqB;mBACtC,mBAAO,CAAC,QAAQ,CAAC,yBAAyB;CAC5D,CAAA;AACD,MAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAA;AAED,MAAM,oBAAoB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAGtC,CAAA;AAED,MAAM,WAAW,GAAG;;;;CAInB,CAAA;AAED,MAAM,WAAW,GAAG,2BAAM,CAAC,MAAM,CAAA;IAC7B,WAAW;CACd,CAAA;AAED,MAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;IAC/B,WAAW;CACd,CAAA;AAEM,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAA;IAC1D,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IACvD,OAAO,CACL,uBAAC,mBAAmB,kBAClB,IAAI,EAAE,iBAAK,CAAC,cAAc,EAC1B,KAAK,oBACA,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,iBAGnE,uBAAC,iBAAiB,kBAAC,OAAO,EAAE,YAAY,4BAAuB,IAC3C,CACvB,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,aAAa,iBAazB;AAEM,MAAM,gBAAgB,GAAG,KAAK,CAAC,EAAE;IACtC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IACnD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAA;IAEpC,MAAM,KAAK,GAAG,CAAM,CAAC,EAAC,EAAE;QACtB,IAAI,CAAC,CAAC,IAAI,KAAK,qBAAqB,EAAE;YACpC,MAAM,YAAY,EAAE,CAAA;SACrB;IACH,CAAC,CAAA,CAAA;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,gBAAgB,EAAE;YAC3B,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;SACjD;aAAM,IAAI,MAAM,CAAC,WAAW,EAAE;YAC7B,MAAM;YACN,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;SACvC;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,wBAAC,aAAa,kBACZ,IAAI,EAAE,iBAAK,CAAC,OAAO,EACnB,KAAK,oBACA,KAAK,CAAC,KAAK,kBAGhB,uBAAC,qBAAa,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAI,EAC1C,uBAAC,oBAAoB,cAClB,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,uBAAC,WAAW,IAAC,GAAG,EAAE,OAAO,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,uBAAC,gBAAgB,cACf,uBAAC,OAAO,KAAG,GACM,CACpB,GACoB,KACT,CACjB,CAAA;AACH,CAAC,CAAA;AAvCY,QAAA,gBAAgB,oBAuC5B"}

package/src/webchat/webview.jsx

@@ -1,106 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import styled from 'styled-components'
-
-import { COLORS, ROLES, WEBCHAT } from '../constants'
-import { WebviewRequestContext } from '../contexts'
-import { WebchatContext } from '../webchat/context'
-
-const StyledWebview = styled.div`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${COLORS.SOLID_WHITE};
-  z-index: 2;
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`
-
-const StyledWebviewHeader = styled.div`
-  text-align: right;
-  background-color: ${COLORS.WILD_SAND_WHITE};
-  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`
-const StyledCloseHeader = styled.div`
-  display: inline-block;
-  padding: 8px 12px;
-  cursor: pointer;
-`
-
-const StyledWebviewContent = styled.div`
-  flex: 1;
-  overflow: auto;
-`
-
-const FrameStyles = `
-  border-style: none;
-  width: 100%;
-  height: 100%;
-`
-
-const StyledFrame = styled.iframe`
-  ${FrameStyles}
-`
-
-const StyledFrameAsDiv = styled.div`
-  ${FrameStyles}
-`
-
-export const WebviewHeader = () => {
-  const { closeWebview } = useContext(WebviewRequestContext)
-  const { getThemeProperty } = useContext(WebchatContext)
-  return (
-    <StyledWebviewHeader
-      role={ROLES.WEBVIEW_HEADER}
-      style={{
-        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle),
-      }}
-    >
-      <StyledCloseHeader onClick={closeWebview}>✕</StyledCloseHeader>
-    </StyledWebviewHeader>
-  )
-}
-
-export const WebviewContainer = props => {
-  const { webchatState } = useContext(WebchatContext)
-  const { closeWebview } = useContext(WebviewRequestContext)
-  const Webview = webchatState.webview
-
-  const close = async e => {
-    if (e.data === 'botonicCloseWebview') {
-      await closeWebview()
-    }
-  }
-
-  useEffect(() => {
-    if (window.addEventListener) {
-      window.addEventListener('message', close, false)
-    } else if (window.attachEvent) {
-      // ie8
-      window.attachEvent('onmessage', close)
-    }
-  }, [])
-
-  return (
-    <StyledWebview
-      role={ROLES.WEBVIEW}
-      style={{
-        ...props.style,
-      }}
-    >
-      <WebviewHeader style={{ flex: 'none' }} />
-      <StyledWebviewContent>
-        {typeof Webview === 'string' ? (
-          <StyledFrame src={Webview} />
-        ) : (
-          <StyledFrameAsDiv>
-            <Webview />
-          </StyledFrameAsDiv>
-        )}
-      </StyledWebviewContent>
-    </StyledWebview>
-  )
-}