@botonic/react 0.21.0 → 0.21.2-alpha.0

package/src/webchat/components/attachment.jsx

@@ -1,21 +1,53 @@
-import React from 'react'
+import React, { useContext } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
-import { ROLES } from '../../constants'
-import { Icon, IconContainer } from './common'
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { ConditionalAnimation } from '../components/conditional-animation'
+import { Icon } from './common'
 
-export const Attachment = ({ onChange, accept }) => (
-  <IconContainer role={ROLES.ATTACHMENT_ICON}>
-    <label htmlFor='attachment' style={{ marginTop: 4 }}>
-      <Icon src={AttachmentIcon} />
-    </label>
-    <input
-      type='file'
-      name='file'
-      id='attachment'
-      style={{ display: 'none' }}
-      onChange={onChange}
-      accept={accept}
-    ></input>
-  </IconContainer>
-)
+export const Attachment = ({ onChange, accept, enableAttachments }) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const CustomAttachments = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.customAttachments,
+    undefined
+  )
+
+  const isAttachmentsEnabled = () => {
+    const hasCustomAttachments = !!CustomAttachments
+    return (
+      getThemeProperty(
+        WEBCHAT.CUSTOM_PROPERTIES.enableAttachments,
+        enableAttachments
+      ) ?? hasCustomAttachments
+    )
+  }
+  const attachmentsEnabled = isAttachmentsEnabled()
+
+  return (
+    <>
+      {attachmentsEnabled ? (
+        <ConditionalAnimation>
+          <div role={ROLES.ATTACHMENT_ICON}>
+            <label htmlFor='attachment' style={{ marginTop: 4 }}>
+              {CustomAttachments ? (
+                <CustomAttachments />
+              ) : (
+                <Icon src={AttachmentIcon} />
+              )}
+            </label>
+            <input
+              type='file'
+              name='file'
+              id='attachment'
+              style={{ display: 'none' }}
+              onChange={onChange}
+              accept={accept}
+            />
+          </div>
+        </ConditionalAnimation>
+      ) : null}
+    </>
+  )
+}

package/src/webchat/components/common.jsx

@@ -7,9 +7,3 @@ const PointerImage = styled.img`
   cursor: pointer;
 `
 export const Icon = props => <PointerImage src={resolveImage(props.src)} />
-
-export const IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding-right: 15px;
-`

package/src/webchat/components/conditional-animation.jsx

@@ -0,0 +1,25 @@
+import { motion } from 'framer-motion'
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { ConditionalWrapper } from '../../util/react'
+
+export const ConditionalAnimation = props => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    props.enableAnimations !== undefined ? props.enableAnimations : true
+  )
+  return (
+    <ConditionalWrapper
+      condition={animationsEnabled}
+      wrapper={children => (
+        <motion.div whileHover={{ scale: 1.2 }}>{children}</motion.div>
+      )}
+    >
+      {props.children}
+    </ConditionalWrapper>
+  )
+}

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

@@ -1,26 +1,54 @@
 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}
+    </>
   )
-} 
+}
 
 const Container = styled.div`
   display: flex;

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/devices/scrollbar-controller.js

@@ -84,8 +84,7 @@ export class ScrollbarController {
       return
     }
     this.webchat.ontouchmove = e => {
-      if(e.target === e.currentTarget)
-      e.preventDefault()
+      if (e.target === e.currentTarget) e.preventDefault()
     }
   }
 

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 (
@@ -813,6 +775,7 @@ export const Webchat = forwardRef((props, ref) => {
           style={{
             ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle),
           }}
+          className='user-input-container'
         >
           {webchatState.isEmojiPickerOpen && (
             <OpenedEmojiPicker
@@ -821,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'
@@ -864,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>
       )
     )

package/src/webview.jsx

@@ -43,7 +43,8 @@ class App extends React.Component {
     const provider = this.state.session.user.provider
     const impId = this.state.session.user.imp_id
     if (provider === PROVIDER.WHATSAPP) {
-      location.href = 'https://wa.me/' + impId
+      const phone_number = this.state.session.user.unformatted_phone_number
+      location.href = 'https://wa.me/' + phone_number
     }
     if (provider === PROVIDER.TELEGRAM) {
       location.href = 'https://t.me/' + impId