@botonic/react 0.22.0-alpha.2 → 0.22.0-alpha.3

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

@@ -0,0 +1,64 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+// TODO: Add validation in component
+
+interface Action {
+  button: string
+  sections: Section[]
+}
+
+interface Section {
+  title?: string
+  rows: Row[]
+}
+
+interface Row {
+  id: string
+  title: string
+  description: string
+}
+
+interface TextMessage {
+  text: string
+}
+
+export interface WhatsappButtonListProps {
+  header?: string
+  body: TextMessage
+  footer?: TextMessage
+  action: Action
+}
+
+const serialize = _whatsappTemplateProps => {
+  // TODO: Implement to have data persistance in localStorage, not needed for this WhatsApp development
+  return {}
+}
+
+export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `${JSON.stringify(props)}`
+    return (
+      <Message
+        json={serialize(message)}
+        {...props}
+        type={INPUT.WHATSAPP_BUTTON_LIST}
+      >
+        {message}
+      </Message>
+    )
+  }
+
+  const renderNode = () => {
+    return (
+      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      <message {...props} type={INPUT.WHATSAPP_BUTTON_LIST} />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/contexts.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { webchatInitialState } from './webchat/hooks'
 
-export const RequestContext = React.createContext({
+export const RequestContext = createContext({
   getString: () => '',
   setLocale: () => '',
   session: {},
@@ -12,7 +12,7 @@ export const RequestContext = React.createContext({
   defaultTyping: 0,
 })
 
-export const WebchatContext = React.createContext({
+export const WebchatContext = createContext({
   sendText: text => {},
   sendAttachment: attachment => {},
   sendPayload: payload => {},

package/src/index-types.ts

@@ -0,0 +1,195 @@
+import type {
+  BotRequest as CoreBotRequest,
+  Input as CoreInput,
+  InputType as CoreInputType,
+  Plugin as CorePlugin,
+  Route as CoreRoute,
+  Routes as CoreRoutes,
+  Session as CoreSession,
+  SessionUser as CoreSessionUser,
+} from '@botonic/core/lib/esm/models/legacy-types'
+import React from 'react'
+
+import {
+  ButtonProps,
+  ReplyProps,
+  ThemeProps,
+  WebchatSettingsProps,
+  Webview,
+} from './components/index-types'
+import { WebchatState } from './webchat'
+
+/**
+ * See @botonic/core's Response for the description of the Response's semantics*/
+export interface BotResponse extends CoreBotRequest {
+  response: [React.ReactNode]
+}
+
+export interface Route extends CoreRoute {
+  action?: React.ComponentType<any>
+  retryAction?: React.ComponentType<any>
+}
+export type Routes = CoreRoutes<Route>
+
+// Parameters of the actions' botonicInit method
+export interface ActionRequest {
+  defaultDelay: number
+  defaultTyping: number
+  input: CoreInput
+  lastRoutePath: string
+  params: { [key: string]: string }
+  plugins: { [id: string]: CorePlugin }
+  session: CoreSession
+}
+
+export interface RequestContextInterface extends ActionRequest {
+  getString: (stringId: string) => string
+  setLocale: (locale: string) => string
+}
+
+export interface CustomMessageType {
+  customTypeName: string
+}
+
+// TODO: Reuse types to be reused in respective components
+// export class WebchatApp {
+//   constructor(options: WebchatAppArgs)
+//   addBotMessage(message: WebchatMessage): void
+//   addBotText(text: string): void
+//   addUserMessage(message: WebchatMessage): void
+//   addUserPayload(payload: string): void
+//   addUserText(text: string): void
+//   clearMessages(): void
+//   close(): void
+//   closeCoverComponent(): void
+//   destroy(): void
+//   getComponent(
+//     host: HTMLElement,
+//     optionsAtRuntime?: WebchatAppArgs
+//   ): React.ForwardRefExoticComponent<any>
+//   getLastMessageUpdate(): string
+//   getMessages(): WebchatMessage[]
+//   getVisibility(): Promise<boolean>
+//   isWebchatVisible({ appId: string }): Promise<boolean>
+//   onCloseWebchat(args: any): void
+//   onInitWebchat(args: any): void
+//   onOpenWebchat(args: any): void
+//   onServiceEvent(event: Event): void
+//   onStateChange(args: OnStateChangeArgs): void
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   open(): void
+//   openCoverComponent(): void
+//   render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
+//   resendUnsentInputs(): Promise<void>
+//   resolveWebchatVisibility(optionsAtRuntime: {
+//     appId: string
+//     visibility: () => boolean
+//   }): Promise<boolean>
+//   setTyping(enable: boolean): void
+//   toggle(): void
+//   toggleCoverComponent(): void
+//   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
+//   updateLastMessageDate(date: string): void
+//   updateUser(user: Partial<CoreSessionUser>): void
+//   updateWebchatSettings(settings: WebchatSettingsProps): void
+//   renderCustomComponent(customComponent: React.ReactNode): void
+//   unmountCustomComponent(): void
+// }
+
+// export interface WebchatArgs {
+//   blockInputs?: BlockInputOption[]
+//   coverComponent?: CoverComponentOptions
+//   defaultDelay?: number
+//   defaultTyping?: number
+//   enableAnimations?: boolean
+//   enableAttachments?: boolean
+//   enableEmojiPicker?: boolean
+//   enableUserInput?: boolean
+//   shadowDOM?: boolean | (() => boolean)
+//   hostId?: string
+//   getString?: (stringId: string, session: CoreSession) => string
+//   onClose?: (app: WebchatApp, args: any) => void
+//   onInit?: (app: WebchatApp, args: any) => void
+//   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+//   onOpen?: (app: WebchatApp, args: any) => void
+//   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+//   persistentMenu?: PersistentMenuTheme
+//   storage?: Storage | null
+//   storageKey?: any
+//   theme?: ThemeProps
+// }
+
+// export interface WebchatAppArgs extends WebchatArgs {
+export interface WebchatAppArgs {
+  appId?: string
+  visibility?: () => boolean
+}
+
+export interface WebchatMessage {
+  ack: 0 | 1
+  buttons: ButtonProps[]
+  data: any
+  delay: number
+  display: boolean
+  from: 'user' | 'bot'
+  id: string
+  markdown: boolean
+  replies: ReplyProps[]
+  timestamp: string
+  type: CoreInputType
+  typing: number
+}
+
+export interface OnUserInputArgs {
+  input: CoreInput
+  lastRoutePath?: string
+  session?: CoreSession
+  user: CoreSessionUser
+}
+
+export interface OnStateChangeArgs {
+  messagesJSON: WebchatMessage[]
+  user: CoreSessionUser
+}
+
+export interface MessageInfo {
+  data: any | 'typing_on'
+  id: string
+  type: 'update_webchat_settings' | 'sender_action'
+}
+
+export interface Event {
+  action?: 'update_message_info'
+  isError?: boolean
+  message?: MessageInfo
+}
+
+export interface WebchatContextProps {
+  sendText: (text: string, payload?: string) => void
+  sendAttachment: (attachment: File) => void
+  sendPayload: (payload: string) => void
+  sendInput: (input: CoreInput) => void
+  openWebview: (webviewComponent: Webview) => void
+  addMessage: (message: WebchatMessage) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: boolean) => void
+  updateLatestInput: (input: CoreInput) => void
+  closeWebview: () => void
+  toggleWebchat: () => void
+  getThemeProperty: (property: string, defaultValue?: string) => any
+  resolveCase: () => void
+  theme: ThemeProps
+  webchatState: WebchatState
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  updateUser: (user: Partial<CoreSessionUser>) => void
+}
+
+// export class DevApp extends WebchatApp {
+//   constructor(args: WebchatAppArgs)
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+// }
+
+export * from './components'
+export * from './util'
+export * from './webchat'

package/src/{index.js → index.ts}

@@ -1,10 +1,11 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
-export * from './components'
+// export * from './components'
 export { RequestContext, WebchatContext } from './contexts'
 export { DevApp } from './dev-app'
+export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'
 export { NodeApp } from './node-app'
-export { staticAsset } from './util/environment'
-export { getBotonicApp, Webchat } from './webchat/index.js'
+export * from './util'
+// export { getBotonicApp, Webchat } from './webchat/index'
 export { WebchatApp } from './webchat-app'
 export { WebviewApp } from './webview-app'

package/src/message-utils.js

@@ -1,4 +1,4 @@
-import { INPUT } from '@botonic/core'
+import { INPUT } from '@botonic/core/lib/esm/models/legacy-types'
 
 import { MAX_ALLOWED_SIZE_MB, MIME_WHITELIST } from './constants'
 

package/src/react-bot.jsx

@@ -1,4 +1,4 @@
-import { CoreBot } from '@botonic/core'
+import { CoreBot } from '@botonic/core/lib/esm'
 import React from 'react'
 
 import { Text } from './components/text'

package/src/util/index.ts

@@ -0,0 +1,8 @@
+export * from './dom'
+export * from './environment'
+export * from './error-boundary'
+export * from './logs'
+export * from './objects'
+export * from './react'
+export * from './regexs'
+export * from './webchat'

package/src/util/webchat.js

@@ -10,20 +10,21 @@ import { getProperty } from './objects'
  * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
  * If property doesn't exist, returns the defaultValue.
  */
-export const _getThemeProperty =
-  theme =>
-  (property, defaultValue = undefined) => {
-    for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
-      if (v == property) {
-        const nestedProperty = getProperty(theme, v)
-        if (nestedProperty !== undefined) return nestedProperty
-        const plainProperty = getProperty(theme, k)
-        if (plainProperty !== undefined) return plainProperty
-        return defaultValue
-      }
+export const _getThemeProperty = theme => (
+  property,
+  defaultValue = undefined
+) => {
+  for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
+    if (v == property) {
+      const nestedProperty = getProperty(theme, v)
+      if (nestedProperty !== undefined) return nestedProperty
+      const plainProperty = getProperty(theme, k)
+      if (plainProperty !== undefined) return plainProperty
+      return defaultValue
     }
-    return undefined
   }
+  return undefined
+}
 
 export const createUser = () => {
   const parser = new UAParser()

package/src/webchat/{index.d.ts → index-types.ts}

@@ -1,9 +1,10 @@
-import * as core from '@botonic/core'
-import * as React from 'react'
+import type {
+  Input as CoreInput,
+  Session as CoreSession,
+} from '@botonic/core/lib/esm/models/legacy-types'
 import { RefObject } from 'react'
 
-import { Reply, Webview } from '../components/index'
-import { Message, WebchatApp, WebchatArgs } from '../index'
+import { Webview } from '../components/index-types'
 
 export interface WebchatStateTheme {
   headerTitle: string
@@ -20,13 +21,13 @@ export interface WebchatState {
   width: number
   height: number
   messagesJSON: any[]
-  messagesComponents: Message[]
-  replies: Reply[]
-  latestInput: Partial<core.Input>
+  messagesComponents: any[]
+  replies: any[]
+  latestInput: Partial<CoreInput>
   typing: boolean
   webview: Webview | null
   webviewParams: null
-  session: Partial<core.Session>
+  session: Partial<CoreSession>
   lastRoutePath: string | null
   handoff: boolean
   theme: WebchatStateTheme
@@ -41,11 +42,11 @@ export interface WebchatState {
   currentAttachment: File | undefined
 }
 
-export interface WebchatProps extends WebchatArgs {
+// export interface WebchatProps extends WebchatArgs {
+export interface WebchatProps {
   ref: RefObject<any>
   onConnectionRegained?: () => Promise<void>
 }
-export const WebChat: React.ForwardRefExoticComponent<WebchatProps>
 
 export interface WebchatDevProps extends WebchatProps {
   initialDevSettings?: {
@@ -53,9 +54,6 @@ export interface WebchatDevProps extends WebchatProps {
     showSessionView?: boolean
   }
 }
-export const WebChatDev: React.ForwardRefExoticComponent<WebchatDevProps>
-
-export function getBotonicApp(): WebchatApp
 
 export interface CoverComponentProps {
   closeComponent: () => void

package/src/webchat/{index.js → index.ts}

@@ -1,11 +1,11 @@
+// @ts-nocheck
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 
-/**
- * @returns {WebChatApp}
- */
 export function getBotonicApp() {
   // Botonic is exported from your bot
   // eslint-disable-next-line no-undef
   return Botonic
 }
+
+export * from './index-types'

package/src/webchat-app.jsx

@@ -1,4 +1,5 @@
-import { HubtypeService, INPUT } from '@botonic/core'
+import { HubtypeService } from '@botonic/core'
+import { INPUT } from '@botonic/core/lib/esm/models/legacy-types'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'

package/src/index.d.ts

@@ -1,238 +0,0 @@
-import * as core from '@botonic/core'
-import * as React from 'react'
-
-import {
-  BlockInputOption,
-  ButtonProps,
-  CoverComponentOptions,
-  PersistentMenuTheme,
-  ReplyProps,
-  ThemeProps,
-  WebchatSettingsProps,
-  Webview,
-} from './components'
-import { WebchatState } from './webchat'
-
-/**
- * See @botonic/core's Response for the description of the Response's semantics*/
-export interface BotResponse extends core.BotRequest {
-  response: [React.ReactNode]
-}
-
-export interface Route extends core.Route {
-  action?: React.ComponentType<any>
-  retryAction?: React.ComponentType<any>
-}
-type Routes = core.Routes<Route>
-
-export class ReactBot extends core.CoreBot {
-  renderReactActions({
-    actions,
-    request: ActionRequest,
-  }): Promise<React.ReactNode>
-}
-
-export class NodeApp {
-  constructor(options: Omit<core.CoreBotConfig, 'renderer'>)
-  bot: ReactBot
-  input(request: core.BotRequest): Promise<BotResponse>
-  renderNode(args): string
-}
-
-// Parameters of the actions' botonicInit method
-export interface ActionRequest {
-  defaultDelay: number
-  defaultTyping: number
-  input: core.Input
-  lastRoutePath: string
-  params: { [key: string]: string }
-  plugins: { [id: string]: core.Plugin }
-  session: core.Session
-}
-
-export class BotonicInputTester {
-  constructor(app: NodeApp)
-
-  text(
-    inp: string,
-    session?: core.Session,
-    lastRoutePath?: string
-  ): Promise<string>
-
-  payload(
-    inp: string,
-    session?: core.Session,
-    lastRoutePath?: string
-  ): Promise<string>
-}
-
-export class BotonicOutputTester {
-  constructor(app: NodeApp)
-
-  text(out: string, replies?: any): Promise<string>
-}
-
-export interface RequestContextInterface extends ActionRequest {
-  getString: (stringId: string) => string
-  setLocale: (locale: string) => string
-}
-
-export const RequestContext: React.Context<RequestContextInterface>
-export type RequestContext = React.Context<RequestContextInterface>
-
-export interface CustomMessageType {
-  customTypeName: string
-}
-
-export function msgToBotonic(
-  msg: any,
-  customMessageTypes?: CustomMessageType[]
-): React.ReactNode
-
-export function msgsToBotonic(
-  msgs: any | any[],
-  customMessageTypes?: CustomMessageType[]
-): React.ReactNode
-
-export interface WebchatArgs {
-  blockInputs?: BlockInputOption[]
-  coverComponent?: CoverComponentOptions
-  defaultDelay?: number
-  defaultTyping?: number
-  enableAnimations?: boolean
-  enableAttachments?: boolean
-  enableEmojiPicker?: boolean
-  enableUserInput?: boolean
-  shadowDOM?: boolean | (() => boolean)
-  hostId?: string
-  getString?: (stringId: string, session: core.Session) => string
-  onClose?: (app: WebchatApp, args: any) => void
-  onInit?: (app: WebchatApp, args: any) => void
-  onMessage?: (app: WebchatApp, message: WebchatMessage) => void
-  onOpen?: (app: WebchatApp, args: any) => void
-  onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
-  persistentMenu?: PersistentMenuTheme
-  storage?: Storage | null
-  storageKey?: any
-  theme?: ThemeProps
-}
-
-export interface WebchatAppArgs extends WebchatArgs {
-  appId?: string
-  visibility?: () => boolean
-}
-
-export interface WebchatMessage {
-  ack: 0 | 1
-  buttons: ButtonProps[]
-  data: any
-  delay: number
-  display: boolean
-  from: 'user' | 'bot'
-  id: string
-  markdown: boolean
-  replies: ReplyProps[]
-  timestamp: string
-  type: core.InputType
-  typing: number
-}
-
-export interface OnUserInputArgs {
-  input: core.Input
-  lastRoutePath?: string
-  session?: core.Session
-  user: core.SessionUser
-}
-
-export interface OnStateChangeArgs {
-  messagesJSON: WebchatMessage[]
-  user: core.SessionUser
-}
-
-export interface MessageInfo {
-  data: any | 'typing_on'
-  id: string
-  type: 'update_webchat_settings' | 'sender_action'
-}
-
-export interface Event {
-  action?: 'update_message_info'
-  isError?: boolean
-  message?: MessageInfo
-}
-
-export class WebchatApp {
-  constructor(options: WebchatAppArgs)
-  addBotMessage(message: WebchatMessage): void
-  addBotText(text: string): void
-  addUserMessage(message: WebchatMessage): void
-  addUserPayload(payload: string): void
-  addUserText(text: string): void
-  clearMessages(): void
-  close(): void
-  closeCoverComponent(): void
-  destroy(): void
-  getComponent(
-    host: HTMLElement,
-    optionsAtRuntime?: WebchatAppArgs
-  ): React.ForwardRefExoticComponent<any>
-  getLastMessageUpdate(): string
-  getMessages(): WebchatMessage[]
-  getVisibility(): Promise<boolean>
-  isWebchatVisible({ appId: string }): Promise<boolean>
-  onCloseWebchat(args: any): void
-  onInitWebchat(args: any): void
-  onOpenWebchat(args: any): void
-  onServiceEvent(event: Event): void
-  onStateChange(args: OnStateChangeArgs): void
-  onUserInput(args: OnUserInputArgs): Promise<void>
-  open(): void
-  openCoverComponent(): void
-  render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
-  resendUnsentInputs(): Promise<void>
-  resolveWebchatVisibility(optionsAtRuntime: {
-    appId: string
-    visibility: () => boolean
-  }): Promise<boolean>
-  setTyping(enable: boolean): void
-  toggle(): void
-  toggleCoverComponent(): void
-  updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
-  updateLastMessageDate(date: string): void
-  updateUser(user: Partial<core.SessionUser>): void
-  updateWebchatSettings(settings: WebchatSettingsProps): void
-  renderCustomComponent(customComponent: React.ReactNode): void
-  unmountCustomComponent(): void
-}
-
-export interface WebchatContextProps {
-  sendText: (text: string, payload?: string) => void
-  sendAttachment: (attachment: File) => void
-  sendPayload: (payload: string) => void
-  sendInput: (input: core.Input) => void
-  openWebview: (webviewComponent: Webview) => void
-  addMessage: (message: WebchatMessage) => void
-  updateMessage: (message: WebchatMessage) => void
-  updateReplies: (replies: boolean) => void
-  updateLatestInput: (input: core.Input) => void
-  closeWebview: () => void
-  toggleWebchat: () => void
-  getThemeProperty: (property: string, defaultValue?: string) => any
-  resolveCase: () => void
-  theme: ThemeProps
-  webchatState: WebchatState
-  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  updateUser: (user: Partial<core.SessionUser>) => void
-}
-export const WebchatContext: React.Context<WebchatContextProps>
-export type WebchatContext = React.Context<WebchatContextProps>
-
-export class DevApp extends WebchatApp {
-  constructor(args: WebchatAppArgs)
-  onUserInput(args: OnUserInputArgs): Promise<void>
-  render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
-}
-
-export * from './components'
-export * from './util'
-export * from './webchat'

package/src/util/index.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement, ReactNode } from 'react'
-
-export function staticAsset(path: string): string
-export function hasComplexChildren(
-  element: ReactNode
-): ReactElement<{ children: ReactNode[] }>
-
-export const isDev: boolean
-export const isProd: boolean