@botonic/react 0.36.0-alpha.0 → 0.36.0

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

@@ -3,8 +3,9 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
+import { DocumentProps } from './index-types'
 import { Message } from './message'
 
 const StyledButton = styled.a`
@@ -25,12 +26,13 @@ const StyledButton = styled.a`
   }
 `
 
-const serialize = documentProps => {
+const serialize = (documentProps: { src: string }) => {
   return { document: documentProps.src }
 }
 
-export const Document = props => {
+export const Document = (props: DocumentProps) => {
   props = { ...props, src: staticAsset(props.src) }
+
   let content = props.children
 
   const { getThemeProperty } = useContext(WebchatContext)

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

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
 import { renderComponent } from '../util/react'
+import { Button } from './button/index'
 
 const ElementContainer = styled.div`
   display: flex;
@@ -15,11 +16,16 @@ const ElementContainer = styled.div`
   justify-content: space-between;
 `
 
-export const Element = props => {
+export interface ElementProps {
+  children: React.ReactNode[]
+}
+
+export const Element = (props: ElementProps) => {
   const renderBrowser = () => (
     <ElementContainer>{props.children}</ElementContainer>
   )
 
+  // @ts-ignore
   const renderNode = () => <element>{props.children}</element>
 
   return renderComponent({ renderBrowser, renderNode })
@@ -29,8 +35,8 @@ Element.serialize = elementProps => {
   const element = Object.assign(
     {},
     ...elementProps.children
-      .filter(c => c && c.type && c.type.name != 'Button')
-      .map(c => c.type.serialize && c.type.serialize(c.props))
+      .filter(c => c?.type?.name !== Button.name)
+      .map(c => c?.type?.serialize && c.type.serialize(c.props))
   )
   // When we are serializer buttons from backend, we are receiving the data
   // as an array of buttons, so we have to keep robust with serve and deal with arrays
@@ -38,21 +44,13 @@ Element.serialize = elementProps => {
     ...elementProps.children
       .filter(c => {
         if (c instanceof Array) return true
-        return c && c.type && c.type.name == 'Button'
+        return c?.type?.name === Button.name
       })
       .map(b => {
         if (b instanceof Array) {
-          return b.map(
-            bb =>
-              bb &&
-              bb.type &&
-              bb.type.serialize &&
-              bb.type.serialize(bb.props).button
-          )
+          b.map(bb => bb?.type?.serialize?.(bb.props)?.button)
         }
-        return (
-          b && b.type && b.type.serialize && b.type.serialize(b.props).button
-        )
+        return b?.type?.serialize(b.props).button
       }),
   ]
   // When we have the buttons from backend, we have all buttons inside an array on the first position

package/src/components/handoff.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'
-import { WebchatContext } from '../contexts'
+import { WebchatContext } from '../webchat/context'
 
 const Container = styled.div`
   display: flex;

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

@@ -3,11 +3,16 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
+import { ImageProps } from './index-types'
 import { Message } from './message'
 
-const StyledImage = styled.img`
+interface StyledImageProps {
+  hasPreviewer: boolean
+}
+
+const StyledImage = styled.img<StyledImageProps>`
   border-radius: 8px;
   max-width: 150px;
   max-height: 150px;
@@ -15,14 +20,15 @@ const StyledImage = styled.img`
   cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};
 `
 
-const serialize = imageProps => {
+const serialize = (imageProps: { src: string }) => {
   return { image: imageProps.src }
 }
 
-export const Image = props => {
+export const Image = (props: ImageProps) => {
   props = props.input?.data
     ? { ...props, src: props.input.data }
     : { ...props, src: staticAsset(props.src) }
+
   let content = props.children
 
   const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)
@@ -31,9 +37,9 @@ export const Image = props => {
 
   const { getThemeProperty } = useContext(WebchatContext)
   const ImagePreviewer = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,
-    null
+    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer
   )
+
   if (isBrowser()) {
     content = (
       <>
@@ -53,6 +59,7 @@ export const Image = props => {
       </>
     )
   }
+
   return (
     <Message
       role={ROLES.IMAGE_MESSAGE}

package/src/components/index-types.ts

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { SENDERS } from '../index-types'
-import { CoverComponentProps } from '../webchat/index-types'
 
 export type MessageType =
   | 'audio'
@@ -16,7 +15,7 @@ export type MessageType =
 
 export interface MessageProps {
   blob?: boolean
-  children: React.ReactNode
+  children?: React.ReactNode
   delay?: number
   enabletimestamps?: boolean
   sentBy?: SENDERS
@@ -34,6 +33,10 @@ export interface TextProps extends MessageProps {
   botInteractionId?: string
 }
 
+export interface CarouselProps extends MessageProps {
+  children: React.ReactNode[]
+}
+
 export interface Webview {
   name: string
 }
@@ -48,7 +51,7 @@ export interface ButtonProps {
   onClick?: () => void
   autodisable?: boolean
   disabled?: boolean
-  disabledstyle?: boolean
+  disabledstyle?: Record<string, string> | string
   children: string
   setDisabled?: (disabled: boolean) => void
   parentId?: string
@@ -60,34 +63,31 @@ export interface ReplyProps {
   children: string
 }
 
-export interface PicProps {
+export interface ImageProps extends MessageProps {
   src: string
+  input?: { data: string }
 }
 
-export type ImageProps = PicProps
-
-export interface TitleProps {
-  children: React.ReactNode
-  style: string
+export interface VideoProps extends MessageProps {
+  src: string
+  input?: { data: string }
 }
 
-export type SubtitleProps = TitleProps
-
-export type CustomProp = { custom?: React.ComponentType }
-export type EnableProp = { enable?: boolean }
-export type ImageProp = { image?: string } // https URL or imported Image asset
-export type PersistentMenuCloseOption = { closeLabel: string }
-export type PersistentMenuOption = { label: string } & ButtonProps
-export type StyleProp = { style?: any }
+export interface AudioProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
 
-export type PersistentMenuTheme = (
-  | PersistentMenuCloseOption
-  | PersistentMenuOption
-)[]
+export interface DocumentProps extends MessageProps {
+  src: string
+  input?: { data: string }
+  from?: any
+}
 
-export interface PersistentMenuProps {
-  onClick: () => void
-  options: any
+export interface CustomMessageType {
+  (props: any): JSX.Element
+  customTypeName: string
+  deserialize(msg: any): JSX.Element
 }
 
 export type BlockInputOption = {
@@ -96,101 +96,6 @@ export type BlockInputOption = {
   message: string
 }
 
-export interface BlobProps {
-  blobTick?: boolean
-  blobTickStyle?: any
-  blobWidth?: string
-  imageStyle?: any
-}
-
-export interface ThemeProps extends StyleProp {
-  mobileBreakpoint?: number
-  mobileStyle?: any
-  webview?: StyleProp & { header?: StyleProp }
-  animations?: EnableProp
-  intro?: StyleProp & ImageProp & CustomProp
-  brand?: { color?: string } & ImageProp
-  header?: { title?: string; subtitle?: string } & ImageProp &
-    StyleProp &
-    CustomProp
-  message?: {
-    bot?: BlobProps & ImageProp & StyleProp
-    agent?: ImageProp
-    user?: BlobProps & StyleProp
-    customTypes?: React.ComponentType[]
-  } & StyleProp & {
-      timestamps?: {
-        withImage?: boolean
-        format: () => string
-      } & StyleProp &
-        EnableProp
-    }
-  button?: {
-    autodisable?: boolean
-    disabledstyle?: any
-    hoverBackground?: string
-    hoverTextColor?: string
-    messageType?: 'text' | 'payload'
-    urlIcon?: ImageProp & EnableProp
-  } & StyleProp &
-    CustomProp
-  replies?: {
-    align?: 'left' | 'center' | 'right'
-    wrap?: 'wrap' | 'nowrap'
-  }
-  carousel?: {
-    arrow?: {
-      left: CustomProp
-      right: CustomProp
-    }
-    enableArrows?: boolean
-  }
-  reply?: StyleProp & CustomProp
-  triggerButton?: ImageProp & StyleProp & CustomProp
-  notifications?: EnableProp & {
-    banner?: CustomProp & EnableProp & { text?: string }
-    triggerButton?: EnableProp
-  }
-  scrollButton?: EnableProp & CustomProp
-  markdownStyle?: string // string template with css styles
-  userInput?: {
-    attachments?: EnableProp & CustomProp
-    blockInputs?: BlockInputOption[]
-    box?: { placeholder: string } & StyleProp
-    emojiPicker?: EnableProp & CustomProp
-    menu?: { darkBackground?: boolean } & {
-      custom?: React.ComponentType<PersistentMenuProps>
-    }
-    menuButton?: CustomProp
-    persistentMenu?: PersistentMenuTheme
-    sendButton?: EnableProp & CustomProp
-  } & EnableProp &
-    StyleProp
-  imagePreviewer?: React.ComponentType<ImagePreviewerProps>
-}
-
-interface ImagePreviewerProps {
-  src: string
-  isPreviewerOpened: boolean
-  closePreviewer: () => void
-}
-
-export interface CoverComponentOptions {
-  component: React.ComponentType<CoverComponentProps>
-  props?: any
-}
-
-export interface WebchatSettingsProps {
-  blockInputs?: BlockInputOption[]
-  enableAnimations?: boolean
-  enableAttachments?: boolean
-  enableEmojiPicker?: boolean
-  enableUserInput?: boolean
-  persistentMenu?: PersistentMenuTheme
-  theme?: ThemeProps
-  user?: { extra_data?: any }
-}
-
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }

package/src/components/index.ts

@@ -1,9 +1,10 @@
 export { Audio } from './audio'
-export { Button } from './button'
+export { Button } from './button/index'
 export { Carousel } from './carousel'
 export { customMessage } from './custom-message'
 export { Document } from './document'
 export { Element } from './element'
+export { Handoff } from './handoff'
 export { Image } from './image'
 export * from './index-types'
 export { Location } from './location'
@@ -18,15 +19,35 @@ export { Subtitle } from './subtitle'
 export { Text } from './text'
 export { Title } from './title'
 export { Video } from './video'
-export { WebchatSettings } from './webchat-settings'
+export {
+  normalizeWebchatSettings,
+  WebchatSettings,
+  WebchatSettingsProps,
+} from './webchat-settings'
 export {
   WhatsappButtonList,
   WhatsappButtonListProps,
   WhatsappButtonListRowProps,
   WhatsappButtonListSectionProps,
 } from './whatsapp-button-list'
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog'
 export {
   WhatsappCTAUrlButton,
   WhatsappCTAUrlButtonProps,
 } from './whatsapp-cta-url-button'
+export {
+  WhatsappMediaCarousel,
+  WhatsappMediaCarouselProps,
+} from './whatsapp-media-carousel'
+export { WhatsappProduct } from './whatsapp-product'
+export {
+  WhatsappProductCarousel,
+  WhatsappProductCarouselProps,
+} from './whatsapp-product-carousel'
+export {
+  ProductItem,
+  WhatsappProductList,
+  WhatsappProductListProps,
+  WhatsappProductListSection,
+} from './whatsapp-product-list'
 export { WhatsappTemplate } from './whatsapp-template'

package/src/components/message/index.jsx

@@ -3,12 +3,13 @@ import React, { useContext, useEffect, useState } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { COLORS, WEBCHAT } from '../../constants'
-import { RequestContext, WebchatContext } from '../../contexts'
+import { RequestContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { Fade } from '../../shared/styles'
 import { isDev } from '../../util/environment'
 import { ConditionalWrapper, renderComponent } from '../../util/react'
-import { Button } from '../button'
+import { WebchatContext } from '../../webchat/context'
+import { Button } from '../button/index'
 import { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'
 import { Reply } from '../reply'
@@ -48,7 +49,7 @@ export const Message = props => {
   const markdown = props.markdown
   const { webchatState, addMessage, updateReplies, getThemeProperty } =
     useContext(WebchatContext)
-  const [state, setState] = useState({
+  const [state] = useState({
     id: props.id || uuidv7(),
   })
 
@@ -138,10 +139,7 @@ export const Message = props => {
     }
   }, [webchatState.messagesJSON])
 
-  const brandColor = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-    COLORS.BOTONIC_BLUE
-  )
+  const brandColor = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)
 
   const getBgColor = () => {
     if (!blob) return COLORS.TRANSPARENT
@@ -164,7 +162,7 @@ export const Message = props => {
 
   const userOrBotMessage = isSentByUser ? SENDERS.user : SENDERS.bot
   const hasBlobTick = () =>
-    getThemeProperty(`message.${userOrBotMessage}.blobTick`, true)
+    getThemeProperty(`message.${userOrBotMessage}.blobTick`)
 
   const renderBrowser = () => {
     const messageJSON = webchatState.messagesJSON.find(m => m.id === state.id)
@@ -204,8 +202,7 @@ export const Message = props => {
     }
 
     const animationsEnabled = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-      true
+      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
     )
 
     const resolveCustomTypeName = () =>

package/src/components/message/message-feedback.tsx

@@ -1,12 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { v7 as uuidv7 } from 'uuid'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'
-import { WebchatContext } from '../../contexts'
-import { ActionRequest } from '../../index-types'
 import { resolveImage } from '../../util'
-import { EventAction, FeedbackOption } from '../../webchat/tracking'
+import { WebchatContext } from '../../webchat/context'
+import { useTracking } from '../../webchat/tracking'
 import { FeedbackButton, FeedbackMessageContainer } from './styles'
 
 interface ButtonsState {
@@ -25,7 +23,8 @@ export const MessageFeedback = ({
   inferenceId,
   messageId,
 }: RatingProps) => {
-  const { webchatState, updateMessage, trackEvent } = useContext(WebchatContext)
+  const { webchatState, updateMessage } = useContext(WebchatContext)
+  const { trackKnowledgebaseFeedback } = useTracking()
 
   const [className, setClassName] = useState('')
   const [disabled, setDisabled] = useState<ButtonsState>({
@@ -56,34 +55,18 @@ export const MessageFeedback = ({
   }, [disabled])
 
   const handleClick = async (isUseful: boolean) => {
-    if (!trackEvent) {
-      return
-    }
-
     if (isUseful) {
       setDisabled({ positive: false, negative: true })
     } else {
       setDisabled({ positive: true, negative: false })
     }
 
-    const args = {
-      knowledgebaseInferenceId: inferenceId,
-      feedbackBotInteractionId: botInteractionId,
-      feedbackTargetId: messageId,
-      feedbackGroupId: uuidv7(),
-      possibleOptions: [FeedbackOption.ThumbsDown, FeedbackOption.ThumbsUp],
-      possibleValues: [0, 1],
-      option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
-      value: isUseful ? 1 : 0,
-    }
-
-    const request = {
-      session: {
-        ...webchatState.session,
-      },
-    } as unknown as ActionRequest
-
-    await trackEvent(request, EventAction.FeedbackKnowledgebase, args)
+    await trackKnowledgebaseFeedback({
+      messageId,
+      isUseful,
+      botInteractionId,
+      inferenceId,
+    })
   }
 
   return (

package/src/components/message/message-footer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { MessageFeedback } from './message-feedback'
 import { MessageFooterContainer } from './styles'
 import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'
@@ -30,13 +30,13 @@ export const MessageFooter = ({
     enabletimestamps
   )
   const isSentByUser = sentBy === SENDERS.user
-  const messageFotterClass = isSentByUser
+  const messageFooterClass = isSentByUser
     ? 'message-footer-user'
     : 'message-footer-bot'
 
   return (
     <MessageFooterContainer
-      className={messageFotterClass}
+      className={messageFooterClass}
       isSentByUser={isSentByUser}
     >
       {timestampsEnabled ? (

package/src/components/message/message-image.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { BotMessageImageContainer } from './styles'
 
 interface MessageImageProps {
@@ -23,10 +23,7 @@ export const MessageImage = ({ imagestyle, sentBy }: MessageImageProps) => {
 
   const BotMessageImage = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
-    getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
-      WEBCHAT.DEFAULTS.LOGO
-    )
+    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)
   )
 
   const AgentMessageImage = getThemeProperty(

package/src/components/message/timestamps.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { TimestampContainer, TimestampText } from './styles'
 
 export const resolveMessageTimestamps = (
@@ -62,8 +62,7 @@ export const MessageTimestamp = ({
   const isSentByAgent = sentBy === SENDERS.agent
 
   const BotMessageImage = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage
   )
 
   const AgentMessageImage = getThemeProperty(

package/src/components/multichannel/index-types.ts

@@ -25,10 +25,6 @@ export interface MultichannelTextProps extends MultichannelViewOptions {
 // Carousel
 export interface MultichannelCarouselProps extends MultichannelViewOptions {
   enableURL?: boolean
-  indexMode?: IndexMode
-  showTitle?: boolean
-  showSubtitle?: boolean
-  buttonsAsText?: boolean
 }
 
 // Button

package/src/components/multichannel/multichannel-button.jsx

@@ -3,9 +3,9 @@ import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { truncateText } from '../../util'
-import { Button } from '../button'
+import { Button } from '../button/index'
 import { MultichannelContext } from './multichannel-context'
-import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel-utils'
+import { WHATSAPP_MAX_BUTTON_CHARS } from './whatsapp/constants'
 
 export const MultichannelButton = props => {
   const requestContext = useContext(RequestContext)