@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

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

@@ -4,7 +4,7 @@ import React from 'react'
 import { truncateText } from '../util'
 import { renderComponent } from '../util/react'
 import { Message } from './message'
-import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/multichannel-utils'
+import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/whatsapp/constants'
 import { convertToMarkdownMeta } from './multichannel/whatsapp/markdown-meta'
 
 // TODO: Add validation in component
@@ -32,15 +32,15 @@ export interface WhatsappButtonListProps {
 }
 
 const serialize = _whatsappButtonListProps => {
-  // TODO: Implement to have data persistance in localStorage, not needed for this WhatsApp development
+  // TODO: Implement to have data persistence in localStorage, not needed for this WhatsApp development
   return {}
 }
 
 export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
-  const trucateSectionsContents = (
+  const truncateSectionsContents = (
     sections: WhatsappButtonListSectionProps[]
   ): WhatsappButtonListSectionProps[] => {
-    const trucateRowContents = (
+    const truncateRowContents = (
       row: WhatsappButtonListRowProps
     ): WhatsappButtonListRowProps => {
       const title = truncateText(row.title, WHATSAPP_MAX_BUTTON_LIST_CHARS)
@@ -62,7 +62,7 @@ export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
       title: section.title
         ? truncateText(section.title, WHATSAPP_MAX_BUTTON_LIST_CHARS)
         : undefined,
-      rows: section.rows.map(trucateRowContents),
+      rows: section.rows.map(truncateRowContents),
     }))
   }
 
@@ -87,7 +87,7 @@ export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
         {...props}
         body={convertToMarkdownMeta(props.body)}
         button={truncateText(props.button, WHATSAPP_MAX_BUTTON_CHARS)}
-        sections={JSON.stringify(trucateSectionsContents(props.sections))}
+        sections={JSON.stringify(truncateSectionsContents(props.sections))}
         type={INPUT.WHATSAPP_BUTTON_LIST}
       />
     )

package/src/components/whatsapp-catalog.tsx

