New user preference: Webchat position in the page

src/components/Expander/index.js

@@ -3,27 +3,30 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 import './style.scss'
 
-const Expander = ({ onClick, preferences, style, show }) => (
-  <div
-    onClick={onClick}
-    className={cx('RecastAppExpander CaiAppExpander', { open: show, close: !show })}
-    style={{
-      color: preferences.complementaryColor,
-      backgroundColor: preferences.accentColor,
-      ...style,
-    }}
-  >
-    {preferences.expanderLogo && (
-      <img className='RecastAppExpander--logo CaiAppExpander--logo' src={preferences.expanderLogo} />
-    )}
 
-    {preferences.expanderTitle}
+const Expander = ({ onClick, preferences, style, show }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cx(`RecastAppExpander CaiAppExpander ${preferences.chatLocationSticky } ${preferences.chatDirectionOpen}`, { open: show, close: !show })}
+      style={{
+        color: preferences.complementaryColor,
+        backgroundColor: preferences.accentColor,
+        ...style
+      }}
+    >
+      {preferences.expanderLogo && (
+        <img className='RecastAppExpander--logo CaiAppExpander--logo' src={preferences.expanderLogo} />
+      )}
 
-    {preferences.onboardingMessage && (
-      <div className='RecastAppExpander--onboarding CaiAppExpander--onboarding'>{preferences.onboardingMessage}</div>
-    )}
-  </div>
-)
+      {preferences.expanderTitle}
+
+      {preferences.onboardingMessage && (
+        <div className='RecastAppExpander--onboarding CaiAppExpander--onboarding'>{preferences.onboardingMessage}</div>
+      )}
+    </div>
+  )
+}
 
 Expander.propTypes = {
   preferences: PropTypes.object,

src/components/Expander/style.scss

@@ -12,6 +12,12 @@
   box-shadow: 0 1px 6px lightgrey, 0 2px 32px lightgrey;
   transition: opacity 0.3s;
 
+  // preference sticky location bottom left
+  &.chatLocationStickyLeft {
+    left: 10px;
+    right: auto;
+  }
+
   &.open {
     opacity: 1;
   }

src/containers/App/index.js

@@ -25,14 +25,20 @@ const NO_LOCALSTORAGE_MESSAGE
   },
 )
 class App extends Component {
+
   state = {
     expanded: this.props.expanded || false,
+    chatLocationSticky: 'default',
+    chatDirectionOpen: 'default'
   }
 
   componentDidMount () {
     const { channelId, token, preferences, noCredentials, onRef } = this.props
     const credentials = getCredentialsFromCookie(channelId)
     const payload = { channelId, token }
+    preferences.chatLocationSticky =  this.state.chatLocationSticky;
+    preferences.chatDirectionOpen = this.state.chatDirectionOpen;
+    this.forceUpdate();
 
     if (onRef) {
       onRef(this)
@@ -59,7 +65,6 @@ class App extends Component {
 
   componentWillReceiveProps (nextProps) {
     const { isReady, preferences, expanded } = nextProps
-
     if (isReady !== this.props.isReady) {
       let expanded = null
 
@@ -89,7 +94,7 @@ class App extends Component {
   }
 
   componentDidUpdate (prevState) {
-    const { onToggle } = this.props
+    const { onToggle, preferences } = this.props
 
     if (prevState.expanded !== this.state.expanded) {
       if (typeof window.localStorage !== 'undefined') {
@@ -101,6 +106,9 @@ class App extends Component {
         console.log(NO_LOCALSTORAGE_MESSAGE)
       }
     }
+
+    preferences.chatLocationSticky =  this.state.chatLocationSticky;
+    preferences.chatDirectionOpen = this.state.chatDirectionOpen;
   }
 
   componentDidCatch (error, info) {
@@ -120,6 +128,21 @@ class App extends Component {
     this.props.removeAllMessages()
   }
 
+  /*TODO remove for HACKTOBER DEMO purpose */
+  handleChangeLocation = (event) => {
+    this.setState(
+      {chatLocationSticky: event.target.value}, () => {
+        this.forceUpdate();
+      });
+  }
+
+  handleChangeDirection = (event) => {
+    this.setState(
+      {chatDirectionOpen: event.target.value}, () => {
+      this.forceUpdate();
+    });
+  }
+
   render () {
     const {
       preferences,
@@ -139,9 +162,66 @@ class App extends Component {
       defaultMessageDelay,
     } = this.props
     const { expanded } = this.state
+    const {chatDirectionOpen, chatLocationSticky } = this.state
 
     return (
       <div className='RecastApp CaiApp'>
+        <div className="HacktoberDemo">
+          <div style={{marginBottom: '20px', display: 'inline-block', width: '100%'}}>
+            <strong>LOCATION </strong>
+            <label for="defaultLoc">
+              <input
+                onChange={this.handleChangeLocation}
+                type="radio"
+                id="defaultLoc"
+                name="location"
+                value="default"
+                checked={chatLocationSticky === "default"} />
+              &nbsp;Default (Right)&nbsp;&nbsp;
+            </label>
+            <label for="leftLoc">
+              <input
+                onChange={this.handleChangeLocation}
+                type="radio"
+                id="leftLoc"
+                name="location"
+                value="chatLocationStickyLeft"
+                checked={chatLocationSticky === "chatLocationStickyLeft"} />
+              &nbsp;Left
+            </label>
+          </div>
+          <div style={{marginBottom: '10px', display: 'inline-block', width: '100%'}}>
+            <strong>DIRECTION </strong>
+            <label for="bottom">
+              <input onChange={this.handleChangeDirection}
+                type="radio"
+                id="bottom"
+                name="direction"
+                value="default"
+                checked={chatDirectionOpen === "default"} />
+              &nbsp;Default (bottom to top)&nbsp;&nbsp;
+            </label>
+            <label for="right">
+              <input onChange={this.handleChangeDirection}
+                type="radio"
+                id="right"
+                name="direction"
+                value="chatDirectionRightLeft"
+                checked={chatDirectionOpen === "chatDirectionRightLeft"} />
+              &nbsp;Open right to left&nbsp;&nbsp;
+            </label>
+            <label for="left">
+              <input
+                onChange={this.handleChangeDirection}
+                type="radio"
+                id="left"
+                name="direction"
+                value="chatDirectionLeftRight"
+                checked={chatDirectionOpen === "chatDirectionLeftRight"} />
+              &nbsp;from left to right
+            </label>
+          </div>
+        </div>
         <link
           rel='stylesheet'
           type='text/css'

src/containers/Chat/index.js

@@ -319,7 +319,7 @@ class Chat extends Component {
 
     return (
       <div
-        className={cx('RecastAppChat CaiAppChat', { open: show, close: !show })}
+        className={cx(`RecastAppChat CaiAppChat ${preferences.chatLocationSticky} ${preferences.chatDirectionOpen}`, { open: show, close: !show }, )}
         style={{ backgroundColor: preferences.backgroundColor, ...containerStyle }}
       >
         {secondaryView ? (

src/containers/Chat/style.scss

@@ -59,10 +59,48 @@
     width: 370px;
     height: auto;
     box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-
+    
     &--slogan {
       margin-bottom: 0;
     }
+
+    // preference sticky location bottom left
+    &.chatLocationStickyLeft {
+      left: 10px;
+      right: auto;
+    }
+
+    &.chatDirectionLeftRight {
+      transform-origin: left;
+
+      &.open {
+        transform: scaleX(1);
+        opacity: 1;
+        overflow: hidden;
+      }
+
+      &.close {
+        transform: scaleX(0);
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
+
+    &.chatDirectionRightLeft {
+      transform-origin: right;
+
+      &.open {
+        transform: scaleX(1);
+        opacity: 1;
+        overflow: hidden;
+      }
+
+      &.close {
+        transform: scaleX(0);
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
   }
 }
 @media only screen and (max-width: 420px) {