@botonic/react 0.31.5-alpha.1 → 0.32.0

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'
+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/{reply.jsx → reply.tsx}

@@ -2,8 +2,9 @@ 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%;
@@ -14,9 +15,10 @@ const StyledButton = styled.button`
   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
@@ -59,15 +61,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/{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,22 @@
 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, ThemeProps } 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?: ThemeProps
+  user?: { extra_data?: any }
+}
 
 export const WebchatSettings = ({
   theme,

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-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 {

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

@@ -189,10 +189,3 @@ export const ROLES = {
   DOCUMENT_MESSAGE: 'document-message',
   RAW_MESSAGE: 'raw-message',
 }
-
-export const COMPONENT_TYPE = {
-  TEXT: 'Text',
-  BUTTON: 'Button',
-  REPLY: 'Reply',
-  CAROUSEL: 'Carousel',
-}