@botonic/plugin-flow-builder 0.22.0-alpha.2 → 0.22.0

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-row.tsx

@@ -0,0 +1,33 @@
+import { WhatsappButtonListRowProps } from '@botonic/react/lib/cjs/components/whatsapp-button-list'
+
+import { ContentFieldsBase } from '../content-fields-base'
+import { HtWhatsappButtonListRow } from '../hubtype-fields'
+
+export class FlowWhatsappButtonListRow extends ContentFieldsBase {
+  public title = ''
+  public description = ''
+  public targetId?: string
+
+  static fromHubtypeCMS(
+    component: HtWhatsappButtonListRow,
+    locale: string
+  ): FlowWhatsappButtonListRow {
+    const newRow = new FlowWhatsappButtonListRow(component.id)
+    newRow.title = this.getTextByLocale(locale, component.text)
+    newRow.description = this.getTextByLocale(locale, component.description)
+    newRow.targetId = component.target?.id
+    return newRow
+  }
+
+  toBotonic(): WhatsappButtonListRowProps | undefined {
+    if (!this.targetId) {
+      console.error(`Row with title: '${this.title}' has no target`)
+      return undefined
+    }
+    return {
+      id: this.targetId,
+      title: this.title,
+      description: this.description,
+    }
+  }
+}

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-section.tsx

@@ -0,0 +1,35 @@
+import {
+  WhatsappButtonListRowProps,
+  WhatsappButtonListSectionProps,
+} from '@botonic/react/lib/cjs/components/whatsapp-button-list'
+
+import { HtWhatsappButtonListSection } from '../hubtype-fields'
+import { ContentFieldsBase } from './../content-fields-base'
+import { FlowWhatsappButtonListRow } from './flow-whatsapp-button-list-row'
+
+export class FlowWhatsappButtonListSection extends ContentFieldsBase {
+  public title = ''
+  public rows: FlowWhatsappButtonListRow[] = []
+
+  static fromHubtypeCMS(
+    component: HtWhatsappButtonListSection,
+    locale: string
+  ): FlowWhatsappButtonListSection {
+    const newButton = new FlowWhatsappButtonListSection(component.id)
+    newButton.title = this.getTextByLocale(locale, component.title)
+    newButton.rows = component.rows.map(row =>
+      FlowWhatsappButtonListRow.fromHubtypeCMS(row, locale)
+    )
+    return newButton
+  }
+
+  toBotonic(): WhatsappButtonListSectionProps {
+    const rows = this.rows.reduce((acc: WhatsappButtonListRowProps[], row) => {
+      const botonicRow = row.toBotonic()
+      if (botonicRow) acc.push(botonicRow)
+      return acc
+    }, [])
+
+    return { title: this.title, rows }
+  }
+}

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list.tsx

@@ -0,0 +1,46 @@
+import { WhatsappButtonList } from '@botonic/react'
+import React from 'react'
+
+import { HtWhatsappButtonListNode } from '../hubtype-fields'
+import { ContentFieldsBase } from './../content-fields-base'
+import { FlowWhatsappButtonListSection } from './flow-whatsapp-button-list-section'
+
+export class FlowWhatsappButtonList extends ContentFieldsBase {
+  public code = ''
+  public text = ''
+  public listButtonText = ''
+  public sections: FlowWhatsappButtonListSection[] = []
+
+  static fromHubtypeCMS(
+    component: HtWhatsappButtonListNode,
+    locale: string
+  ): FlowWhatsappButtonList {
+    const newWhatsappButtonList = new FlowWhatsappButtonList(component.id)
+    newWhatsappButtonList.code = component.code
+    newWhatsappButtonList.text = this.getTextByLocale(
+      locale,
+      component.content.text
+    )
+    newWhatsappButtonList.listButtonText = this.getTextByLocale(
+      locale,
+      component.content.button_text
+    )
+    newWhatsappButtonList.sections = component.content.sections.map(section =>
+      FlowWhatsappButtonListSection.fromHubtypeCMS(section, locale)
+    )
+    return newWhatsappButtonList
+  }
+
+  toBotonic(id: string): JSX.Element {
+    return (
+      <WhatsappButtonList
+        key={id}
+        body={this.text}
+        action={{
+          button: this.listButtonText,
+          sections: this.sections.map(section => section.toBotonic()),
+        }}
+      ></WhatsappButtonList>
+    )
+  }
+}

