@botonic/react 0.30.5 → 0.30.6-alpha.1

package/src/components/multichannel/multichannel.jsx

@@ -1,16 +1,18 @@
 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 { Button } from '../button'
+import { Carousel } from '../carousel'
+import { Reply } from '../reply'
 import { Text } from '../text'
 import { MultichannelButton } from './multichannel-button'
 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 { MULTICHANNEL_WHATSAPP_PROPS } from './whatsapp/constants'
 
 export const Multichannel = props => {
   const requestContext = useContext(RequestContext)
@@ -22,7 +24,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 (child && child.type && child.type.name === Text.name) {
         return (
           <MultichannelText {...child.props} key={child.key}>
             {child.props.children}
@@ -35,21 +37,21 @@ export const Multichannel = props => {
   }
 
   let newChildren = deepMapWithIndex(props.children, (child, index) => {
-    if (child && child.type && child.type.name === COMPONENT_TYPE.BUTTON) {
+    if (child && child.type && child.type.name === Button.name) {
       return (
         <MultichannelButton {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelButton>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.REPLY) {
+    if (child && child.type && child.type.name === Reply.name) {
       return (
         <MultichannelReply {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelReply>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.TEXT) {
+    if (child && child.type && child.type.name === Text.name) {
       return (
         <MultichannelText
           {...child.props}
@@ -62,7 +64,7 @@ export const Multichannel = props => {
         </MultichannelText>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.CAROUSEL) {
+    if (child && child.type && child.type.name === Carousel.name) {
       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/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

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 {

package/src/constants.js

@@ -1,5 +1,6 @@
 import BotonicLogo from './assets/botonic_react_logo100x100.png'
 import UrlIcon from './assets/url-icon.png'
+import { Button, Carousel, Reply, Text } from './components'
 
 export const COLORS = {
   // http://chir.ag/projects/name-that-color
@@ -189,10 +190,3 @@ export const ROLES = {
   DOCUMENT_MESSAGE: 'document-message',
   RAW_MESSAGE: 'raw-message',
 }
-
-export const COMPONENT_TYPE = {
-  TEXT: 'Text',
-  BUTTON: 'Button',
-  REPLY: 'Reply',
-  CAROUSEL: 'Carousel',
-}