@botonic/plugin-flow-builder 0.21.0-alpha.9 → 0.21.2

package/src/content-fields/flow-carousel.tsx

@@ -18,11 +18,11 @@ export class FlowCarousel extends ContentFieldsBase {
     return newCarousel
   }
 
-  toBotonic(index: number): JSX.Element {
+  toBotonic(id: string): JSX.Element {
     return (
-      <Carousel key={index}>
-        {this.elements.map((element, eIndex) => (
-          <Element key={eIndex}>
+      <Carousel key={id}>
+        {this.elements.map(element => (
+          <Element key={`${id}-${element.id}`}>
             <Pic src={element.image} />
             <Title style=''>{element.title}</Title>
             <Subtitle style=''>{element.subtitle}</Subtitle>
@@ -33,7 +33,6 @@ export class FlowCarousel extends ContentFieldsBase {
             >
               {element.buttons?.text}
             </Button>
-            ,
           </Element>
         ))}
       </Carousel>

package/src/content-fields/flow-image.tsx

@@ -15,7 +15,7 @@ export class FlowImage extends ContentFieldsBase {
     return newImage
   }
 
-  toBotonic(index: number): JSX.Element {
-    return <Image src={this.src} key={index} />
+  toBotonic(id: string): JSX.Element {
+    return <Image key={id} src={this.src} />
   }
 }

package/src/content-fields/flow-text.tsx

@@ -22,12 +22,12 @@ export class FlowText extends ContentFieldsBase {
     return newText
   }
 
-  toBotonic(index: number): JSX.Element {
+  toBotonic(id: string): JSX.Element {
     return (
-      <Text key={index}>
+      <Text key={id}>
         {this.text}
-        {this.buttons.map((button, index) =>
-          button.renderButton(index, this.buttonStyle)
+        {this.buttons.map(button =>
+          button.renderButton(button.id, this.buttonStyle)
         )}
       </Text>
     )

package/src/content-fields/flow-video.tsx

@@ -0,0 +1,22 @@
+import { Video } from '@botonic/react'
+import React from 'react'
+
+import { VideoNode } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
+
+export class FlowVideo extends ContentFieldsBase {
+  public src = ''
+  public code = ''
+
+  static fromHubtypeCMS(component: VideoNode, locale: string): FlowVideo {
+    const newVideo = new FlowVideo(component.id)
+    newVideo.code = component.code
+    newVideo.src = this.getVideoByLocale(locale, component.content.video)
+    return newVideo
+  }
+
+  toBotonic(id: string): JSX.Element {
+    // @ts-ignore
+    return <Video key={id} src={this.src} />
+  }
+}

package/src/content-fields/index.ts

@@ -4,4 +4,5 @@ export { FlowCarousel } from './flow-carousel'
 export { FlowElement } from './flow-element'
 export { FlowImage } from './flow-image'
 export { FlowText } from './flow-text'
+export { FlowVideo } from './flow-video'
 export type { FlowContent } from './types'

package/src/content-fields/types.ts

@@ -1,5 +1,6 @@
 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
+export type FlowContent = FlowText | FlowImage | FlowCarousel | FlowVideo

package/src/flow-builder-models.ts

@@ -18,6 +18,8 @@ export enum NodeType {
   URL = 'url',
   PAYLOAD = 'payload',
   FUNCTION = 'function',
+  FALLBACK = 'fallback',
+  VIDEO = 'video',
 }
 
 export interface BaseNode {
@@ -67,8 +69,8 @@ export interface Button {
   text: TextLocale[]
   target?: NodeLink
   hidden: string
-  url?: UrlLocale
-  payload?: PayloadLocale
+  url?: UrlLocale[]
+  payload?: PayloadLocale[]
 }
 
 export interface TextNodeContent {
@@ -207,6 +209,30 @@ export interface FunctionNode extends Node {
   content: FunctionNodeContent
 }
 
+export interface FallbackNodeContent {
+  first_message: NodeLink
+  second_message: NodeLink
+}
+export interface FallbackNode extends Node {
+  type: NodeType.FALLBACK
+  content: FallbackNodeContent
+}
+
+export interface VideoLocale {
+  url: string
+  is_embedded?: boolean
+  locale: string
+}
+
+export interface VideoNodeContent {
+  video: VideoLocale[]
+}
+
+export interface VideoNode extends Node {
+  type: NodeType.VIDEO
+  content: VideoNodeContent
+}
+
 export type NodeComponent =
   | TextNode
   | ImageNode
@@ -218,3 +244,5 @@ export type NodeComponent =
   | StartNode
   | PayloadNode
   | FunctionNode
+  | FallbackNode
+  | VideoNode

package/src/handoff.ts

@@ -1,28 +1,37 @@
 import { HandOffBuilder } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
+import { HandoffNode } from './flow-builder-models'
+import { getFlowBuilderPlugin } from './helpers'
+
 export async function doHandoff(
   request: ActionRequest,
-  queue: string,
-  note?: string,
-  agentEmail?: string
+  locale: string,
+  handoffNode: HandoffNode
 ): Promise<void> {
+  const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  const handoffTargetNode = await flowBuilderPlugin.getHandoffContent(
+    handoffNode.target?.id
+  )
   // @ts-ignore
-  const flowBuilderPlugin = request.plugins.hubtypeFlowBuilder as any
-  const handoffContent = await flowBuilderPlugin.getHandoffContent()
+  const handOffBuilder = new HandOffBuilder(request.session) // handOffBuilder.withQueue(handoffNode.content.queue)
+  const handoffQueues = handoffNode.content.queue
+  const queueFound = handoffQueues.find(q => q.locale === locale)
+  if (queueFound) handOffBuilder.withQueue(queueFound.id)
+  // TODO: Retrieve params from FlowBuilder
+  // const handoffParams = {
+  //   agentEmail: 'test@gmail.com',
+  //   note: 'This is a note that will be attached to the case as a reminder',
+  // }
 
-  // @ts-ignore
-  const handOffBuilder = new HandOffBuilder(request.session)
-  handOffBuilder.withQueue(queue)
+  // if (handoffParams.note) {
+  //   handOffBuilder.withNote(handoffParams.note)
+  // }
 
-  if (note) {
-    handOffBuilder.withNote(note)
-  }
+  // if (handoffParams.agentEmail) {
+  //   handOffBuilder.withAgentEmail(handoffParams.agentEmail)
+  // }
 
-  if (agentEmail) {
-    handOffBuilder.withAgentEmail(agentEmail)
-  }
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  handOffBuilder.withOnFinishPayload(handoffContent.target?.id!)
+  handOffBuilder.withOnFinishPayload(handoffTargetNode.id)
   await handOffBuilder.handOff()
 }

package/src/helpers.ts

@@ -0,0 +1,39 @@
+import { Plugin } from '@botonic/core'
+import BotonicPluginFlowBuilder from './index'
+import { NodeComponent } from './flow-builder-models'
+
+const FLOW_BUILDER_PLUGIN_NAME = 'BotonicPluginFlowBuilder'
+
+export function getFlowBuilderPlugin(plugins: {
+  [id: string]: Plugin
+}): BotonicPluginFlowBuilder {
+  const flowBuilderPlugin = Object.values(plugins).find(
+    // @ts-ignore
+    plugin => plugin.name === FLOW_BUILDER_PLUGIN_NAME
+  ) as BotonicPluginFlowBuilder
+  if (!flowBuilderPlugin)
+    throw new Error(
+      `You must include '@botonic/plugin-flow-builder' in your plugins file.`
+    )
+  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)),
+          }
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -12,8 +12,10 @@ import {
   FlowContent,
   FlowImage,
   FlowText,
+  FlowVideo,
 } from './content-fields'
 import {
+  FallbackNode,
   FlowBuilderData,
   FunctionNode,
   HandoffNode,
@@ -24,42 +26,37 @@ import {
   StartNode,
 } from './flow-builder-models'
 import { DEFAULT_FUNCTIONS } from './functions'
-
-export type BotonicPluginFlowBuilderOptions = {
-  flowUrl: string
-  flow?: FlowBuilderData
-  customFunctions?: Record<any, any>
-  getLocale: (session: Session) => string
-  getAccessToken: () => string
-}
+import { BotonicPluginFlowBuilderOptions } from './types'
+import { resolveGetAccessToken } from './utils'
+import { updateButtonUrls } from './helpers'
 
 export default class BotonicPluginFlowBuilder implements Plugin {
   private flowUrl: string
   private flow: Promise<FlowBuilderData> | FlowBuilderData
   private functions: Record<any, any>
   private currentRequest: PluginPreRequest
-  private getAccessToken: () => string
+  private getAccessToken: (session: Session) => string
   public getLocale: (session: Session) => string
 
   constructor(readonly options: BotonicPluginFlowBuilderOptions) {
     this.getLocale = options.getLocale
-    this.getAccessToken = options.getAccessToken
+    this.getAccessToken = resolveGetAccessToken(options)
     this.flowUrl = options.flowUrl
-    this.flow = options.flow || this.readFlowContent()
+    if (options.flow) this.flow = options.flow
     const customFunctions = options.customFunctions || {}
     this.functions = { ...DEFAULT_FUNCTIONS, ...customFunctions }
   }
 
-  async readFlowContent(): Promise<FlowBuilderData> {
-    const response = await axios.get(this.flowUrl, {
-      headers: { Authorization: `Bearer ${this.getAccessToken()}` },
+  async readFlowContent(session: Session): Promise<FlowBuilderData> {
+    const { data } = await axios.get(this.flowUrl, {
+      headers: { Authorization: `Bearer ${this.getAccessToken(session)}` },
     })
-    return response.data
+    return data
   }
 
   async pre(request: PluginPreRequest): Promise<void> {
     this.currentRequest = request
-    this.flow = this.readFlowContent()
+    this.flow = await this.readFlowContent(this.currentRequest.session)
   }
 
   async post(_request: PluginPostRequest): Promise<void> {}
@@ -71,10 +68,12 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     return content
   }
 
-  async getHandoffContent(): Promise<HandoffNode> {
+  async getHandoffContent(
+    handoffTargetId: string | undefined
+  ): Promise<HandoffNode> {
     const flow = await this.flow
     const content = flow.nodes.find(
-      node => node.type === NodeType.HANDOFF
+      node => node.id === handoffTargetId
     ) as HandoffNode
     if (!content) throw Error(`Handoff node not found`)
     return content
@@ -91,6 +90,8 @@ export default class BotonicPluginFlowBuilder implements Plugin {
         return FlowImage.fromHubtypeCMS(hubtypeContent, locale)
       case NodeType.CAROUSEL:
         return FlowCarousel.fromHubtypeCMS(hubtypeContent, locale)
+      case NodeType.VIDEO:
+        return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
       default:
         return undefined
     }
@@ -98,46 +99,35 @@ export default class BotonicPluginFlowBuilder implements Plugin {
 
   async getStartId(): Promise<string> {
     const flow = await this.flow
-    const startNode = flow.nodes.find(node => node.type === NodeType.START_UP)
-    if (!startNode) {
-      throw new Error('start-up id must be defined')
-    }
-    return (startNode as StartNode).target.id
+    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,
     locale: string,
     prevContents?: FlowContent[]
-  ): Promise<FlowContent[]> {
+  ): Promise<{ contents: FlowContent[]; handoffNode: HandoffNode }> {
     const contents = prevContents || []
     const hubtypeContent: any = await this.getContent(id)
-    if (hubtypeContent.content.elements) {
-      for (const i in hubtypeContent.content.elements) {
-        const button = hubtypeContent.content.elements[i].button
-        if (button.url) {
-          for (const j in button.url) {
-            button.url[j] = {
-              ...button.url[j],
-              ...(await this.getContent(button.url[j].id)),
-            }
-          }
-        }
-      }
-    }
-    if (hubtypeContent.content.buttons) {
-      for (const i in hubtypeContent.content.buttons) {
-        const button = hubtypeContent.content.buttons[i]
-        if (button.url) {
-          for (const j in button.url) {
-            button.url[j] = {
-              ...button.url[j],
-              ...(await this.getContent(button.url[j].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 = await this.getFlowContent(hubtypeContent, locale)
     if (hubtypeContent.type === NodeType.FUNCTION) {
       const targetId = await this.callFunction(hubtypeContent, locale)
@@ -151,10 +141,10 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     }
     // execute function
     // return this.getContents(function result_mapping target, locale, contents)
-    return contents
+    return { contents, handoffNode: isHandoff && hubtypeContent }
   }
 
-  async getPayloadByInput(
+  async getPayloadByIntent(
     input: Input,
     locale: string
   ): Promise<string | undefined> {
@@ -163,14 +153,17 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       const intents = flow.nodes.filter(
         node => node.type === NodeType.INTENT
       ) as IntentNode[]
-      if (input.intent) {
-        const matchedIntents = intents.filter(node =>
-          //@ts-ignore
-          this.hasIntent(node, input.intent, locale)
+      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)
         )
-        if (matchedIntents.length > 0) {
-          return matchedIntents[0].target?.id
-        }
+        return matchedIntentNode?.target?.id
       }
     } catch (error) {
       console.error('Error getting payload by input: ', error)
@@ -180,10 +173,17 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   }
 
   hasIntent(node: IntentNode, intent: string, locale: string): boolean {
-    const result = node.content.intents.find(
+    return node.content.intents.some(
       i => i.locale === locale && i.values.includes(intent)
     )
-    return Boolean(result)
+  }
+
+  hasMetConfidenceThreshold(
+    node: IntentNode,
+    predictedConfidence: number
+  ): boolean {
+    const nodeConfidence = node.content.confidence / 100
+    return predictedConfidence >= nodeConfidence
   }
 
   async getPayloadByKeyword(

package/src/types.ts

@@ -0,0 +1,16 @@
+import { Session } from '@botonic/core'
+
+import { FlowBuilderData } from './flow-builder-models'
+
+export interface BotonicPluginFlowBuilderOptions {
+  flowUrl: string
+  flow?: FlowBuilderData
+  customFunctions?: Record<any, any>
+  getLocale: (session: Session) => string
+  getAccessToken: () => string
+}
+
+export enum ProcessEnvNodeEnvs {
+  PRODUCTION = 'production',
+  DEVELOPMENT = 'development',
+}

package/src/utils.ts

@@ -1,3 +1,7 @@
+import { Session } from '@botonic/core'
+
+import { BotonicPluginFlowBuilderOptions, ProcessEnvNodeEnvs } from './types'
+
 export function getWebpackEnvVar(
   webpackEnvVar: string | false,
   name: string,
@@ -9,3 +13,23 @@ export function getWebpackEnvVar(
     defaultValue
   )
 }
+
+function getAccessTokenFromSession(session: Session): string {
+  if (!session._access_token) {
+    throw new Error('No access token found in session')
+  }
+  return session._access_token
+}
+
+export function resolveGetAccessToken(
+  options: BotonicPluginFlowBuilderOptions
+): (session: Session) => string {
+  switch (process.env.NODE_ENV) {
+    case ProcessEnvNodeEnvs.PRODUCTION:
+      return getAccessTokenFromSession
+    case ProcessEnvNodeEnvs.DEVELOPMENT:
+      return options.getAccessToken
+    default:
+      throw new Error('No method defined for getting access token')
+  }
+}