plugin-flow-builder: WebviewContentsContext and useWebviewContents

[Iru89]

Description

@botonic/core
Update interface Session to add organization_id

@botonic/react
Create WebviewRequestContext to properly type what is received in the request context of a webview, the functions: getString and closeWebview and the objects session and params.
Also add the closeWebview function in the browser API, now we will be able to do Botonic.closeWebview()

@botonic/plugin-flow-builder
Change BotonicPluginFlowBuilderOptions remove flowUrl and add apiUrl and jsonVersion as optionals params. If this params are undefined the plugin build flowUrl using PROD URL and latest version.
Create a hook useWebviewContents and WebviewContentsContext

Approach taken / Explain the design

@botonic/plugin-flow-builder
The call to fetch the contents should only be made once at the start of the webview.
This hook gets the contents of the webview and returns isLoading, errorand the webviewContentsContext
With the webviewContentsContext the WebviewContentsContext has to be created.
This has the functions getTextContent and getImageSrc to use in the renders of each component.

To document / Usage example

This is just an example to see how to use the hook and context inside a webview, webviews is a folder inside the bot code.

webviews/flow-builder-webview-example/index.tsx

import {
  FlowBuilderJSONVersion,
  useWebviewContents,
  WebviewContentsContext,
} from '@botonic/plugin-flow-builder'
import { WebviewRequestContext } from '@botonic/react'
import React, { useContext, useState } from 'react'

const FLOW_BUILDER_API_URL = 'https://api.dev.flowbuilder.dev.hubtype.com'
const WEBVIEW_ID = 'b4d9a3bd-e19c-4557-8010-93c70d451d93'

export const FlowBuilderWebviewExample = () => {
  const webviewRequestContext = useContext(WebviewRequestContext)

  const { isLoading, error, webviewContentsContext } = useWebviewContents({
    apiUrl: FLOW_BUILDER_API_URL,
    version: FlowBuilderJSONVersion.LATEST,
    orgId: webviewRequestContext.session.organization_id,
    botId: webviewRequestContext.session.bot.id,
    webviewId: WEBVIEW_ID,
    locale: 'es',
  })

  const [stepNum, setStepNum] = useState(0)
  const steps = [<Step1 />, <Step2 />]

  const handleCloseWebview = () => {
    webviewRequestContext.closeWebview()
  }

  if (error) {
    return <div>Error</div>
  }

  return (
    <WebviewContentsContext.Provider value={webviewContentsContext}>
      <div>
        <div>
          <h1>FlowBuilderWebview</h1>
          <button onClick={handleCloseWebview}>Close</button>
        </div>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          <div>
            {steps[stepNum]}
            <div>
              <button onClick={() => setStepNum(0)}>Step0</button>
              <button onClick={() => setStepNum(1)}>step1</button>
            </div>
          </div>
        )}
      </div>
    </WebviewContentsContext.Provider>
  )
}

webviews/flow-builder-webview-example/step1.tsx

export const Step1 = () => {
  const webviewContentsContext = useContext(WebviewContentsContext)

  return (
    <div>
      <h1>Step1</h1>

      <div>
        <p>{webviewContentsContext.getTextContent('HEADER_WEBVIEW')}</p>
        <img
          style={{ width: '350px' }}
          src={webviewContentsContext.getImageSrc('image')}
        />
      </div>
    </div>
  )
}

webviews/flow-builder-webview-example/step2.tsx

export const Step2 = () => {
  const webviewContentsContext = useContext(WebviewContentsContext)

  return (
    <div>
      <h1>Step2</h1>

      <div>
        <p>{webviewContentsContext.getTextContent('TEXT_INTRO')}</p>
        <img
          style={{ width: '350px' }}
          src={webviewContentsContext.getImageSrc('IMAGE_2')}
        />
      </div>
    </div>
  )
}

Tests

Add organization and organization_id in @botonic/react helpers to have green tests

[linear]

BLT-674 TASK - plugin-flow-builder new endpoint for webview contents

[asastre]

Some doubts before approving