@botonic/react 0.25.0-beta.0 → 0.26.0-alpha.0

package/src/contexts.tsx

@@ -1,18 +1,42 @@
+import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { WebchatContextProps } from './index-types'
+import { ActionRequest, WebchatContextProps } from './index-types'
 import { webchatInitialState } from './webchat/hooks'
 
-export const RequestContext = createContext({
+export const RequestContext = createContext<
+  Partial<ActionRequest> & {
+    getString: () => string
+    setLocale: () => void
+  }
+>({
   getString: () => '',
-  setLocale: () => '',
-  session: {},
+  setLocale: () => undefined,
+  session: {} as CoreSession,
   params: {},
-  input: {},
+  input: {} as CoreInput,
   defaultDelay: 0,
   defaultTyping: 0,
 })
 
+export interface CloseWebviewOptions {
+  payload?: string
+  path?: string
+  params?: Record<string, any>
+}
+
+export const WebviewRequestContext = createContext<{
+  closeWebview: (options?: CloseWebviewOptions) => undefined
+  getString: (stringId: string) => string
+  params: Record<string, any>
+  session: CoreSession
+}>({
+  closeWebview: () => undefined,
+  getString: () => '',
+  params: {} as Record<string, any>,
+  session: {} as CoreSession,
+})
+
 export const WebchatContext = createContext<WebchatContextProps>({
   addMessage: () => {
     return

package/src/index.ts

@@ -1,6 +1,10 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
-export { RequestContext, WebchatContext } from './contexts'
+export {
+  RequestContext,
+  WebchatContext,
+  WebviewRequestContext,
+} from './contexts'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'

package/src/webchat/message-list/index.tsx

@@ -93,6 +93,7 @@ export const WebchatMessageList = props => {
         role={ROLES.MESSAGE_LIST}
         // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
         id='botonic-scrollable-content'
+        // @ts-ignore
         scrollbar={scrollbarOptions}
         autoHide={scrollbarOptions.autoHide}
         ismessagescontainer={true.toString()}

package/src/webchat/webchat.jsx

@@ -16,7 +16,7 @@ import { Audio, Document, Image, Text, Video } from '../components'
 import { Handoff } from '../components/handoff'
 import { normalizeWebchatSettings } from '../components/webchat-settings'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
-import { RequestContext, WebchatContext } from '../contexts'
+import { WebchatContext, WebviewRequestContext } from '../contexts'
 import { SENDERS } from '../index-types'
 import {
   getFullMimeWhitelist,
@@ -367,8 +367,7 @@ export const Webchat = forwardRef((props, ref) => {
     if (options && options.payload) {
       sendPayload(options.payload)
     } else if (options && options.path) {
-      let params = ''
-      if (options.params) params = params2queryString(options.params)
+      const params = options.params ? params2queryString(options.params) : ''
       sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`)
     }
   }
@@ -604,6 +603,7 @@ export const Webchat = forwardRef((props, ref) => {
       updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
       updateTyping(false)
     },
+    closeWebview: closeWebview,
   }))
 
   const resolveCase = () => {
@@ -694,13 +694,10 @@ export const Webchat = forwardRef((props, ref) => {
   }
 
   const webviewRequestContext = {
+    closeWebview: closeWebview,
     getString: stringId => props.getString(stringId, webchatState.session),
-    setLocale: locale => props.getString(locale, webchatState.session),
-    session: webchatState.session || {},
     params: webchatState.webviewParams || {},
-    closeWebview: closeWebview,
-    defaultDelay: props.defaultDelay || 0,
-    defaultTyping: props.defaultTyping || 0,
+    session: webchatState.session || {},
   }
 
   useEffect(() => {
@@ -808,7 +805,7 @@ export const Webchat = forwardRef((props, ref) => {
   }
 
   const webchatWebview = () => (
-    <RequestContext.Provider value={webviewRequestContext}>
+    <WebviewRequestContext.Provider value={webviewRequestContext}>
       <WebviewContainer
         style={{
           ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
@@ -816,7 +813,7 @@ export const Webchat = forwardRef((props, ref) => {
         }}
         webview={webchatState.webview}
       />
-    </RequestContext.Provider>
+    </WebviewRequestContext.Provider>
   )
   let mobileStyle = {}
   if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {

package/src/webchat/webview.jsx

@@ -3,7 +3,7 @@ import Frame from 'react-frame-component'
 import styled from 'styled-components'
 
 import { COLORS, ROLES, WEBCHAT } from '../constants'
-import { RequestContext, WebchatContext } from '../contexts'
+import { WebchatContext, WebviewRequestContext } from '../contexts'
 
 const StyledWebview = styled.div`
   position: absolute;
@@ -62,7 +62,7 @@ const WebviewMode = props => {
 }
 
 export const WebviewHeader = () => {
-  const { closeWebview } = useContext(RequestContext)
+  const { closeWebview } = useContext(WebviewRequestContext)
   const { getThemeProperty } = useContext(WebchatContext)
   return (
     <StyledWebviewHeader
@@ -78,10 +78,10 @@ export const WebviewHeader = () => {
 
 export const WebviewContainer = props => {
   const { webchatState } = useContext(WebchatContext)
-  const { closeWebview } = useContext(RequestContext)
+  const { closeWebview } = useContext(WebviewRequestContext)
   const Webview = webchatState.webview
 
-  const close = e => e.data == 'botonicCloseWebview' && closeWebview()
+  const close = e => e.data === 'botonicCloseWebview' && closeWebview()
 
   useEffect(() => {
     if (window.addEventListener) {

package/src/webchat-app.jsx

@@ -209,6 +209,10 @@ export class WebchatApp {
     this.webchatRef.current.closeWebchat()
   }
 
+  closeWebview() {
+    this.webchatRef.current.closeWebview()
+  }
+
   toggle() {
     this.webchatRef.current.toggleWebchat()
   }

package/src/webview-app.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter, Route } from 'react-router-dom'
 
-import { RequestContext } from './contexts'
+import { CloseWebviewOptions, WebviewRequestContext } from './contexts'
 
 class App extends React.Component {
   constructor(props) {
@@ -21,7 +21,7 @@ class App extends React.Component {
     this.state = { session, params }
   }
 
-  async close(options) {
+  async close(options?: CloseWebviewOptions) {
     let payload = options ? options.payload : null
     if (options.path) payload = `__PATH_PAYLOAD__${options.path}`
     if (payload) {
@@ -76,8 +76,8 @@ class App extends React.Component {
   }
 
   render() {
-    const requestContext = {
-      getString: stringId =>
+    const webviewRequestContext = {
+      getString: (stringId: string) =>
         getString(this.props.locales, this.state.session.__locale, stringId),
       session: this.state.session || {},
       params: this.state.params || {},
@@ -85,11 +85,11 @@ class App extends React.Component {
     }
 
     return (
-      <RequestContext.Provider value={requestContext}>
+      <WebviewRequestContext.Provider value={webviewRequestContext}>
         {this.props.webviews.map((Webview, i) => (
           <Route key={i} path={`/${Webview.name}`} component={Webview} />
         ))}
-      </RequestContext.Provider>
+      </WebviewRequestContext.Provider>
     )
   }
 }