@botonic/plugin-flow-builder 0.38.1 → 0.39.0-alpha.0

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

@@ -4,7 +4,14 @@ import React from 'react'
 import { FlowBuilderApi } from '../api'
 import { SOURCE_INFO_SEPARATOR } from '../constants'
 import { ContentFieldsBase } from './content-fields-base'
-import { HtButton, HtButtonStyle, HtUrlNode } from './hubtype-fields'
+import { FlowWebview } from './flow-webview'
+import {
+  HtButton,
+  HtButtonStyle,
+  HtNodeWithContent,
+  HtNodeWithContentType,
+  HtUrlNode,
+} from './hubtype-fields'
 import { HtRatingButton } from './hubtype-fields/rating'
 
 export class FlowButton extends ContentFieldsBase {
@@ -13,6 +20,7 @@ export class FlowButton extends ContentFieldsBase {
   public payload?: string
   public target?: string
   public webview?: Webview
+  public params?: Record<string, string>
 
   static fromHubtypeCMS(
     cmsButton: HtButton,
@@ -24,7 +32,14 @@ export class FlowButton extends ContentFieldsBase {
     const newButton = new FlowButton(cmsButton.id)
     newButton.text = this.getTextByLocale(locale, cmsButton.text)
     if (cmsButton.target) {
-      newButton.payload = cmsApi.getPayload(cmsButton.target)
+      const webview = this.getTargetWebview(cmsApi, cmsButton.target.id)
+      if (webview) {
+        const params = this.getWebviewParams(webview, cmsApi)
+        newButton.webview = { name: webview.webviewComponentName }
+        newButton.params = params
+      } else {
+        newButton.payload = cmsApi.getPayload(cmsButton.target)
+      }
     }
 
     if (cmsButton.url && urlId) {
@@ -35,6 +50,38 @@ export class FlowButton extends ContentFieldsBase {
     return newButton
   }
 
+  private static getWebviewParams(
+    webview: FlowWebview,
+    cmsApi: FlowBuilderApi
+  ) {
+    const params: Record<string, string> = {
+      webviewId: webview.webviewTargetId,
+    }
+    const exitSuccessContentID = this.getExitSuccessContentID(webview, cmsApi)
+
+    if (exitSuccessContentID) {
+      params.exitSuccessContentID = exitSuccessContentID
+    }
+
+    return params
+  }
+
+  private static getExitSuccessContentID(
+    webview: FlowWebview,
+    cmsApi: FlowBuilderApi
+  ) {
+    const webviewSuccessExit = webview.exits?.find(
+      exit => exit.name === 'Success'
+    )
+    const exitSuccessId = webviewSuccessExit?.target?.id
+    if (!exitSuccessId) {
+      return undefined
+    }
+    const exitNode = cmsApi.getNodeById<HtNodeWithContent>(exitSuccessId)
+
+    return exitNode.code
+  }
+
   static fromAIAgent(button: {
     id: string
     text: string
@@ -60,6 +107,17 @@ export class FlowButton extends ContentFieldsBase {
     return cmsButton.url.find(url => url.locale === locale)?.id
   }
 
+  static getTargetWebview(
+    cmsApi: FlowBuilderApi,
+    targetId: string
+  ): FlowWebview | undefined {
+    const targetNode = cmsApi.getNodeById(targetId)
+    if (targetNode.type !== HtNodeWithContentType.WEBVIEW) {
+      return undefined
+    }
+    return FlowWebview.fromHubtypeCMS(targetNode)
+  }
+
   renderButton(buttonIndex: number, buttonStyle?: HtButtonStyle): JSX.Element {
     if (buttonStyle === HtButtonStyle.QUICK_REPLY) {
       return (
@@ -68,6 +126,7 @@ export class FlowButton extends ContentFieldsBase {
         </Reply>
       )
     }
+
     return (
       <Button
         key={this.id}
@@ -75,6 +134,7 @@ export class FlowButton extends ContentFieldsBase {
         payload={this.getButtonPayload(buttonIndex)}
         target={this.target}
         webview={this.webview}
+        params={this.params}
       >
         {this.text}
       </Button>

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

@@ -0,0 +1,20 @@
+import { ContentFieldsBase } from './content-fields-base'
+import { HtWebviewExits, HtWebviewNode } from './hubtype-fields'
+
+export class FlowWebview extends ContentFieldsBase {
+  public code: string = ''
+  public webviewTargetId: string = ''
+  public webviewName: string = ''
+  public webviewComponentName: string = ''
+  public exits: HtWebviewExits[] = []
+
+  static fromHubtypeCMS(component: HtWebviewNode): FlowWebview {
+    const newWebview = new FlowWebview(component.id)
+    newWebview.webviewTargetId = component.content.webview_target_id
+    newWebview.webviewName = component.content.webview_name
+    newWebview.webviewComponentName = component.content.webview_component_name
+    newWebview.exits = component.content.exits
+
+    return newWebview
+  }
+}

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

@@ -12,6 +12,7 @@ export interface HtFlowBuilderData {
   is_ai_agent_active?: boolean
   nodes: HtNodeComponent[]
   flows: HtFlows[]
+  webviews: HtFlowWebview[]
 }
 
 export interface HtFlows {
@@ -20,6 +21,12 @@ export interface HtFlows {
   start_node_id: string
 }
 
+export interface HtFlowWebview {
+  id: string
+  name: string
+  component_name: string
+}
+
 export interface HtNodeLink {
   id: string
   type: HtNodeWithContentType | HtNodeWithoutContentType

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

@@ -17,5 +17,6 @@ export * from './smart-intent'
 export * from './text'
 export * from './url'
 export * from './video'
+export * from './webview'
 export * from './whatsapp-button-list'
 export * from './whatsapp-cta-url-button'

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

@@ -14,6 +14,7 @@ export enum HtNodeWithContentType {
   BOT_ACTION = 'bot-action',
   AI_AGENT = 'ai-agent',
   RATING = 'rating',
+  WEBVIEW = 'webview',
 }
 
 export enum HtNodeWithoutContentType {

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

@@ -14,6 +14,7 @@ import { HtSmartIntentNode } from './smart-intent'
 import { HtTextNode } from './text'
 import { HtUrlNode } from './url'
 import { HtVideoNode } from './video'
+import { HtWebviewNode } from './webview'
 import { HtWhatsappButtonListNode } from './whatsapp-button-list'
 import { HtWhatsappCTAUrlButtonNode } from './whatsapp-cta-url-button'
 
@@ -33,6 +34,7 @@ export type HtNodeWithContent =
   | HtBotActionNode
   | HtAiAgentNode
   | HtRatingNode
+  | HtWebviewNode
 
 export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode | HtGoToFlow
 

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

@@ -0,0 +1,18 @@
+import { HtBaseNode, HtNodeLink } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtWebviewExits {
+  id: string
+  name: string
+  target?: HtNodeLink
+}
+
+export interface HtWebviewNode extends HtBaseNode {
+  type: HtNodeWithContentType.WEBVIEW
+  content: {
+    webview_target_id: string
+    webview_name: string
+    webview_component_name: string
+    exits: HtWebviewExits[]
+  }
+}

package/src/index.ts

@@ -36,6 +36,7 @@ import {
   HtNodeComponent,
   HtNodeWithContent,
   HtNodeWithContentType,
+  HtRatingButton,
 } from './content-fields/hubtype-fields'
 import { DEFAULT_FUNCTIONS } from './functions'
 import {
@@ -46,6 +47,7 @@ import {
   InShadowingConfig,
   KnowledgeBaseFunction,
   PayloadParamsBase,
+  RatingSubmittedInfo,
   TrackEventFunction,
 } from './types'
 import { getNodeByUserInput } from './user-input'
@@ -314,9 +316,29 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   getFlowName(flowId: string): string {
     return this.cmsApi.getFlowName(flowId)
   }
+
+  getRatingSubmittedInfo(payload: string): RatingSubmittedInfo {
+    const buttonId = payload?.split(SEPARATOR)[1]
+    const ratingNode = this.cmsApi.getRatingNodeByButtonId(buttonId)
+
+    const ratingButton = this.cmsApi.getRatingButtonById(ratingNode, buttonId)
+    const possibleOptions = ratingNode.content.buttons.map(
+      button => button.text
+    )
+    const possibleValues = ratingNode.content.buttons.map(
+      button => button.value
+    )
+
+    return {
+      ...ratingButton,
+      possibleOptions,
+      possibleValues,
+    }
+  }
 }
 
 export * from './action'
+export { AGENT_RATING_PAYLOAD } from './constants'
 export * from './content-fields'
 export { HtBotActionNode } from './content-fields/hubtype-fields'
 export { trackFlowContent } from './tracking'
@@ -325,5 +347,6 @@ export {
   ContentFilter,
   FlowBuilderJSONVersion,
   PayloadParamsBase,
+  RatingSubmittedInfo,
 } from './types'
 export * from './webview'

package/src/types.ts

@@ -1,17 +1,16 @@
 import {
-  AgenticOutputMessage,
   BotContext,
-  CarouselMessage,
   InferenceResponse,
   KnowledgeBasesResponse,
   PluginPreRequest,
   ResolvedPlugins,
-  TextMessage,
-  TextWithButtonsMessage,
 } from '@botonic/core'
 
 import { FlowContent } from './content-fields'
-import { HtFlowBuilderData } from './content-fields/hubtype-fields'
+import {
+  HtFlowBuilderData,
+  HtRatingButton,
+} from './content-fields/hubtype-fields'
 
 export interface InShadowingConfig {
   allowKeywords: boolean
@@ -116,3 +115,8 @@ export interface SmartIntentResponse {
 export interface PayloadParamsBase {
   followUpContentID?: string
 }
+
+export interface RatingSubmittedInfo extends HtRatingButton {
+  possibleOptions: string[]
+  possibleValues: number[]
+}

package/src/webview/types.ts

@@ -31,9 +31,9 @@ export type MapContentsType = Record<string, string>
 export interface UseWebviewContentsProps<T extends MapContentsType> {
   apiUrl?: string
   version?: FlowBuilderJSONVersion
-  orgId: string
   botId: string
   webviewId: string
+  providerId: string
   locale: string
   mapContents: Record<keyof T, string>
 }

package/src/webview/use-webview-contents.ts

@@ -16,10 +16,9 @@ import {
 export function useWebviewContents<T extends MapContentsType>({
   apiUrl = FLOW_BUILDER_API_URL_PROD,
   version = FlowBuilderJSONVersion.LATEST,
-  // @ts-ignore
-  orgId,
   botId,
   webviewId,
+  providerId,
   locale,
   mapContents,
 }: UseWebviewContentsProps<T>): UseWebviewContents<T> {
@@ -85,7 +84,7 @@ export function useWebviewContents<T extends MapContentsType>({
 
   useEffect(() => {
     const getResponseContents = async () => {
-      const url = `${apiUrl}/v1/bot_flows/${botId}/versions/${version}/webviews/${webviewId}/`
+      const url = `${apiUrl}/v1/bot_flows/${botId}/versions/${version}/webviews/${webviewId}/?provider_id=${providerId}`
       try {
         const response = await axios.get<WebviewContentsResponse>(url)