From be3b7b823003444f008c6d875a3587bfb096bda3 Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Tue, 9 Feb 2021 22:03:25 +0100
Subject: [PATCH 1/3] Gestion erreur jamalette

---
 src/css/Components/notinbdd.css | 33 +++++++++++++++++++++++++
 src/css/Components/sort.css     |  2 +-
 src/css/Views/ticket.css        |  1 -
 src/js/Components/NotInBdd.js   | 43 +++++++++++++++++++++++++++++++++
 src/js/Views/Ticket.js          | 23 +++++++++++++++---
 5 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 src/css/Components/notinbdd.css
 create mode 100644 src/js/Components/NotInBdd.js

diff --git a/src/css/Components/notinbdd.css b/src/css/Components/notinbdd.css
new file mode 100644
index 0000000..afaed25
--- /dev/null
+++ b/src/css/Components/notinbdd.css
@@ -0,0 +1,33 @@
+#warningBlock{
+    height:30vh;
+    display:flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+#warningBox{
+    color:white;
+    font-family: 'Wellfleet',cursive;
+    font-size:2vw
+}
+
+#warningAdvice{
+    color:rgb(65, 65, 65);;
+    font-family: 'Wellfleet',cursive;
+    font-size:2vw
+}
+
+
+#returningButton{
+    font-family: 'Wellfleet', cursive;
+    display:block;
+    color:white;
+    font-size:2vw;
+    background-image:linear-gradient(#057B26,#044616);
+    border: 0.3vw solid black;
+    border-radius: 2.2vw;
+    padding:0.7vw 1.5vw 0.7vw 1.5vw;
+    cursor:pointer;
+}
+
diff --git a/src/css/Components/sort.css b/src/css/Components/sort.css
index 18700cd..6e02fbf 100644
--- a/src/css/Components/sort.css
+++ b/src/css/Components/sort.css
@@ -26,7 +26,7 @@
         }
         
         #sortOrder:hover {
