@botonic/react 0.32.0 → 0.33.0-alpha.0

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

@@ -1,9 +1,12 @@
-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'
 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,
@@ -11,102 +14,99 @@ import {
   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 (isNodePic(node)) {
-            imageProps = node.props
-          }
-          if (isNodeTitle(node)) {
-            title = node.props.children
-          }
-          if (isNodeSubtitle(node)) {
-            subtitle = node.props.children
-          }
-
-          if (isMultichannelButton(node)) {
-            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/{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/{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/whatsapp-button-list.tsx

@@ -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-cta-url-button.tsx

@@ -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/index-types.ts

@@ -213,3 +213,5 @@ interface UpdateMessageInfoEvent {
   message: MessageInfo
   isError?: boolean
 }
+
+export { CaseEventQueuePositionChangedInput } from '@botonic/core'

package/src/msg-to-botonic.jsx

@@ -129,7 +129,7 @@ function textToBotonic(msg) {
     return (
       <Text {...msg} key={msg.key}>
         {txt}
-        {quickrepliesParse(msg)}
+        {parseQuickReplies(msg)}
       </Text>
     )
   if (msg.buttons && msg.buttons.length)
@@ -182,7 +182,7 @@ function buttonsParse(buttons) {
   })
 }
 
-function quickrepliesParse(msg) {
+function parseQuickReplies(msg) {
   let replies = null
   if (msg.replies) {
     replies = msg.replies.map((el, i) => {

package/src/webchat-app.tsx

@@ -279,7 +279,7 @@ export class WebchatApp {
     delete message.sent_by
     const response = msgToBotonic(
       message,
-      // TODO: Review if is neded allow declar customTypes inside and ouside theme
+      // TODO: Review if is needed allow declar customTypes inside and outside theme
       this.theme?.message?.customTypes || this.theme?.customMessageTypes
     )