@botonic/plugin-flow-builder 0.22.0-alpha.2 → 0.22.0

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

@@ -1,42 +1,63 @@
 import { Button, Reply } from '@botonic/react'
 import React from 'react'
 
-import { Button as FbButton, ButtonStyle } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
+import {
+  HtButton,
+  HtButtonStyle,
+  HtPayloadNode,
+  HtUrlNode,
+} from './hubtype-fields'
 
 export class FlowButton extends ContentFieldsBase {
   public text = ''
   public url?: string
   public payload?: string
 
-  static fromHubtypeCMS(component: FbButton, locale: string): FlowButton {
-    const newButton = new FlowButton(component.id)
-    newButton.text = FlowButton.getTextByLocale(locale, component.text)
-    newButton.payload = component.target
-      ? component.target.id
-      : component.payload?.find(payload => payload.locale === locale)?.id
-    if (component.url) {
-      const urlButton = (component.url as any).find(
-        url => url.locale === locale
-      )
-      if (urlButton) newButton.url = urlButton.content.url
+  static fromHubtypeCMS(
+    cmsButton: HtButton,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowButton {
+    const payloadId = this.getPayloadId(cmsButton, locale)
+    const urlId = this.getUrlId(cmsButton, locale)
+
+    const newButton = new FlowButton(cmsButton.id)
+    newButton.text = this.getTextByLocale(locale, cmsButton.text)
+    if (cmsButton.target) {
+      newButton.payload = cmsButton.target.id
+    }
+    if (cmsButton.payload && payloadId) {
+      const payloadNode = cmsApi.getNode(payloadId) as HtPayloadNode
+      newButton.payload = payloadNode.content.payload
     }
+    if (cmsButton.url && urlId) {
+      const payloadNode = cmsApi.getNode(urlId) as HtUrlNode
+      newButton.url = payloadNode.content.url
+    }
+
     return newButton
   }
 
-  renderButton(id: string, buttonStyle: ButtonStyle): JSX.Element {
-    if (buttonStyle === ButtonStyle.QUICK_REPLY) {
+  static getPayloadId(cmsButton, locale): string | undefined {
+    return cmsButton.payload.find(payload => payload.locale === locale)?.id
+  }
+
+  static getUrlId(cmsButton, locale): string | undefined {
+    return cmsButton.url.find(url => url.locale === locale)?.id
+  }
+
+  renderButton(buttonStyle?: HtButtonStyle): JSX.Element {
+    if (buttonStyle === HtButtonStyle.QUICK_REPLY) {
       return (
-        <Reply key={id} payload={this.payload}>
+        <Reply key={this.id} payload={this.payload}>
           {this.text}
         </Reply>
       )
     }
-    let props = {}
-    if (this.url) props = { url: this.url }
     return (
-      // @ts-ignore
-      <Button key={id} payload={this.payload} {...props}>
+      <Button key={this.id} payload={this.payload} url={this.url}>
         {this.text}
       </Button>
     )

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

@@ -1,19 +1,24 @@
-import { Button, Carousel, Element, Pic, Subtitle, Title } from '@botonic/react'
+import { Carousel } from '@botonic/react'
 import React from 'react'
 
-import { CarouselNode } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowElement } from './flow-element'
+import { HtCarouselNode } from './hubtype-fields'
 
 export class FlowCarousel extends ContentFieldsBase {
   public code = ''
   public elements: FlowElement[] = []
 
-  static fromHubtypeCMS(component: CarouselNode, locale: string): FlowCarousel {
+  static fromHubtypeCMS(
+    component: HtCarouselNode,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowCarousel {
     const newCarousel = new FlowCarousel(component.id)
     newCarousel.code = component.code
     newCarousel.elements = component.content.elements.map(element =>
-      FlowElement.fromHubtypeCMS(element, locale)
+      FlowElement.fromHubtypeCMS(element, locale, cmsApi)
     )
     return newCarousel
   }
@@ -21,20 +26,7 @@ export class FlowCarousel extends ContentFieldsBase {
   toBotonic(id: string): JSX.Element {
     return (
       <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>
-            {/* @ts-ignore */}
-            <Button
-              payload={element.buttons?.payload}
-              url={element.buttons?.url}
-            >
-              {element.buttons?.text}
-            </Button>
-          </Element>
-        ))}
+        {this.elements.map(element => element.toBotonic(id))}
       </Carousel>
     )
   }

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

@@ -1,26 +1,43 @@
-import { CarouselElementNode } from '../flow-builder-models'
+import { Element, Pic, Subtitle, Title } from '@botonic/react'
+import React from 'react'
+
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
+import { HtCarouselElement } from './hubtype-fields'
 
 export class FlowElement extends ContentFieldsBase {
   public title = ''
   public subtitle = ''
-  public buttons: FlowButton | undefined
+  public button: FlowButton | undefined
   public image = ''
   public hidden = false
 
   static fromHubtypeCMS(
-    component: CarouselElementNode,
-    locale: string
+    component: HtCarouselElement,
+    locale: string,
+    cmsApi: FlowBuilderApi
   ): FlowElement {
     const newElement = new FlowElement(component.id)
-    newElement.title = FlowElement.getTextByLocale(locale, component.title)
-    newElement.subtitle = FlowElement.getTextByLocale(
+    newElement.title = this.getTextByLocale(locale, component.title)
+    newElement.subtitle = this.getTextByLocale(locale, component.subtitle)
+    newElement.image = this.getImageByLocale(locale, component.image)
+    newElement.button = FlowButton.fromHubtypeCMS(
+      component.button,
       locale,
-      component.subtitle
+      cmsApi
     )
-    newElement.image = FlowElement.getImageByLocale(locale, component.image)
-    newElement.buttons = FlowButton.fromHubtypeCMS(component.button, locale)
     return newElement
   }
+
+  toBotonic(parentId: string): JSX.Element {
+    return (
+      <Element key={`${parentId}-${this.id}`}>
+        <Pic src={this.image} />
+        <Title>{this.title}</Title>
+        <Subtitle>{this.subtitle}</Subtitle>
+        {this.button?.renderButton()}
+      </Element>
+    )
+  }
 }

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

@@ -1,14 +1,14 @@
 import { Image } from '@botonic/react'
 import React from 'react'
 
-import { ImageNode } from '../flow-builder-models'
 import { ContentFieldsBase } from './content-fields-base'
+import { HtImageNode } from './hubtype-fields'
 
 export class FlowImage extends ContentFieldsBase {
   public src = ''
   public code = ''
 
-  static fromHubtypeCMS(component: ImageNode, locale: string): FlowImage {
+  static fromHubtypeCMS(component: HtImageNode, locale: string): FlowImage {
     const newImage = new FlowImage(component.id)
     newImage.code = component.code
     newImage.src = this.getImageByLocale(locale, component.content.image)

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

@@ -1,23 +1,28 @@
 import { Text } from '@botonic/react'
 import React from 'react'
 
-import { ButtonStyle, TextNode } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
+import { HtButtonStyle, HtTextNode } from './hubtype-fields'
 
 export class FlowText extends ContentFieldsBase {
   public text = ''
   public code = ''
   public buttons: FlowButton[] = []
-  public buttonStyle = ButtonStyle.BUTTON
+  public buttonStyle = HtButtonStyle.BUTTON
 
-  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
-    newText.text = FlowText.getTextByLocale(locale, component.content.text)
-    newText.buttons = component.content.buttons.map(button =>
-      FlowButton.fromHubtypeCMS(button, locale)
+  static fromHubtypeCMS(
+    cmsText: HtTextNode,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowText {
+    const newText = new FlowText(cmsText.id)
+    newText.code = cmsText.code
+    newText.buttonStyle = cmsText.content.buttons_style || HtButtonStyle.BUTTON
+    newText.text = this.getTextByLocale(locale, cmsText.content.text)
+    newText.buttons = cmsText.content.buttons.map(button =>
+      FlowButton.fromHubtypeCMS(button, locale, cmsApi)
     )
     return newText
   }
@@ -26,9 +31,7 @@ export class FlowText extends ContentFieldsBase {
     return (
       <Text key={id}>
         {this.text}
-        {this.buttons.map(button =>
-          button.renderButton(button.id, this.buttonStyle)
-        )}
+        {this.buttons.map(button => button.renderButton(this.buttonStyle))}
       </Text>
     )
   }

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

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

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

@@ -0,0 +1,15 @@
+import {
+  HtNodeLink,
+  HtPayloadLocale,
+  HtTextLocale,
+  HtUrlLocale,
+} from './common'
+
+export interface HtButton {
+  id: string
+  text: HtTextLocale[]
+  url: HtUrlLocale[]
+  payload: HtPayloadLocale[]
+  target?: HtNodeLink
+  hidden: string[]
+}

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

@@ -0,0 +1,18 @@
+import { HtButton } from './button'
+import { HtBaseNode, HtMediaFileLocale, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtCarouselElement {
+  id: string
+  title: HtTextLocale[]
+  subtitle: HtTextLocale[]
+  image: HtMediaFileLocale[]
+  button: HtButton
+}
+
+export interface HtCarouselNode extends HtBaseNode {
+  type: HtNodeWithContentType.CAROUSEL
+  content: {
+    elements: HtCarouselElement[]
+  }
+}

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

@@ -0,0 +1,65 @@
+import { HtNodeWithContentType, HtNodeWithoutContentType } from './node-types'
+import { HtNodeComponent } from './nodes'
+
+export interface HtFlowBuilderData {
+  version: string
+  name: string
+  locales: string[]
+  start_node_id?: string
+  ai_model_id?: string
+  nodes: HtNodeComponent[]
+}
+
+export interface HtNodeLink {
+  id: string
+  type: HtNodeWithContentType | HtNodeWithoutContentType
+}
+
+export interface HtBaseNode {
+  id: string
+  code: string
+  meta: {
+    x: number
+    y: number
+  }
+  follow_up?: HtNodeLink
+  target?: HtNodeLink
+}
+
+export interface HtTextLocale {
+  message: string
+  locale: string
+}
+
+export interface HtMediaFileLocale {
+  id: string
+  file: string
+  locale: string
+}
+
+export interface HtVideoLocale {
+  url: string
+  is_embedded: boolean
+  locale: string
+}
+
+export interface HtQueueLocale {
+  id: string
+  name: string
+  locale: string
+}
+
+export interface HtInputLocale {
+  values: string[]
+  locale: string
+}
+
+export interface HtUrlLocale {
+  id: string
+  locale: string
+}
+
+export interface HtPayloadLocale {
+  id: string
+  locale: string
+}

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