From 68115e572b2d757216978b34ab7e01956b4838ed Mon Sep 17 00:00:00 2001
From: Micheal Ndondo <70109131+nd0nd0@users.noreply.github.com>
Date: Sat, 28 Oct 2023 12:06:35 +0300
Subject: [PATCH] issue #26 : Change widget position

From a UX point of view, it is recommended to keep chat icons on the bottom right corner of your website, as this is a familiar and usual spot where people naturally notice and navigate.

However, UX is subjective. This PR added support issue #26 .

I would recommend the WA button to have a high contrast background `#5ad167` and the WA chat icon in `white` in light mode situations and vice versa --> issue #27
---
 src/components/app/app.component.jsx             |  7 ++++---
 src/components/app/app.module.css                | 10 +++++++++-
 src/components/wa-button/wa-button.component.jsx | 10 ++++++++--
 src/components/wa-button/wa-button.module.css    |  9 ++++++++-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/app/app.component.jsx b/src/components/app/app.component.jsx
index 6a8563f..a39e64b 100644
--- a/src/components/app/app.component.jsx
+++ b/src/components/app/app.component.jsx
@@ -1,5 +1,4 @@
 import React, { useContext, Fragment, useEffect } from 'react';
-
 import { ChatContext } from '../../contexts/chat.context';
 import ChatBox from '../chat-box/chat-box.component';
 import Header from '../header/header.component';
@@ -8,6 +7,7 @@ import WaButton from '../wa-button/wa-button.component';
 import styles from './app.module.css';
 
 const App = (props) => {
+    console.log("🚀 ~ file: app.component.jsx:10 ~ App ~ props:", props)
     const { isChatOpen, setIsChatOpen } = useContext(ChatContext);
     useEffect(() => {
         if (props.open) {
@@ -20,13 +20,14 @@ const App = (props) => {
             <div
                 className={`${styles.root} ${
                     isChatOpen ? styles.open : styles.close
-                }`}
+                } ${props.position === 'left' ? styles.positionLeft : styles.positionRight} ` }
             >
+
                 <Header {...props} />
                 <ChatBox {...props} />
                 <SendButton {...props} />
             </div>
-            <WaButton />
+            <WaButton {...props} />
         </Fragment>
     );
 };
diff --git a/src/components/app/app.module.css b/src/components/app/app.module.css
index 8e13910..29901c6 100644
--- a/src/components/app/app.module.css
+++ b/src/components/app/app.module.css
@@ -8,11 +8,19 @@
     transform: translate3d(0px, 0px, 0px);
     touch-action: auto;
     display: none;
-    position: fixed;
     bottom: 110px;
+    position: fixed;
+   
+}
+
+.positionRight{
     right: 25px;
 }
 
+.positionLeft{
+    left: 25px;
+}
+
 .open {
     display: flex;
     animation: customTransition 250ms ease-in-out both;
diff --git a/src/components/wa-button/wa-button.component.jsx b/src/components/wa-button/wa-button.component.jsx
index 52fb304..0f6cd6f 100644
--- a/src/components/wa-button/wa-button.component.jsx
+++ b/src/components/wa-button/wa-button.component.jsx
@@ -3,7 +3,13 @@ import { FaWhatsapp } from 'react-icons/fa';
 import { ChatContext } from '../../contexts/chat.context';
 import styles from './wa-button.module.css';
 
-const WaButton = () => {
+const defaultProps = {
+    position: 'right',
+};
+
+const WaButton = ({
+    position = defaultProps.position
+}) => {
     const { isChatOpen, setIsChatOpen } = useContext(ChatContext);
 
     const handleOpen = () => {
@@ -11,7 +17,7 @@ const WaButton = () => {
     };
 
     return (
-        <div className={styles.root} onClick={handleOpen}>
+        <div className={`${styles.root}  ${position === 'left' ? styles.positionLeft : styles.positionRight} ` } onClick={handleOpen}>
             <FaWhatsapp />
         </div>
     );
diff --git a/src/components/wa-button/wa-button.module.css b/src/components/wa-button/wa-button.module.css
index 4c36663..1d0cae1 100644
--- a/src/components/wa-button/wa-button.module.css
+++ b/src/components/wa-button/wa-button.module.css
@@ -17,11 +17,18 @@
   -webkit-box-pack: center;
   position: fixed;
   bottom: 25px;
-  right: 25px;
   transition: 0.2s ease;
 
 }
 
+.positionRight{
+  right: 25px;
+}
+
+.positionLeft{
+  left: 25px;
+}
+
 .root:hover {
   background-color: #5ad167;
 }