plugin-flow-builder: create contents with map

[Iru89]

Description

• The functions getTextContent and getImageSrc return an empty string if it does not find the value.

• The useWebviewContents hook accept an object mapContents. This object relates the names the developer wants for each content to the contentID of each content. Using this object the hook returns a contents object with all the contents.

Context

The hook useWebviewContents now returns a contents object which is like the mapContents passed as a parameter but with the relation key: fetchedContent
An important point is to have the contents object typed the same as the mapContents

Approach taken / Explain the design

To have the contents typed like the mapContents it is necessary create MyWebviewContentsContext outside the webview component and export it to be able to use it inside the components.
To create this MyWebviewContentsContext we use the createWebviewContentsContext function that allows to pass the type of the used in mapContents, by creating the type of this object or by passing typeof mapContents.
This way when using useContext(MyWebviewContentsContext) we get the contents typed as the mapContents.

To document / Usage example

  type WebviewContents = {
    textIntro: string
    image2: string
    headerWebview: string
    image: string
  }

export const MyWebviewContentsContext = createWebviewContentsContext<WebviewContents>()

export const FlowBuilderWebview = () => {
  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',
    mapContents: {
      textIntro: 'TEXT_INTRO',
      image2: 'IMAGE_2',
      headerWebview: 'HEADER_WEBVIEW',
      image: 'IMAGE',
    },
  })

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

  return (
    <MyWebviewContentsContext.Provider value={webviewContentsContext}>
      // your components
      <Step1 />
    </MyWebviewContentsContext.Provider>
  )
}

In Step1 component you can read the contents from context like

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

  const { contents } = webviewContentsContext

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

      <div>
        <p>{contents.textIntro}</p>
        <img style={{ width: '350px' }} src={contents.image2} />
      </div>
    </div>
  )
}

[asastre]

Just a 1 change, the rest LGTM

[vanbasten17]

nice feature!