Merge pull request #1562 from botpress/f_channel-web-postback

feat(channel-web): send postback data to parent page

modules/builtin/src/content-types/action_button.js

@@ -21,7 +21,7 @@ module.exports = {
       },
       action: {
         type: 'string',
-        enum: ['Say something', 'Open URL'],
+        enum: ['Say something', 'Open URL', 'Postback'],
         default: 'Say something'
       }
     },
@@ -46,6 +46,17 @@ module.exports = {
               }
             },
             required: ['url']
+          },
+          {
+            properties: {
+              action: {
+                enum: ['Postback']
+              },
+              payload: {
+                type: 'string'
+              }
+            },
+            required: ['payload']
           }
         ]
       }

modules/builtin/src/content-types/carousel.js

@@ -32,6 +32,11 @@ function render(data) {
               title: a.title,
               url: a.url.replace('BOT_URL', data.BOT_URL)
             }
+          } else if (a.action === 'Postback') {
+            return {
+              title: a.title,
+              payload: a.payload
+            }
           } else {
             throw new Error(`Webchat carousel does not support "${a.action}" action-buttons at the moment`)
           }

modules/channel-web/assets/inject.js

@@ -29,4 +29,6 @@ const init = config => {
   window.botpressWebChat = { ...window.botpressWebChat, configure, sendEvent }
 }
 
+// Do we want to expose 'onPostback'
+// Or do we let it as is (window listens on message) ?
 window.botpressWebChat = { init }

modules/channel-web/src/actions/sendPostbackToParent.js

@@ -0,0 +1,27 @@
+/**
+ *
+ * @title Sends serialized data to parent page on channel web
+ * @category Channel Web
+ * @author Botpress, Inc.
+ * @param {string} data - Serialized payload you want to send
+ */
+const sendPostbackToParent = data => {
+  if (event.channel != 'web') {
+    return
+  }
+
+  const postbackEvent = bp.IO.Event({
+    type: 'postback',
+    channel: 'web',
+    direction: 'outgoing',
+    target: event.target,
+    botId: event.botId,
+    payload: {
+      data
+    }
+  })
+
+  bp.events.sendEvent(postbackEvent)
+}
+
+return sendPostbackToParent(args.data)

modules/channel-web/src/backend/api.ts

@@ -124,7 +124,7 @@ export default async (bp: typeof sdk, db: Database) => {
 
       if (
         !_.includes(
-          ['text', 'quick_reply', 'form', 'login_prompt', 'visit', 'request_start_conversation'],
+          ['text', 'quick_reply', 'form', 'login_prompt', 'visit', 'request_start_conversation', 'postback'],
           payload.type
         )
       ) {
@@ -224,7 +224,10 @@ export default async (bp: typeof sdk, db: Database) => {
   async function sendNewMessage(botId: string, userId: string, conversationId, payload, credentials: any) {
     const config = await bp.config.getModuleConfigForBot('channel-web', botId)
 
-    if (!payload.text || !_.isString(payload.text) || payload.text.length > config.maxMessageLength) {
+    if (
+      (!payload.text || !_.isString(payload.text) || payload.text.length > config.maxMessageLength) &&
+      payload.type != 'postback'
+    ) {
       throw new Error('Text must be a valid string of less than 360 chars')
     }
 

modules/channel-web/src/backend/socket.ts

@@ -6,7 +6,7 @@ import path from 'path'
 
 import Database from './db'
 
-const outgoingTypes = ['text', 'typing', 'login_prompt', 'file', 'carousel', 'custom']
+const outgoingTypes = ['text', 'typing', 'login_prompt', 'file', 'carousel', 'custom', 'postback']
 
 export default async (bp: typeof sdk, db: Database) => {
   const config: any = {} // FIXME
@@ -63,6 +63,10 @@ export default async (bp: typeof sdk, db: Database) => {
       })
 
       bp.realtime.sendPayload(bp.RealTimePayload.forVisitor(userId, 'webchat.message', message))
+    } else if (messageType === 'postback') {
+      const userId = event.target
+      const payload = bp.RealTimePayload.forVisitor(userId, 'webchat.postback', event.payload)
+      bp.realtime.sendPayload(payload)
     } else {
       throw new Error(`Message type "${messageType}" not implemented yet`)
     }

modules/channel-web/src/views/lite/main.jsx

@@ -294,6 +294,11 @@ export default class Web extends React.Component {
 
     this.props.bp.events.on('guest.webchat.message', this.handleNewMessage)
     this.props.bp.events.on('guest.webchat.typing', this.handleBotTyping)
+    this.props.bp.events.on('guest.webchat.postback', this.handlePostback)
+  }
+
+  handlePostback = payload => {
+    window.parent && window.parent.postMessage(payload)
   }
 
   checkForExpiredExternalToken = error => {

modules/channel-web/src/views/lite/messages/carousel.jsx

@@ -7,14 +7,13 @@ import style from './style.scss'
 require('slick-carousel/slick/slick.css')
 require('slick-carousel/slick/slick-theme.css')
 
+// TODO refac this as a pure component, state is not useful
 export default class CarouselMessage extends Component {
   constructor(props) {
     super(props)
     this.state = { hover: false }
   }
 
-  handleSendPostBack = (text, payload) => this.props.onSendData({ type: 'quick_reply', text, data: { payload } })
-
   render() {
     const CarouselElement = el => {
       return (
@@ -34,11 +33,11 @@ export default class CarouselMessage extends Component {
                       {btn.title || btn}
                     </a>
                   )
-                } else if (btn.payload) {
+                } else if (btn.action == 'Postback') {
                   return (
                     <a
                       href
-                      onClick={() => this.handleSendPostBack(btn.text || btn.title, btn.payload)}
+                      onClick={this.props.onSendData.bind(this, { type: 'postback', data: { payload: btn.payload } })}
                       key={`2-${btn.title}`}
                       className={style.action}
                     >

modules/channel-web/src/views/lite/messages/index.jsx

@@ -333,6 +333,10 @@ class Message extends Component {
     return null
   }
 
+  render_postback() {
+    return this.props.data.message_data.text || null
+  }
+
   render_unsupported() {
     return (
       <div className="bp-msg-unsupported" style={this.getAddStyle()}>