@botonic/plugin-flow-builder 0.25.0-alpha.9 → 0.25.0-beta.0

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

@@ -1,8 +1,9 @@
-import { Text } from '@botonic/react'
+import { ActionRequest, Text } from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../api'
-import { VARIABLE_REGEX } from '../constants'
+import { ACCESS_TOKEN_VARIABLE_KEY, VARIABLE_PATTERN } from '../constants'
+import { getValueFromKeyPath } from '../utils'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
 import { HtButtonStyle, HtTextNode } from './hubtype-fields'
@@ -21,38 +22,43 @@ export class FlowText extends ContentFieldsBase {
     const newText = new FlowText(cmsText.id)
     newText.code = cmsText.code
     newText.buttonStyle = cmsText.content.buttons_style || HtButtonStyle.BUTTON
-    newText.text = this.replaceVariables(
-      this.getTextByLocale(locale, cmsText.content.text),
-      cmsApi.request.session.user.extra_data
-    )
+    newText.text = this.getTextByLocale(locale, cmsText.content.text)
     newText.buttons = cmsText.content.buttons.map(button =>
       FlowButton.fromHubtypeCMS(button, locale, cmsApi)
     )
     return newText
   }
 
-  static replaceVariables(
-    text: string,
-    extraData?: Record<string, any>
-  ): string {
-    const matches = text.match(VARIABLE_REGEX)
+  static replaceVariables(text: string, request: ActionRequest): string {
+    const matches = text.match(VARIABLE_PATTERN)
 
     let replacedText = text
-    if (matches && extraData) {
+    if (matches && request) {
       matches.forEach(match => {
-        const variable = match.slice(1, -1)
-        const value = extraData[variable] ?? match
-        replacedText = replacedText.replace(match, value)
+        const keyPath = match.slice(1, -1)
+        const botVariable = keyPath.endsWith(ACCESS_TOKEN_VARIABLE_KEY)
+          ? match
+          : getValueFromKeyPath(request, keyPath)
+        replacedText = replacedText.replace(
+          match,
+          this.isValidType(botVariable) ? botVariable : match
+        )
       })
     }
 
     return replacedText
   }
 
-  toBotonic(id: string): JSX.Element {
+  private static isValidType(botVariable: any): boolean {
+    const validTypes = ['boolean', 'string', 'number']
+    return validTypes.includes(typeof botVariable)
+  }
+
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
+    const replacedText = FlowText.replaceVariables(this.text, request)
     return (
       <Text key={id}>
-        {this.text}
+        {replacedText}
         {this.buttons.map((button, buttonIndex) =>
           button.renderButton(buttonIndex, this.buttonStyle)
         )}

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-row.tsx

@@ -1,5 +1,6 @@
 import { WhatsappButtonListRowProps } from '@botonic/react'
 
+import { FlowBuilderApi } from '../../api'
 import { SOURCE_INFO_SEPARATOR } from '../../constants'
 import { ContentFieldsBase } from '../content-fields-base'
 import { HtWhatsappButtonListRow } from '../hubtype-fields'
@@ -11,12 +12,13 @@ export class FlowWhatsappButtonListRow extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtWhatsappButtonListRow,
-    locale: string
+    locale: string,
+    cmsApi: FlowBuilderApi
   ): 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
+    newRow.targetId = cmsApi.getPayload(component.target)
     return newRow
   }
 

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-section.tsx

@@ -3,6 +3,7 @@ import {
   WhatsappButtonListSectionProps,
 } from '@botonic/react'
 
+import { FlowBuilderApi } from '../../api'
 import { HtWhatsappButtonListSection } from '../hubtype-fields'
 import { ContentFieldsBase } from './../content-fields-base'
 import { FlowWhatsappButtonListRow } from './flow-whatsapp-button-list-row'
@@ -13,12 +14,13 @@ export class FlowWhatsappButtonListSection extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtWhatsappButtonListSection,
-    locale: string
+    locale: string,
+    cmsApi: FlowBuilderApi
   ): FlowWhatsappButtonListSection {
     const newButton = new FlowWhatsappButtonListSection(component.id)
     newButton.title = this.getTextByLocale(locale, component.title)
     newButton.rows = component.rows.map(row =>
-      FlowWhatsappButtonListRow.fromHubtypeCMS(row, locale)
+      FlowWhatsappButtonListRow.fromHubtypeCMS(row, locale, cmsApi)
     )
     return newButton
   }

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

@@ -1,6 +1,7 @@
 import { WhatsappButtonList } from '@botonic/react'
 import React from 'react'
 
+import { FlowBuilderApi } from '../../api'
 import { HtWhatsappButtonListNode } from '../hubtype-fields'
 import { ContentFieldsBase } from './../content-fields-base'
 import { FlowWhatsappButtonListSection } from './flow-whatsapp-button-list-section'
@@ -13,7 +14,8 @@ export class FlowWhatsappButtonList extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtWhatsappButtonListNode,
-    locale: string
+    locale: string,
+    cmsApi: FlowBuilderApi
   ): FlowWhatsappButtonList {
     const newWhatsappButtonList = new FlowWhatsappButtonList(component.id)
     newWhatsappButtonList.code = component.code
@@ -26,7 +28,7 @@ export class FlowWhatsappButtonList extends ContentFieldsBase {
       component.content.button_text
     )
     newWhatsappButtonList.sections = component.content.sections.map(section =>
-      FlowWhatsappButtonListSection.fromHubtypeCMS(section, locale)
+      FlowWhatsappButtonListSection.fromHubtypeCMS(section, locale, cmsApi)
     )
     return newWhatsappButtonList
   }

