@botonic/react 0.20.1-alpha.1 → 0.20.3

package/src/webchat/webchat.jsx

@@ -47,7 +47,6 @@ import {
   initSession,
   shouldKeepSessionOnReload,
 } from '../util/webchat'
-import { PortalModalComponent } from '../webchat/components/portal-modal'
 import { Attachment } from './components/attachment'
 import { EmojiPicker, OpenedEmojiPicker } from './components/emoji-picker'
 import {
@@ -185,7 +184,7 @@ export const Webchat = forwardRef((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
-    toggleModal,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,
@@ -202,8 +201,7 @@ export const Webchat = forwardRef((props, ref) => {
   const { initialSession, initialDevSettings, onStateChange } = props
   const getThemeProperty = _getThemeProperty(theme)
 
-  const [customModalContent, setCustomModalContent] = useState(undefined)
-
+  const [customComponent, setCustomComponent] = useState(null)
   const storage = props.storage === undefined ? localStorage : props.storage
   const storageKey =
     typeof props.storageKey === 'function'
@@ -407,9 +405,13 @@ export const Webchat = forwardRef((props, ref) => {
   )
 
   const getBlockInputs = (rule, inputData) => {
+    const processedInput = rule.preprocess
+      ? rule.preprocess(inputData)
+      : inputData
+
     return rule.match.some(regex => {
       if (typeof regex === 'string') regex = deserializeRegex(regex)
-      return regex.test(inputData)
+      return regex.test(processedInput)
     })
   }
 
@@ -564,11 +566,11 @@ export const Webchat = forwardRef((props, ref) => {
     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
     openCoverComponent: () => toggleCoverComponent(true),
     closeCoverComponent: () => toggleCoverComponent(false),
-    openModal: customModalContent => {
-      setCustomModalContent(customModalContent)
-      toggleModal(true)
+    renderCustomComponent: _customComponent => {
+      setCustomComponent(_customComponent)
+      doRenderCustomComponent(true)
     },
-    closeModal: () => toggleModal(false),
+    unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
     openWebviewApi: component => openWebviewT(component),
@@ -896,6 +898,11 @@ export const Webchat = forwardRef((props, ref) => {
     )
   }
 
+  const _renderCustomComponent = () => {
+    if (!customComponent) return <></>
+    else return customComponent
+  }
+
   const WebchatComponent = (
     <WebchatContext.Provider
       value={{
@@ -926,6 +933,7 @@ export const Webchat = forwardRef((props, ref) => {
           {triggerButton()}
         </div>
       )}
+
       {webchatState.isWebchatOpen && (
         <StyledWebchat
           // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
@@ -958,14 +966,9 @@ export const Webchat = forwardRef((props, ref) => {
           {!webchatState.handoff && userInputArea()}
           {webchatState.webview && webchatWebview()}
           {webchatState.isCoverComponentOpen && coverComponent()}
-          {webchatState.isModalOpen && (
-            <PortalModalComponent
-              open={webchatState.isModalOpen}
-              onClose={() => toggleModal(false)}
-              locked={false}
-              customContent={customModalContent}
-            />
-          )}
+          {webchatState.isCustomComponentRendered &&
+            customComponent &&
+            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>

package/src/webchat-app.jsx

@@ -211,12 +211,12 @@ export class WebchatApp {
     this.webchatRef.current.closeCoverComponent()
   }
 
-  openModal(customModalContent) {
-    this.webchatRef.current.openModal(customModalContent)
+  renderCustomComponent(_customComponent) {
+    this.webchatRef.current.renderCustomComponent(_customComponent)
   }
 
-  closeModal() {
-    this.webchatRef.current.closeModal()
+  unmountCustomComponent() {
+    this.webchatRef.current.unmountCustomComponent()
   }
 
   toggleCoverComponent() {

package/src/webchat/components/portal-modal/backdrop.jsx

@@ -1,38 +0,0 @@
-import styled from 'styled-components'
-
-import { MODAL_ACTIVE_CLASSNAME, MODAL_CONTENT_CLASSNAME } from './constants'
-
-export const Backdrop = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(51, 51, 51, 0.3);
-  backdrop-filter: blur(1px);
-  opacity: 0;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition-delay: 200ms;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & .${MODAL_CONTENT_CLASSNAME} {
-    transform: translateY(100px);
-    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-  }
-
-  &.${MODAL_ACTIVE_CLASSNAME} {
-    transition-duration: 250ms;
-    transition-delay: 0ms;
-    opacity: 1;
-
-    & .${MODAL_CONTENT_CLASSNAME} {
-      transform: translateY(0);
-      opacity: 1;
-      transition-delay: 150ms;
-      transition-duration: 350ms;
-    }
-  }
-`

package/src/webchat/components/portal-modal/constants.js

@@ -1,7 +0,0 @@
-// Portal
-export const BOTONIC_PORTAL_CLASS_LIST_NAME = 'botonic-portal-container'
-
-// Modal
-export const MODAL_PORTAL_CLASS_NAME = 'modal-portal'
-export const MODAL_CONTENT_CLASSNAME = 'modal-content'
-export const MODAL_ACTIVE_CLASSNAME = 'active'

package/src/webchat/components/portal-modal/content.jsx

@@ -1,10 +0,0 @@
-import styled from 'styled-components'
-
-export const ModalContent = styled.div`
-  position: relative;
-  padding: 4px;
-  box-sizing: border-box;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  background-color: white;
-  border-radius: 2px;
-`

package/src/webchat/components/portal-modal/index.js

@@ -1,5 +0,0 @@
-export * from './backdrop'
-export * from './constants'
-export * from './content'
-export * from './portal'
-export * from './portal-modal-component'

package/src/webchat/components/portal-modal/portal-modal-component.jsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-
-import { Backdrop } from './backdrop'
-import {
-  MODAL_ACTIVE_CLASSNAME,
-  MODAL_CONTENT_CLASSNAME,
-  MODAL_PORTAL_CLASS_NAME,
-} from './constants'
-import { ModalContent } from './content'
-import { Portal } from './portal'
-
-const ESCAPE_KEY_CODE = 27
-
-export function PortalModalComponent({
-  open,
-  onClose,
-  locked,
-  children,
-  customContent,
-}) {
-  const [active, setActive] = useState(false)
-
-  const backdrop = useRef(null)
-
-  useEffect(() => {
-    const { current } = backdrop
-    const transitionEnd = () => setActive(open)
-    const keyHandler = e =>
-      !locked && [ESCAPE_KEY_CODE].indexOf(e.which) >= 0 && onClose()
-    const clickHandler = e => !locked && e.target === current && onClose()
-
-    if (current) {
-      current.addEventListener('transitionend', transitionEnd)
-      current.addEventListener('click', clickHandler)
-      window.addEventListener('keyup', keyHandler)
-    }
-
-    if (open) {
-      window.setTimeout(() => {
-        document.activeElement.blur()
-        setActive(open)
-      }, 10)
-    }
-
-    return () => {
-      if (current) {
-        current.removeEventListener('transitionend', transitionEnd)
-        current.removeEventListener('click', clickHandler)
-      }
-      window.removeEventListener('keyup', keyHandler)
-    }
-  }, [open, locked, onClose])
-
-  return (
-    (open || active) && (
-      <Portal className={MODAL_PORTAL_CLASS_NAME}>
-        <Backdrop
-          ref={backdrop}
-          className={active && open && MODAL_ACTIVE_CLASSNAME}
-        >
-          {customContent ? (
-            customContent
-          ) : (
-            <ModalContent className={MODAL_CONTENT_CLASSNAME}>
-              {children}
-            </ModalContent>
-          )}
-        </Backdrop>
-      </Portal>
-    )
-  )
-}

package/src/webchat/components/portal-modal/portal.jsx

@@ -1,21 +0,0 @@
-import { useEffect, useMemo } from 'react'
-import { createPortal } from 'react-dom'
-
-import { BOTONIC_PORTAL_CLASS_LIST_NAME } from './constants'
-
-export function Portal({ children, parent, className }) {
-  const element = useMemo(() => document.createElement('div'), [])
-
-  useEffect(() => {
-    const target = parent && parent.appendChild ? parent : document.body
-    const classList = [BOTONIC_PORTAL_CLASS_LIST_NAME]
-
-    if (className) className.split(' ').forEach(item => classList.push(item))
-    classList.forEach(item => element.classList.add(item))
-    target.appendChild(element)
-
-    return () => target.removeChild(element)
-  }, [element, parent, className])
-
-  return createPortal(children, element)
-}