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

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

@@ -1,110 +1,112 @@
-import { isWhatsapp } from '@botonic/core'
+import { isDev, isFacebook, isWebchat, isWhatsapp } from '@botonic/core'
 import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
+import { Button } from '../button/index'
 import { Carousel } from '../carousel'
-import { MultichannelText } from './multichannel-text'
+import { Image } from '../image'
+import { Text } from '../text'
+import { WhatsappCTAUrlButton } from '../whatsapp-cta-url-button'
 import {
   getFilteredElements,
   isMultichannelButton,
-  isNodeKind,
+  isNodePic,
+  isNodeSubtitle,
+  isNodeTitle,
 } from './multichannel-utils'
+import { convertToMarkdownMeta } from './whatsapp/markdown-meta'
 
 export const MultichannelCarousel = props => {
   const requestContext = useContext(RequestContext)
 
-  const getButtons = node =>
-    [].concat(getFilteredElements(node, isMultichannelButton))
-
-  if (isWhatsapp(requestContext.session)) {
-    const elements = props.children
-      .map(e => e.props.children)
-      .map((element, i) => {
-        let imageProps = undefined
-        let title = undefined
-        let subtitle = undefined
-        const buttons = []
-
-        for (const node of element) {
-          if (isNodeKind(node, 'Pic')) {
-            imageProps = node.props
-          }
-          if (isNodeKind(node, 'Title')) {
-            title = node.props.children
-          }
-          if (isNodeKind(node, 'Subtitle')) {
-            subtitle = node.props.children
-          }
-
-          if (isNodeKind(node, 'MultichannelButton')) {
-            buttons.push(node)
-          }
-          //TODO support fragment containing an array
-          if (Array.isArray(node)) {
-            buttons.push(getButtons(node))
-          }
-        }
-
-        let header = ''
-        if (props.showTitle && title) {
-          header += `${title ? `**${title}**` : ''}`
-          if (title && subtitle) {
-            header += ' '
-          }
-        }
-        if (props.showSubtitle && subtitle) {
-          header += `_${subtitle}_`
-        }
-
-        return (
-          // TODO: newkey only for 1 nested button
-          <MultichannelText
-            key={i}
-            newkey={i}
-            indexMode={props.indexMode}
-            buttonsAsText={props.buttonsAsText}
-          >
-            {header || null}
-            {buttons}
-          </MultichannelText>
-        )
-
-        // TODO: in the future, this would be the default mode
-        // } else {
-        // return (
-        //   <React.Fragment key={i}>
-        //     <Image
-        //       src={imageSrc}
-        //       caption={carouselToCaption(
-        //         i + 1,
-        //         title,
-        //         subtitle,
-        //         imageSrc,
-        //         buttonProps
-        //       )}
-        //     ></Image>
-        //   </React.Fragment>
-        // )
-        // }
-      })
-    return elements
-  } else {
+  if (isDev(requestContext.session) || isWebchat(requestContext.session)) {
     return <Carousel {...props}>{props.children}</Carousel>
   }
+
+  const messages = []
+  const childrenElements = props.children.map(e => e.props.children)
+
+  childrenElements.forEach((element, i) => {
+    const { imageProps, title, subtitle, buttons } =
+      parseCarouselElement(element)
+
+    const textMessage = getTextMessage(requestContext.session, title, subtitle)
+
+    if (imageProps?.src) {
+      const messageWithImage = <Image src={imageProps.src} />
+      messages.push(messageWithImage)
+    }
+
+    if (
+      isWhatsapp(requestContext.session) &&
+      buttons.some(button => button.url)
+    ) {
+      const messageWithButtonUrl = (
+        <WhatsappCTAUrlButton
+          key={`carousel-element-${i}-cta-url`}
+          body={title}
+          footer={`_${subtitle}_`}
+          displayText={buttons[0].text}
+          url={buttons[0].url}
+        />
+      )
+      messages.push(messageWithButtonUrl)
+    }
+
+    const messageWithButtons = buttons.some(button => button.payload) ? (
+      <Text key={`carousel-element-${i}-text`}>
+        {textMessage}
+        {buttons
+          .filter(button => isWhatsapp(requestContext.session) && !button.url)
+          .map(button => (
+            <Button
+              key={`carousel-element-${i}-button`}
+              payload={button.payload}
+              url={button.url}
+            >
+              {button.text}
+            </Button>
+          ))}
+      </Text>
+    ) : (
+      []
+    )
+    messages.push(messageWithButtons)
+  })
+
+  return <>{messages}</>
+}
+
+function getButtons(node) {
+  return [].concat(getFilteredElements(node, isMultichannelButton))
+}
+
+function parseCarouselElement(element) {
+  let imageProps, title, subtitle
+  const buttonsChildren = []
+
+  for (const node of element) {
+    if (isNodePic(node)) imageProps = node.props
+    if (isNodeTitle(node)) title = node.props.children
+    if (isNodeSubtitle(node)) subtitle = node.props.children
+    if (isMultichannelButton(node)) buttonsChildren.push(node)
+    if (Array.isArray(node)) buttonsChildren.push(...getButtons(node))
+  }
+
+  const buttons = buttonsChildren.map(button => {
+    return {
+      text: button.props.children,
+      payload: button.props.payload,
+      url: button.props.url,
+    }
+  })
+
+  return { imageProps, title, subtitle, buttons }
 }
 
-// const carouselToCaption = (index, title, subtitle, imageSrc, buttonProps) => {
-//   let caption = ''
-//   let header = `${title ? `*${title}*` : ''}`
-//   header += `${subtitle ? ` - _${subtitle}_` : ''}`
-//   let buttons = ''
-//   if (buttonProps.url) {
-//     buttons += ` - ${buttonProps.children}: ${buttonProps.url}`
-//     caption = `${header ? `${header}\n` : ''}${buttons}`
-//   }
-//   if (buttonProps.payload || buttonProps.path) {
-//     buttons += `${index}. `
-//     caption = `${buttons}${buttonProps.children}`
-//   }
-//   return caption
-// }
+function getTextMessage(session, title, subtitle) {
+  const formattedTextMessage = `**${title}**${subtitle ? ` _${subtitle}_` : ''}`
+  return isWhatsapp(session) || isFacebook(session)
+    ? convertToMarkdownMeta(formattedTextMessage)
+    : formattedTextMessage
+}

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

@@ -2,9 +2,6 @@ import React from 'react'
 
 export const MultichannelContext = React.createContext({
   boldIndex: true,
-  carousel: {
-    indexMode: undefined,
-  },
   text: {
     indexMode: 'letter',
   },

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

@@ -9,18 +9,20 @@ import { MultichannelButton } from './multichannel-button'
 import { MultichannelContext } from './multichannel-context'
 import {
   buttonTypes,
-  DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR,
   elementHasPostback,
   elementHasUrl,
   elementHasWebview,
   getButtonType,
   getMultichannelButtons,
   getMultichannelReplies,
+} from './multichannel-utils'
+import {
+  DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR,
   MENU_BUTTON_WHATSAPP_BUTTON_LIST,
   MULTICHANNEL_WHATSAPP_PROPS,
   WHATSAPP_LIST_MAX_BUTTONS,
   WHATSAPP_MAX_BUTTONS,
-} from './multichannel-utils'
+} from './whatsapp/constants'
 import { convertToMarkdownMeta } from './whatsapp/markdown-meta'
 
 export const MultichannelText = props => {
@@ -162,7 +164,7 @@ export const MultichannelText = props => {
             }
             return row
           })
-          const whatsbuttonlistProps = {
+          const whatsAppButtonListProps = {
             body: index === 0 ? texts.join('') : buttonsTextSeparator,
             button: menuButtonTextWhatsappList,
             sections: [{ rows }],
@@ -170,7 +172,7 @@ export const MultichannelText = props => {
 
           return {
             type: INPUT.WHATSAPP_BUTTON_LIST,
-            props: whatsbuttonlistProps,
+            props: whatsAppButtonListProps,
           }
         }
       )
@@ -237,10 +239,14 @@ export const MultichannelText = props => {
     )
 
     if (postbackButtonElements.length === 0) {
+      // Use texts[0] instead of textElements[0] as a body to avoid apply the markdownMeta function twice.
+      // If the markdownMeta function is applied twice, bold is replaced by italics.
+      const body = texts[0] || ''
+
       if (urlButtonElements.length === 1) {
         return (
           <WhatsappCTAUrlButton
-            body={textElements[0]}
+            body={body}
             displayText={urlButtonElements[0].props.children}
             url={urlButtonElements[0].props.url}
           />
@@ -250,7 +256,7 @@ export const MultichannelText = props => {
       if (webviewButtonElements.length === 1) {
         return (
           <WhatsappCTAUrlButton
-            body={textElements[0]}
+            body={body}
             displayText={webviewButtonElements[0].props.children}
             webview={webviewButtonElements[0].props.webview}
             params={webviewButtonElements[0].props.params}

package/src/components/multichannel/multichannel-utils.js

@@ -1,45 +1,63 @@
-/**
- *
- * Whatsapp does not support Markdown
- * (its markup syntax is different)
- */
-export const MULTICHANNEL_WHATSAPP_PROPS = { markdown: false }
-
-export const WHATSAPP_MAX_BUTTONS = 3
-export const WHATSAPP_LIST_MAX_BUTTONS = 10
-export const WHATSAPP_MAX_BUTTON_CHARS = 20
-export const WHATSAPP_MAX_HEADER_CHARS = 60
-export const WHATSAPP_MAX_BODY_CHARS = 1024
-export const WHATSAPP_MAX_FOOTER_CHARS = 60
-export const DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
-export const MENU_BUTTON_WHATSAPP_BUTTON_LIST = 'Show options'
+import { Button } from '../button/index'
+import { Carousel } from '../carousel'
+import { Pic } from '../pic'
+import { Reply } from '../reply'
+import { Subtitle } from '../subtitle'
+import { Text } from '../text'
+import { Title } from '../title'
+import { MultichannelButton } from './multichannel-button'
+import { MultichannelReply } from './multichannel-reply'
+
+function isNodeKind(node, kind) {
+  return node?.type?.name === kind
+}
 
 export function isMultichannelButton(node) {
-  return isNodeKind(node, 'MultichannelButton')
+  return isNodeKind(node, MultichannelButton.name)
 }
 
 export function isMultichannelReply(node) {
-  return isNodeKind(node, 'MultichannelReply')
+  return isNodeKind(node, MultichannelReply.name)
+}
+
+export function isNodeText(node) {
+  return isNodeKind(node, Text.name)
+}
+
+export function isNodeButton(node) {
+  return isNodeKind(node, Button.name)
+}
+
+export function isNodeCarousel(node) {
+  return isNodeKind(node, Carousel.name)
 }
 
-export function isButton(node) {
-  return isNodeKind(node, 'Button')
+export function isNodeReply(node) {
+  return isNodeKind(node, Reply.name)
 }
 
-export function isNodeKind(node, kind) {
-  return node.type && node.type.name == kind
+export function isNodePic(node) {
+  return isNodeKind(node, Pic.name)
 }
+
+export function isNodeTitle(node) {
+  return isNodeKind(node, Title.name)
+}
+
+export function isNodeSubtitle(node) {
+  return isNodeKind(node, Subtitle.name)
+}
+
 export function elementHasUrl(element) {
-  return element.props && element.props.url
+  return element?.props?.url
 }
+
 export function elementHasPostback(element) {
-  return (
-    (element.props && element.props.payload) ||
-    (element.props && element.props.path)
-  )
+  return element?.props?.payload || element?.props?.path
 }
+
 export function elementHasWebview(element) {
-  return element.props && element.props.webview
+  return element?.props?.webview
 }
 
 export const buttonTypes = {

package/src/components/multichannel/multichannel.jsx

@@ -1,7 +1,6 @@
 import { isFacebook, isWhatsapp } from '@botonic/core'
 import React, { useContext } from 'react'
 
-import { COMPONENT_TYPE } from '../../constants'
 import { RequestContext } from '../../contexts'
 import { deepMapWithIndex } from '../../util/react'
 import { Text } from '../text'
@@ -10,7 +9,13 @@ import { MultichannelCarousel } from './multichannel-carousel'
 import { MultichannelContext } from './multichannel-context'
 import { MultichannelReply } from './multichannel-reply'
 import { MultichannelText } from './multichannel-text'
-import { MULTICHANNEL_WHATSAPP_PROPS } from './multichannel-utils'
+import {
+  isNodeButton,
+  isNodeCarousel,
+  isNodeReply,
+  isNodeText,
+} from './multichannel-utils'
+import { MULTICHANNEL_WHATSAPP_PROPS } from './whatsapp/constants'
 
 export const Multichannel = props => {
   const requestContext = useContext(RequestContext)
@@ -22,7 +27,7 @@ export const Multichannel = props => {
   }
   if (isFacebook(requestContext.session)) {
     const newChildren = deepMapWithIndex(props.children, child => {
-      if (child && child.type && child.type.name === COMPONENT_TYPE.TEXT) {
+      if (isNodeText(child)) {
         return (
           <MultichannelText {...child.props} key={child.key}>
             {child.props.children}
@@ -35,21 +40,21 @@ export const Multichannel = props => {
   }
 
   let newChildren = deepMapWithIndex(props.children, (child, index) => {
-    if (child && child.type && child.type.name === COMPONENT_TYPE.BUTTON) {
+    if (isNodeButton(child)) {
       return (
         <MultichannelButton {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelButton>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.REPLY) {
+    if (isNodeReply(child)) {
       return (
         <MultichannelReply {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelReply>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.TEXT) {
+    if (isNodeText(child)) {
       return (
         <MultichannelText
           {...child.props}
@@ -62,7 +67,7 @@ export const Multichannel = props => {
         </MultichannelText>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.CAROUSEL) {
+    if (isNodeCarousel(child)) {
       return (
         <MultichannelCarousel
           {...child.props}

package/src/components/multichannel/whatsapp/constants.ts

@@ -0,0 +1,10 @@
+export const MULTICHANNEL_WHATSAPP_PROPS = { markdown: false }
+
+export const WHATSAPP_MAX_BUTTONS = 3
+export const WHATSAPP_LIST_MAX_BUTTONS = 10
+export const WHATSAPP_MAX_BUTTON_CHARS = 20
+export const WHATSAPP_MAX_HEADER_CHARS = 60
+export const WHATSAPP_MAX_BODY_CHARS = 1024
+export const WHATSAPP_MAX_FOOTER_CHARS = 60
+export const DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
+export const MENU_BUTTON_WHATSAPP_BUTTON_LIST = 'Show options'

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

@@ -10,18 +10,25 @@ const PicStyled = styled.img`
   border-top-right-radius: 8px;
   width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
   height: 140px;
-  background: ${COLORS.SOLID_WHITE} url(${props => props.src}) no-repeat
-    center/cover;
+  background: ${COLORS.SOLID_WHITE};
+  object-fit: center/cover;
   border-bottom: 1px solid ${COLORS.SEASHELL_WHITE};
 `
+export interface PicProps {
+  src: string
+}
 
-export const Pic = props => {
+export const Pic = (props: PicProps) => {
   props = { ...props, src: staticAsset(props.src) }
+
   const renderBrowser = () => <PicStyled src={props.src} />
+
+  // @ts-ignore
   const renderNode = () => <pic>{props.src}</pic>
+
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Pic.serialize = picProps => {
-  return { pic: picProps.src }
+Pic.serialize = (props: PicProps) => {
+  return { pic: props.src }
 }

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

@@ -2,21 +2,25 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
+import { WebchatContext } from '../webchat/context'
+import { ReplyProps } from './index-types'
 
 const StyledButton = styled.button`
   width: 100%;
   padding: 4px 8px;
   font-family: inherit;
   border-radius: 8px;
+  border: 1px solid ${props => props.theme.brand?.color};
+  color: ${props => props.theme.brand?.color};
   cursor: pointer;
   outline: 0;
 `
 
-export const Reply = props => {
+export const Reply = (props: ReplyProps) => {
   const { sendText, getThemeProperty } = useContext(WebchatContext)
-  const handleClick = event => {
+
+  const handleClick = (event: any) => {
     event.preventDefault()
     if (props.children) {
       let payload = props.payload
@@ -39,14 +43,6 @@ export const Reply = props => {
     return (
       <StyledButton
         style={{
-          border: `1px solid ${getThemeProperty(
-            WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-            COLORS.BOTONIC_BLUE
-          )}`,
-          color: getThemeProperty(
-            WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-            COLORS.BOTONIC_BLUE
-          ),
           ...replyStyle,
         }}
         onClick={e => handleClick(e)}
@@ -59,15 +55,19 @@ export const Reply = props => {
   const renderNode = () => {
     if (props.path) {
       const payload = `__PATH_PAYLOAD__${props.path}`
+      // @ts-ignore
+      // eslint-disable-next-line react/no-unknown-property
       return <reply payload={payload}>{props.children}</reply>
     }
+    // @ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
     return <reply payload={props.payload}>{props.children}</reply>
   }
 
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Reply.serialize = replyProps => {
+Reply.serialize = (replyProps: ReplyProps) => {
   let payload = replyProps.payload
   if (replyProps.path) payload = `__PATH_PAYLOAD__${replyProps.path}`
   return { reply: { title: replyProps.children, payload } }

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

@@ -9,21 +9,21 @@ const SubtitleContainer = styled.div`
   padding: 0px 15px 10px 15px;
   color: ${COLORS.MID_GRAY};
 `
-export const Subtitle = props => {
+
+export interface SubtitleProps {
+  children: React.ReactNode
+}
+
+export const Subtitle = (props: SubtitleProps) => {
   const renderBrowser = () => (
-    <SubtitleContainer
-      style={{
-        ...props.style,
-      }}
-    >
-      {props.children}
-    </SubtitleContainer>
+    <SubtitleContainer>{props.children}</SubtitleContainer>
   )
+
   const renderNode = () => <desc>{props.children}</desc>
 
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Subtitle.serialize = subtitleProps => {
-  return { subtitle: subtitleProps.children }
+Subtitle.serialize = (props: SubtitleProps) => {
+  return { subtitle: props.children }
 }

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

@@ -7,16 +7,18 @@ const TitleContainer = styled.div`
   font-size: 14px;
   padding: 10px 15px;
 `
+export interface TitleProps {
+  children: React.ReactNode
+}
+
+export const Title = (props: TitleProps) => {
+  const renderBrowser = () => <TitleContainer>{props.children}</TitleContainer>
 
-export const Title = props => {
-  const renderBrowser = () => (
-    <TitleContainer style={{ ...props.style }}>{props.children}</TitleContainer>
-  )
   const renderNode = () => <title>{props.children}</title>
 
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Title.serialize = titleProps => {
-  return { title: titleProps.children }
+Title.serialize = (props: TitleProps) => {
+  return { title: props.children }
 }

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

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { COLORS, ROLES } from '../constants'
 import { staticAsset } from '../util/environment'
+import { VideoProps } from './index-types'
 import { Message } from './message'
 
 const StyledVideo = styled.video`
@@ -14,11 +15,11 @@ const StyledVideo = styled.video`
   margin: 10px;
 `
 
-const serialize = videoProps => {
+const serialize = (videoProps: { src: string }) => {
   return { video: videoProps.src }
 }
 
-export const Video = props => {
+export const Video = (props: VideoProps) => {
   props = { ...props, src: staticAsset(props.src) }
   let content = props.children
   if (isBrowser())

package/src/components/webchat-settings.tsx

@@ -1,10 +1,30 @@
 import { INPUT } from '@botonic/core'
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
-import { WebchatSettingsProps } from '.'
+import { WebchatContext } from '../webchat/context'
+import {
+  PersistentMenuOptionsTheme,
+  WebchatTheme,
+} from '../webchat/theme/types'
+import { BlockInputOption } from './index-types'
+
+export interface WebchatSettingsProps {
+  blockInputs?: BlockInputOption[]
+  enableAnimations?: boolean
+  enableAttachments?: boolean
+  enableEmojiPicker?: boolean
+  enableUserInput?: boolean
+  persistentMenu?: PersistentMenuOptionsTheme
+  theme?: Partial<WebchatTheme>
+  user?: {
+    extra_data?: any
+    country?: string
+    locale?: string
+    system_locale?: string
+  }
+}
 
 export const WebchatSettings = ({
   theme,