@botonic/react 0.36.0-alpha.0 → 0.36.0

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,73 @@
+import { Session as CoreSession } from '@botonic/core'
+import React, { useContext, useEffect } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import {
+  CloseWebviewOptions,
+  WebviewRequestContext,
+  WebviewRequestContextType,
+} 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: WebviewRequestContextType = {
+    params: webchatState.webviewParams || ({} as Record<string, string>),
+    session: webchatState.session || ({} as Partial<CoreSession>),
+    getUserCountry: () => webchatState.session?.user?.country || '',
+    getUserLocale: () => webchatState.session?.user?.locale || '',
+    getSystemLocale: () => webchatState.session?.user?.system_locale || '',
+    closeWebview: async (options?: CloseWebviewOptions) =>
+      await closeWebview(options),
+  }
+
+  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 (
+    <WebviewRequestContext.Provider value={webviewRequestContext}>
+      <StyledWebview
+        role={ROLES.WEBVIEW}
+        style={{
+          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
+        }}
+      >
+        <WebviewHeader />
+        <StyledWebviewContent>
+          {isUrlToWebview ? (
+            <StyledFrame src={Webview} />
+          ) : (
+            <StyledFrameAsDiv>
+              <Webview />
+            </StyledFrameAsDiv>
+          )}
+        </StyledWebviewContent>
+      </StyledWebview>
+    </WebviewRequestContext.Provider>
+  )
+}

package/src/webchat/webview/styles.ts

@@ -0,0 +1,62 @@
+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: ${props => props.theme.style.borderRadius};
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    position: ${props => props.theme.mobileStyle.position};
+    right: ${props => props.theme.mobileStyle.right};
+    bottom: ${props => props.theme.mobileStyle.bottom};
+    width: ${props => props.theme.mobileStyle.width};
+    height: ${props => props.theme.mobileStyle.height};
+    border-radius: ${props => props.theme.mobileStyle.borderRadius};
+    font-size: ${props => props.theme.mobileStyle.fontSize};
+  }
+`
+
+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: ${props => props.theme.header?.style?.borderRadius};
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    border-radius: 0px;
+  }
+`
+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}
+`