package/src/functions/conditional-queue-status.ts

@@ -35,14 +35,12 @@ export async function conditionalQueueStatus({
   )
   const isAvailable = response.data.available
 
-  console.log('conditionalQueueStatus', { data: response.data })
   const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
   if (flowBuilderPlugin.trackEvent) {
-    const eventName = 'QUEUE_STATUS'
+    const eventName = `QUEUE_${isAvailable ? 'OPEN' : 'CLOSED'}`
     const args = {
       queue_id,
       queue_name,
-      status: isAvailable ? 'open' : 'closed',
     }
     await flowBuilderPlugin.trackEvent(request, eventName, args)
   }

package/src/handoff.ts

@@ -1,14 +1,14 @@
 import { HandOffBuilder } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
-import { HandoffNode, PayloadNode } from './flow-builder-models'
+import { HtHandoffNode, HtPayloadNode } from './content-fields/hubtype-fields'
 import { getFlowBuilderPlugin } from './helpers'
 import BotonicPluginFlowBuilder from './index'
 
 export async function doHandoff(
   request: ActionRequest,
   locale: string,
-  handoffNode: HandoffNode
+  handoffNode: HtHandoffNode
 ): Promise<void> {
   const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
   // @ts-ignore
@@ -23,6 +23,9 @@ export async function doHandoff(
     locale
   )
   if (onFinishPayload) handOffBuilder.withOnFinishPayload(onFinishPayload)
+  if (handoffNode.content.has_auto_assign) {
+    handOffBuilder.withAutoAssignOnWaiting(true)
+  }
 
   // TODO: Retrieve params from FlowBuilder
   // const handoffParams = {
@@ -42,20 +45,23 @@ export async function doHandoff(
 
   if (flowBuilderPlugin.trackEvent) {
     await flowBuilderPlugin.trackEvent(request, 'HANDOFF_SUCCESSFULL', {
-      queueName: queueFound?.name,
+      queue_id: queueFound?.id,
+      queue_name: queueFound?.name,
     })
   }
 }
 
 async function getOnFinishPayload(
   flowBuilderPlugin: BotonicPluginFlowBuilder,
-  handoffNode: HandoffNode,
+  handoffNode: HtHandoffNode,
   locale: string
 ): Promise<string | undefined> {
-  const handoffTargetNode = await flowBuilderPlugin.getHandoffContent(
-    handoffNode.target?.id
-  )
-  if (handoffTargetNode?.id) return handoffTargetNode?.id
+  if (handoffNode.target?.id) {
+    const handoffTargetNode = flowBuilderPlugin.cmsApi.getNode<HtHandoffNode>(
+      handoffNode.target?.id
+    )
+    if (handoffTargetNode?.id) return handoffTargetNode?.id
+  }
 
   const payloadId = handoffNode.content.payload.find(
     payload => payload.locale === locale
@@ -63,7 +69,7 @@ async function getOnFinishPayload(
 
   if (!payloadId) return undefined
 
-  const actionPayload = await flowBuilderPlugin.getContent(payloadId)
+  const actionPayload = flowBuilderPlugin.cmsApi.getNode(payloadId)
 
-  return (actionPayload as PayloadNode).content.payload
+  return (actionPayload as HtPayloadNode).content.payload
 }

package/src/helpers.ts

@@ -1,6 +1,11 @@
 import { Plugin } from '@botonic/core'
+
+import {
+  HtHandoffNode,
+  HtNodeWithContent,
+  HtNodeWithContentType,
+} from './content-fields/hubtype-fields'
 import BotonicPluginFlowBuilder from './index'
-import { NodeComponent } from './flow-builder-models'
 
 const FLOW_BUILDER_PLUGIN_NAME = 'BotonicPluginFlowBuilder'
 
@@ -18,22 +23,6 @@ export function getFlowBuilderPlugin(plugins: {
   return flowBuilderPlugin
 }
 
-export async function updateButtonUrls(
-  hubtypeContent: any,
-  contentKey: string,
-  getContentFn: any
-): Promise<void> {
-  if (hubtypeContent.content[contentKey]) {
-    for (const i in hubtypeContent.content[contentKey]) {
-      const button = hubtypeContent.content[contentKey][i].button
-      if (button?.url) {
-        for (const j in button.url) {
-          button.url[j] = {
-            ...button.url[j],
-            ...(await getContentFn(button.url[j].id)),
-          }
-        }
-      }
-    }
-  }
+export function isHandoffNode(node: HtNodeWithContent): node is HtHandoffNode {
+  return node.type === HtNodeWithContentType.HANDOFF
 }

package/src/index.ts

@@ -1,39 +1,34 @@
 import {
-  Input,
   Plugin,
   PluginPostRequest,
   PluginPreRequest,
   Session,
 } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
-import axios from 'axios'
 
+import { FlowBuilderApi } from './api'
 import {
   FlowCarousel,
   FlowContent,
   FlowImage,
   FlowText,
   FlowVideo,
+  FlowWhatsappButtonList,
 } from './content-fields'
 import {
-  FallbackNode,
-  FlowBuilderData,
-  FunctionNode,
-  HandoffNode,
-  IntentNode,
-  KeywordNode,
-  NodeComponent,
-  NodeType,
-  StartNode,
-} from './flow-builder-models'
+  HtFunctionNode,
+  HtHandoffNode,
+  HtNodeComponent,
+  HtNodeWithContent,
+  HtNodeWithContentType,
+} from './content-fields/hubtype-fields'
 import { DEFAULT_FUNCTIONS } from './functions'
-import { updateButtonUrls } from './helpers'
+import { isHandoffNode } from './helpers'
 import { BotonicPluginFlowBuilderOptions } from './types'
 import { resolveGetAccessToken } from './utils'
 
 export default class BotonicPluginFlowBuilder implements Plugin {
-  private flowUrl: string
-  private flow: Promise<FlowBuilderData> | FlowBuilderData
+  public cmsApi: FlowBuilderApi
   private functions: Record<any, any>
   private currentRequest: PluginPreRequest
   private getAccessToken: (session: Session) => string
@@ -45,217 +40,73 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   ) => Promise<void>
 
   constructor(readonly options: BotonicPluginFlowBuilderOptions) {
+    this.cmsApi = new FlowBuilderApi({
+      url: options.flowUrl,
+      flow: options.flow,
+    })
     this.getLocale = options.getLocale
     this.getAccessToken = resolveGetAccessToken(options)
     this.trackEvent = options.trackEvent
-    this.flowUrl = options.flowUrl
-    if (options.flow) this.flow = options.flow
     const customFunctions = options.customFunctions || {}
     this.functions = { ...DEFAULT_FUNCTIONS, ...customFunctions }
   }
 
-  async readFlowContent(session: Session): Promise<FlowBuilderData> {
-    const { data } = await axios.get(this.flowUrl, {
-      headers: { Authorization: `Bearer ${this.getAccessToken(session)}` },
-    })
-    return data
-  }
-
   async pre(request: PluginPreRequest): Promise<void> {
     this.currentRequest = request
-    this.flow = await this.readFlowContent(this.currentRequest.session)
+    await this.cmsApi.init(this.getAccessToken(request.session))
   }
 
   async post(_request: PluginPostRequest): Promise<void> {}
 
-  async getContent(id: string): Promise<NodeComponent> {
-    const flow = await this.flow
-    const content = flow.nodes.find(node => node.id === id)
-    if (!content) throw Error(`Node with id: '${id}' not found`)
-    return content
-  }
-
-  async getContentByCode(code: string): Promise<NodeComponent> {
-    const flow = await this.flow
-    const content = flow.nodes.find(node => {
-      if ('code' in node) return node.code === code
-      return undefined
-    })
-    if (!content) throw Error(`Node with code: '${code}' not found`)
-    return content
-  }
-
-  async getHandoffContent(
-    handoffTargetId: string | undefined
-  ): Promise<HandoffNode | undefined> {
-    if (!handoffTargetId) return undefined
-    return (await this.getContent(handoffTargetId)) as HandoffNode
-  }
-
-  getFlowContent(
-    hubtypeContent: NodeComponent,
-    locale: string
-  ): FlowContent | undefined {
-    switch (hubtypeContent.type) {
-      case NodeType.TEXT:
-        return FlowText.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.IMAGE:
-        return FlowImage.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.CAROUSEL:
-        return FlowCarousel.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.VIDEO:
-        return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
-      default:
-        return undefined
-    }
-  }
-
-  async getStartId(): Promise<string> {
-    const flow = await this.flow
-    const startNode = flow.nodes.find(
-      node => node.type === NodeType.START_UP
-    ) as StartNode | undefined
-    if (!startNode) throw new Error('start-up id must be defined')
-    return startNode.target.id
-  }
-
-  async getFallbackId(alternate: boolean): Promise<string> {
-    const flow = await this.flow
-    const fallbackNode = flow.nodes.find(
-      node => node.type === NodeType.FALLBACK
-    ) as FallbackNode | undefined
-    if (!fallbackNode) throw new Error('fallback node must be defined')
-    const fallbackFirstMessage = fallbackNode.content.first_message
-    const fallbackSecondMessage = fallbackNode.content.second_message
-    if (!fallbackSecondMessage) return fallbackFirstMessage.id
-    return alternate ? fallbackFirstMessage.id : fallbackSecondMessage.id
-  }
-  async getContents(
-    id: string,
+  async getContent(
+    nodeOrId: HtNodeWithContent | string,
     locale: string,
     prevContents?: FlowContent[]
-  ): Promise<{ contents: FlowContent[]; handoffNode: HandoffNode }> {
+  ): Promise<{ contents: FlowContent[]; handoffNode?: HtHandoffNode }> {
     const contents = prevContents || []
-    const hubtypeContent: any = await this.getContent(id)
-    const isHandoff = hubtypeContent.type === NodeType.HANDOFF
-    // TODO: Create function to populate these buttons
-    await updateButtonUrls(hubtypeContent, 'elements', this.getContent)
-    await updateButtonUrls(hubtypeContent, 'buttons', this.getContent)
-    const content = this.getFlowContent(hubtypeContent, locale)
+    let node = nodeOrId as HtNodeWithContent
+    if (typeof nodeOrId === 'string') {
+      node = this.cmsApi.getNode(nodeOrId) as HtNodeWithContent
+    }
 
-    this.replaceButtonPayload(content)
+    const content = await this.getFlowContent(node, locale)
 
-    if (hubtypeContent.type === NodeType.FUNCTION) {
-      const targetId = await this.callFunction(hubtypeContent, locale)
-      return this.getContents(targetId, locale, contents)
+    if (node.type === HtNodeWithContentType.FUNCTION) {
+      const targetId = await this.callFunction(node, locale)
+      return this.getContent(targetId, locale, contents)
     } else {
       if (content) contents.push(content)
       // TODO: prevent infinite recursive calls
 
-      if (hubtypeContent.follow_up)
-        return this.getContents(hubtypeContent.follow_up.id, locale, contents)
+      if (node.follow_up)
+        return this.getContent(node.follow_up.id, locale, contents)
     }
-    // execute function
-    // return this.getContents(function result_mapping target, locale, contents)
-    return { contents, handoffNode: isHandoff && hubtypeContent }
-  }
 
-  private async replaceButtonPayload(content: FlowContent | undefined) {
-    if (content && 'buttons' in content) {
-      for (const button of content.buttons) {
-        if (button.payload) {
-          const contentButton = await this.getContent(button.payload)
-          if (contentButton?.type === NodeType.PAYLOAD) {
-            button.payload = contentButton.content.payload
-          }
-        }
-      }
-    }
+    return { contents, handoffNode: isHandoffNode(node) ? node : undefined }
   }
 
-  async getPayloadByIntent(
-    input: Input,
+  private getFlowContent(
+    hubtypeContent: HtNodeComponent,
     locale: string
-  ): Promise<string | undefined> {
-    try {
-      const flow = await this.flow
-      const intents = flow.nodes.filter(
-        node => node.type === NodeType.INTENT
-      ) as IntentNode[]
-      const inputIntent = input.intent
-      const inputConfidence = input.confidence
-      if (inputIntent) {
-        const matchedIntentNode = intents.find(
-          node =>
-            inputIntent &&
-            this.hasIntent(node, inputIntent, locale) &&
-            inputConfidence &&
-            this.hasMetConfidenceThreshold(node, inputConfidence)
-        )
-        return matchedIntentNode?.target?.id
-      }
-    } catch (error) {
-      console.error('Error getting payload by input: ', error)
-    }
-
-    return undefined
-  }
-
-  hasIntent(node: IntentNode, intent: string, locale: string): boolean {
-    return node.content.intents.some(
-      i => i.locale === locale && i.values.includes(intent)
-    )
-  }
-
-  hasMetConfidenceThreshold(
-    node: IntentNode,
-    predictedConfidence: number
-  ): boolean {
-    const nodeConfidence = node.content.confidence / 100
-    return predictedConfidence >= nodeConfidence
-  }
-
-  async getPayloadByKeyword(
-    input: Input,
-    locale: string
-  ): Promise<string | undefined> {
-    try {
-      const flow = await this.flow
-      const keywordNodes = flow.nodes.filter(
-        node => node.type == NodeType.KEYWORD
-      ) as KeywordNode[]
-      const matchedKeywordNodes = keywordNodes.filter(node =>
-        //@ts-ignore
-        this.matchKeywords(node, input.data, locale)
-      )
-      if (matchedKeywordNodes.length > 0) {
-        return matchedKeywordNodes[0].target?.id
-      }
-    } catch (error) {
-      console.error('Error getting payload by input: ', error)
-    }
-
-    return undefined
-  }
-
-  matchKeywords(node: KeywordNode, input: string, locale: string): boolean {
-    const result = node.content.keywords.find(
-      i => i.locale === locale && this.containsAnyKeywords(input, i.values)
-    )
-    return Boolean(result)
-  }
-
-  containsAnyKeywords(input: string, keywords: string[]): boolean {
-    for (let i = 0; i < keywords.length; i++) {
-      if (input.includes(keywords[i])) {
-        return true
-      }
+  ): FlowContent | undefined {
+    switch (hubtypeContent.type) {
+      case HtNodeWithContentType.TEXT:
+        return FlowText.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
+      case HtNodeWithContentType.IMAGE:
+        return FlowImage.fromHubtypeCMS(hubtypeContent, locale)
+      case HtNodeWithContentType.CAROUSEL:
+        return FlowCarousel.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
+      case HtNodeWithContentType.VIDEO:
+        return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
+      case HtNodeWithContentType.WHATSAPP_BUTTON_LIST:
+        return FlowWhatsappButtonList.fromHubtypeCMS(hubtypeContent, locale)
+      default:
+        return undefined
     }
-    return false
   }
 
   async callFunction(
-    functionNode: FunctionNode,
+    functionNode: HtFunctionNode,
     locale: string
   ): Promise<string> {
     const functionNodeId = functionNode.id
@@ -278,7 +129,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     const result = functionNode.content.result_mapping.find(
       r => r.result === functionResult
     )
-    if (!result) {
+    if (!result?.target) {
       throw new Error(
         `No result found for result_mapping for node with id: ${functionNodeId}`
       )

package/src/types.ts

@@ -1,11 +1,12 @@
 import { Session } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
-import { FlowBuilderData } from './flow-builder-models'
+import { FlowBuilderApi } from './api'
+import { HtFlowBuilderData } from './content-fields/hubtype-fields'
 
 export interface BotonicPluginFlowBuilderOptions {
   flowUrl: string
-  flow?: FlowBuilderData
+  flow?: HtFlowBuilderData
   customFunctions?: Record<any, any>
   getLocale: (session: Session) => string
   getAccessToken: () => string
@@ -16,6 +17,11 @@ export interface BotonicPluginFlowBuilderOptions {
   ) => Promise<void>
 }
 
+export interface FlowBuilderApiOptions {
+  url: string
+  flow?: HtFlowBuilderData
+}
+
 export enum ProcessEnvNodeEnvs {
   PRODUCTION = 'production',
   DEVELOPMENT = 'development',

package/lib/cjs/content-fields/types.d.ts

@@ -1,5 +0,0 @@
-import { FlowCarousel } from './flow-carousel';
-import { FlowImage } from './flow-image';
-import { FlowText } from './flow-text';
-import { FlowVideo } from './flow-video';
-export type FlowContent = FlowText | FlowImage | FlowCarousel | FlowVideo;

package/lib/cjs/content-fields/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/content-fields/types.ts"],"names":[],"mappings":""}