Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
plugin-flow-builder: WebviewContentsContext and useWebviewContents (#…
…2810) ## 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`, `error`and 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. ## Tests Add organization and organization_id in @botonic/react helpers to have green tests
- Loading branch information
Showing
22 changed files
with
283 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
packages/botonic-plugin-flow-builder/src/webview/contents-context.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { createContext } from 'react' | ||
|
|
||
| import { WebviewContentsContextType } from './types' | ||
|
|
||
| export const WebviewContentsContext = createContext<WebviewContentsContextType>( | ||
| { | ||
| getTextContent: () => undefined, | ||
| getImageSrc: () => undefined, | ||
| setCurrentLocale: () => undefined, | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { WebviewContentsContext } from './contents-context' | ||
| export * from './types' | ||
| export { useWebviewContents } from './use-webview-contents' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { FlowBuilderJSONVersion } from '../types' | ||
|
|
||
| export enum WebviewContentType { | ||
| TEXT = 'webview-text', | ||
| IMAGE = 'webview-image', | ||
| } | ||
|
|
||
| export interface WebviewContentsResponse { | ||
| webview_contents: (WebviewTextContent | WebviewImageContent)[] | ||
| } | ||
|
|
||
| export interface WebviewTextContent { | ||
| code: string | ||
| type: WebviewContentType.TEXT | ||
| content: { | ||
| text: { message: string; locale: string }[] | ||
| } | ||
| } | ||
|
|
||
| export interface WebviewImageContent { | ||
| code: string | ||
| type: WebviewContentType.IMAGE | ||
| content: { | ||
| image: { file: string; locale: string }[] | ||
| } | ||
| } | ||
|
|
||
| export interface UseWebviewContentsProps { | ||
| apiUrl?: string | ||
| version?: FlowBuilderJSONVersion | ||
| orgId: string | ||
| botId: string | ||
| webviewId: string | ||
| locale: string | ||
| } | ||
|
|
||
| export interface UseWebviewContents { | ||
| isLoading: boolean | ||
| error: boolean | ||
| webviewContentsContext: WebviewContentsContextType | ||
| } | ||
|
|
||
| export interface WebviewContentsContextType { | ||
| getTextContent: (code: string) => string | undefined | ||
| getImageSrc: (code: string) => string | undefined | ||
| setCurrentLocale: (locale: string) => void | ||
| } |
78 changes: 78 additions & 0 deletions
78
packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import axios from 'axios' | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| import { FLOW_BUILDER_API_URL_PROD } from '../constants' | ||
| import { FlowBuilderJSONVersion } from '../types' | ||
| import { | ||
| UseWebviewContents, | ||
| UseWebviewContentsProps, | ||
| WebviewContentsResponse, | ||
| WebviewContentType, | ||
| WebviewImageContent, | ||
| WebviewTextContent, | ||
| } from './types' | ||
|
|
||
| export function useWebviewContents({ | ||
| apiUrl = FLOW_BUILDER_API_URL_PROD, | ||
| version = FlowBuilderJSONVersion.LATEST, | ||
| orgId, | ||
| botId, | ||
| webviewId, | ||
| locale, | ||
| }: UseWebviewContentsProps): UseWebviewContents { | ||
| const [textContents, setTextContents] = useState<WebviewTextContent[]>() | ||
| const [imageContents, setImageContents] = useState<WebviewImageContent[]>() | ||
| const [currentLocale, setCurrentLocale] = useState(locale) | ||
| const [isLoading, setLoading] = useState(false) | ||
| const [error, setError] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| const getResponseContents = async () => { | ||
| setLoading(true) | ||
| const url = `${apiUrl}/webview/${version}` | ||
| try { | ||
| const response = await axios.get<WebviewContentsResponse>(url, { | ||
| params: { org: orgId, bot: botId, webview: webviewId }, | ||
| }) | ||
|
|
||
| const textResponseContents = response.data.webview_contents.filter( | ||
| webviewContent => webviewContent.type === WebviewContentType.TEXT | ||
| ) as WebviewTextContent[] | ||
| setTextContents(textResponseContents) | ||
|
|
||
| const imageResponseContents = response.data.webview_contents.filter( | ||
| webviewContent => webviewContent.type === WebviewContentType.IMAGE | ||
| ) as WebviewImageContent[] | ||
| setImageContents(imageResponseContents) | ||
| } catch (error) { | ||
| console.error('Error fetching webview contents:', error) | ||
| setError(true) | ||
| } finally { | ||
| setLoading(false) | ||
| } | ||
| } | ||
| getResponseContents() | ||
| }, []) | ||
|
|
||
| const getTextContent = (contentID: string): string | undefined => { | ||
| return textContents | ||
| ?.find(textContent => textContent.code === contentID) | ||
| ?.content.text.find(text => text.locale === currentLocale)?.message | ||
| } | ||
|
|
||
| const getImageSrc = (contentID: string): string | undefined => { | ||
| return imageContents | ||
| ?.find(imageContent => imageContent.code === contentID) | ||
| ?.content.image.find(image => image.locale === currentLocale)?.file | ||
| } | ||
|
|
||
| return { | ||
| isLoading, | ||
| error, | ||
| webviewContentsContext: { | ||
| getTextContent, | ||
| getImageSrc, | ||
| setCurrentLocale, | ||
| }, | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.