@botonic/react 0.23.0 → 0.23.1-alpha.0

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

@@ -1,6 +1,8 @@
+import { INPUT } from '@botonic/core/lib/esm/models/legacy-types'
 import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
+import { WhatsappButtonList } from '..'
 import { Text } from '../text'
 import { MultichannelFacebook } from './facebook/facebook'
 import { MultichannelButton } from './multichannel-button'
@@ -16,7 +18,9 @@ import {
   getMultichannelReplies,
   isFacebook,
   isWhatsapp,
+  MENU_BUTOON_WHATSAPP_BUTTON_LIST,
   MULTICHANNEL_WHATSAPP_PROPS,
+  WHATSAPP_LIST_MAX_BUTTONS,
   WHATSAPP_MAX_BUTTONS,
 } from './multichannel-utils'
 import { whatsappMarkdown } from './whatsapp/markdown'
@@ -55,8 +59,8 @@ export const MultichannelText = props => {
     const webviewButtons = []
     for (const button of getButtonsAndReplies()) {
       if (elementHasUrl(button)) urlButtons.push(button)
-      if (elementHasPostback(button)) postbackButtons.push(button)
-      if (elementHasWebview(button)) webviewButtons.push(button)
+      else if (elementHasWebview(button)) webviewButtons.push(button)
+      else if (elementHasPostback(button)) postbackButtons.push(button)
     }
     return { postbackButtons, urlButtons, webviewButtons }
   }
