refactor(react): rename names to not be only bind to imagePreviewer a…

…nd to be generic
hubtype · Dec 22, 2021 · 1983638 · 1983638
1 parent 0b59427
commit 1983638
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 28 deletions.
diff --git a/packages/botonic-react/src/index.d.ts b/packages/botonic-react/src/index.d.ts
@@ -204,8 +204,8 @@ export class WebchatApp {
   updateLastMessageDate(date: string): void
   updateUser(user: core.SessionUser): void
   updateWebchatSettings(settings: WebchatSettingsProps): void
-  openImagePreviewer(customContent: React.ReactNode): void
-  closeImagePreviewer(): void
+  renderCustomComponent(customComponent: React.ReactNode): void
+  unmountCustomComponent(): void
 }
 
 export interface WebchatContextProps {

diff --git a/packages/botonic-react/src/webchat-app.jsx b/packages/botonic-react/src/webchat-app.jsx
@@ -211,12 +211,12 @@ export class WebchatApp {
     this.webchatRef.current.closeCoverComponent()
   }
 
-  openImagePreviewer(imagePreviewerContent) {
-    this.webchatRef.current.openImagePreviewer(imagePreviewerContent)
+  renderCustomComponent(_customComponent) {
+    this.webchatRef.current.renderCustomComponent(_customComponent)
   }
 
-  closeImagePreviewer() {
-    this.webchatRef.current.closeImagePreviewer()
+  unmountCustomComponent() {
+    this.webchatRef.current.unmountCustomComponent()
   }
 
   toggleCoverComponent() {

diff --git a/packages/botonic-react/src/webchat/actions.jsx b/packages/botonic-react/src/webchat/actions.jsx
@@ -14,7 +14,7 @@ export const TOGGLE_WEBCHAT = 'toggleWebchat'
 export const TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker'
 export const TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu'
 export const TOGGLE_COVER_COMPONENT = 'toggleCoverComponent'
-export const TOGGLE_IMAGE_PREVIEWER = 'toggleImagePreviewer'
+export const DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent'
 export const SET_ERROR = 'setError'
 export const CLEAR_MESSAGES = 'clearMessages'
 export const UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate'

diff --git a/packages/botonic-react/src/webchat/hooks.js b/packages/botonic-react/src/webchat/hooks.js
@@ -6,12 +6,12 @@ import {
   ADD_MESSAGE,
   ADD_MESSAGE_COMPONENT,
   CLEAR_MESSAGES,
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
   TOGGLE_COVER_COMPONENT,
   TOGGLE_EMOJI_PICKER,
-  TOGGLE_IMAGE_PREVIEWER,
   TOGGLE_PERSISTENT_MENU,
   TOGGLE_WEBCHAT,
   UPDATE_DEV_SETTINGS,
@@ -60,7 +60,7 @@ export const webchatInitialState = {
   isEmojiPickerOpen: false,
   isPersistentMenuOpen: false,
   isCoverComponentOpen: false,
-  isImagePreviewerOpened: false,
+  isCustomComponentRendered: false,
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
   jwt: null,
@@ -139,9 +139,9 @@ export function useWebchat() {
       type: TOGGLE_COVER_COMPONENT,
       payload: toggle,
     })
-  const toggleImagePreviewer = toggle =>
+  const doRenderCustomComponent = toggle =>
     webchatDispatch({
-      type: TOGGLE_IMAGE_PREVIEWER,
+      type: DO_RENDER_CUSTOM_COMPONENT,
       payload: toggle,
     })
   const setError = error =>
@@ -199,7 +199,7 @@ export function useWebchat() {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
-    toggleImagePreviewer,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,
@@ -227,7 +227,7 @@ export function useTyping({ webchatState, updateTyping, updateMessage, host }) {
           updateMessage({ ...nextMsg, display: true })
           updateTyping(false)
         }, totalDelay * 1000)
-    } catch (e) { }
+    } catch (e) {}
     return () => {
       clearTimeout(delayTimeout)
       clearTimeout(typingTimeout)

diff --git a/packages/botonic-react/src/webchat/webchat-reducer.js b/packages/botonic-react/src/webchat/webchat-reducer.js
@@ -1,10 +1,10 @@
 import {
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
   TOGGLE_COVER_COMPONENT,
   TOGGLE_EMOJI_PICKER,
-  TOGGLE_IMAGE_PREVIEWER,
   TOGGLE_PERSISTENT_MENU,
   TOGGLE_WEBCHAT,
   UPDATE_DEV_SETTINGS,
@@ -43,8 +43,8 @@ export function webchatReducer(state, action) {
       return { ...state, isPersistentMenuOpen: action.payload }
     case TOGGLE_COVER_COMPONENT:
       return { ...state, isCoverComponentOpen: action.payload }
-    case TOGGLE_IMAGE_PREVIEWER:
-      return { ...state, isImagePreviewerOpened: action.payload }
+    case DO_RENDER_CUSTOM_COMPONENT:
+      return { ...state, isCustomComponentRendered: action.payload }
     case SET_ERROR:
       return { ...state, error: action.payload || {} }
     case SET_ONLINE:

diff --git a/packages/botonic-react/src/webchat/webchat.jsx b/packages/botonic-react/src/webchat/webchat.jsx
@@ -184,7 +184,7 @@ export const Webchat = forwardRef((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
-    toggleImagePreviewer,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,
@@ -201,7 +201,7 @@ export const Webchat = forwardRef((props, ref) => {
   const { initialSession, initialDevSettings, onStateChange } = props
   const getThemeProperty = _getThemeProperty(theme)
 
-  const [imagePreviewerComponent, setImagePreviewerComponent] = useState(null)
+  const [customComponent, setCustomComponent] = useState(null)
   const storage = props.storage === undefined ? localStorage : props.storage
   const storageKey =
     typeof props.storageKey === 'function'
@@ -562,11 +562,11 @@ export const Webchat = forwardRef((props, ref) => {
     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
     openCoverComponent: () => toggleCoverComponent(true),
     closeCoverComponent: () => toggleCoverComponent(false),
-    openImagePreviewer: imagePreviewerContent => {
-      setImagePreviewerComponent(imagePreviewerContent)
-      toggleImagePreviewer(true)
+    renderCustomComponent: _customComponent => {
+      setCustomComponent(_customComponent)
+      doRenderCustomComponent(true)
     },
-    closeImagePreviewer: () => toggleImagePreviewer(false),
+    unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
     openWebviewApi: component => openWebviewT(component),
@@ -894,9 +894,9 @@ export const Webchat = forwardRef((props, ref) => {
     )
   }
 
-  const imagePreviewer = () => {
-    if (!imagePreviewerComponent) return <></>
-    else return imagePreviewerComponent
+  const _renderCustomComponent = () => {
+    if (!customComponent) return <></>
+    else return customComponent
   }
 
   const WebchatComponent = (
@@ -953,9 +953,6 @@ export const Webchat = forwardRef((props, ref) => {
             </ErrorMessageContainer>
           )}
           {webchatMessageList()}
-          {webchatState.isImagePreviewerOpened &&
-            imagePreviewerComponent &&
-            imagePreviewer()}
           {webchatState.replies &&
             Object.keys(webchatState.replies).length > 0 &&
             webchatReplies()}
@@ -965,6 +962,9 @@ export const Webchat = forwardRef((props, ref) => {
           {!webchatState.handoff && userInputArea()}
           {webchatState.webview && webchatWebview()}
           {webchatState.isCoverComponentOpen && coverComponent()}
+          {webchatState.isCustomComponentRendered &&
+            customComponent &&
+            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>