@botonic/react 0.21.1 → 0.21.2-alpha.0

package/src/webchat/components/emoji-picker.jsx

@@ -1,24 +1,52 @@
 import Picker from 'emoji-picker-react'
-import React from 'react'
+import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import LogoEmoji from '../../assets/emojiButton.svg'
-import { ROLES } from '../../constants'
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { ConditionalAnimation } from '../components/conditional-animation'
 import { useComponentVisible } from '../hooks'
-import { Icon, IconContainer } from './common'
+import { Icon } from './common'
 
-export const EmojiPicker = props => {
-  const onClick = event => {
-    props.onClick()
+export const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const CustomEmojiPicker = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker,
+    undefined
+  )
+
+  const isEmojiPickerEnabled = () => {
+    const hasCustomEmojiPicker = !!CustomEmojiPicker
+    return (
+      getThemeProperty(
+        WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker,
+        enableEmojiPicker
+      ) ?? hasCustomEmojiPicker
+    )
+  }
+  const emojiPickerEnabled = isEmojiPickerEnabled()
+
+  const handleClick = event => {
+    onClick()
     event.stopPropagation()
   }
 
   return (
-    <IconContainer role={ROLES.EMOJI_PICKER_ICON}>
-      <div onClick={onClick}>
-        <Icon src={LogoEmoji} />
-      </div>
-    </IconContainer>
+    <>
+      {emojiPickerEnabled ? (
+        <ConditionalAnimation>
+          <div role={ROLES.EMOJI_PICKER_ICON} onClick={handleClick}>
+            {CustomEmojiPicker ? (
+              <CustomEmojiPicker />
+            ) : (
+              <Icon src={LogoEmoji} />
+            )}
+          </div>
+        </ConditionalAnimation>
+      ) : null}
+    </>
   )
 }
 

package/src/webchat/components/persistent-menu.jsx

@@ -5,6 +5,7 @@ import LogoMenu from '../../assets/menuButton.svg'
 import { Button } from '../../components/button'
 import { ROLES, WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
+import { ConditionalAnimation } from '../components/conditional-animation'
 import { useComponentVisible } from '../hooks'
 import { Icon } from './common'
 
@@ -59,17 +60,30 @@ export const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
   )
 }
 
-const IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 18px;
-`
+export const PersistentMenu = ({ onClick, persistentMenu }) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const persistentMenuOptions = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
+    persistentMenu
+  )
+
+  const CustomMenuButton = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.customMenuButton,
+    undefined
+  )
 
-export const PersistentMenu = props => (
-  <IconContainer role={ROLES.PERSISTENT_MENU_ICON} onClick={props.onClick}>
-    <Icon src={LogoMenu} />
-  </IconContainer>
-)
+  return (
+    <>
+      {persistentMenuOptions ? (
+        <ConditionalAnimation>
+          <div role={ROLES.PERSISTENT_MENU_ICON} onClick={onClick}>
+            {CustomMenuButton ? <CustomMenuButton /> : <Icon src={LogoMenu} />}
+          </div>
+        </ConditionalAnimation>
+      ) : null}
+    </>
+  )
+}
 
 export default OpenedPersistentMenu

package/src/webchat/components/send-button.jsx

@@ -1,11 +1,37 @@
-import React from 'react'
+import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
-import { ROLES } from '../../constants'
-import { Icon, IconContainer } from './common'
-
-export const SendButton = () => (
-  <IconContainer role={ROLES.SEND_BUTTON_ICON}>
-    <Icon src={SendButtonIcon} />
-  </IconContainer>
-)
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { ConditionalAnimation } from '../components/conditional-animation'
+import { Icon } from './common'
+
+export const SendButton = ({ onClick }) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const sendButtonEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableSendButton,
+    true
+  )
+
+  const CustomSendButton = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.customSendButton,
+    undefined
+  )
+
+  return (
+    <>
+      {sendButtonEnabled || CustomSendButton ? (
+        <ConditionalAnimation>
+          <div onClick={onClick} role={ROLES.SEND_BUTTON_ICON}>
+            {CustomSendButton ? (
+              <CustomSendButton />
+            ) : (
+              <Icon src={SendButtonIcon} />
+            )}
+          </div>
+        </ConditionalAnimation>
+      ) : null}
+    </>
+  )
+}

package/src/webchat/webchat.jsx

@@ -39,7 +39,6 @@ import {
 import { msgToBotonic } from '../msg-to-botonic'
 import { scrollToBottom } from '../util/dom'
 import { isDev, resolveImage } from '../util/environment'
-import { ConditionalWrapper } from '../util/react'
 import { deserializeRegex, stringifyWithRegexs } from '../util/regexs'
 import {
   _getThemeProperty,
@@ -106,8 +105,13 @@ const StyledTriggerButton = styled.div`
 
 const UserInputContainer = styled.div`
   min-height: 52px;
-  display: flex;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 0px 16px;
+  z-index: 1;
   border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
 `
 
