WIP

hubtype · Mar 18, 2023 · 498aff5 · 498aff5
1 parent 9bcb120
commit 498aff5
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 164 deletions.
diff --git a/packages/botonic-react/package-lock.json b/packages/botonic-react/package-lock.json
diff --git a/packages/botonic-react/src/webchat/components/attachment.jsx b/packages/botonic-react/src/webchat/components/attachment.jsx
@@ -3,32 +3,51 @@ import React, { useContext } from 'react'
 import AttachmentIcon from '../../assets/attachment-icon.svg'
 import { ROLES, WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
-import { Icon, IconContainer } from './common'
+import { ConditionalAnimation } from '../components/conditional-animation'
+import { Icon } from './common'
 
-export const Attachment = ({ onChange, accept, customAttacments }) => {
+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 (
-    <IconContainer 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}
-      />
-    </IconContainer>
+    <>
+      {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}
+    </>
   )
 }
diff --git a/packages/botonic-react/src/webchat/components/common.jsx b/packages/botonic-react/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;
-`
diff --git a/packages/botonic-react/src/webchat/components/conditional-animation.jsx b/packages/botonic-react/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>
+  )
+}