Création component Money

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;
 }
 

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{

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;

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 = () => {

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/>