@botonic/react 0.31.0-alpha.5 → 0.31.0-alpha.7

package/src/components/whatsapp-media-carousel.tsx

@@ -0,0 +1,104 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter
+
+interface TextParameter {
+  type: 'text'
+  text: string
+}
+
+interface CurrencyParameter {
+  type: 'currency'
+  currency: {
+    fallbackValue: string
+    code: string
+    amount1000: number
+  }
+}
+
+interface DateTimeParameter {
+  type: 'date_time'
+  dateTime: { fallbackValue: string }
+}
+
+type CardButton = QuickReplyButton | UrlButton
+
+interface Button {
+  type: 'quick_reply' | 'url'
+  buttonIndex?: number
+}
+
+interface QuickReplyButton extends Button {
+  payload: string
+}
+
+interface UrlButton extends Button {
+  urlVariable: string
+}
+
+interface Card {
+  fileType: 'image' | 'video'
+  fileId: string
+  cardIndex?: number
+  bodyParameters?: Parameters[]
+  buttons?: CardButton[]
+  extraComponents?: Record<string, any>[]
+}
+
+export interface WhatsappMediaCarouselProps {
+  templateName: string
+  templateLanguage: string
+  cards: Card[]
+  bodyParameters?: Parameters[]
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappMediaCarousel = (props: WhatsappMediaCarouselProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Media Carousel would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const getCards = (cards: Card[]) => {
+    cards.forEach((card, index) => {
+      if (!card.cardIndex) {
+        card.cardIndex = index
+      }
+      card.buttons?.forEach((button, index) => {
+        if (!button.buttonIndex) {
+          button.buttonIndex = index
+        }
+      })
+    })
+    return toSnakeCaseKeys(cards)
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}
+        cards={JSON.stringify(getCards(props.cards))}
+        templateName={props.templateName}
+        templateLanguage={props.templateLanguage}
+        type={INPUT.WHATSAPP_MEDIA_CAROUSEL}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product-carousel.tsx

@@ -0,0 +1,83 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+type Parameters = TextParameter | CurrencyParameter | DateTimeParameter
+
+interface TextParameter {
+  type: 'text'
+  text: string
+}
+
+interface CurrencyParameter {
+  type: 'currency'
+  currency: {
+    fallbackValue: string
+    code: string
+    amount1000: number
+  }
+}
+
+interface DateTimeParameter {
+  type: 'date_time'
+  dateTime: { fallbackValue: string }
+}
+
+interface Card {
+  productRetailerId: string
+  catalogId: string
+  cardIndex?: number
+}
+
+export interface WhatsappProductCarouselProps {
+  templateName: string
+  templateLanguage: string
+  cards: Card[]
+  bodyParameters?: Parameters[]
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProductCarousel = (
+  props: WhatsappProductCarouselProps
+) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product Carousel would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const getCards = (cards: Card[]) => {
+    cards.forEach((card, index) => {
+      if (!card.cardIndex) {
+        card.cardIndex = index
+      }
+    })
+    return toSnakeCaseKeys(cards)
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}
+        cards={JSON.stringify(getCards(props.cards))}
+        templateName={props.templateName}
+        templateLanguage={props.templateLanguage}
+        type={INPUT.WHATSAPP_PRODUCT_CAROUSEL}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product-list.tsx

@@ -0,0 +1,56 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { toSnakeCaseKeys } from '../util/functional'
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface ProductItem {
+  productRetailerId: string
+}
+
+export interface WhatsappProductListSection {
+  title: string
+  productItems: ProductItem[]
+}
+
+export interface WhatsappProductListProps {
+  body: string
+  header: string
+  catalogId: string
+  sections: WhatsappProductListSection[]
+  footer?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProductList = (props: WhatsappProductListProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product List would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        body={props.body}
+        footer={props.footer}
+        header={props.header}
+        sections={JSON.stringify(toSnakeCaseKeys(props.sections))}
+        catalogId={props.catalogId}
+        type={INPUT.WHATSAPP_PRODUCT_LIST}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-product.tsx

@@ -0,0 +1,44 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface WhatsappProductProps {
+  body: string
+  catalogId: string
+  productId: string
+  footer?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappProduct = (props: WhatsappProductProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Product would be sent to the user.`
+    return (
+      <Message json={serialize(message)} {...props} type={INPUT.TEXT}>
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message
+        {...props}
+        body={props.body}
+        footer={props.footer}
+        catalogId={props.catalogId}
+        productId={props.productId}
+        type={INPUT.WHATSAPP_PRODUCT}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/index-types.ts

@@ -14,14 +14,16 @@ import React from 'react'
 import {
   BlockInputOption,
   ButtonProps,
-  CoverComponentOptions,
-  PersistentMenuTheme,
   ReplyProps,
-  ThemeProps,
   WebchatSettingsProps,
-} from './components/index-types'
+} from './components'
 import { CloseWebviewOptions } from './contexts'
 import { UseWebchat } from './webchat/context/use-webchat'
+import {
+  CoverComponentOptions,
+  PersistentMenuOptionsTheme,
+  ThemeProps,
+} from './webchat/theme/types'
 import { WebchatApp } from './webchat-app'
 
 /**
@@ -87,7 +89,7 @@ interface AddBotResponseArgs {
 
 export interface WebchatArgs {
   theme?: ThemeProps
-  persistentMenu?: PersistentMenuTheme
+  persistentMenu?: PersistentMenuOptionsTheme
   coverComponent?: CoverComponentOptions
   blockInputs?: BlockInputOption[]
   enableEmojiPicker?: boolean
@@ -119,7 +121,7 @@ export interface WebchatProps {
 
   shadowDOM?: any
   theme?: ThemeProps
-  persistentMenu?: PersistentMenuTheme
+  persistentMenu?: PersistentMenuOptionsTheme
   coverComponent?: CoverComponentOptions
   blockInputs?: BlockInputOption[]
   enableEmojiPicker?: boolean

package/src/util/functional.ts

@@ -0,0 +1,31 @@
+function camelCaseToSnake(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1_$2')
+    .replace(/([A-Za-z])(\d)/g, '$1_$2')
+    .replace(/(\d)([A-Za-z])/g, '$1_$2')
+    .toLowerCase()
+}
+type Input = Record<string, any> | Record<string, any>[] | undefined
+
+export function toSnakeCaseKeys(input: Input): Input {
+  if (Array.isArray(input)) {
+    return input.map(item => toSnakeCaseKeys(item))
+  }
+
+  if (typeof input === 'object' && input !== null) {
+    const result = Object.keys(input).reduce((acc, key) => {
+      const snakeKey = camelCaseToSnake(key)
+      const value = input[key]
+      acc[snakeKey] =
+        typeof value === 'object' && value !== null
+          ? toSnakeCaseKeys(value)
+          : value
+
+      return acc
+    }, {})
+
+    return result
+  }
+
+  return input
+}

package/src/util/webchat.ts

@@ -2,8 +2,8 @@ import merge from 'lodash.merge'
 import UAParser from 'ua-parser-js'
 import { v7 as uuidv7 } from 'uuid'
 
-import { ThemeProps } from '../components'
 import { WEBCHAT } from '../constants'
+import { ThemeProps } from '../webchat/theme/types'
 import { getProperty } from './objects'
 
 /**

package/src/webchat/context/index.tsx

@@ -40,7 +40,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
   sendText: async () => {
     return
   },
-  theme: {},
+  theme: {}, // TODO: Remove this attribute and use allways webchatState.theme
   toggleCoverComponent: () => {
     return
   },

package/src/webchat/context/types.ts

@@ -4,14 +4,10 @@ import {
   SessionUser as CoreSessionUser,
 } from '@botonic/core'
 
-import { Reply } from '../../components'
-import {
-  ThemeProps,
-  WebchatSettingsProps,
-  Webview,
-} from '../../components/index-types'
+import { Reply, WebchatSettingsProps, Webview } from '../../components'
 import { TrackEventFunction, WebchatMessage } from '../../index-types'
 import { WebchatStateTheme } from '../index-types'
+import { ThemeProps } from '../theme/types'
 
 export interface ErrorMessage {
   message?: string
@@ -23,8 +19,8 @@ export interface DevSettings {
 }
 
 export interface WebchatState {
-  width: number
-  height: number
+  width: number // TODO: move this inside webchatState.theme.style
+  height: number // TODO: move this inside webchatState.theme.style
   messagesJSON: any[]
   messagesComponents: any[]
   replies?: (typeof Reply)[]
@@ -35,8 +31,8 @@ export interface WebchatState {
   session: Partial<CoreSession>
   lastRoutePath?: string
   handoff: boolean
-  theme: WebchatStateTheme
-  themeUpdates: Partial<WebchatStateTheme>
+  theme: WebchatStateTheme // TODO: type this as ThemeProps
+  themeUpdates: Partial<WebchatStateTheme> // TODO: type this as Partial<ThemeProps>
   error: ErrorMessage
   online: boolean
   devSettings: DevSettings
@@ -67,7 +63,7 @@ export interface WebchatContextProps {
   sendText: (text: string, payload?: string) => Promise<void>
   setIsInputFocused: (isInputFocused: boolean) => void
   setLastMessageVisible: (isLastMessageVisible: boolean) => void
-  theme: ThemeProps // TODO: Review if theme is needed and used from WebchatContext
+  theme: ThemeProps // TODO: Remove this attribute and use allways webchatState.theme
   toggleWebchat: (toggle: boolean) => void
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void

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

@@ -2,9 +2,10 @@ import { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
 import { Reply } from '../../components'
-import { ThemeProps, Webview } from '../../components/index-types'
+import { Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
 import { WebchatMessage } from '../../index-types'
+import { ThemeProps } from '../theme/types'
 import { WebchatAction } from './actions'
 import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
 import { webchatReducer } from './webchat-reducer'
@@ -22,6 +23,7 @@ export const webchatInitialState: WebchatState = {
   session: { user: undefined },
   lastRoutePath: undefined,
   handoff: false,
+  // TODO: type create a defaultTheme using ThemeProps, and put this in initialState
   theme: {
     headerTitle: WEBCHAT.DEFAULTS.TITLE,
     brandColor: COLORS.BOTONIC_BLUE,

package/src/webchat/index-types.ts

@@ -18,7 +18,3 @@ export interface WebchatDevProps extends WebchatArgs {
     showSessionView?: boolean
   }
 }
-
-export interface CoverComponentProps {
-  closeComponent: () => void
-}

package/src/webchat/input-panel/textarea.tsx

@@ -1,16 +1,16 @@
 import React, { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { PersistentMenuTheme } from '../../components/index-types'
 import { WEBCHAT } from '../../constants'
 import { Typing } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
+import { PersistentMenuOptionsTheme } from '../theme/types'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
-  persistentMenu: PersistentMenuTheme
+  persistentMenu: PersistentMenuOptionsTheme
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>

package/src/webchat/theme/types.ts

@@ -0,0 +1,119 @@
+import {
+  BlockInputOption,
+  ButtonProps,
+  CustomMessageType,
+} from '../../components/index-types'
+
+interface ImagePreviewerProps {
+  src: string
+  isPreviewerOpened: boolean
+  closePreviewer: () => void
+}
+export interface CoverComponentProps {
+  closeComponent: () => void
+}
+
+export interface CoverComponentOptions {
+  component: React.ComponentType<CoverComponentProps>
+  props?: any
+}
+
+export type PersistentMenuCloseOption = { closeLabel: string }
+export type PersistentMenuOption = { label: string } & ButtonProps
+
+export type PersistentMenuOptionsTheme = (
+  | PersistentMenuCloseOption
+  | PersistentMenuOption
+)[]
+
+export interface PersistentMenuOptionsProps {
+  onClick: () => void
+  options: any
+}
+
+export interface BlobProps {
+  blobTick?: boolean
+  blobTickStyle?: any
+  blobWidth?: string
+  imageStyle?: any
+}
+
+export interface ThemeProps {
+  style?: any
+  coverComponent?: CoverComponentOptions
+  mobileBreakpoint?: number
+  mobileStyle?: any
+  webview?: { style?: any; header?: { style?: any } }
+  animations?: { enable?: boolean }
+  intro?: { style?: any; image?: string; custom?: React.ComponentType }
+  brand?: { color?: string; image?: string }
+  header?: {
+    title?: string
+    subtitle?: string
+    image?: string
+    style?: any
+    custom?: React.ComponentType
+  }
+  // TODO: Review if this is needed hear, or only in message.customTypes? use the same type in both places
+  customMessageTypes?: CustomMessageType[]
+  message?: {
+    bot?: BlobProps & { image?: string; style?: any }
+    agent?: { image?: string }
+    user?: BlobProps & { style?: any }
+    // TODO: Review type used in cutomTypes should be a component exported by default with customMessage function
+    customTypes?: CustomMessageType[]
+    style?: any
+    timestamps?: {
+      withImage?: boolean
+      format: () => string
+      style?: any
+      enable?: boolean
+    }
+  }
+  button?: {
+    autodisable?: boolean
+    disabledstyle?: any
+    hoverBackground?: string
+    hoverTextColor?: string
+    messageType?: 'text' | 'payload'
+    urlIcon?: { image?: string; enable?: boolean }
+    style?: any
+    custom?: React.ComponentType
+  }
+  replies?: {
+    align?: 'left' | 'center' | 'right'
+    wrap?: 'wrap' | 'nowrap'
+  }
+  carousel?: {
+    arrow?: {
+      left: { custom?: React.ComponentType }
+      right: { custom?: React.ComponentType }
+    }
+    enableArrows?: boolean
+  }
+  reply?: { style?: any; custom?: React.ComponentType }
+  triggerButton?: { image?: string; style?: any; custom?: React.ComponentType }
+  notifications?: {
+    enable?: boolean
+    banner?: { custom?: React.ComponentType; enable?: boolean; text?: string }
+    triggerButton?: { enable?: boolean }
+  }
+  scrollButton?: { enable?: boolean; custom?: React.ComponentType }
+  markdownStyle?: string // string template with css styles
+  userInput?: {
+    attachments?: { enable?: boolean; custom?: React.ComponentType }
+    blockInputs?: BlockInputOption[]
+    box?: { placeholder: string; style?: any }
+    emojiPicker?: { enable?: boolean; custom?: React.ComponentType }
+    menu?: {
+      darkBackground?: boolean
+      custom?: React.ComponentType<PersistentMenuOptionsProps>
+    }
+    menuButton?: { custom?: React.ComponentType }
+    persistentMenu?: PersistentMenuOptionsTheme
+    sendButton?: { enable?: boolean; custom?: React.ComponentType }
+    enable?: boolean
+    style?: any
+  }
+  imagePreviewer?: React.ComponentType<ImagePreviewerProps>
+}

package/src/webchat/webchat.tsx

@@ -19,13 +19,13 @@ import { v7 as uuidv7 } from 'uuid'
 import {
   Audio,
   Document,
+  Handoff,
   Image,
+  normalizeWebchatSettings,
   Text,
   Video,
   WebchatSettingsProps,
 } from '../components'
-import { Handoff } from '../components/handoff'
-import { normalizeWebchatSettings } from '../components/webchat-settings'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
 import { CloseWebviewOptions, WebviewRequestContext } from '../contexts'
 import { SENDERS, WebchatProps, WebchatRef } from '../index-types'

package/src/webchat-app.tsx

@@ -3,13 +3,7 @@ import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { createRoot, Root } from 'react-dom/client'
 
-import {
-  BlockInputOption,
-  CoverComponentOptions,
-  PersistentMenuTheme,
-  ThemeProps,
-  WebchatSettingsProps,
-} from './components/index-types'
+import { BlockInputOption, WebchatSettingsProps } from './components'
 import { WEBCHAT } from './constants'
 import { CloseWebviewOptions } from './contexts'
 import {
@@ -26,11 +20,16 @@ import {
 } from './index-types'
 import { msgToBotonic } from './msg-to-botonic'
 import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
+import {
+  CoverComponentOptions,
+  PersistentMenuOptionsTheme,
+  ThemeProps,
+} from './webchat/theme/types'
 import { Webchat } from './webchat/webchat'
 
 export class WebchatApp {
   public theme?: ThemeProps
-  public persistentMenu?: PersistentMenuTheme
+  public persistentMenu?: PersistentMenuOptionsTheme
   public coverComponent?: CoverComponentOptions
   public blockInputs?: BlockInputOption[]
   public enableEmojiPicker?: boolean