Merge pull request #57 from amanriquez/friday

added help desk features

.babelrc

@@ -2,5 +2,10 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties"
+    ]
   ]
 }

client/dist/styles.css

@@ -59,4 +59,42 @@ display: block;
 
 #contact-list{
   font-family: 'Oswald', sans-serif;
+}
+
+#help:hover{
+width: 18px;
+cursor: pointer;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal-main {
+  position:fixed;
+  background: white;
+  width: 60%;
+  height: auto;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+  z-index: 10;
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.display-block {
+  display: block;
+  z-index: 10;
+
+}
+
+.display-none {
+  display: none;
+
 }

client/src/components/ButtonList.jsx

@@ -9,20 +9,78 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import NavigationIcon from '@material-ui/icons/Navigation';
 
 
-const ButtonList = ({selectView, uploadedView, purchasedView, renderContactList }) => {
-  const styles = theme => ({
-    margin: {
-      margin: theme.spacing.unit,
-    },
-    extendedIcon: {
-      marginRight: theme.spacing.unit,
-    },
-  });
+//selectView, uploadedView, purchasedView, renderContactList
+const styles = theme => ({
+  margin: {
+    margin: theme.spacing.unit,
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit,
+  },
+});
+
+
+const Modal = ({ handleClose, show, children }) => {
+  const showHideClassName = show ? "modal display-block" : "modal display-none";
 
   return (
+    <div className={showHideClassName}>
+      <section className="modal-main">
+        {children}
+        <Button color="primary" onClick={handleClose}>close</Button>
+      </section>
+    </div>
+  );
+};
+
+
+class ButtonList extends React.Component {
+
+
+constructor(props){
+  super(props);
+
+  this.state = {
+    show:false
+  }
+
+  this.showModal = this.showModal.bind(this);
+}
+
+
+  showModal = () => {
+    this.setState({ show: true });
+  };
+
+  hideModal = () => {
+    this.setState({ show: false });
+  };
+
+  render(){
+
+    const { selectView, uploadedView, purchasedView, renderContactList } = this.props
+    return (
     <div className="dashboard">
+        <Modal show={this.state.show} handleClose={this.hideModal}>
+          <h1>Lead the Deal</h1>
+          Lead the deal is a Business to Business platform that serves as a marketplace for contact information. A user starts off with 10 points, which you can use to purchase contacts. 
+          If you run out of points, you can upload new contacts in order to obtain more points and access any further contacts from the database.
+          <h3>Uploaded Contacts</h3>
+          <p>Click to see a list of all the contacts that you have uploaded to the databse. You also have access to a notepad for each different user 
+            that will only be visible to you.
+          </p>
+          <h3>Purchased Contacts</h3>
+          <p>Once you have purchased a contact this section will show you all the relevant contact information, along with a notes section where you can keep track of when you have contacted this person. </p>
+          <h3>Upload Contact</h3>
+          <p>Will show a form where you can upload new contacts and obtain one point per contact uploaded. Please be sure to fill out all relevant information accurately. 
+            The contacts will be verified upon submission and if the person's name and phone number do not match your contact will not be verified. </p>
+          <h3>Search Contacts</h3>
+          <p>Will show a form where you can search contacts by name, company, industry, position, or address. You can fill one, any or all of the fields available. </p>
+        </Modal>
       <div>
-      <h4>Dashboard</h4>
+      <p> <strong> Dashboard</strong> &emsp; <span> 
+            <img id='help' onClick={this.showModal} src="./help_icon.png" width="17px" alt="help icon"/>
+        </span></p>
       </div>
       <div onClick={() => { uploadedView(); renderContactList()}}>
         <Button size="medium">
@@ -47,6 +105,7 @@ const ButtonList = ({selectView, uploadedView, purchasedView, renderContactList
     </div>
   )
 }
+}
 
 
 export default ButtonList;

client/src/components/DashBody.jsx

@@ -45,6 +45,7 @@ class DashBody extends React.Component {
     this.renderContactList = this.renderContactList.bind(this);
     this.handleComment = this.handleComment.bind(this)
     this.commentBody = this.commentBody.bind(this)
+    this.showModal = this.showModal.bind(this);
   }
 
 componentWillMount(){
@@ -59,6 +60,11 @@ componentWillUnmount(){
   document.body.style.backgroundImage = "url('./leaddeal.png')"
 }
 
+showModal() {
+    console.log('modal');
+  }
+
+
 selectView(button){
   this.setState({selectedView: button})
 }
@@ -229,7 +235,8 @@ render(){
             selectView={this.selectView} 
             uploadedView={this.uploadedView} 
             purchasedView={this.purchasedView} 
-            renderContactList={this.renderContactList}/>
+            renderContactList={this.renderContactList}
+            showModal={this.showModal}/>
           </div>
 
           <div className="left-bottom-display">

client/src/index.jsx

@@ -37,6 +37,7 @@ class App extends React.Component {
     this.logOutUser = this.logOutUser.bind(this);
     this.getUserPoints = this.getUserPoints.bind(this);
     this.Auth = new AuthService();
+    this.showModal = this.showModal.bind(this);
   }
 
 
@@ -54,6 +55,10 @@ componentWillMount() {
   //   }
   }
 
+showModal(){
+  console.log('modal');
+}
+
 
 getUserPoints(){