@@ -117,13 +121,6 @@ const TextAreaContainer = styled.div`
   align-items: center;
 `
 
-const FeaturesWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-`
-
 const TriggerImage = styled.img`
   max-width: 100%;
   max-height: 100%;
@@ -402,10 +399,6 @@ export const Webchat = forwardRef((props, ref) => {
     toggleEmojiPicker(!webchatState.isEmojiPickerOpen)
   }
 
-  const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    props.enableAnimations !== undefined ? props.enableAnimations : true
-  )
   const persistentMenuOptions = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
     props.persistentMenu
@@ -774,37 +767,6 @@ export const Webchat = forwardRef((props, ref) => {
   }
 
   const userInputEnabled = isUserInputEnabled()
-  const emojiPickerEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker,
-    props.enableEmojiPicker
-  )
-  const attachmentsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAttachments,
-    props.enableAttachments
-  )
-  const sendButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableSendButton,
-    true
-  )
-  const CustomSendButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customSendButton,
-    undefined
-  )
-  const CustomMenuButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customMenuButton,
-    undefined
-  )
-
-  const ConditionalAnimation = props => (
-    <ConditionalWrapper
-      condition={animationsEnabled}
-      wrapper={children => (
-        <motion.div whileHover={{ scale: 1.2 }}>{children}</motion.div>
-      )}
-    >
-      {props.children}
-    </ConditionalWrapper>
-  )
 
   const userInputArea = () => {
     return (
@@ -822,15 +784,12 @@ export const Webchat = forwardRef((props, ref) => {
               onClick={handleEmojiClick}
             />
           )}
-          {persistentMenuOptions && (
-            <FeaturesWrapper>
-              <ConditionalAnimation>
-                <div onClick={handleMenu}>
-                  {CustomMenuButton ? <CustomMenuButton /> : <PersistentMenu />}
-                </div>
-              </ConditionalAnimation>
-            </FeaturesWrapper>
-          )}
+
+          <PersistentMenu
+            onClick={handleMenu}
+            persistentMenu={props.persistentMenu}
+          />
+
           <TextAreaContainer>
             <Textarea
               name='text'
@@ -865,28 +824,19 @@ export const Webchat = forwardRef((props, ref) => {
               }}
             />
           </TextAreaContainer>
-          <FeaturesWrapper>
-            {emojiPickerEnabled && (
-              <ConditionalAnimation>
-                <EmojiPicker onClick={handleEmojiClick} />
-              </ConditionalAnimation>
-            )}
-            {attachmentsEnabled && (
-              <ConditionalAnimation>
-                <Attachment
-                  onChange={handleAttachment}
-                  accept={getFullMimeWhitelist().join(',')}
-                />
-              </ConditionalAnimation>
-            )}
-            {(sendButtonEnabled || CustomSendButton) && (
-              <ConditionalAnimation>
-                <div onClick={sendTextAreaText}>
-                  {CustomSendButton ? <CustomSendButton /> : <SendButton />}
-                </div>
-              </ConditionalAnimation>
-            )}
-          </FeaturesWrapper>
+
+          <EmojiPicker
+            enableEmojiPicker={props.enableEmojiPicker}
+            onClick={handleEmojiClick}
+          />
+
+          <Attachment
+            enableAttachments={props.enableAttachments}
+            onChange={handleAttachment}
+            accept={getFullMimeWhitelist().join(',')}
+          />
+
+          <SendButton onClick={sendTextAreaText} />
         </UserInputContainer>
       )
     )