Flow builder: tracking with Hubtype analytics events (#2537)

<!-- _Set as [Draft
PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/) if
it's not ready to be merged_.

[PR best practices
Reference](https://blog.codeminer42.com/on-writing-a-great-pull-request-37c60ce6f31d/)
-->

## Description
Add tracking to each FlowBuilder action option. Events are created which
are those defined in hubtype-analytics. Although I have put as a
dependency @botonic/plugin-hubtype-analytics I am only using the types
to create the events. The call to the trackEvent function will enter as
a FlowBuilder dependency.
<!--
- Must be clear and concise (2-3 lines).
- Don't make reviewers think. The description should explain what has
been implemented or what it's used for. If a pull request is not
descriptive, people will be lazy or not willing to spend much time on
it.
- Be explicit with the names (don't abbreviate and don't use acronyms
that can lead to misleading understanding).
- If you consider it appropriate, include the steps to try the new
features.
-->

## Context
The most important thing in this PR is to generate the concrete event at
each point. When I tried to do this I saw that the files were getting
too big and I applied a refactor to separate everything better.
So I have transformed the action file into a folder and created a file
for the way to get the node: by user input, by intent, by keyword and
another one with the logic to call the trackEvent function that will not
always be defined in the flow builder plugin
<!--
- What problem is trying to solve this pull request?
- What are the reasons or business goals of this implementation?
- Can I provide visual resources or links to understand better the
situation?
-->

## Approach taken / Explain the design
Apply a refactor in the action splitting it into several files: 
- one with the logic to do the tracking function,
- one for the intents logic, creating the events and doing the tracking
- one for the keywords logic, creating the events and doing the tracking
It also refactors the doHandoff function, making a request to obtain the
availability of the queue and do the corresponding tracking.
<!--
- Explain what the code does.
- If it's a complex solution, try to provide a sketch.
-->

## To document / Usage example

<!--
- How this is used?
- If possible, provide a snippet of code with a usage example.
-->

## Testing
The flow builder plugin logic is yet to be tested.

packages/botonic-plugin-flow-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.22.3",
+  "version": "0.22.4-alpha.3",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",
@@ -48,6 +48,7 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "@botonic/react": "^0.22.2",
+    "@botonic/plugin-hubtype-analytics": "0.22.0-alpha.5",
     "axios": "^1.3.6"
   }
 }

packages/botonic-plugin-flow-builder/src/action/index.tsx

@@ -0,0 +1,103 @@
+import {
+  EventBotFaq,
+  EventFallback,
+  EventName,
+} from '@botonic/plugin-hubtype-analytics/lib/cjs/types'
+import { ActionRequest, Multichannel, RequestContext } from '@botonic/react'
+import React from 'react'
+
+import { FlowBuilderApi } from '../api'
+import { FlowContent, FlowHandoff } from '../content-fields'
+import { HtNodeWithContent } from '../content-fields/hubtype-fields'
+import { getFlowBuilderPlugin } from '../helpers'
+import { trackEvent } from './tracking'
+import { getNodeByUserInput } from './user-input'
+
+type FlowBuilderActionProps = {
+  contents: FlowContent[]
+}
+
+export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
+  static contextType = RequestContext
+
+  static async botonicInit(
+    request: ActionRequest
+  ): Promise<FlowBuilderActionProps> {
+    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+    const locale = flowBuilderPlugin.getLocale(request.session)
+
+    const targetNode = await getTargetNode(
+      flowBuilderPlugin.cmsApi,
+      locale,
+      request
+    )
+
+    const contents = await flowBuilderPlugin.getContentsByNode(
+      targetNode,
+      locale
+    )
+
+    const handoffContent = contents.find(
+      content => content instanceof FlowHandoff
+    ) as FlowHandoff
+    if (handoffContent) await handoffContent.doHandoff(request)
+
+    const renderContents = contents.filter(content =>
+      content instanceof FlowHandoff ? false : true
+    )
+
+    return { contents: renderContents }
+  }
+
+  render(): JSX.Element | JSX.Element[] {
+    const { contents } = this.props
+    return contents.map(content => content.toBotonic(content.id))
+  }
+}
+
+export class FlowBuilderMultichannelAction extends FlowBuilderAction {
+  render(): JSX.Element | JSX.Element[] {
+    const { contents } = this.props
+    return (
+      <Multichannel text={{ buttonsAsText: false }}>
+        {contents.map(content => content.toBotonic(content.id))}
+      </Multichannel>
+    )
+  }
+}
+
+async function getTargetNode(
+  cmsApi: FlowBuilderApi,
+  locale: string,
+  request: ActionRequest
+) {
+  const contentId = request.input.payload
+  const targetNode = !contentId
+    ? await getNodeByUserInput(cmsApi, locale, request)
+    : (cmsApi.getNodeById(contentId) as HtNodeWithContent)
+
+  if (targetNode) {
+    const event: EventBotFaq = {
+      event_type: EventName.botFaq,
+      event_data: {
+        faq_name: targetNode.code,
+      },
+    }
+    await trackEvent(request, event)
+    return targetNode
+  }
+  return await getFallbackNode(cmsApi, request)
+}
+
+async function getFallbackNode(cmsApi: FlowBuilderApi, request: ActionRequest) {
+  const isFirstFallbackOption =
+    request.session.user.extra_data.isFirstFallbackOption ?? true
+  const fallbackNode = cmsApi.getFallbackNode(isFirstFallbackOption)
+  request.session.user.extra_data.isFirstFallbackOption = !isFirstFallbackOption
+
+  const event: EventFallback = {
+    event_type: EventName.fallback,
+  }
+  await trackEvent(request, event)
+  return fallbackNode
+}