@botonic/plugin-flow-builder 0.22.0-beta.3 → 0.22.1

package/src/content-fields/hubtype-fields/fallback.ts

@@ -0,0 +1,10 @@
+import { HtBaseNode, HtNodeLink } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtFallbackNode extends HtBaseNode {
+  type: HtNodeWithContentType.FALLBACK
+  content: {
+    first_message?: HtNodeLink
+    second_message?: HtNodeLink
+  }
+}

package/src/content-fields/hubtype-fields/function.ts

@@ -0,0 +1,33 @@
+import { HtBaseNode, HtNodeLink } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export enum HtArgumentType {
+  NUMBER = 'number',
+  STRING = 'string',
+  JSON = 'json',
+}
+
+export interface HtFunctionArgument {
+  type: HtArgumentType
+  name: string
+  value: string
+}
+
+export interface HtFunctionArgumentLocale {
+  locale: string
+  values: HtFunctionArgument[]
+}
+
+export interface HtFunctionResult {
+  result: string
+  target?: HtNodeLink
+}
+
+export interface HtFunctionNode extends HtBaseNode {
+  type: HtNodeWithContentType.FUNCTION
+  content: {
+    action: string
+    arguments: HtFunctionArgumentLocale[]
+    result_mapping: HtFunctionResult[]
+  }
+}

package/src/content-fields/hubtype-fields/handoff.ts

