@botonic/plugin-flow-builder 0.36.1 → 0.37.0-alpha.0

package/src/action/payload.ts

@@ -1,13 +1,20 @@
+import { storeCaseRating } from '@botonic/core'
+import { v7 as uuid } from 'uuid'
+
+import { AGENT_RATING_PAYLOAD, SEPARATOR } from '../constants'
 import { FlowContent } from '../content-fields'
 import { HtNodeWithContent } from '../content-fields/hubtype-fields'
+import { EventAction, trackEvent } from '../tracking'
 import { FlowBuilderContext } from './index'
 
-export async function getContentsByPayload({
-  cmsApi,
-  flowBuilderPlugin,
-  request,
-  contentID,
-}: FlowBuilderContext): Promise<FlowContent[]> {
+export async function getContentsByPayload(
+  context: FlowBuilderContext
+): Promise<FlowContent[]> {
+  const { cmsApi, flowBuilderPlugin, request, contentID } = context
+  if (request.input.payload?.startsWith(AGENT_RATING_PAYLOAD)) {
+    return await resolveRatingPayload(context)
+  }
+
   const id = contentID
     ? cmsApi.getNodeByContentID(contentID)?.id
     : request.input.payload
@@ -19,3 +26,46 @@ export async function getContentsByPayload({
 
   return []
 }
+
+async function resolveRatingPayload(
+  context: FlowBuilderContext
+): Promise<FlowContent[]> {
+  const { cmsApi, flowBuilderPlugin, request } = context
+
+  if (!request.input.payload) {
+    return []
+  }
+
+  const id = request.input.payload
+  const buttonId = id?.split(SEPARATOR)[1]
+  const ratingNode = cmsApi.getRatingNodeByButtonId(buttonId)
+  const ratingButton = cmsApi.getRatingButtonById(ratingNode, buttonId)
+  const { target, text, value } = ratingButton
+  const possibleOptions = ratingNode.content.buttons.map(button => button.text)
+  const possibleValues = ratingNode.content.buttons.map(button => button.value)
+
+  if (request.session._hubtype_case_id) {
+    const event = {
+      action: EventAction.FeedbackCase,
+      feedbackTargetId: request.session._hubtype_case_id,
+      feedbackGroupId: uuid().toString(),
+      possibleOptions,
+      possibleValues,
+      option: text,
+      value,
+    }
+
+    await storeCaseRating(request.session, value)
+    await trackEvent(request, EventAction.FeedbackCase, event)
+  }
+
+  const targetNode = target
+    ? cmsApi.getNodeById<HtNodeWithContent>(target.id)
+    : undefined
+
+  if (targetNode) {
+    return await flowBuilderPlugin.getContentsByNode(targetNode)
+  }
+
+  return []
+}

package/src/api.ts

@@ -19,6 +19,8 @@ import {
   HtNodeWithContentType,
   HtNodeWithoutContentType,
   HtPayloadNode,
+  HtRatingButton,
+  HtRatingNode,
 } from './content-fields/hubtype-fields'
 import { HtSmartIntentNode } from './content-fields/hubtype-fields/smart-intent'
 import { FlowBuilderApiOptions, ProcessEnvNodeEnvs } from './types'
@@ -80,6 +82,32 @@ export class FlowBuilderApi {
     return node as T
   }
 
+  getRatingNodeByButtonId(id: string): HtRatingNode {
+    const ratingNodes = this.flow.nodes.filter(
+      node => node.type === HtNodeWithContentType.RATING
+    ) as HtRatingNode[]
+    const ratingNode = ratingNodes.find(node =>
+      node.content.buttons.some(button => button.id === id)
+    ) as HtRatingNode | undefined
+
+    if (!ratingNode) {
+      throw Error(`Rating node with button id: '${id}' not found`)
+    }
+
+    return ratingNode
+  }
+
+  getRatingButtonById(ratingNode: HtRatingNode, id: string): HtRatingButton {
+    const ratingButton = ratingNode.content.buttons.find(
+      button => button.id === id
+    ) as HtRatingButton | undefined
+    if (!ratingButton) {
+      throw Error(`Rating button with id: '${id}' not found`)
+    }
+
+    return ratingButton
+  }
+
   getNodeByContentID(contentID: string): HtNodeComponent {
     const content = this.flow.nodes.find(node =>
       'code' in node ? node.code === contentID : false

package/src/constants.ts

@@ -8,6 +8,10 @@ export const REG_EXP_PATTERN = /^\/(.*)\/([gimyus]*)$/
 export const UUID_REGEXP =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
+/* ********** PAYLOADS ********** */
+export const AGENT_RATING_PAYLOAD = 'agent-rating'
+
+/* ********** FLOW NAMES ********** */
 export const MAIN_FLOW_NAME = 'Main'
 export const KNOWLEDGE_BASE_FLOW_NAME = 'Knowledge base'
 export const AI_AGENTS_FLOW_NAME = 'AI Agents'

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

@@ -5,6 +5,7 @@ import { FlowBuilderApi } from '../api'
 import { SOURCE_INFO_SEPARATOR } from '../constants'
 import { ContentFieldsBase } from './content-fields-base'
 import { HtButton, HtButtonStyle, HtUrlNode } from './hubtype-fields'
+import { HtRatingButton } from './hubtype-fields/rating'
 
 export class FlowButton extends ContentFieldsBase {
   public text = ''
@@ -47,6 +48,14 @@ export class FlowButton extends ContentFieldsBase {
     return newButton
   }
 
+  static fromRating(button: HtRatingButton): FlowButton {
+    const newButton = new FlowButton(button.id)
+    newButton.text = button.text
+    newButton.payload = button.payload
+    newButton.target = button.target?.id
+    return newButton
+  }
+
   static getUrlId(cmsButton: HtButton, locale: string): string | undefined {
     return cmsButton.url.find(url => url.locale === locale)?.id
   }

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

@@ -0,0 +1,92 @@
+import { isDev, isWebchat, isWhatsapp } from '@botonic/core'
+import {
+  ActionRequest,
+  CustomRatingMessage,
+  Text,
+  WhatsappButtonList,
+} from '@botonic/react'
+
+import { getFlowBuilderPlugin } from '../helpers'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowButton } from './flow-button'
+import { HtRatingNode, RatingType } from './hubtype-fields'
+
+export class FlowRating extends ContentFieldsBase {
+  public code = ''
+  public text = ''
+  public sendButtonText = ''
+  public ratingType = RatingType.Stars
+  public buttons: FlowButton[] = []
+  public openListButtonText = ''
+
+  static fromHubtypeCMS(cmsText: HtRatingNode, locale: string): FlowRating {
+    const newRating = new FlowRating(cmsText.id)
+    newRating.code = cmsText.code
+    newRating.text = this.getTextByLocale(locale, cmsText.content.text)
+    newRating.sendButtonText = this.getTextByLocale(
+      locale,
+      cmsText.content.send_button_text
+    )
+    newRating.ratingType = cmsText.content.rating_type
+    newRating.buttons = cmsText.content.buttons.map(button =>
+      FlowButton.fromRating(button)
+    )
+    newRating.openListButtonText = this.getTextByLocale(
+      locale,
+      cmsText.content.open_list_button_text
+    )
+
+    return newRating
+  }
+
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
+    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+    const customRatingMessageEnabled =
+      flowBuilderPlugin.customRatingMessageEnabled
+
+    if (isWhatsapp(request.session)) {
+      return (
+        <WhatsappButtonList
+          body={this.text}
+          button={this.openListButtonText}
+          sections={[
+            {
+              rows: this.buttons.map(button => ({
+                id: button.payload as string,
+                title: button.text,
+              })),
+            },
+          ]}
+        />
+      )
+    }
+
+    if (
+      (isWebchat(request.session) || isDev(request.session)) &&
+      customRatingMessageEnabled
+    ) {
+      const payloads = this.buttons
+        .map(button => button.payload)
+        .slice()
+        .reverse()
+
+      return (
+        <CustomRatingMessage
+          payloads={payloads}
+          messageText={this.text}
+          buttonText={this.sendButtonText}
+          ratingType={this.ratingType}
+        />
+      )
+    }
+
+    return (
+      <Text key={id}>
+        {this.text}
+        {this.buttons.map((button, buttonIndex) =>
+          button.renderButton(buttonIndex)
+        )}
+      </Text>
+    )
+  }
+}

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

@@ -12,6 +12,7 @@ export * from './knowledge-base'
 export * from './node-types'
 export * from './nodes'
 export * from './payload'
+export * from './rating'
 export * from './smart-intent'
 export * from './text'
 export * from './url'

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

@@ -13,6 +13,7 @@ export enum HtNodeWithContentType {
   KNOWLEDGE_BASE = 'knowledge-base',
   BOT_ACTION = 'bot-action',
   AI_AGENT = 'ai-agent',
+  RATING = 'rating',
 }
 
 export enum HtNodeWithoutContentType {

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

@@ -9,6 +9,7 @@ import { HtImageNode } from './image'
 import { HtKeywordNode } from './keyword'
 import { HtKnowledgeBaseNode } from './knowledge-base'
 import { HtPayloadNode } from './payload'
+import { HtRatingNode } from './rating'
 import { HtSmartIntentNode } from './smart-intent'
 import { HtTextNode } from './text'
 import { HtUrlNode } from './url'
@@ -31,6 +32,7 @@ export type HtNodeWithContent =
   | HtKnowledgeBaseNode
   | HtBotActionNode
   | HtAiAgentNode
+  | HtRatingNode
 
 export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode | HtGoToFlow
 

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

@@ -0,0 +1,26 @@
+import { HtBaseNode, HtNodeLink, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export enum RatingType {
+  Stars = 'stars',
+  Smileys = 'smileys',
+}
+
+export interface HtRatingButton {
+  id: string
+  text: string
+  payload: string
+  value: number
+  target?: HtNodeLink
+}
+
+export interface HtRatingNode extends HtBaseNode {
+  type: HtNodeWithContentType.RATING
+  content: {
+    text: HtTextLocale[]
+    buttons: HtRatingButton[]
+    rating_type: RatingType
+    send_button_text: HtTextLocale[]
+    open_list_button_text: HtTextLocale[]
+  }
+}

package/src/content-fields/index.ts

@@ -7,10 +7,12 @@ import {
   DISABLED_MEMORY_LENGTH,
   FlowKnowledgeBase,
 } from './flow-knowledge-base'
+import { FlowRating } from './flow-rating'
 import { FlowText } from './flow-text'
 import { FlowVideo } from './flow-video'
 import { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
 import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
+
 export { ContentFieldsBase } from './content-fields-base'
 export { FlowButton } from './flow-button'
 export { FlowElement } from './flow-element'
@@ -21,6 +23,7 @@ export {
   FlowHandoff,
   FlowImage,
   FlowKnowledgeBase,
+  FlowRating,
   FlowText,
   FlowVideo,
   FlowWhatsappButtonList,
@@ -38,5 +41,6 @@ export type FlowContent =
   | FlowKnowledgeBase
   | FlowBotAction
   | FlowAiAgent
+  | FlowRating
 
 export { DISABLED_MEMORY_LENGTH }

package/src/index.ts

@@ -21,6 +21,7 @@ import {
   FlowHandoff,
   FlowImage,
   FlowKnowledgeBase,
+  FlowRating,
   FlowText,
   FlowVideo,
   FlowWhatsappButtonList,
@@ -69,6 +70,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   // TODO: Rethink how we construct FlowBuilderApi to be simpler
   public jsonVersion: FlowBuilderJSONVersion
   public apiUrl: string
+  public customRatingMessageEnabled: boolean
 
   constructor(options: BotonicPluginFlowBuilderOptions<ResolvedPlugins, any>) {
     this.apiUrl = options.apiUrl || FLOW_BUILDER_API_URL_PROD
@@ -90,6 +92,8 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       allowKnowledgeBases: options.inShadowing?.allowKnowledgeBases || false,
     }
     this.contentFilters = options.contentFilters || []
+    this.customRatingMessageEnabled =
+      options.customRatingMessageEnabled || false
   }
 
   resolveFlowUrl(request: PluginPreRequest): string {
@@ -240,6 +244,9 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       case HtNodeWithContentType.AI_AGENT:
         return FlowAiAgent.fromHubtypeCMS(hubtypeContent)
 
+      case HtNodeWithContentType.RATING:
+        return FlowRating.fromHubtypeCMS(hubtypeContent, locale)
+
       case HtNodeWithContentType.BOT_ACTION:
         return FlowBotAction.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
 

package/src/tracking.ts

@@ -14,6 +14,7 @@ export enum EventAction {
   IntentSmart = 'nlu_intent_smart',
   Knowledgebase = 'knowledgebase',
   Fallback = 'fallback',
+  FeedbackCase = 'feedback_case',
 }
 
 export enum KnowledgebaseFailReason {

package/src/types.ts

@@ -24,6 +24,7 @@ export interface BotonicPluginFlowBuilderOptions<
   smartIntentsConfig?: { numSmartIntentsToUse: number }
   inShadowing?: Partial<InShadowingConfig>
   contentFilters?: ContentFilter<TPlugins, TExtraData>[]
+  customRatingMessageEnabled?: boolean
 }
 
 export type TrackEventFunction<