@botonic/plugin-flow-builder 0.21.0-alpha.4 → 0.21.0-alpha.6

package/lib/esm/utils.d.ts

@@ -1,2 +1 @@
-import { HtMediaFileLocale } from './hubtype-models';
-export declare function getImageByLocale(locale: string, image: HtMediaFileLocale[]): string;
+export declare function getWebpackEnvVar(webpackEnvVar: string | false, name: string, defaultValue: string): string;

package/lib/esm/utils.js

@@ -1,6 +1,6 @@
-export function getImageByLocale(locale, image) {
-    var _a;
-    const result = image.find(t => t.locale == locale);
-    return (_a = result === null || result === void 0 ? void 0 : result.file) !== null && _a !== void 0 ? _a : '';
+export function getWebpackEnvVar(webpackEnvVar, name, defaultValue) {
+    return (webpackEnvVar ||
+        (typeof process !== 'undefined' && process.env[name]) ||
+        defaultValue);
 }
 //# sourceMappingURL=utils.js.map

package/lib/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,KAA0B;;IACzE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IAClD,OAAO,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,EAAE,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAC9B,aAA6B,EAC7B,IAAY,EACZ,YAAoB;IAEpB,OAAO,CACL,aAAa;QACb,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACrD,YAAY,CACb,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.21.0-alpha.4",
+  "version": "0.21.0-alpha.6",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",

package/src/action.tsx

@@ -1,57 +1,63 @@
 import { ActionRequest, RequestContext, Text } from '@botonic/react'
 import React from 'react'
 
-import { FlowContent } from './content-fields/content-base'
+import { FlowContent } from './content-fields'
 import { doHandoff } from './handoff'
-import { HtHandoffNode } from './hubtype-models'
-
-// TODO: remove this from here and use the new "start" attribute in the flow
-export const START = '08c7df06-0c7c-4f06-b8c1-4157582efeb2'
+import BotonicPluginFlowBuilder from './index'
 
 type FlowBuilderActionProps = {
   content?: FlowContent[]
-  handoffMsg?: HtHandoffNode
+  isHandoff?: boolean
 }
 
-export default class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
+export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
   static contextType = RequestContext
 
   static async botonicInit(request: ActionRequest): Promise<any> {
-    const flowBuilderPlugin = request.plugins.hubtypeFlowBuilder as any
+    const flowBuilderPlugin = request.plugins
+      .hubtypeFlowBuilder as BotonicPluginFlowBuilder
+    const locale = flowBuilderPlugin.getLocale(request.session)
+    let payload = request.input.payload
+      ? request.input.payload
+      : await flowBuilderPlugin.getStartId()
 
-    let payload = request.input.payload ? request.input.payload : START
     if (!request.input.payload) {
       const intentPayload = await flowBuilderPlugin.getPayloadByInput(
         request.input,
-        'es-ES'
+        locale
       )
       if (intentPayload) {
         payload = intentPayload
       }
       const keywordPayload = await flowBuilderPlugin.getPayloadByKeyword(
         request.input,
-        'es-ES'
+        locale
       )
       if (keywordPayload) {
         payload = keywordPayload
       }
     }
     // We use only Spanish because they are the backend examples
-    const content = await flowBuilderPlugin.getContents(payload, 'es-ES')
+    const content = await flowBuilderPlugin.getContents(payload, locale)
 
-    if (content.length == 0) {
-      const handoffMsg = await doHandoff(request)
-      return { handoffMsg }
+    if (content.length === 0) {
+      const handoffParams = {
+        queue: 'Test', // TODO: Take it from the flow
+        agentEmail: 'test@gmail.com',
+        note: 'This is a note that will be attached to the case as a reminder',
+      }
+      await doHandoff(request, handoffParams.queue, handoffParams.note)
+      const isHandoff = true
+      return { isHandoff }
     }
     return { content }
   }
 
-  render() {
+  render(): JSX.Element | JSX.Element[] {
     // @ts-ignore
-    const { content: contents, handoffMsg } = this.props
-    if (handoffMsg) {
-      // @ts-ignore
-      return <Text>{handoffMsg}</Text>
+    const { content: contents, isHandoff } = this.props
+    if (isHandoff) {
+      return <Text>You are being transferred to an agent!</Text>
     } else {
       return contents!.map((content, index) => content.toBotonic(index))
     }

package/src/content-fields/content-fields-base.ts

@@ -0,0 +1,15 @@
+import { MediaFileLocale, TextLocale } from '../flow-builder-models'
+
+export abstract class ContentFieldsBase {
+  constructor(private readonly id: string) {}
+
+  static getTextByLocale(locale: string, text: TextLocale[]): string {
+    const result = text.find(t => t.locale === locale)
+    return result?.message ?? ''
+  }
+
+  static getImageByLocale(locale: string, image: MediaFileLocale[]): string {
+    const result = image.find(t => t.locale === locale)
+    return result?.file ?? ''
+  }
+}

package/src/content-fields/{button.tsx → flow-button.tsx}

@@ -1,23 +1,23 @@
 import { Button, Reply } from '@botonic/react'
 import React from 'react'
 
-import { ButtonStyle, HtButton } from '../hubtype-models'
-import { ContentFieldsBase } from './content-base'
+import { Button as FbButton, ButtonStyle } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
 
 export class FlowButton extends ContentFieldsBase {
   public text = ''
   public url?: string
   public payload?: string
 
-  static fromHubtypeCMS(component: HtButton, locale: string): FlowButton {
+  static fromHubtypeCMS(component: FbButton, locale: string): FlowButton {
     const newButton = new FlowButton(component.id)
     newButton.text = FlowButton.getTextByLocale(locale, component.text)
     newButton.payload = component.target?.id
     return newButton
   }
 
-  renderButton(index: number, buttonStyle: ButtonStyle) {
-    if (buttonStyle == ButtonStyle.QUICK_REPLY) {
+  renderButton(index: number, buttonStyle: ButtonStyle): JSX.Element {
+    if (buttonStyle === ButtonStyle.QUICK_REPLY) {
       return (
         <Reply payload={this.payload} key={index}>
           {this.text}

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

@@ -0,0 +1,39 @@
+import { Button, Carousel, Element, Pic, Subtitle, Title } from '@botonic/react'
+import React from 'react'
+
+import { CarouselNode } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowElement } from './flow-element'
+
+export class FlowCarousel extends ContentFieldsBase {
+  public code = ''
+  public elements: FlowElement[] = []
+
+  static fromHubtypeCMS(component: CarouselNode, locale: string): FlowCarousel {
+    const newCarousel = new FlowCarousel(component.id)
+    newCarousel.code = component.code
+    newCarousel.elements = component.content.elements.map(element =>
+      FlowElement.fromHubtypeCMS(element, locale)
+    )
+    return newCarousel
+  }
+
+  toBotonic(index: number): JSX.Element {
+    return (
+      <Carousel key={index}>
+        {this.elements.map((element, eIndex) => (
+          <Element key={eIndex}>
+            <Pic src={element.image} />
+            <Title style=''>{element.title}</Title>
+            <Subtitle style=''>{element.subtitle}</Subtitle>
+            {/* @ts-ignore */}
+            <Button payload={element.buttons?.payload}>
+              {element.buttons?.text}
+            </Button>
+            ,
+          </Element>
+        ))}
+      </Carousel>
+    )
+  }
+}

package/src/content-fields/{element.tsx → flow-element.tsx}

@@ -1,7 +1,6 @@
-import { HtElement } from '../hubtype-models'
-import { getImageByLocale } from '../utils'
-import { FlowButton } from './button'
-import { ContentFieldsBase } from './content-base'
+import { CarouselElementNode } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowButton } from './flow-button'
 
 export class FlowElement extends ContentFieldsBase {
   public title = ''
@@ -10,14 +9,17 @@ export class FlowElement extends ContentFieldsBase {
   public image = ''
   public hidden = false
 
-  static fromHubtypeCMS(component: HtElement, locale: string): FlowElement {
+  static fromHubtypeCMS(
+    component: CarouselElementNode,
+    locale: string
+  ): FlowElement {
     const newElement = new FlowElement(component.id)
     newElement.title = FlowElement.getTextByLocale(locale, component.title)
     newElement.subtitle = FlowElement.getTextByLocale(
       locale,
       component.subtitle
     )
-    newElement.image = getImageByLocale(locale, component.image)
+    newElement.image = FlowElement.getImageByLocale(locale, component.image)
     newElement.buttons = FlowButton.fromHubtypeCMS(component.button, locale)
     return newElement
   }

package/src/content-fields/{image.tsx → flow-image.tsx}

@@ -1,22 +1,21 @@
 import { Image } from '@botonic/react'
 import React from 'react'
 
-import { HtImageNode } from '../hubtype-models'
-import { getImageByLocale } from '../utils'
-import { ContentFieldsBase } from './content-base'
+import { ImageNode } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
 
 export class FlowImage extends ContentFieldsBase {
   public src = ''
   public code = ''
 
-  static fromHubtypeCMS(component: HtImageNode, locale: string): FlowImage {
+  static fromHubtypeCMS(component: ImageNode, locale: string): FlowImage {
     const newImage = new FlowImage(component.id)
     newImage.code = component.code
-    newImage.src = getImageByLocale(locale, component.content.image)
+    newImage.src = this.getImageByLocale(locale, component.content.image)
     return newImage
   }
 
-  toBotonic(index: number) {
+  toBotonic(index: number): JSX.Element {
     return <Image src={this.src} key={index} />
   }
 }

package/src/content-fields/{text.tsx → flow-text.tsx}

@@ -1,9 +1,9 @@
 import { Text } from '@botonic/react'
 import React from 'react'
 
-import { ButtonStyle, HtTextNode } from '../hubtype-models'
-import { FlowButton } from './button'
-import { ContentFieldsBase } from './content-base'
+import { ButtonStyle, TextNode } from '../flow-builder-models'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowButton } from './flow-button'
 
 export class FlowText extends ContentFieldsBase {
   public text = ''
@@ -11,7 +11,7 @@ export class FlowText extends ContentFieldsBase {
   public buttons: FlowButton[] = []
   public buttonStyle = ButtonStyle.BUTTON
 
-  static fromHubtypeCMS(component: HtTextNode, locale: string): FlowText {
+  static fromHubtypeCMS(component: TextNode, locale: string): FlowText {
     const newText = new FlowText(component.id)
     newText.code = component.code
     newText.buttonStyle = component.content.buttons_style || ButtonStyle.BUTTON
@@ -22,7 +22,7 @@ export class FlowText extends ContentFieldsBase {
     return newText
   }
 
-  toBotonic(index: number) {
+  toBotonic(index: number): JSX.Element {
     return (
       <Text key={index}>
         {this.text}

package/src/content-fields/index.ts

@@ -0,0 +1,7 @@
+export { ContentFieldsBase } from './content-fields-base'
+export { FlowButton } from './flow-button'
+export { FlowCarousel } from './flow-carousel'
+export { FlowElement } from './flow-element'
+export { FlowImage } from './flow-image'
+export { FlowText } from './flow-text'
+export type { FlowContent } from './types'

package/src/content-fields/types.ts

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

package/src/flow-builder-models.ts

@@ -0,0 +1,220 @@
+export interface FlowBuilderData {
+  version: string
+  name: string
+  locales: string[]
+  start_node_id?: string
+  ai_model_id?: string
+  nodes: NodeComponent[]
+}
+
+export enum NodeType {
+  TEXT = 'text',
+  IMAGE = 'image',
+  CAROUSEL = 'carousel',
+  HANDOFF = 'handoff',
+  KEYWORD = 'keyword',
+  INTENT = 'intent',
+  START_UP = 'start-up',
+  URL = 'url',
+  PAYLOAD = 'payload',
+  FUNCTION = 'function',
+}
+
+export interface BaseNode {
+  id: string
+  type: NodeType
+}
+
+export interface Meta {
+  x: number
+  y: number
+}
+
+export interface Node extends BaseNode {
+  code: string
+  meta: Meta
+  follow_up?: NodeLink
+  target?: NodeLink
+}
+
+export interface NodeLink {
+  id: string
+  type: NodeType
+}
+
+export interface TextLocale {
+  message: string
+  locale: string
+}
+
+export enum ButtonStyle {
+  BUTTON = 'button',
+  QUICK_REPLY = 'quick-reply',
+}
+
+export interface UrlLocale {
+  id: string
+  locale: string
+}
+
+export interface PayloadLocale {
+  id: string
+  locale: string
+}
+
+export interface Button {
+  id: string
+  text: TextLocale[]
+  target?: NodeLink
+  hidden: string
+  url?: UrlLocale
+  payload?: PayloadLocale
+}
+
+export interface TextNodeContent {
+  text: TextLocale[]
+  buttons_style?: ButtonStyle
+  buttons: Button[]
+}
+
+export interface TextNode extends Node {
+  type: NodeType.TEXT
+  content: TextNodeContent
+}
+
+export interface MediaFileLocale {
+  id: string
+  file: string
+  locale: string
+}
+
+export interface ImageNodeContent {
+  image: MediaFileLocale[]
+}
+
+export interface ImageNode extends Node {
+  type: NodeType.IMAGE
+  content: ImageNodeContent
+}
+
+export interface CarouselElementNode {
+  id: string
+  title: TextLocale[]
+  subtitle: TextLocale[]
+  image: MediaFileLocale[]
+  button: Button
+}
+
+export interface CarouselNodeContent {
+  elements: CarouselElementNode[]
+}
+
+export interface CarouselNode extends Node {
+  type: NodeType.CAROUSEL
+  content: CarouselNodeContent
+}
+
+export interface QueueLocale {
+  id: string
+  name: string
+  locale: string
+}
+
+export interface HandoffNodeContent {
+  message: TextLocale[]
+  fail_message: TextLocale[]
+  queue: QueueLocale[]
+}
+
+export interface HandoffNode extends Node {
+  type: NodeType.HANDOFF
+  content: HandoffNodeContent
+}
+
+export interface InputLocale {
+  values: string[]
+  locale: string
+}
+
+export interface KeywordNodeContent {
+  title: TextLocale[]
+  keywords: InputLocale[]
+}
+export interface KeywordNode extends Node {
+  type: NodeType.KEYWORD
+  content: KeywordNodeContent
+}
+
+export interface IntentNodeContent {
+  title: TextLocale[]
+  intents: InputLocale[]
+  confidence: number
+}
+export interface IntentNode extends Node {
+  type: NodeType.INTENT
+  content: IntentNodeContent
+}
+
+export interface StartNode extends BaseNode {
+  type: NodeType.START_UP
+  target: NodeLink
+}
+
+export interface UrlNodeContent {
+  url: string
+}
+
+export interface UrlNode extends BaseNode {
+  type: NodeType.URL
+  content: UrlNodeContent
+}
+
+export interface PayloadNodeContent {
+  payload: string
+}
+
+export interface PayloadNode extends BaseNode {
+  type: NodeType.PAYLOAD
+  content: PayloadNodeContent
+}
+
+export type ArgumentType = number | string | Record<any, any>
+
+export interface FunctionNodeArgument {
+  type: ArgumentType
+  name: string
+  value: string
+}
+
+export interface FunctionNodeArgumentLocale {
+  locale: string
+  values: FunctionNodeArgument[]
+}
+
+export interface FunctionNodeResult {
+  result: string
+  target: NodeLink
+}
+
+export interface FunctionNodeContent {
+  action: string
+  arguments: FunctionNodeArgumentLocale[]
+  result_mapping: FunctionNodeResult[]
+}
+
+export interface FunctionNode extends Node {
+  type: NodeType.FUNCTION
+  content: FunctionNodeContent
+}
+
+export type NodeComponent =
+  | TextNode
+  | ImageNode
+  | CarouselNode
+  | HandoffNode
+  | KeywordNode
+  | IntentNode
+  | UrlNode
+  | StartNode
+  | PayloadNode
+  | FunctionNode

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

@@ -1,8 +1,30 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import axios from 'axios'
 
-export async function conditionalQueueStatus({ queue_id }): Promise<string> {
+import { getWebpackEnvVar } from '../utils'
+
+const _HUBTYPE_API_URL_ = getWebpackEnvVar(
+  // @ts-ignore
+  typeof HUBTYPE_API_URL !== 'undefined' && HUBTYPE_API_URL,
+  'HUBTYPE_API_URL',
+  'https://api.hubtype.com'
+)
+
+export async function conditionalQueueStatus({
+  queue_id,
+}: {
+  queue_id: string
+}): Promise<string> {
   const response = await axios.get(
-    `https://api.hubtype.com/v1/queues/${queue_id}/availability/`
+    `${_HUBTYPE_API_URL_}/v1/queues/${queue_id}/availability/`,
+    // TODO: Make it configurable in the future
+    {
+      params: {
+        check_queue_schedule: true,
+        check_waiting_cases: false,
+        check_available_agents: false,
+      },
+    }
   )
   const isAvailable = response.data.available
   return isAvailable ? 'open' : 'closed'

package/src/functions/index.ts

@@ -2,6 +2,8 @@ import { conditionalProvider } from './conditional-provider'
 import { conditionalQueueStatus } from './conditional-queue-status'
 
 export const DEFAULT_FUNCTIONS = {
-  'conditional-queue-status': conditionalQueueStatus,
+  // TODO: Rename api action name
+  // 'conditional-queue-status': conditionalQueueStatus,
+  'check-queue-status': conditionalQueueStatus,
   'conditional-provider': conditionalProvider,
 }

package/src/handoff.ts

@@ -1,27 +1,28 @@
-import { getOpenQueues, HandOffBuilder } from '@botonic/core'
+import { HandOffBuilder } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
-// TODO: Remove all "getOpenQueues" logic and open/closed messages.
-// This function should just do a basic handoff
-// TODO: add missing options: withNote, withAgent
-
-export async function doHandoff(request: ActionRequest) {
+export async function doHandoff(
+  request: ActionRequest,
+  queue: string,
+  note?: string,
+  agentEmail?: string
+): Promise<void> {
   // @ts-ignore
   const flowBuilderPlugin = request.plugins.hubtypeFlowBuilder as any
   const handoffContent = await flowBuilderPlugin.getHandoffContent()
-  console.log(handoffContent)
+
   // @ts-ignore
-  let openQueues = await getOpenQueues(request.session)
-  const queueName = 'Test'
-  if (openQueues.queues.indexOf(queueName) !== -1) {
-    // @ts-ignore
-    const handOffBuilder = new HandOffBuilder(request.session)
-    handOffBuilder.withQueue('Test')
-    handOffBuilder.withOnFinishPayload(handoffContent.target?.id!)
-    await handOffBuilder.handOff()
+  const handOffBuilder = new HandOffBuilder(request.session)
+  handOffBuilder.withQueue(queue)
 
-    return handoffContent.content.message[0].message
+  if (note) {
+    handOffBuilder.withNote(note)
   }
 
-  return handoffContent.content.failMessage[0].message
+  if (agentEmail) {
+    handOffBuilder.withAgentEmail(agentEmail)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  handOffBuilder.withOnFinishPayload(handoffContent.target?.id!)
+  await handOffBuilder.handOff()
 }