@botonic/react 0.30.4 → 0.30.5-alpha.1

package/src/components/{button.jsx → button.tsx}

@@ -8,6 +8,7 @@ import { resolveImage } from '../util/environment'
 import { renderComponent } from '../util/react'
 import { generateWebviewUrlWithParams } from '../util/webviews'
 import { ButtonsDisabler } from './buttons-disabler'
+import { ButtonProps } from './index-types'
 
 const StyledButton = styled.button`
   display: flex;
@@ -24,10 +25,10 @@ const StyledButton = styled.button`
   border: 1px solid ${COLORS.SEASHELL_WHITE};
   cursor: pointer;
   outline: 0;
-  border-top-right-radius: ${props => props.top || '0px'};
-  border-top-left-radius: ${props => props.top || '0px'};
-  border-bottom-right-radius: ${props => props.bottom || '0px'};
-  border-bottom-left-radius: ${props => props.bottom || '0px'};
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
   overflow: hidden;
 `
 
@@ -35,7 +36,7 @@ export const StyledUrlImage = styled.img`
   width: 20px;
 `
 
-export const Button = props => {
+export const Button = (props: ButtonProps) => {
   const {
     webchatState,
     openWebview,
@@ -50,15 +51,19 @@ export const Button = props => {
     webchatState.theme,
     props
   )
+
   const handleClick = event => {
     event.preventDefault()
+
     const type = getThemeProperty(
       WEBCHAT.CUSTOM_PROPERTIES.buttonMessageType,
       INPUT.TEXT
     )
-    if (props.webview) openWebview(props.webview, props.params)
-    else if (props.path) {
-      type == INPUT.POSTBACK
+
+    if (props.webview) {
+      openWebview(props.webview, props.params)
+    } else if (props.path) {
+      type === INPUT.POSTBACK
         ? sendPayload(`__PATH_PAYLOAD__${props.path}`)
         : sendInput({
             type: INPUT.TEXT,
@@ -67,7 +72,7 @@ export const Button = props => {
             payload: `__PATH_PAYLOAD__${props.path}`,
           })
     } else if (props.payload) {
-      type == INPUT.POSTBACK
+      type === INPUT.POSTBACK
         ? sendPayload(props.payload)
         : sendInput({
             type: INPUT.TEXT,
@@ -78,11 +83,15 @@ export const Button = props => {
     } else if (props.url) {
       window.open(props.url, props.target || '_blank')
     }
-    if (props.onClick) props.onClick()
+
+    if (props.onClick) {
+      props.onClick()
+    }
+
     if (props.setDisabled) {
       props.setDisabled(true)
       const messageToUpdate = webchatState.messagesJSON.filter(
-        m => m.id == props.parentId
+        m => m.id === props.parentId
       )[0]
       const updatedMsg = ButtonsDisabler.getUpdatedMessage(messageToUpdate, {
         autoDisable,
@@ -116,6 +125,7 @@ export const Button = props => {
     const CustomButton = getThemeProperty(
       WEBCHAT.CUSTOM_PROPERTIES.customButton
     )
+
     if (CustomButton) {
       return (
         <div className={getClassName(true)} onClick={e => handleClick(e)}>
@@ -133,6 +143,7 @@ export const Button = props => {
           WEBCHAT.CUSTOM_PROPERTIES.buttonStyleBackground,
           COLORS.SOLID_WHITE
         )
+
     const buttonTextColor = hover
       ? getThemeProperty(
           WEBCHAT.CUSTOM_PROPERTIES.buttonHoverTextColor,
@@ -169,7 +180,6 @@ export const Button = props => {
           backgroundColor: buttonBgColor,
           ...(props.disabled && autoDisable && disabledStyle),
         }}
-        bottom={props.bottomRadius}
       >
         {props.children}
         {props.url && urlIcon && (
@@ -187,43 +197,62 @@ export const Button = props => {
     if (props.webview) {
       return (
         <button
+          // @ts-ignore
+          // eslint-disable-next-line react/no-unknown-property
           url={generateWebviewUrlWithParams(props.webview, props.params)}
           {...disabledProps}
         >
           {props.children}
         </button>
       )
-    } else if (props.path) {
+    }
+
+    if (props.path) {
       const payload = `__PATH_PAYLOAD__${props.path}`
       return (
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
         <button payload={payload} {...disabledProps}>
           {props.children}
         </button>
       )
-    } else if (props.payload) {
+    }
+
+    if (props.payload) {
       return (
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
         <button payload={props.payload} {...disabledProps}>
           {props.children}
         </button>
       )
-    } else if (props.url) {
+    }
+
+    if (props.url) {
       return (
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
         <button url={props.url} target={props.target} {...disabledProps}>
           {props.children}
         </button>
       )
-    } else if (props.onClick) {
+    }
+
+    if (props.onClick) {
       return null
     }
-    throw new Error('Button missing payload, path, webviews, url or onClick')
+
+    throw new Error('Button missing payload, path, webview, url or onClick')
   }
 
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Button.serialize = buttonProps => {
-  let payload = buttonProps.payload
-  if (buttonProps.path) payload = `__PATH_PAYLOAD__${buttonProps.path}`
+Button.serialize = (buttonProps: ButtonProps) => {
+  const payload = buttonProps.path
+    ? `__PATH_PAYLOAD__${buttonProps.path}`
+    : buttonProps.payload
+
   return {
     button: {
       payload,

package/src/components/index-types.ts

@@ -49,6 +49,9 @@ export interface ButtonProps {
   autodisable?: boolean
   disabled?: boolean
   disabledstyle?: boolean
+  children: string
+  setDisabled?: (disabled: boolean) => void
+  parentId?: string
 }
 
 export interface ReplyProps {
@@ -101,6 +104,7 @@ export interface BlobProps {
 }
 
 export interface ThemeProps extends StyleProp {
+  coverComponent?: CoverComponentOptions
   mobileBreakpoint?: number
   mobileStyle?: any
   webview?: StyleProp & { header?: StyleProp }

package/src/contexts.tsx

@@ -72,6 +72,9 @@ export const WebchatContext = createContext<WebchatContextProps>({
     return
   },
   theme: {},
+  toggleCoverComponent: () => {
+    return
+  },
   toggleWebchat: () => {
     return
   },

package/src/index-types.ts

@@ -148,15 +148,18 @@ export interface Event {
   message?: MessageInfo
 }
 
+// ClientInput: type for sendInput and updateLatestInput function without message_id and bot_interaction_id because backend set this values
+export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
+
 export interface WebchatContextProps {
   addMessage: (message: WebchatMessage) => void
   closeWebview: () => Promise<void>
   getThemeProperty: (property: string, defaultValue?: any) => any
-  openWebview: (webviewComponent: Webview) => void
+  openWebview: (webviewComponent: Webview, params?: any) => void
   resetUnreadMessages: () => void
   resolveCase: () => void
   sendAttachment: (attachment: File) => Promise<void>
-  sendInput: (input: CoreInput) => Promise<void>
+  sendInput: (input: ClientInput) => Promise<void>
   sendPayload: (payload: string) => Promise<void>
   sendText: (text: string, payload?: string) => Promise<void>
   setLastMessageVisible: (isLastMessageVisible: boolean) => void
@@ -164,7 +167,8 @@ export interface WebchatContextProps {
   toggleWebchat: (toggle: boolean) => void
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
-  updateLatestInput: (input: CoreInput) => void
+  toggleCoverComponent: (toggle: boolean) => void
+  updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: boolean) => void
   updateUser: (user: Partial<CoreSessionUser>) => void

package/src/webchat/cover-component/index.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+
+interface Props {
+  component: any
+  componentProps: any
+}
+
+export const CoverComponent = ({ component, componentProps }: Props) => {
+  const { getThemeProperty, toggleCoverComponent, webchatState } =
+    useContext(WebchatContext)
+
+  const Cover = component
+
+  const coverComponentProps = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
+    componentProps
+  )
+
+  const closeCoverComponent = () => {
+    toggleCoverComponent(false)
+  }
+
+  if (!Cover || !webchatState.isCoverComponentOpen) {
+    return null
+  }
+
+  return <Cover closeComponent={closeCoverComponent} {...coverComponentProps} />
+}

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

@@ -3,7 +3,7 @@ import { useReducer, useRef } from 'react'
 
 import { ThemeProps, Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
-import { WebchatMessage } from '../../index-types'
+import { ClientInput, WebchatMessage } from '../../index-types'
 import { WebchatAction } from '../actions'
 import { DevSettings, ErrorMessage, WebchatState } from '../index-types'
 import { webchatReducer } from '../webchat-reducer'
@@ -74,7 +74,7 @@ export function useWebchat() {
   const updateReplies = replies =>
     webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies })
 
-  const updateLatestInput = (input: Input) =>
+  const updateLatestInput = (input: ClientInput) =>
     webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input })
 
   const updateTyping = (typing: boolean) =>

package/src/webchat/webchat.jsx

@@ -44,6 +44,7 @@ import {
 import { ChatArea } from './chat-area'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
 import { BotonicContainerId } from './constants'
+import { CoverComponent } from './cover-component'
 import { WebchatHeader } from './header'
 import {
   useComponentWillMount,
@@ -407,37 +408,18 @@ export const Webchat = forwardRef((props, ref) => {
         (props.coverComponent.component || props.coverComponent)
     )
   }
-  const CoverComponent = getCoverComponent()
-
-  const closeCoverComponent = () => {
-    toggleCoverComponent(false)
-  }
+  const coverComponent = getCoverComponent()
+  const coverComponentProps = props.coverComponent?.props
 
   useEffect(() => {
-    if (!CoverComponent) return
+    if (!coverComponent) return
     if (
       !botonicState ||
-      (botonicState.messages && botonicState.messages.length == 0)
+      (botonicState.messages && botonicState.messages.length === 0)
     )
       toggleCoverComponent(true)
   }, [])
 
-  const coverComponent = () => {
-    const coverComponentProps = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
-      props.coverComponent && props.coverComponent.props
-    )
-
-    if (CoverComponent && webchatState.isCoverComponentOpen)
-      return (
-        <CoverComponent
-          closeComponent={closeCoverComponent}
-          {...coverComponentProps}
-        />
-      )
-    return null
-  }
-
   const messageComponentFromInput = input => {
     let messageComponent = null
     if (isText(input)) {
@@ -708,6 +690,7 @@ export const Webchat = forwardRef((props, ref) => {
         toggleWebchat,
         toggleEmojiPicker,
         togglePersistentMenu,
+        toggleCoverComponent,
         updateLatestInput,
         updateMessage,
         updateReplies,
@@ -744,36 +727,50 @@ export const Webchat = forwardRef((props, ref) => {
               toggleWebchat(false)
             }}
           />
-          {webchatState.error.message && (
-            <ErrorMessageContainer>
-              <ErrorMessage>{webchatState.error.message}</ErrorMessage>
-            </ErrorMessageContainer>
-          )}
-          <ChatArea />
 
-          {webchatState.isPersistentMenuOpen && (
-            <DarkenBackground component={persistentMenu()} />
-          )}
-          {!webchatState.handoff && userInputEnabled && (
-            <InputPanel
-              persistentMenu={props.persistentMenu}
-              enableEmojiPicker={props.enableEmojiPicker}
-              enableAttachments={props.enableAttachments}
-              handleAttachment={handleAttachment}
-              textareaRef={textareaRef}
-              host={host}
-              onUserInput={props.onUserInput}
+          {webchatState.isCoverComponentOpen ? (
+            <CoverComponent
+              component={coverComponent}
+              componentProps={coverComponentProps}
             />
+          ) : (
+            <>
+              {webchatState.error.message && (
+                <ErrorMessageContainer>
+                  <ErrorMessage>{webchatState.error.message}</ErrorMessage>
+                </ErrorMessageContainer>
+              )}
+
+              <ChatArea />
+
+              {webchatState.isPersistentMenuOpen && (
+                <DarkenBackground component={persistentMenu()} />
+              )}
+
+              {!webchatState.handoff && userInputEnabled && (
+                <InputPanel
+                  persistentMenu={props.persistentMenu}
+                  enableEmojiPicker={props.enableEmojiPicker}
+                  enableAttachments={props.enableAttachments}
+                  handleAttachment={handleAttachment}
+                  textareaRef={textareaRef}
+                  host={host}
+                  onUserInput={props.onUserInput}
+                />
+              )}
+
+              {webchatState.webview && webchatWebview()}
+
+              {webchatState.isCustomComponentRendered &&
+                customComponent &&
+                _renderCustomComponent()}
+            </>
           )}
-          {webchatState.webview && webchatWebview()}
-          {webchatState.isCoverComponentOpen && coverComponent()}
-          {webchatState.isCustomComponentRendered &&
-            customComponent &&
-            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>
   )
+
   return props.shadowDOM ? (
     <StyleSheetManager target={host}>{WebchatComponent}</StyleSheetManager>
   ) : (