-            animation: rotate180 2s forwards
+            animation: rotate180 2s forwards022314015174
         }
         
         .letter {
diff --git a/src/css/Views/ticket.css b/src/css/Views/ticket.css
index a390386..1eba4f4 100644
--- a/src/css/Views/ticket.css
+++ b/src/css/Views/ticket.css
@@ -87,7 +87,6 @@
     font-family: 'Wellfleet', cursive;
     display:block;
     color:white;
-    font-family: 'Wellfleet', cursive;
     font-size:2vw;
     background-image:linear-gradient(#057B26,#044616);
     border: 0.3vw solid black;
diff --git a/src/js/Components/NotInBdd.js b/src/js/Components/NotInBdd.js
new file mode 100644
index 0000000..bd51398
--- /dev/null
+++ b/src/js/Components/NotInBdd.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import '../../css/Components/notinbdd.css'
+
+class NotInBdd extends Component {
+
+    constructor(props){
+        super(props)
+        this.state = {
+          
+        }
+       
+    }
+
+    componentDidMount() {
+        
+    }
+
+   
+
+    render() {
+       
+        return (
+            <div id="transp">
+                <div id="formBody">
+                    <div id="warningBlock">
+                        <div id="warningBox">
+                            Cette article n'est pas dans le stock !
+                        </div>
+                        <div id="warningAdvice">
+                            Ajoute le depuis la page <Link id="link" to='/stock'>Stock</Link> !
+                        </div>
+                        <div id="returningButton" onClick={this.props.handleCloseAbove}>
+                            Ok
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default NotInBdd;
\ No newline at end of file
diff --git a/src/js/Views/Ticket.js b/src/js/Views/Ticket.js
index 0e0f9a3..e6afad6 100644
--- a/src/js/Views/Ticket.js
+++ b/src/js/Views/Ticket.js
@@ -9,6 +9,7 @@ import BarcodeReader from 'react-barcode-reader';
 import axios from 'axios';
 import ArticleDetails from '../Components/ArticleDetails';
 import { Link } from 'react-router-dom';
+import NotInBdd from '../Components/NotInBdd';
 
 export default class Stock extends React.Component {
 
@@ -21,7 +22,8 @@ export default class Stock extends React.Component {
       empty:true,
       totalPrice:0,
       totalQuantity:0,
-      redirect:false
+      redirect:false,
+      onNotInBdd:false
     }
 
     this.handleScan = this.handleScan.bind(this);
@@ -49,14 +51,18 @@ export default class Stock extends React.Component {
     let i=0;
     let current = this.state.articles[i];
     let trouve = current.code === code ? true : false;
-    while(!trouve) {
+    while(!trouve && i < this.state.articles.length-1) {
       i++;
       current = this.state.articles[i];
       if (current.code === code) {
         trouve = !trouve;
       }
     }
-    // current.quantity = 1
+    
+    // Gestion d'erreur si le code n'est pas dans la BDD
+    if (!trouve){
+      this.setState({onNotInBdd:true})
+    } else {
 
     console.log(current);
 
@@ -96,7 +102,7 @@ export default class Stock extends React.Component {
       this.calculateTotaux()
     })
     
-    
+    }
   }
 
   calculateTotaux = () => {
@@ -141,6 +147,12 @@ export default class Stock extends React.Component {
         }
       }
 
+  closeNotInBdd = () => {
+
+    this.setState({onNotInBdd:false})
+
+  }
+
   render() {
     if (!sessionStorage.getItem('token')){
       return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
@@ -151,6 +163,9 @@ export default class Stock extends React.Component {
             <Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
             <BarcodeReader onScan={this.handleScan}/>
             <SearchBar/>
+            {this.state.onNotInBdd && 
+            <NotInBdd handleCloseAbove={this.closeNotInBdd}/>
+            }
             {!this.state.empty ?
                 <div id="articlesInline">
                   {this.state.articlesJamalette.map((article) =>

From 7b8f9c68d040c35116bc2116524b9eae48426dbd Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Sun, 14 Feb 2021 15:43:31 +0100
Subject: [PATCH 2/3] add color

---
 src/js/Components/ArticleDetails.js | 176 +++++++++++++---------------
 src/js/Components/Articles.js       |  29 ++++-
 src/js/Components/Sort.js           |   7 +-
 src/js/Views/Stock.js               |   3 -
 4 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js
index 222fe77..88d04bd 100644
--- a/src/js/Components/ArticleDetails.js
+++ b/src/js/Components/ArticleDetails.js
@@ -21,6 +21,9 @@ class ArticleDetails extends React.Component {
         
     }
 
+    componentDidMount = () => {
+        
+    }
 
     handleDesc = () => {
         this.setState({currentArticle:this.props.id})
@@ -68,31 +71,75 @@ class ArticleDetails extends React.Component {
         })
     }
 
-    plusQuantity = () => {
+    plusQuantity = (element) => {
         this.setState({quantity:this.state.quantity+1},()=>{
             this.updateArticle();
+            if (this.state.quantity > 0 ){
+                if (this.state.selected){
+                    this.props.colorArticle("white",element)
+                } else {
+                    this.props.colorArticle("grey",element)
+                }
+            }
     })
     }
 
-    minusQuantity = () => {
+    minusQuantity = (element) => {
         if(this.state.quantity > 0){
             this.setState({quantity:this.state.quantity-1},()=>{
                 this.updateArticle();
+                if (this.state.quantity === 0){
+                    if (this.state.selected){
+                        this.props.colorArticle("red&white",element)
+                    } else {
+                        this.props.colorArticle("red",element)
+                    }
+                }
         })
-        }
+        } 
     }
 
+    // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner 
+    // on va minus ou plus quantity et colorer en rouge
+
     selectArticles = (e) => {
-        console.log(e.target.id)
-        if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no")){
+        let currentElement = e.target;
+        let iconElement;
+        if (e.target.tagName === "path"){
+            currentElement = e.target.parentElement
+            iconElement = currentElement
+        }
+        if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
+            iconElement = currentElement
+        }
+        while (currentElement.id !== "bulle"){
+            currentElement = currentElement.parentElement
+        }
+        
+        console.log(currentElement); 
+        if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross")  && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
         this.setState({selected:!this.state.selected},()=>{
             console.log(this.state.selected)
             if (this.state.selected){
                 this.props.select(this.props.id)
+                if (this.state.quantity === 0){
+                    this.props.colorArticle("red&white",currentElement)
+                } else {
+                    this.props.colorArticle("white",currentElement)
+                }
             } else {
                 this.props.deselect(this.props.id)
+                if (this.state.quantity === 0){
+                    this.props.colorArticle("red",currentElement)
+                } else {
+                this.props.colorArticle("grey",currentElement)
+                }
             }
         })   
+        } else if (iconElement.id === "minusIcon"){
+            this.minusQuantity(currentElement)
+        } else if (iconElement.id === "plusIcon"){
+            this.plusQuantity(currentElement)
         }
     }   
 
@@ -105,11 +152,7 @@ class ArticleDetails extends React.Component {
 
             // SQUARE
 
-            this.state.selected ?
-
-                // SELECTED
-
-                <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
                 {this.state.redcrossPressed ?
                 <div id="confirmation">
                     <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
@@ -119,102 +162,45 @@ class ArticleDetails extends React.Component {
                     </div>
                 </div> 
                 : 
-                <>
-                <div id="imageordescblock">
-                {this.state.currentArticle === this.props.id ? 
-                <>
-                <div id="icons">
-                    <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
-                        <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
+                <div id="bulleContainer">
+                    <div id="imageordescblock">
+                        {this.state.currentArticle === this.props.id ? 
+                        <>
+                            <div id="icons">
+                                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
+                                    <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
+                                </div>
+                                <div id="redcross" onClick={this.handleRedCross}>
+                                    <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
+                                </div>
+                            </div>
+                            <div id="categoryDiv">
+                                <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
+                            </div>
+                            <div id="descandprice">
+                                <h1 id="desc">{this.props.desc}</h1>
+                                <p id ="price">{this.props.price} €</p>
+                            </div>
+                        </>
+                        : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
+                        }
                     </div>
-                    <div id="redcross" onClick={this.handleRedCross}>
-                        <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
-                    </div>
-                </div>
-                <div id="categoryDiv">
-                    <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
-                </div>
-                <div id="descandprice">
-                    <h1 id="desc">{this.props.desc}</h1>
-                    <p id ="price">{this.props.price} €</p>
-                </div>
-                </>
-                : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
-                }
-                </div>
-                        <h1 id="name">{this.props.name}</h1>
-                        <div id="count">
-                            <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                    <h1 id="name">{this.props.name}</h1>
+                    <div id="count">
+                            <Icon id="minusIcon" icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                             <div id="countNumber">
                                 <p id="countNumberTxt">{this.state.quantity}</p>
                             </div>
-                            <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                            <Icon id="plusIcon" icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
                         </div>
-                </>        
+                </div>        
                 }
-                </div>
-
-            : 
-
-                // NOT SELECTED
-
-                <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
-                {this.state.redcrossPressed ?
-                <div id="confirmation">
-                    <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
-                    <div id="choice">
-                        <div id="yes" onClick={this.deleteArticle}>Oui</div>
-                        <div id="no" onClick={this.handleNoDelete}>Non</div>
-                    </div>
-                </div> 
-                : 
-                <>
-                <div id="imageordescblock">
-                {this.state.currentArticle === this.props.id ? 
-                <>
-                <div id="icons">
-                    <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
-                        <Icon icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
-                    </div>
-                    <div id="redcross" onClick={this.handleRedCross}>
-                        <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
-                    </div>
-                </div>
-                <div id="categoryDiv">
-                    <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
-                </div>
-                <div id="descandprice">
-                    <h1 id="desc">{this.props.desc}</h1>
-                    <p id ="price">{this.props.price} €</p>
-                </div>
-                </>
-                : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
-                }
-                </div>
-                        <h1 id="name">{this.props.name}</h1>
-                        <div id="count">
-                            <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
-                            <div id="countNumber">
-                                <p id="countNumberTxt">{this.state.quantity}</p>
-                            </div>
-                            <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
-                        </div>
-                </>        
-                }
-                </div>
+            </div>
             
             :
 
             // INLINE
 
-            this.state.selected ?
-
-                // SELECTED
-            
-                <div>Ok</div>
-
-            :
-
                 // NOT SELECTED
                 
                 <div id="line">
diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js
index f894327..f7c35c7 100644
--- a/src/js/Components/Articles.js
+++ b/src/js/Components/Articles.js
@@ -11,9 +11,34 @@ class Articles extends React.Component {
     }
 
     componentDidMount(){
-      
+      let articles = document.getElementById("articles")
+        console.log(articles);
+        for (let i = 0; i<articles.childElementCount; i++){
+          if (this.props.articles[i].quantity === 0){
+            this.colorArticle("red",articles.children[i])
+          }
+        }
     } 
 
+    colorArticle = (color,element) => {
+      
+      switch (color) {
+          case "white":
+              element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
+              break;
+          case "grey" :
+              element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
+              break;
+          case "red" :
+              element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
+              break;
+          case "red&white" :
+            element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
+            break;
+      }
+  }
+
+  
 
     render() {
       return (
@@ -21,7 +46,7 @@ class Articles extends React.Component {
             <div id="articles">
               {
                 this.props.articles.map((article) => 
-                <ArticleDetails squaredBubble={true} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>    
+                <ArticleDetails colorArticle={this.colorArticle} squaredBubble={true} deselect={this.props.deselect} select={this.props.select} handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>    
             )}
             </div>
           </div>
diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js
index e95a344..a8760ff 100644
--- a/src/js/Components/Sort.js
+++ b/src/js/Components/Sort.js
@@ -13,7 +13,6 @@ class Sort extends Component {
     }
 
     changeArrowDirection = () => {
-        console.log('ok');
         this.setState({unwound:!this.state.unwound})
     }
 
@@ -62,9 +61,9 @@ class Sort extends Component {
     }
 
     render() {
-        console.log(this.state.orderText)
-        console.log(this.state.orderText.split(""))
-        console.log(document.getElementById("sortOrder"))
+        // console.log(this.state.orderText)
+        // console.log(this.state.orderText.split(""))
+        // console.log(document.getElementById("sortOrder"))
         return (
             <div id="sortBox">
                 <div id="sortTxt">
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js
index 6a6666c..0bf2841 100644
--- a/src/js/Views/Stock.js
+++ b/src/js/Views/Stock.js
@@ -205,7 +205,6 @@ export default class Stock extends React.Component {
 
   //ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
   handleChangeSortType = (type) => {
-    console.log(type)
     this.setState({sortType: type}, () => {
       this.sortArticles(this.state.sortType)
     })
@@ -214,7 +213,6 @@ export default class Stock extends React.Component {
   //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
   handleChangeSortOrder = e => {
     this.setState({lowToHigh: !this.state.lowToHigh},() => {
-      console.log(this.state.sortType)
       this.sortArticles(this.state.sortType);
     });
   }
@@ -264,7 +262,6 @@ export default class Stock extends React.Component {
 
 
   render() {
-    console.log("rendered");
     if (!sessionStorage.getItem('token')){
       return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
     } else {

From 929535ba984c3b89d0bd4444a0251a7cc36f4701 Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Sun, 14 Feb 2021 15:59:59 +0100
Subject: [PATCH 3/3] =?UTF-8?q?Cr=C3=A9ation=20component=20Money?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/Components/money.css    |  0
 src/css/Components/notinbdd.css |  7 +++--
 src/css/Views/ticket.css        |  2 +-
 src/js/Components/Money.js      | 50 +++++++++++++++++++++++++++++++++
 src/js/Components/Navbar.js     |  3 ++
 src/js/Views/Ticket.js          | 34 ++++++++++++++++++++--
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 src/css/Components/money.css
 create mode 100644 src/js/Components/Money.js

diff --git a/src/css/Components/money.css b/src/css/Components/money.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/css/Components/notinbdd.css b/src/css/Components/notinbdd.css
index afaed25..1e05773 100644
--- a/src/css/Components/notinbdd.css
+++ b/src/css/Components/notinbdd.css
@@ -1,5 +1,5 @@
 #warningBlock{
-    height:30vh;
+    height:40vh;
     display:flex;
     justify-content: space-around;
     align-items: center;
@@ -9,7 +9,9 @@
 #warningBox{
     color:white;
     font-family: 'Wellfleet',cursive;
-    font-size:2vw
+    font-size:2vw;
+    padding : 1vw 1vw 0 1vw;
+    text-align: center;
 }
 
 #warningAdvice{
@@ -29,5 +31,6 @@
     border-radius: 2.2vw;
     padding:0.7vw 1.5vw 0.7vw 1.5vw;
     cursor:pointer;
+    margin: 2vh 0 2vh 0;
 }
 
diff --git a/src/css/Views/ticket.css b/src/css/Views/ticket.css
index 1eba4f4..36e89c0 100644
--- a/src/css/Views/ticket.css
+++ b/src/css/Views/ticket.css
@@ -10,7 +10,7 @@
     text-align: center;
     font-family: 'Wellfleet', cursive;
     font-size:max(2.5vw,30px);
-    width:25%;
+    width:35%;
 }
 
 #articlesInline{
diff --git a/src/js/Components/Money.js b/src/js/Components/Money.js
new file mode 100644
index 0000000..a0fa8cd
--- /dev/null
+++ b/src/js/Components/Money.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import '../../css/Components/money.css'
+
+class Money extends Component {
+
+    constructor(props){
+        super(props)
+        this.state = {
+          
+        }
+       
+    }
+
+    componentDidMount() {
+        
+    }
+
+   
+
+    render() {
+       
+        return (
+            <div id="transp">
+                <div id="formBody">
+                    {this.props.empty ? 
+                    <div id="warningBlock">
+                        <div id="warningBox">
+                            Tu n'as pas encore rempli le ticket de caisse !
+                        </div>
+                        <div id="warningAdvice">
+                            Scanne tes articles avec la Jamalette
+                        </div>
+                        <div id="returningButton" onClick={this.props.handleCloseAbove}>
+                            Ok
+                        </div>
+                    </div>
+                    :
+                        // A faire : input pour rentrer la somme en espèce + Affichage de la différence avec le prix
+
+                    <>
+                    </>
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Money;
\ No newline at end of file
diff --git a/src/js/Components/Navbar.js b/src/js/Components/Navbar.js
index 933fd89..c8c2bac 100644
--- a/src/js/Components/Navbar.js
+++ b/src/js/Components/Navbar.js
@@ -14,6 +14,9 @@ class Navbar extends React.Component {
 
     handleDisplay = () =>{
         this.setState({mouseOn:true})
+        if (this.props.handleMoney){
+          this.props.handleMoney()
+        }
     }
 
     handleNormal = () => {
diff --git a/src/js/Views/Ticket.js b/src/js/Views/Ticket.js
index e6afad6..51b6ee3 100644
--- a/src/js/Views/Ticket.js
+++ b/src/js/Views/Ticket.js
@@ -10,6 +10,7 @@ import axios from 'axios';
 import ArticleDetails from '../Components/ArticleDetails';
 import { Link } from 'react-router-dom';
 import NotInBdd from '../Components/NotInBdd';
+import Money from '../Components/Money';
 
 export default class Stock extends React.Component {
 
@@ -122,6 +123,24 @@ export default class Stock extends React.Component {
       this.getArticleByCode(code)
   }
 
+  colorArticle = (color,element) => {
+      
+    switch (color) {
+        case "white":
+            element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
+            break;
+        case "grey" :
+            element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
+            break;
+        case "red" :
+            element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
+            break;
+        case "red&white" :
+          element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
+          break;
+    }
+}
+
   handleValidation = () => {
 
     for (let i = 0 ; i < this.state.articlesJamalette.length ; i++) {
@@ -153,6 +172,14 @@ export default class Stock extends React.Component {
 
   }
 
+  handleMoney = () => {
+    this.setState({onMoney:true})
+  }
+
+  handleCloseMoney = () => {
+    this.setState({onMoney:false})
+  }
+
   render() {
     if (!sessionStorage.getItem('token')){
       return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
@@ -160,9 +187,12 @@ export default class Stock extends React.Component {
     return (
         <div id="stock">
             <Header title='Le Ticket de Caisse'/>
-            <Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
+            <Navbar redirect="/stock" left="Monnaie" right="Le Stock" handleMoney={this.handleMoney}/>
             <BarcodeReader onScan={this.handleScan}/>
             <SearchBar/>
+            {this.state.onMoney &&
+              <Money empty={this.state.empty} handleCloseAbove={this.handleCloseMoney}/>
+            }
             {this.state.onNotInBdd && 
             <NotInBdd handleCloseAbove={this.closeNotInBdd}/>
             }
@@ -192,7 +222,7 @@ export default class Stock extends React.Component {
                 </div>
             :<div id="emptyTicketBox">
               <p id="emptyTicket">
-                Scanne tes articles pour remplir le ticket de caisse ! 
+                Scanne tes articles avec la Jamalette pour remplir le ticket de caisse ! 
               </p>
             </div> }
             <Footer/>