@@ -0,0 +1,42 @@
+import { INPUT } from '@botonic/core'
+import React from 'react'
+
+import { renderComponent } from '../util/react'
+import { Message } from './message'
+
+export interface WhatsappCatalogProps {
+  body: string
+  footer?: string
+  thumbnailProductId?: string
+}
+
+const serialize = (message: string) => {
+  return { text: message }
+}
+
+export const WhatsappCatalog = (props: WhatsappCatalogProps) => {
+  const renderBrowser = () => {
+    // Return a dummy message for browser
+    const message = `WhatsApp Catalog 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}
+        thumbnailProductId={props.thumbnailProductId}
+        type={INPUT.WHATSAPP_CATALOG}
+      />
+    )
+  }
+
+  return renderComponent({ renderBrowser, renderNode })
+}

package/src/components/whatsapp-cta-url-button.tsx

@@ -10,7 +10,7 @@ import {
   WHATSAPP_MAX_BUTTON_CHARS,
   WHATSAPP_MAX_FOOTER_CHARS,
   WHATSAPP_MAX_HEADER_CHARS,
-} from './multichannel/multichannel-utils'
+} from './multichannel/whatsapp/constants'
 import { convertToMarkdownMeta } from './multichannel/whatsapp/markdown-meta'
 
 export interface WhatsappCTAUrlButtonCommonProps {
@@ -36,7 +36,7 @@ export type WhatsappCTAUrlButtonProps =
   | WhatsappCTAUrlButtonWebviewProps
 
 const serialize = _whatsappCTAUrlButtonProps => {
-  // TODO: Implement to have data persistance in localStorage, not needed for this WhatsApp development
+  // TODO: Implement to have data persistence in localStorage, not needed for this WhatsApp development
   return {}
 }
 
@@ -66,7 +66,10 @@ export const WhatsappCTAUrlButton = (props: WhatsappCTAUrlButtonProps) => {
         WHATSAPP_MAX_BODY_CHARS
       ),
       footer: props.footer
-        ? truncateText(props.footer, WHATSAPP_MAX_FOOTER_CHARS)
+        ? truncateText(
+            convertToMarkdownMeta(props.footer),
+            WHATSAPP_MAX_FOOTER_CHARS
+          )
         : undefined,
       displayText: truncateText(props.displayText, WHATSAPP_MAX_BUTTON_CHARS),
       url:

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/constants.js

@@ -33,25 +33,13 @@ export const COLORS = {
 
 export const WEBCHAT = {
   DEFAULTS: {
-    WIDTH: 300,
-    HEIGHT: 450,
-    TITLE: 'Botonic',
     LOGO: BotonicLogo,
     URL_ICON: UrlIcon,
-    PLACEHOLDER: 'Ask me something...',
-    FONT_FAMILY: "'Noto Sans JP', sans-serif",
-    BORDER_RADIUS_TOP_CORNERS: '6px 6px 0px 0px',
     ELEMENT_WIDTH: 222,
     ELEMENT_MARGIN_RIGHT: 6,
     STORAGE_KEY: 'botonicState',
     HOST_ID: 'root',
     ID: 'botonic-webchat',
-    BUTTON_AUTO_DISABLE: false,
-    BUTTON_DISABLED_STYLE: {
-      opacity: 0.5,
-      cursor: 'auto',
-      pointerEvents: 'none',
-    },
   },
   CUSTOM_PROPERTIES: {
     // General
@@ -189,10 +177,3 @@ export const ROLES = {
   DOCUMENT_MESSAGE: 'document-message',
   RAW_MESSAGE: 'raw-message',
 }
-
-export const COMPONENT_TYPE = {
-  TEXT: 'Text',
-  BUTTON: 'Button',
-  REPLY: 'Reply',
-  CAROUSEL: 'Carousel',
-}

package/src/contexts.tsx

@@ -1,22 +1,22 @@
 import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { ActionRequest, WebchatContextProps } from './index-types'
-import { webchatInitialState } from './webchat/hooks'
+import { ActionRequest } from './index-types'
 
-export const RequestContext = createContext<
-  Partial<ActionRequest> & {
-    getString: () => string
-    setLocale: () => void
-  }
->({
-  getString: () => '',
-  setLocale: () => undefined,
-  session: {} as CoreSession,
+export const RequestContext = createContext<ActionRequest>({
+  getUserCountry: () => '',
+  getUserLocale: () => '',
+  getSystemLocale: () => '',
+  setUserCountry: () => undefined,
+  setUserLocale: () => undefined,
+  setSystemLocale: () => undefined,
   params: {},
-  input: {} as CoreInput,
   defaultDelay: 0,
   defaultTyping: 0,
+  input: {} as CoreInput,
+  session: {} as CoreSession,
+  lastRoutePath: '',
+  plugins: {},
 })
 
 export interface CloseWebviewOptions {
@@ -27,83 +27,10 @@ export interface CloseWebviewOptions {
 
 export const WebviewRequestContext = createContext<{
   closeWebview: (options?: CloseWebviewOptions) => Promise<void>
-  getString: (stringId: string) => string
   params: Record<string, any>
-  session: CoreSession
+  session: Partial<CoreSession>
 }>({
   closeWebview: async () => undefined,
-  getString: () => '',
   params: {} as Record<string, any>,
-  session: {} as CoreSession,
-})
-
-export const WebchatContext = createContext<WebchatContextProps>({
-  addMessage: () => {
-    return
-  },
-  closeWebview: async () => {
-    return
-  },
-  getThemeProperty: () => {
-    return
-  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
-  openWebview: () => {
-    return
-  },
-  resolveCase: () => {
-    return
-  },
-  resetUnreadMessages: () => {
-    return
-  },
-  setLastMessageVisible: () => {
-    return
-  },
-  sendAttachment: async () => {
-    return
-  },
-  sendInput: async () => {
-    return
-  },
-  sendPayload: async () => {
-    return
-  },
-  sendText: async () => {
-    return
-  },
-  theme: {},
-  toggleWebchat: () => {
-    return
-  },
-  toggleEmojiPicker: () => {
-    return
-  },
-  togglePersistentMenu: () => {
-    return
-  },
-  updateLatestInput: () => {
-    return
-  },
-  updateMessage: () => {
-    return
-  },
-  updateReplies: () => {
-    return
-  },
-  updateUser: () => {
-    return
-  },
-  updateWebchatDevSettings: () => {
-    return
-  },
-  webchatState: webchatInitialState,
-  trackEvent: async () => {
-    return
-  },
-  webchatRef: { current: null },
-  chatAreaRef: { current: null },
-  inputPanelRef: { current: null },
-  headerRef: { current: null },
-  scrollableMessagesListRef: { current: null },
-  repliesRef: { current: null },
+  session: {} as Partial<CoreSession>,
 })

package/src/dev-app.jsx

@@ -1,6 +1,5 @@
-import merge from 'lodash.merge'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
@@ -56,13 +55,6 @@ export class DevApp extends WebchatApp {
   getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
-      persistentMenu,
-      coverComponent,
-      blockInputs,
-      enableEmojiPicker,
-      enableAttachments,
-      enableUserInput,
-      enableAnimations,
       storage,
       storageKey,
       onInit,
@@ -73,14 +65,7 @@ export class DevApp extends WebchatApp {
       hostId,
       ...webchatOptions
     } = optionsAtRuntime
-    theme = merge(this.theme, theme)
-    persistentMenu = persistentMenu || this.persistentMenu
-    coverComponent = coverComponent || this.coverComponent
-    blockInputs = blockInputs || this.blockInputs
-    enableEmojiPicker = enableEmojiPicker || this.enableEmojiPicker
-    enableAttachments = enableAttachments || this.enableAttachments
-    enableUserInput = enableUserInput || this.enableUserInput
-    enableAnimations = enableAnimations || this.enableAnimations
+    theme = super.createInitialTheme(optionsAtRuntime)
     storage = storage || this.storage
     storageKey = storageKey || this.storageKey
     this.onInit = onInit || this.onInit
@@ -97,17 +82,8 @@ export class DevApp extends WebchatApp {
         host={this.host}
         shadowDOM={this.shadowDOM}
         theme={theme}
-        persistentMenu={persistentMenu}
-        coverComponent={coverComponent}
-        blockInputs={blockInputs}
-        enableEmojiPicker={enableEmojiPicker}
-        enableAttachments={enableAttachments}
-        enableUserInput={enableUserInput}
-        enableAnimations={enableAnimations}
         storage={storage}
         storageKey={storageKey}
-        getString={(stringId, session) => this.bot.getString(stringId, session)}
-        setLocale={(locale, session) => this.bot.setLocale(locale, session)}
         onInit={(...args) => this.onInitWebchat(...args)}
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}
@@ -119,10 +95,10 @@ export class DevApp extends WebchatApp {
 
   render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(() => {
-      render(
-        this.getComponent(dest, optionsAtRuntime),
-        this.getReactMountNode(dest)
-      )
+      const devAppComponent = this.getComponent(dest, optionsAtRuntime)
+      const container = this.getReactMountNode(dest)
+      const reactRoot = createRoot(container)
+      reactRoot.render(devAppComponent)
     })
   }