From 85e2146ee4da280b451bbee25a88297a9490a579 Mon Sep 17 00:00:00 2001
From: Oriol Raventos <o.raventos.89@gmail.com>
Date: Tue, 2 Jul 2024 11:17:04 +0200
Subject: [PATCH] refactor(plugin-flow-builder): pass a generic T to type
 contents

---
 .../src/webview/contents-context.ts              | 16 ++++++++--------
 .../src/webview/types.ts                         | 12 ++++++------
 .../src/webview/use-webview-contents.ts          | 14 ++++++++------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/botonic-plugin-flow-builder/src/webview/contents-context.ts b/packages/botonic-plugin-flow-builder/src/webview/contents-context.ts
index 35c6dccf24..b787ec0ea1 100644
--- a/packages/botonic-plugin-flow-builder/src/webview/contents-context.ts
+++ b/packages/botonic-plugin-flow-builder/src/webview/contents-context.ts
@@ -2,11 +2,11 @@ import { createContext } from 'react'
 
 import { WebviewContentsContextType } from './types'
 
-export const WebviewContentsContext = createContext<WebviewContentsContextType>(
-  {
-    getTextContent: () => '',
-    getImageSrc: () => '',
-    setCurrentLocale: () => undefined,
-    contents: {},
-  }
-)
+export const WebviewContentsContext = createContext<
+  WebviewContentsContextType<unknown>
+>({
+  getTextContent: () => '',
+  getImageSrc: () => '',
+  setCurrentLocale: () => undefined,
+  contents: {},
+})
diff --git a/packages/botonic-plugin-flow-builder/src/webview/types.ts b/packages/botonic-plugin-flow-builder/src/webview/types.ts
index 5c5862cd25..fce9b009bd 100644
--- a/packages/botonic-plugin-flow-builder/src/webview/types.ts
+++ b/packages/botonic-plugin-flow-builder/src/webview/types.ts
@@ -25,25 +25,25 @@ export interface WebviewImageContent {
   }
 }
 
-export interface UseWebviewContentsProps {
+export interface UseWebviewContentsProps<T> {
   apiUrl?: string
   version?: FlowBuilderJSONVersion
   orgId: string
   botId: string
   webviewId: string
   locale: string
-  mapContents: Record<string, string>
+  mapContents: Record<keyof T, string>
 }
 
-export interface UseWebviewContents {
+export interface UseWebviewContents<T> {
   isLoading: boolean
   error: boolean
-  webviewContentsContext: WebviewContentsContextType
+  webviewContentsContext: WebviewContentsContextType<T>
 }
 
-export interface WebviewContentsContextType {
+export interface WebviewContentsContextType<T> {
   getTextContent: (code: string) => string
   getImageSrc: (code: string) => string
   setCurrentLocale: (locale: string) => void
-  contents: Record<string, string>
+  contents: Record<keyof T, string>
 }
diff --git a/packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts b/packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts
index 25d4e78fac..fd2e1dc909 100644
--- a/packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts
+++ b/packages/botonic-plugin-flow-builder/src/webview/use-webview-contents.ts
@@ -12,7 +12,7 @@ import {
   WebviewTextContent,
 } from './types'
 
-export function useWebviewContents({
+export function useWebviewContents<T>({
   apiUrl = FLOW_BUILDER_API_URL_PROD,
   version = FlowBuilderJSONVersion.LATEST,
   orgId,
@@ -20,10 +20,12 @@ export function useWebviewContents({
   webviewId,
   locale,
   mapContents,
-}: UseWebviewContentsProps): UseWebviewContents {
+}: UseWebviewContentsProps<T>): UseWebviewContents<T> {
   const [textContents, setTextContents] = useState<WebviewTextContent[]>()
   const [imageContents, setImageContents] = useState<WebviewImageContent[]>()
-  const [contents, setContents] = useState({})
+  const [contents, setContents] = useState<Record<keyof T, string>>(
+    {} as Record<keyof T, string>
+  )
   const [currentLocale, setCurrentLocale] = useState(locale)
   const [isLoading, setLoading] = useState(true)
   const [error, setError] = useState(false)
@@ -47,9 +49,9 @@ export function useWebviewContents({
   }
 
   const createContentsObject = () => {
-    const contentsObject = {}
-    for (const [key, value] of Object.entries(mapContents)) {
-      contentsObject[key] = getTextContent(value)
+    const contentsObject = {} as Record<keyof T, string>
+    for (const [key, value] of Object.entries<string>(mapContents)) {
+      contentsObject[key] = getTextContent(value) || getImageSrc(value)
     }
     setContents(contentsObject)
   }