@@ -0,0 +1,11 @@
+import { HtBaseNode, HtPayloadLocale, HtQueueLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtHandoffNode extends HtBaseNode {
+  type: HtNodeWithContentType.HANDOFF
+  content: {
+    queue: HtQueueLocale[]
+    payload: HtPayloadLocale[]
+    has_auto_assign: boolean
+  }
+}

package/src/content-fields/hubtype-fields/image.ts

@@ -0,0 +1,9 @@
+import { HtBaseNode, HtMediaFileLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtImageNode extends HtBaseNode {
+  type: HtNodeWithContentType.IMAGE
+  content: {
+    image: HtMediaFileLocale[]
+  }
+}

package/src/content-fields/hubtype-fields/index.ts

@@ -0,0 +1,17 @@
+export * from './button'
+export * from './carousel'
+export * from './common'
+export * from './fallback'
+export * from './function'
+export * from './handoff'
+export * from './image'
+export * from './intent'
+export * from './keyword'
+export * from './node-types'
+export * from './nodes'
+export * from './payload'
+export * from './start'
+export * from './text'
+export * from './url'
+export * from './video'
+export * from './whatsapp-button-list'

package/src/content-fields/hubtype-fields/intent.ts

@@ -0,0 +1,11 @@
+import { HtBaseNode, HtInputLocale, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtIntentNode extends HtBaseNode {
+  type: HtNodeWithContentType.INTENT
+  content: {
+    title: HtTextLocale[]
+    intents: HtInputLocale[]
+    confidence: number
+  }
+}

package/src/content-fields/hubtype-fields/keyword.ts

@@ -0,0 +1,10 @@
+import { HtBaseNode, HtInputLocale, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtKeywordNode extends HtBaseNode {
+  type: HtNodeWithContentType.KEYWORD
+  content: {
+    title: HtTextLocale[]
+    keywords: HtInputLocale[]
+  }
+}

package/src/content-fields/hubtype-fields/node-types.ts

@@ -0,0 +1,26 @@
+export enum HtNodeWithContentType {
+  CAROUSEL = 'carousel',
+  HANDOFF = 'handoff',
+  IMAGE = 'image',
+  TEXT = 'text',
+  KEYWORD = 'keyword',
+  INTENT = 'intent',
+  FUNCTION = 'function',
+  FALLBACK = 'fallback',
+  VIDEO = 'video',
+  WHATSAPP_BUTTON_LIST = 'whatsapp-button-list',
+}
+
+export enum HtNodeStartType {
+  STARTUP = 'start-up',
+}
+
+export enum HtNodeWithoutContentType {
+  URL = 'url',
+  PAYLOAD = 'payload',
+}
+
+export enum HtButtonStyle {
+  BUTTON = 'button',
+  QUICK_REPLY = 'quick-reply',
+}

package/src/content-fields/hubtype-fields/nodes.ts

@@ -0,0 +1,32 @@
+import { HtCarouselNode } from './carousel'
+import { HtFallbackNode } from './fallback'
+import { HtFunctionNode } from './function'
+import { HtHandoffNode } from './handoff'
+import { HtImageNode } from './image'
+import { HtIntentNode } from './intent'
+import { HtKeywordNode } from './keyword'
+import { HtPayloadNode } from './payload'
+import { HtStartNode } from './start'
+import { HtTextNode } from './text'
+import { HtUrlNode } from './url'
+import { HtVideoNode } from './video'
+import { HtWhatsappButtonListNode } from './whatsapp-button-list'
+
+export type HtNodeWithContent =
+  | HtTextNode
+  | HtImageNode
+  | HtVideoNode
+  | HtCarouselNode
+  | HtHandoffNode
+  | HtKeywordNode
+  | HtIntentNode
+  | HtFunctionNode
+  | HtFallbackNode
+  | HtWhatsappButtonListNode
+
+export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode
+
+export type HtNodeComponent =
+  | HtNodeWithContent
+  | HtNodeWithoutContent
+  | HtStartNode

package/src/content-fields/hubtype-fields/payload.ts

@@ -0,0 +1,9 @@
+import { HtNodeWithoutContentType } from './node-types'
+
+export interface HtPayloadNode {
+  id: string
+  type: HtNodeWithoutContentType.PAYLOAD
+  content: {
+    payload: string
+  }
+}

package/src/content-fields/hubtype-fields/start.ts

@@ -0,0 +1,8 @@
+import { HtNodeLink } from './common'
+import { HtNodeStartType } from './node-types'
+
+export interface HtStartNode {
+  id: string
+  type: HtNodeStartType.STARTUP
+  target: HtNodeLink
+}

package/src/content-fields/hubtype-fields/text.ts

@@ -0,0 +1,12 @@
+import { HtButton } from './button'
+import { HtBaseNode, HtTextLocale } from './common'
+import { HtButtonStyle, HtNodeWithContentType } from './node-types'
+
+export interface HtTextNode extends HtBaseNode {
+  type: HtNodeWithContentType.TEXT
+  content: {
+    text: HtTextLocale[]
+    buttons_style?: HtButtonStyle
+    buttons: HtButton[]
+  }
+}

package/src/content-fields/hubtype-fields/url.ts

@@ -0,0 +1,9 @@
+import { HtNodeWithoutContentType } from './node-types'
+
+export interface HtUrlNode {
+  id: string
+  type: HtNodeWithoutContentType.URL
+  content: {
+    url: string
+  }
+}

package/src/content-fields/hubtype-fields/video.ts

@@ -0,0 +1,9 @@
+import { HtBaseNode, HtVideoLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtVideoNode extends HtBaseNode {
+  type: HtNodeWithContentType.VIDEO
+  content: {
+    video: HtVideoLocale[]
+  }
+}

package/src/content-fields/hubtype-fields/whatsapp-button-list.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { HtBaseNode, HtNodeLink, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtWhatsappButtonListRow {
+  id: string
+  text: HtTextLocale[]
+  description: HtTextLocale[]
+  target?: HtNodeLink
+}
+
+export interface HtWhatsappButtonListSection {
+  id: string
+  title: HtTextLocale[]
+  rows: HtWhatsappButtonListRow[]
+}
+
+export interface HtWhatsappButtonListNode extends HtBaseNode {
+  type: HtNodeWithContentType.WHATSAPP_BUTTON_LIST
+  content: {
+    text: HtTextLocale[]
+    button_text: HtTextLocale[]
+    sections: HtWhatsappButtonListSection[]
+  }
+}

package/src/content-fields/index.ts

@@ -1,8 +1,17 @@
+import { FlowCarousel } from './flow-carousel'
+import { FlowImage } from './flow-image'
+import { FlowText } from './flow-text'
+import { FlowVideo } from './flow-video'
+import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
+
 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 { FlowVideo } from './flow-video'
-export type { FlowContent } from './types'
+export { FlowCarousel, FlowImage, FlowText, FlowVideo, FlowWhatsappButtonList }
+
+export type FlowContent =
+  | FlowCarousel
+  | FlowImage
+  | FlowText
+  | FlowVideo
+  | FlowWhatsappButtonList

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-provider.ts

@@ -1,5 +1,5 @@
-export function conditionalProvider({ session, results }): string {
-  const provider = session.user.provider
+export function conditionalProvider({ request, results }): string {
+  const provider = request.session.user.provider
   if (results.includes(provider)) return provider
   return 'default'
 }

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

@@ -1,5 +1,7 @@
+import { ActionRequest } from '@botonic/react'
 import axios from 'axios'
 
+import { getFlowBuilderPlugin } from '../helpers'
 import { getWebpackEnvVar } from '../utils'
 
 const _HUBTYPE_API_URL_ = getWebpackEnvVar(
@@ -9,11 +11,17 @@ const _HUBTYPE_API_URL_ = getWebpackEnvVar(
   'https://api.hubtype.com'
 )
 
+type ConditionalQueueStatusArgs = {
+  request: ActionRequest
+  queue_id: string
+  queue_name: string
+}
+
 export async function conditionalQueueStatus({
+  request,
   queue_id,
-}: {
-  queue_id: string
-}): Promise<string> {
+  queue_name,
+}: ConditionalQueueStatusArgs): Promise<string> {
   const response = await axios.get(
     `${_HUBTYPE_API_URL_}/v1/queues/${queue_id}/availability/`,
     // TODO: Make it configurable in the future
@@ -26,5 +34,16 @@ export async function conditionalQueueStatus({
     }
   )
   const isAvailable = response.data.available
+
+  const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  if (flowBuilderPlugin.trackEvent) {
+    const eventName = `QUEUE_${isAvailable ? 'OPEN' : 'CLOSED'}`
+    const args = {
+      queue_id,
+      queue_name,
+    }
+    await flowBuilderPlugin.trackEvent(request, eventName, args)
+  }
+
   return isAvailable ? 'open' : 'closed'
 }

package/src/handoff.ts

@@ -1,21 +1,27 @@
 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
   const handOffBuilder = new HandOffBuilder(request.session)
   const handoffQueues = handoffNode.content.queue
   const queueFound = handoffQueues.find(q => q.locale === locale)
   if (queueFound) handOffBuilder.withQueue(queueFound.id)
 
-  const onFinishPayload = await getOnFinishPayload(handoffNode, locale, request)
+  const onFinishPayload = await getOnFinishPayload(
+    flowBuilderPlugin,
+    handoffNode,
+    locale
+  )
   if (onFinishPayload) handOffBuilder.withOnFinishPayload(onFinishPayload)
   if (handoffNode.content.has_auto_assign) {
     handOffBuilder.withAutoAssignOnWaiting(true)
@@ -36,19 +42,26 @@ export async function doHandoff(
   // }
 
   await handOffBuilder.handOff()
+
+  if (flowBuilderPlugin.trackEvent) {
+    await flowBuilderPlugin.trackEvent(request, 'HANDOFF_SUCCESSFULL', {
+      queue_id: queueFound?.id,
+      queue_name: queueFound?.name,
+    })
+  }
 }
 
 async function getOnFinishPayload(
-  handoffNode: HandoffNode,
-  locale: string,
-  request: ActionRequest
+  flowBuilderPlugin: BotonicPluginFlowBuilder,
+  handoffNode: HtHandoffNode,
+  locale: string
 ): Promise<string | undefined> {
-  const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
-
-  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
@@ -56,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
 }