package/src/functions/conditional-bot-variable.ts

@@ -0,0 +1,18 @@
+import { ActionRequest } from '@botonic/react'
+
+import { getValueFromKeyPath } from '../utils'
+
+interface ConditionalCountryArgs {
+  request: ActionRequest
+  results: string[]
+  keyPath: string
+}
+
+export function conditionalBotVariable({
+  request,
+  results,
+  keyPath,
+}: ConditionalCountryArgs): string {
+  const botVariable = getValueFromKeyPath(request, keyPath)
+  return results.find(result => result === botVariable) ?? 'default'
+}

package/src/functions/conditional-country.ts

@@ -0,0 +1,14 @@
+import { ActionRequest } from '@botonic/react'
+
+interface ConditionalCountryArgs {
+  request: ActionRequest
+  results: string[]
+}
+
+export function conditionalCountry({
+  request,
+  results,
+}: ConditionalCountryArgs): string {
+  const country = request.session.user.extra_data.country
+  return results.find(result => result === country) || 'default'
+}

package/src/functions/conditional-provider.ts

@@ -10,6 +10,5 @@ export function conditionalProvider({
   results,
 }: ConditionalProviderArgs): string {
   const provider = request.session.user.provider
-  if (results.includes(provider)) return provider
-  return 'default'
+  return results.find(result => result === provider) || 'default'
 }

package/src/functions/index.ts

@@ -1,3 +1,5 @@
+import { conditionalBotVariable } from './conditional-bot-variable'
+import { conditionalCountry } from './conditional-country'
 import { conditionalProvider } from './conditional-provider'
 import { conditionalQueueStatus } from './conditional-queue-status'
 
@@ -5,4 +7,6 @@ export const DEFAULT_FUNCTIONS = {
   // TODO: Rename api action name
   'check-queue-status': conditionalQueueStatus,
   'get-channel-type': conditionalProvider,
+  'check-country': conditionalCountry,
+  'check-bot-variable': conditionalBotVariable,
 }

package/src/index.ts

@@ -153,7 +153,11 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       case HtNodeWithContentType.VIDEO:
         return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
       case HtNodeWithContentType.WHATSAPP_BUTTON_LIST:
-        return FlowWhatsappButtonList.fromHubtypeCMS(hubtypeContent, locale)
+        return FlowWhatsappButtonList.fromHubtypeCMS(
+          hubtypeContent,
+          locale,
+          this.cmsApi
+        )
       case HtNodeWithContentType.HANDOFF:
         return FlowHandoff.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
       default:

package/src/utils.ts

@@ -1,4 +1,5 @@
 import { Session } from '@botonic/core'
+import { ActionRequest } from '@botonic/react'
 
 import { BotonicPluginFlowBuilderOptions, ProcessEnvNodeEnvs } from './types'
 
@@ -21,3 +22,28 @@ export function resolveGetAccessToken(
       throw new Error('No method defined for getting access token')
   }
 }
+
+export function getValueFromKeyPath(
+  request: ActionRequest,
+  keyPath: string
+): any {
+  if (keyPath.startsWith('input') || keyPath.startsWith('session')) {
+    return keyPath
+      .split('.')
+      .reduce((object, key) => resolveObjectKey(object, key), request)
+  }
+
+  return keyPath
+    .split('.')
+    .reduce(
+      (object, key) => resolveObjectKey(object, key),
+      request.session.user.extra_data
+    )
+}
+
+function resolveObjectKey(object: any, key: string): any {
+  if (object && object[key] !== undefined) {
+    return object[key]
+  }
+  return undefined
+}