@@ -77,11 +81,14 @@ export const MultichannelText = props => {
       const asText =
         type === buttonTypes.POSTBACK ? postbackButtonsAsText : true
       const newline =
-        multichannelContext.messageSeparator == null &&
+        multichannelContext.messageSeparator === null &&
         !newLineFirstButton &&
         i === 0
           ? ''
           : '\n'
+      if (type !== buttonTypes.POSTBACK && multichannelButton.props.payload) {
+        delete multichannelButton.props.payload
+      }
       return (
         <MultichannelButton
           key={`${type}${i}`}
@@ -96,14 +103,19 @@ export const MultichannelText = props => {
     return generator
   }
 
-  const splitPostbackButtons = postbackButtons => {
+  const splitInWhatsappListButtons = postbackButtons => {
     const messages = []
-    for (let i = 0; i < postbackButtons.length; i += WHATSAPP_MAX_BUTTONS) {
-      messages.push(postbackButtons.slice(i, i + WHATSAPP_MAX_BUTTONS))
+    for (
+      let i = 0;
+      i < postbackButtons.length;
+      i += WHATSAPP_LIST_MAX_BUTTONS
+    ) {
+      messages.push(postbackButtons.slice(i, i + WHATSAPP_LIST_MAX_BUTTONS))
     }
     return messages
   }
 
+  // START WHATSAPP LOGIC
   if (isWhatsapp(requestContext)) {
     const texts = getText(props.children)
     const { postbackButtons, urlButtons, webviewButtons } = getWhatsappButtons()
@@ -120,45 +132,105 @@ export const MultichannelText = props => {
     const buttonsTextSeparator =
       props.buttonsTextSeparator || DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR
 
+    //MORE THAN 3 BUTTONS
     if (
       !postbackButtonsAsText &&
       postbackButtons.length > WHATSAPP_MAX_BUTTONS
     ) {
+      const menuButtonTextWhatsappList =
+        props.menuButtonTextWhatsappList || MENU_BUTOON_WHATSAPP_BUTTON_LIST
+
       const urlButtonElements = urlButtons.map(
         regenerateMultichannelButtons(!!texts.length)
       )
       const postbackButtonElements = postbackButtons.map(
         regenerateMultichannelButtons(!!texts.length || !!urlButtons.length)
       )
-      const messagesPostbackButtons = splitPostbackButtons(
+
+      const messagesPostbackButtonList = splitInWhatsappListButtons(
         postbackButtonElements
       )
 
-      const messages = messagesPostbackButtons.map((postbackButtons, i) => {
-        if (i === 0) {
-          return [].concat(
-            ...textElements,
-            ...urlButtonElements,
-            ...postbackButtons
-          )
-        } else {
-          return [].concat(buttonsTextSeparator, ...postbackButtons)
+      const messages = messagesPostbackButtonList.map(
+        (postbackButtons, index) => {
+          if (postbackButtons.length < 4) {
+            return {
+              type: INPUT.TEXT,
+              children: [...buttonsTextSeparator, ...postbackButtons],
+            }
+          }
+          const rows = postbackButtons.map(postbackButton => {
+            const row = {
+              id: postbackButton.props.path
+                ? `__PATH_PAYLOAD__${postbackButton.props.path}`
+                : postbackButton.props.payload,
+              title: postbackButton.props.children,
+            }
+            console.log({ row })
+            return row
+          })
+          const whatsbuttonlistProps = {
+            body: index === 0 ? textElements : buttonsTextSeparator,
+            button: menuButtonTextWhatsappList,
+            sections: [{ rows }],
+          }
+
+          return {
+            type: INPUT.WHATSAPP_BUTTON_LIST,
+            props: whatsbuttonlistProps,
+          }
         }
-      })
-      if (webviewButtonElements.length) {
-        messages.push([buttonsTextSeparator, ...webviewButtonElements])
-      }
+      )
+
+      const messageWithUrlButtonElements = (
+        <Text
+          key={`msg-with-url-button`}
+          {...MULTICHANNEL_WHATSAPP_PROPS}
+          {...props}
+        >
+          {urlButtonElements}
+        </Text>
+      )
+
+      const messageWithWebviewButtonElements = (
+        <Text
+          key={`msg-with-webview-button`}
+          {...MULTICHANNEL_WHATSAPP_PROPS}
+          {...props}
+        >
+          {buttonsTextSeparator}
+          {webviewButtonElements}
+        </Text>
+      )
 
       return (
         <>
-          {messages.map((message, i) => (
-            <Text key={i} {...MULTICHANNEL_WHATSAPP_PROPS} {...props}>
-              {message}
-            </Text>
-          ))}
+          {messages.map((message, i) => {
+            if (message.type === INPUT.WHATSAPP_BUTTON_LIST)
+              return (
+                <WhatsappButtonList
+                  key={`msg-${i}-whatsapp-list`}
+                  {...message.props}
+                />
+              )
+            return (
+              <Text
+                key={`msg-${i}-with-postback-buttons`}
+                {...MULTICHANNEL_WHATSAPP_PROPS}
+                {...props}
+              >
+                {message.children}
+              </Text>
+            )
+          })}
+          {urlButtonElements.length ? messageWithUrlButtonElements : null}
+          {webviewButtonElements.length
+            ? messageWithWebviewButtonElements
+            : null}
         </>
       )
     }
+    // END LOGIC WHATSAPP WITH MORE THAN 3 BUTTONS
 
     multichannelContext.currentIndex = getDefaultIndex()
     const postbackButtonElements = postbackButtons.map(
@@ -192,7 +264,9 @@ export const MultichannelText = props => {
 
     return <>{messages}</>
   }
+  // END WHATSAPP LOGIC
 
+  // START FACEBOOK LOGIC
   if (isFacebook(requestContext)) {
     const text = getText(props.children)
     const multichannelFacebook = new MultichannelFacebook()

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

@@ -8,8 +8,10 @@ import { Providers } from '@botonic/core'
 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 DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
+export const MENU_BUTOON_WHATSAPP_BUTTON_LIST = 'Menu'
 
 export function isMultichannelButton(node) {
   return isNodeKind(node, 'MultichannelButton')

package/src/components/{webchat-settings.jsx → webchat-settings.tsx}

@@ -4,6 +4,7 @@ import React, { useContext } from 'react'
 import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
+import { WebchatSettingsProps } from '.'
 
 export const WebchatSettings = ({
   theme,
@@ -13,7 +14,7 @@ export const WebchatSettings = ({
   enableAttachments,
   enableUserInput,
   enableAnimations,
-}) => {
+}: WebchatSettingsProps) => {
   const renderBrowser = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { updateWebchatDevSettings } = useContext(WebchatContext)
@@ -39,16 +40,17 @@ export const WebchatSettings = ({
       enableAnimations,
     })
     return (
+      //@ts-ignore
       <message
         type={INPUT.WEBCHAT_SETTINGS}
         settings={stringifyWithRegexs({ theme: updatedTheme })}
-      ></message>
+      />
     )
   }
   return renderComponent({ renderBrowser, renderNode })
 }
 
-export const normalizeWebchatSettings = settings => {
+export const normalizeWebchatSettings = (settings: WebchatSettingsProps) => {
   let {
     theme,
     blockInputs,
@@ -60,9 +62,7 @@ export const normalizeWebchatSettings = settings => {
   } = settings
   if (!theme) theme = {}
   if (!theme.userInput) theme.userInput = {}
-  if (!theme.animations) theme.animations = {}
   if (persistentMenu !== undefined) {
-    if (!theme.userInput.persistentMenu) theme.userInput.persistentMenu = {}
     theme.userInput.persistentMenu = persistentMenu
   }
   if (enableEmojiPicker !== undefined) {
@@ -74,13 +74,13 @@ export const normalizeWebchatSettings = settings => {
     theme.userInput.attachments.enable = enableAttachments
   }
   if (enableUserInput !== undefined) {
-    if (!theme.userInput.enable) theme.userInput.enable = {}
     theme.userInput.enable = enableUserInput
   }
+  if (blockInputs !== undefined) theme.userInput.blockInputs = blockInputs
+
+  if (!theme.animations) theme.animations = {}
   if (enableAnimations !== undefined) {
-    if (!theme.animations.enable) theme.animations.enable = {}
     theme.animations.enable = enableAnimations
   }
-  if (blockInputs !== undefined) theme.userInput.blockInputs = blockInputs
   return theme
 }

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

@@ -14,7 +14,7 @@ export interface WhatsappButtonListSectionProps {
 export interface WhatsappButtonListRowProps {
   id: string
   title: string
-  description: string
+  description?: string
 }
 
 export interface WhatsappButtonListProps {

package/src/util/environment.js

@@ -24,7 +24,7 @@ export const resolveImage = src => {
 
 export const isURL = urlPath => {
   // @stephenhay (38 chars) from: https://mathiasbynens.be/demo/url-regex
-  const pattern = new RegExp(/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/)
+  const pattern = new RegExp(/^(blob:)?(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/)
   return !!pattern.test(urlPath)
 }
 

package/src/webchat/webchat.jsx

@@ -496,8 +496,10 @@ export const Webchat = forwardRef((props, ref) => {
         from: SENDERS.user,
         src: temporaryDisplayUrl,
       }
-      if (isImage(input)) messageComponent = <Image {...mediaProps} />
-      else if (isAudio(input)) messageComponent = <Audio {...mediaProps} />
+      if (isImage(input)) {
+        mediaProps.input = input
+        messageComponent = <Image {...mediaProps} />
+      } else if (isAudio(input)) messageComponent = <Audio {...mediaProps} />
       else if (isVideo(input)) messageComponent = <Video {...mediaProps} />
       else if (isDocument(input))
         messageComponent = <Document {...mediaProps} />