refactor(botonic-react): add and fix types in button

packages/botonic-react/src/components/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,18 +25,18 @@ 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;
 `
 
 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,

packages/botonic-react/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 {

packages/botonic-react/src/index-types.ts

@@ -148,23 +148,26 @@ 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
   theme: ThemeProps
   toggleWebchat: (toggle: boolean) => void
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
-  updateLatestInput: (input: CoreInput) => void
+  updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: boolean) => void
   updateUser: (user: Partial<CoreSessionUser>) => void

packages/botonic-react/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) =>