Crédit pain : implémentation des crédits pain sur le frontend

Affichage des crédits pain au niveau des établissements + lien vers une page explicative.
Ajoout d'une colonne pour le statut payé/non payé d'une commande dans l'historique des commandes.
Mise en place de la fonctionnalité crédit pain au niveau de la validation de la commande.

Même si le client n'a pas assez d'argent sur son compte Crédit Pain, on lui permet de passer sa commande. Il paiera le restant directement à la boulangerie ou créditera de nouveau son compte. Ceci dans le but de permettre au client de commander, quoi qu'il arrive.

Remboursement du client lors de l'annulation de sa commande.

backend/controllers/CommandeController.php

         
         if($commande)
         {
-            $credit_historique = new CreditHistorique ;
-            $credit_historique->id_user = $commande->id_user ;
-            $credit_historique->id_commande = $id_commande ;
-            $credit_historique->montant = $montant ;
-            $credit_historique->type = $type ;
-            $credit_historique->id_etablissement = Yii::$app->user->identity->id_etablissement ;
-            $credit_historique->id_user_action = Yii::$app->user->identity->id ;
-            $credit_historique->save() ;
+            $commande->creditHistorique(
+                $type, 
+                $montant, 
+                Yii::$app->user->identity->id_etablissement, 
+                Yii::$app->user->identity->id
+            ) ;
         }
         
         return $this->actionStatutPaiement($id_commande) ;

backend/views/user/credit.php

                             <td>
                                 <?php if($ch->type == CreditHistorique::TYPE_CREDIT_INITIAL): ?>Crédit initial<?php endif; ?>
                                 <?php if($ch->type == CreditHistorique::TYPE_CREDIT): ?>Crédit<?php endif; ?>
-                                <?php if($ch->type == CreditHistorique::TYPE_PAIEMENT): ?>Paiement commande du <?= date('d/m/Y',strtotime($ch->commande->date)) ?><?php endif; ?>
+                                <?php if($ch->type == CreditHistorique::TYPE_PAIEMENT): ?>
+                                    Paiement commande 
+                                        <?php if(isset($ch->commande)): ?>
+                                            du <?= date('d/m/Y',strtotime($ch->commande->date)) ?>
+                                        <?php else: ?>
+                                            (supprimée)
+                                        <?php endif; ?>
+                                <?php endif; ?>
                                 <?php if($ch->type == CreditHistorique::TYPE_REMBOURSEMENT): ?>Remboursement commande du <?= date('d/m/Y',strtotime($ch->commande->date)) ?><?php endif; ?>
                             </td>
                             <td>

common/models/Commande.php

         const TYPE_USER = 'user' ;
         const TYPE_ADMIN = 'admin' ;
         
+        const STATUT_PAYEE = 'payee' ;
+        const STATUT_IMPAYEE = 'impayee' ;
+        const STATUT_SURPLUS = 'surplus' ;
+        
 	
     /**
      * @inheritdoc
     		
     		$this->montant = $this->montant_vrac + $this->montant_pain ; 
     	}
-        if(isset($this->creditHistorique))
+        if(isset($this->creditHistorique) && !$this->montant_paye)
         {
             foreach($this->creditHistorique as $ch) 
             {
     
     public function getMontantPaye() 
     {
-        $historique = CreditHistorique::find()
+        if($this->montant_paye) 
+        {
+            return $this->montant_paye ;
+        }
+        else {
+            $historique = CreditHistorique::find()
                 ->where(['id_commande' => $this->id])
                 ->all() ;
         
-        $montant = 0 ;
-        
-        foreach($historique as $ch) 
-        {
-            if($ch->type == CreditHistorique::TYPE_PAIEMENT)
-                $montant += $ch->montant ;
-            elseif($ch->type == CreditHistorique::TYPE_REMBOURSEMENT)
-                $montant -= $ch->montant ;
+            $montant = 0 ;
+
+            foreach($historique as $ch) 
+            {
+                if($ch->type == CreditHistorique::TYPE_PAIEMENT)
+                    $montant += $ch->montant ;
+                elseif($ch->type == CreditHistorique::TYPE_REMBOURSEMENT)
+                    $montant -= $ch->montant ;
+            }
+
+            return $montant ;
         }
-        
-        return $montant ;
+    }
+    
+    public function getMontant($format = false) 
+    {
+        if($format)
+            return number_format($this->getMontant(),2).' €' ;
+        else
+            return $this->montant ;
     }
     
     public function getMontantFormat() 
     {
-        return number_format($this->montant,2).' €' ;
+        return number_format($this->getMontant(),2).' €' ;
+    }
+    
+    public function getMontantRestant($format = false)
+    {
+        $montant_restant = $this->getMontant() - $this->getMontantPaye() ;
+        if($format)
+            return number_format($montant_restant, 2).' €';
+        else
+            return $montant_restant ;
+    }
+    
+    public function getMontantSurplus($format = false)
+    {
+        $montant_surplus = $this->getMontantPaye() - $this->getMontant() ;
+        if($format)
+            return number_format($montant_surplus, 2).' €';
+        else
+            return $montant_surplus ;
     }
     
     public function getDataJson() 
         
         return json_encode($json_commande) ;
     }
+    
+    public function creditHistorique($type, $montant, $id_etablissement, $id_user)
+    {
+        $credit_historique = new CreditHistorique ;
+        $credit_historique->id_user = $this->id_user ;
+        $credit_historique->id_commande = $this->id ;
+        $credit_historique->montant = $montant ;
+        $credit_historique->type = $type ;
+        $credit_historique->id_etablissement = $id_etablissement ;
+        $credit_historique->id_user_action = $id_user ;
+        $credit_historique->save() ;
+    }
+    
+    public function statutPaiement() 
+    {
+        // payé
+        if($this->montant - $this->montant_paye < 0.001)
+        {
+            return self::STATUT_PAYEE ;
+        }
+        // reste à payer
+        elseif($this->montant - $this->montant_paye > 0.01) 
+        {
+            return self::STATUT_IMPAYEE ;
+        }
+        // à rembourser
+        elseif($this->montant - $this->montant_paye < 0.01) 
+        {
+            return self::STATUT_SURPLUS ;
+        }
+    }
 }

common/models/User.php

         } 
     }
     
+    public function getCredit($id_etablissement)
+    {
+        $user_etablissement = UserEtablissement::find()
+                ->where([
+                    'id_user' => $this->id,
+                    'id_etablissement' => $id_etablissement
+                ])
+                ->one() ;
+        
+        if($user_etablissement)
+        {
+            return $user_etablissement->credit ;
+        }
+        
+        return 0 ;
+    }
+    
 }

frontend/controllers/CommandeController.php

 use yii\helpers\Html;
 use frontend\models\AddEtablissementForm;
 use common\models\UserEtablissement;
+use common\models\CreditHistorique ;
 
 class CommandeController extends \yii\web\Controller {
 
                 ->where(['id_user' => Yii::$app->user->identity->id])
                 ->all();
         
+        if($id_etablissement)
+        {
+            $user_etablissement = UserEtablissement::find()
+                ->where([
+                    'id_etablissement' => $id_etablissement,
+                    'id_user' => Yii::$app->user->identity->id
+                ])
+                ->one() ;
+            
+            $credit = $user_etablissement->credit ;
+        }
+        else {
+            $credit = 0 ;
+        }
+        
         return [
             'points_vente' => $arr_points_vente,
             'jours_production' => $arr_jours_production,
             'etablissements' => $etablissements,
             'id_etablissement' => $id_etablissement,
             'etablissement_paiement_ok' => $etablissement_paiement_ok,
+            'credit' => $credit
         ];
     }
 
         
         // liste des commandes
         $commandes = Commande::find()
-                ->with('commandeProduits', 'pointVente')
+                ->with('commandeProduits', 'pointVente', 'creditHistorique')
                 ->joinWith('production','production.etablissement')
                 ->where(['id_user' => Yii::$app->user->id])
                 //->andWhere('production.date < '.)
                     $commande_produit->save();
                 }
             }
+            
+            // credit pain
+            $credit_pain = isset($posts['credit_pain']) && $posts['credit_pain'] ;
+            if($credit_pain)
+            {
+                $commande = Commande::find()
+                    ->with('commandeProduits')
+                    ->where(['id' => $commande->id])
+                    ->one() ;
+                $commande->init() ;
+                $montant_paye = $commande->getMontantPaye() ;
+                
+                // à payer
+                if($commande->statutPaiement() == Commande::STATUT_IMPAYEE)
+                {
+                    $montant_payer = $commande->montant - $montant_paye ;
+                    $credit = Yii::$app->user->identity->getCredit($production->id_etablissement) ;
+                    
+                    if($montant_payer > $credit) 
+                    {
+                        $montant_payer = $credit ;
+                    }
+                    
+                    $commande->creditHistorique(
+                        CreditHistorique::TYPE_PAIEMENT, 
+                        $montant_payer, 
+                        $production->id_etablissement, 
+                        Yii::$app->user->identity->id
+                    ) ;
+                }
+                // surplus à rembourser
+                elseif($commande->statutPaiement() == Commande::STATUT_SURPLUS) 
+                {
+                    $montant_rembourser = $montant_paye - $commande->montant ;
+                    $commande->creditHistorique(
+                        CreditHistorique::TYPE_REMBOURSEMENT, 
+                        $montant_rembourser, 
+                        $production->id_etablissement, 
+                        Yii::$app->user->identity->id
+                    ) ;
+                }    
+            }
+            
+                
+            
             // redirection
             $this->redirect(Yii::$app->urlManager->createUrl(['commande/index', 'commande_ok' => true, 'pate_deja_petrie' => $pate_deja_petrie]));
         }
 
     public function actionAnnuler($id) {
 
-        $commande = Commande::find()->where(['id' => $id])->one();
+        $commande = Commande::find()
+                ->with('production','creditHistorique','commandeProduits')
+                ->where(['id' => $id])
+                ->one();
+        $commande->init() ;
         if ($commande && Yii::$app->user->id == $commande->id_user) {
+            // remboursement
+            if($commande->getMontantPaye())
+            {
+                $commande->creditHistorique(
+                    CreditHistorique::TYPE_REMBOURSEMENT, 
+                    $commande->getMontantPaye(), 
+                    $commande->production->id_etablissement, 
+                    Yii::$app->user->identity->id
+                ) ;
+            }
+            // delete
             $commande->delete();
             CommandeProduit::deleteAll(['id_commande' => $commande->id]);
         }

frontend/controllers/SiteController.php

     {
         return $this->render('cgv') ;
     }
+    
+    public function actionCreditpain() 
+    {
+        return $this->render('creditpain') ;
+    }
 }

frontend/views/commande/_form.php

     <?= $form->field($model, 'id_production')->label('')->hiddenInput(); ?>
 
     <?php if (isset($model->id)): ?>
-    <div class="date-commande"><span><?php echo date('d/m/Y', strtotime($production->date)); ?></span></div>
-    <?php endif; ?>
+        <div class="date-commande"><span><?php echo date('d/m/Y', strtotime($production->date)); ?></span></div>
+        <?= Html::hiddenInput('id_commande', $model->id,['id'=>'id-commande']); ?>
+        <?= Html::hiddenInput('montant_paye', $model->getMontantPaye(),['id'=>'montant-paye']); ?>
+    <?php endif; ?> 
 
     <div id="datepicker-production" <?php if (isset($model->id)): ?>style="display:none"<?php endif; ?>>
     </div>
 
     <div id="bar-fixed">
         <div class="container">
-<?php if (isset($model->id)): ?>
+            <?php if (isset($model->id)): ?>
                 <a href="<?php echo Yii::$app->urlManager->createUrl(['commande/annuler', 'id' => $model->id]); ?>" class="btn btn-danger annuler-commande">Annuler ma commande</a>
             <?php endif; ?>
-
-    <span id="total-commande-bottom"><span></span> €</span>
-    <?= Html::submitButton('<span class="glyphicon glyphicon-comment"></span>', ['class' => 'btn btn-default btn-commentaire', 'data-placement' => 'top', 'data-toggle' => 'tooltip', 'data-original-title' => 'Ajouter un commentaire']) ?>
-    <?= Html::submitButton('Valider ma commande', ['class' => 'btn btn-primary valider-commande']) ?>
-    
-            
+            <span id="total-commande-bottom"><span></span> €</span>
+            <?= Html::submitButton('<span class="glyphicon glyphicon-comment"></span> Commentaire', ['class' => 'btn btn-default btn-commentaire', 'data-placement' => 'top', 'data-toggle' => 'tooltip', 'data-original-title' => 'Ajouter un commentaire']) ?>
+            <div id="checkbox-credit-pain" >
+                <?= Html::checkbox('credit_pain', true, ['label' => 'Utiliser mon Crédit Pain <span class="the-credit" data-toggle="tooltip" data-placement="top" data-original-title="Vous avez actuellement '.number_format($credit,2).' € sur votre compte Crédit Pain">'.number_format($credit,2).' €</span><br /><span class="info"></span>']) ?>
+                <?= Html::hiddenInput('montant_credit_pain', $credit, ['id' => 'montant-credit-pain']) ?>
+                <?= Html::hiddenInput('str_montant_credit_pain', number_format($credit,2).' €', ['id' => 'str-montant-credit-pain']) ?>
+            </div>
             <div class="clr"></div>
-            
             <?= $form->field($model, 'commentaire')->textarea(['rows' => 3, 'placeholder' => 'Un commentaire ?'])->label(''); ?>
+            
+            <div id="bloc-valider-commande">
+                <?= Html::submitButton('<span class="glyphicon glyphicon-ok"></span> Valider ma commande', ['class' => 'btn btn-primary valider-commande']) ?>
+            </div>
         </div>
     </div>
             

frontend/views/commande/_liste_etablissements.php

                     <a class="btn btn-primary" href="<?= Yii::$app->urlManager->createUrl(['commande/create', 'id_etablissement' => $e['id']]) ?>">Sélectionner</a>
                 <?php endif; ?>
                     
-                <div class="heure-limite-commande" data-toggle="tooltip" data-placement="bottom" title="Heure limite de commande pour le lendemain">
-                    <span class="limite"><span class="glyphicon glyphicon-time"></span> Heure limite :</span> <?php echo Html::encode($e['heure_limite_commande']) ?> h <br />
-                    <span class="limite">Délai :</span> <?= Html::encode($e['delai_commande']) ?> jour<?php if($e['delai_commande'] > 1): ?>s<?php endif; ?>
+                <div class="clr"></div>
+                <div class="heure-limite-commande">
+                    <span data-toggle="tooltip" data-placement="bottom" title="Heure limite de commande">
+                        <strong><span class="glyphicon glyphicon-time"></span> Heure limite :</strong> 
+                        <?php echo Html::encode($e['heure_limite_commande']) ?> h
+                    </span> &bull;
+                    <span data-toggle="tooltip" data-placement="bottom" title="Exemple : commande le lundi pour le <?php if($e['delai_commande'] == 1): ?>mardi<?php elseif($e['delai_commande'] == 2): ?>mercredi<?php elseif($e['delai_commande'] == 3): ?>jeudi<?php elseif($e['delai_commande'] == 4): ?>vendredi<?php elseif($e['delai_commande'] == 5): ?>samedi<?php elseif($e['delai_commande'] == 6): ?>dimanche<?php elseif($e['delai_commande'] == 7): ?>lundi d'après<?php endif; ?>">
+                        <strong>Délai :</strong> 
+                        <?= Html::encode($e['delai_commande']) ?> jour<?php if($e['delai_commande'] > 1): ?>s<?php endif; ?>
+                    </span>
                 </div>
+                <div class="credit-pain">
+                    <span data-toggle="tooltip" data-placement="bottom" title="Montant de votre compte Crédit Pain. Rendez-vous dans votre boulangerie pour créditer votre compte.">
+                        <span class="montant"><?= number_format($e['credit'],2); ?> <span class="glyphicon glyphicon-euro"></span></span>
+                    </span>
+                    <a class="info-credit-pain" href="<?= Yii::$app->urlManager->createUrl(['site/creditpain']); ?>" data-toggle="tooltip" data-placement="bottom" title="En savoir plus sur le Crédit Pain"><span class="glyphicon glyphicon-info-sign"></span></a>
+                </div>
+                <div class="clr"></div>
             </div>
         </div>
     </div>

frontend/views/commande/create.php

         'etablissements' => $etablissements,
         'id_etablissement' => $id_etablissement,
         'etablissement_paiement_ok' => $etablissement_paiement_ok,
+        'credit' => $credit
     ]) ?>
 
 </div>

frontend/views/commande/index.php

 
 use yii\helpers\Html;
 use yii\bootstrap\ActiveForm;
+use common\models\Commande ;
 
 $this->title = 'Commande' ;
 
                                             <?php endif; ?>
 				<?php endforeach; ?></td>
 				<td><?php echo '<span class="nom-point-vente">'.Html::encode($c->pointVente->nom) .'</span><br /><span class="localite">'.Html::encode($c->pointVente->localite).'</span>' ; ?></td>
-				<td class="montant"><?php echo number_format($c->montant,2) ; ?> €</td>
+				<td class="montant">
+                                    <?php echo number_format($c->montant,2) ; ?> €<br />
+                                    <?php if($c->montant_paye): ?>
+                                        <?php if($c->statutPaiement() == Commande::STATUT_PAYEE): ?>
+                                            <span class="label label-success">Payée</span>
+                                        <?php elseif($c->statutPaiement() == Commande::STATUT_IMPAYEE): ?>
+                                            <span class="label label-danger">Non payée</span><br />
+                                            Reste <strong><?= $c->getMontantRestant(true); ?></strong> à payer
+                                        <?php elseif($c->statutPaiement() == Commande::STATUT_SURPLUS): ?>
+                                            <span class="label label-success">Payée</span>
+                                        <?php endif; ?>
+                                    <?php else: ?>
+                                            <span class="label label-default">À régler sur place</span>
+                                    <?php endif; ?>
+                                </td>
 				<td class="statut">
 					<?php 
-						if(date('H') > 20) {
-							$date_limite = date('Y-m-d',strtotime(date('Y-m-d')) + 60*60*24) ;
-						}
-						else {
-							$date_limite = date('Y-m-d') ;
-						}
+                                            if(date('H') > 20) {
+                                                $date_limite = date('Y-m-d',strtotime(date('Y-m-d')) + 60*60*24) ;
+                                            }
+                                            else {
+                                                $date_limite = date('Y-m-d') ;
+                                            }
 					?>
-				
 					<?php if($c->production->date < date('Y-m-d') || ($c->production->date == date('Y-m-d') && date('H') > 13)): ?>Livrée
 					
 					<?php elseif($c->production->date <= $date_limite): ?>En cours de préparation

frontend/views/commande/update.php

                 'etablissements' => $etablissements,
                 'id_etablissement' => $id_etablissement,
                 'etablissement_paiement_ok' => $etablissement_paiement_ok,
+                'credit' => $credit
 	    ]) ?>
     
     <?php endif; ?>

frontend/views/site/creditpain.php

+<?php
+$this->title = 'Crédit pain';
+?>
+
+<div class="container content-text">
+    <div class="content">
+        <h1>Le Crédit Pain</h1>
+        <p>Le <em>Crédit Pain</em> est un compte prépayé qui vous permet de régler
+            vos commandes sur le site <strong>La boîte à pain</strong>. Ainsi vous
+            n'avez pas à payer dans votre boulangerie à chaque fois que vous y 
+            récupérez une commande.</p>
+        <p>Pour créditer votre compte, rien de plus simple. Il vous suffit de vous
+        rendre dans votre boulangerie et de régler la somme que vous souhaitez créditer.
+        La boulangerie se chargera de mettre à jour votre <em>Crédit Pain</em>
+        en ligne.</p>
+        <p>Lors de vos prochaines commandes, vous aurez juste à indiquer que vous souhaitez
+            payer avec votre <em>Crédit Pain</em> et votre compte sera automatiquement débité.</p>
+    </div>
+</div>

frontend/web/css/screen.css

 }
 
 /* line 59, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie {
+#main .liste-etablissements .boulangerie {
   padding-left: 0px;
   padding-right: 30px;
 }
 /* line 63, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel {
+#main .liste-etablissements .boulangerie .panel {
   margin-bottom: 13px;
 }
 /* line 67, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie.selected .panel {
+#main .liste-etablissements .boulangerie.selected .panel {
   border-bottom: solid 3px #BB8757;
   margin-bottom: 11px;
 }
 /* line 72, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-heading {
+#main .liste-etablissements .boulangerie .panel-heading {
   height: 150px;
   overflow: hidden;
   padding: 0px;
   background-color: #F8F1DD;
 }
 /* line 79, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-heading .img-back {
+#main .liste-etablissements .boulangerie .panel-heading .img-back {
   width: 100%;
   height: auto;
   position: relative;
   top: -50%;
 }
 /* line 88, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body {
+#main .liste-etablissements .boulangerie .panel-body {
   position: relative;
   width: 100%;
-  height: 120px;
-  max-height: 120px;
+  height: 150px;
+  max-height: 150px;
   text-align: center;
 }
 /* line 95, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body h3 {
+#main .liste-etablissements .boulangerie .panel-body h3 {
   margin-bottom: 4px;
 }
 /* line 99, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .localite {
+#main .liste-etablissements .boulangerie .panel-body .localite {
   color: gray;
   margin-bottom: 10px;
 }
 /* line 104, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .glyphicon-check {
+#main .liste-etablissements .boulangerie .panel-body .glyphicon-check {
   color: #BB8757;
   font-size: 40px;
   position: absolute;
   left: 32px;
 }
 /* line 112, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .remove {
+#main .liste-etablissements .boulangerie .panel-body .remove {
   position: absolute;
   top: 10px;
   right: 10px;
 }
 /* line 118, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .logo {
+#main .liste-etablissements .boulangerie .panel-body .logo {
   display: none;
   width: 150px;
   position: absolute;
   padding: 10px 20px;
 }
 /* line 129, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .heure-limite-commande {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-  padding: 10px;
-  border-top: solid 1px #ddd;
-  border-left: solid 1px #ddd;
-  font-size: 12px;
+#main .liste-etablissements .boulangerie .panel-body .heure-limite-commande,
+#main .liste-etablissements .boulangerie .panel-body .credit-pain {
+  margin-top: 15px;
+  font-size: 13px;
+}
+/* line 135, ../sass/_systeme_commandes.scss */
+#main .liste-etablissements .boulangerie .panel-body .heure-limite-commande {
+  float: left;
 }
-/* line 137, ../sass/_systeme_commandes.scss */
-.liste-etablissements .boulangerie .panel-body .heure-limite-commande .limite {
+/* line 139, ../sass/_systeme_commandes.scss */
+#main .liste-etablissements .boulangerie .panel-body .credit-pain {
+  float: right;
+}
+/* line 142, ../sass/_systeme_commandes.scss */
+#main .liste-etablissements .boulangerie .panel-body .credit-pain .montant {
+  font-size: 16px;
+  color: #BB8757;
+  background-color: #F8F1DD;
+  padding: 2px 10px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
   font-weight: bold;
 }
+/* line 149, ../sass/_systeme_commandes.scss */
+#main .liste-etablissements .boulangerie .panel-body .credit-pain .montant .glyphicon {
+  font-size: 13px;
+}
+/* line 155, ../sass/_systeme_commandes.scss */
+#main .liste-etablissements .boulangerie .panel-body .info-credit-pain {
+  font-size: 17px;
+  position: relative;
+  top: 2px;
+  left: 3px;
+  color: #BB8757;
+}
 
-/* line 145, ../sass/_systeme_commandes.scss */
+/* line 166, ../sass/_systeme_commandes.scss */
 #index-commande {
   position: relative;
 }
-/* line 148, ../sass/_systeme_commandes.scss */
+/* line 169, ../sass/_systeme_commandes.scss */
 #index-commande #logout {
   position: absolute;
   /*top: 45px ;
   right: 0;
   z-index: 10;
 }
-/* line 157, ../sass/_systeme_commandes.scss */
+/* line 178, ../sass/_systeme_commandes.scss */
 #index-commande .accueil {
   text-align: center;
   padding-bottom: 20px;
 }
-/* line 162, ../sass/_systeme_commandes.scss */
+/* line 183, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement {
   padding-left: 0px;
   padding-right: 30px;
 }
-/* line 166, ../sass/_systeme_commandes.scss */
+/* line 187, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .help-block {
   padding-bottom: 0px;
 }
-/* line 170, ../sass/_systeme_commandes.scss */
+/* line 191, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .field-addetablissementform-id_etablissement {
   width: 70%;
   float: left;
 }
-/* line 175, ../sass/_systeme_commandes.scss */
+/* line 196, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .field-addetablissementform-code {
   width: 70%;
   float: left;
 }
-/* line 180, ../sass/_systeme_commandes.scss */
+/* line 201, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .btn {
   float: right;
   position: relative;
   top: 20px;
 }
-/* line 186, ../sass/_systeme_commandes.scss */
+/* line 207, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .panel-heading {
   background: none;
   background-color: white;
   cursor: pointer;
 }
-/* line 192, ../sass/_systeme_commandes.scss */
+/* line 213, ../sass/_systeme_commandes.scss */
 #index-commande #bloc-add-etablissement .panel-body {
   display: none;
 }
-/* line 198, ../sass/_systeme_commandes.scss */
+/* line 219, ../sass/_systeme_commandes.scss */
 #index-commande #historique-commandes .statut, #index-commande #historique-commandes .montant {
   width: 175px;
 }
-/* line 201, ../sass/_systeme_commandes.scss */
+/* line 222, ../sass/_systeme_commandes.scss */
 #index-commande #historique-commandes .montant {
   width: 100px;
 }
-/* line 208, ../sass/_systeme_commandes.scss */
+/* line 229, ../sass/_systeme_commandes.scss */
 #index-commande #historique-commandes .localite {
   font-size: 11px;
   lin-height: 11px;
 }
-/* line 213, ../sass/_systeme_commandes.scss */
+/* line 234, ../sass/_systeme_commandes.scss */
 #index-commande #historique-commandes a {
   text-decoration: none;
 }
 
-/* line 220, ../sass/_systeme_commandes.scss */
+/* line 241, ../sass/_systeme_commandes.scss */
 .commande-form {
   min-height: 600px;
   padding-bottom: 60px;
 }
-/* line 225, ../sass/_systeme_commandes.scss */
+/* line 246, ../sass/_systeme_commandes.scss */
 .commande-form h2 {
   font-family: "myriadpro-regular";
 }
-/* line 229, ../sass/_systeme_commandes.scss */
+/* line 250, ../sass/_systeme_commandes.scss */
 .commande-form #infos-importantes.alert-warning {
   float: right;
 }
-/* line 235, ../sass/_systeme_commandes.scss */
+/* line 256, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker {
   float: left;
   margin-right: 20px;
   font-size: 20px;
 }
-/* line 241, ../sass/_systeme_commandes.scss */
+/* line 262, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-header {
   background-color: #BB8757;
 }
-/* line 245, ../sass/_systeme_commandes.scss */
+/* line 266, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-title {
   color: white;
 }
-/* line 251, ../sass/_systeme_commandes.scss */
+/* line 272, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-prev:hover,
 .commande-form #datepicker-production .ui-datepicker-next:hover {
   border: 0px none;
   background: none;
 }
-/* line 257, ../sass/_systeme_commandes.scss */
+/* line 278, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-helper-clearfix:after {
   clear: none;
 }
-/* line 262, ../sass/_systeme_commandes.scss */
+/* line 283, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-calendar a {
   text-decoration: none;
   background-color: #F8F1DD;
 }
-/* line 265, ../sass/_systeme_commandes.scss */
+/* line 286, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-calendar a.ui-state-hover, .commande-form #datepicker-production .ui-datepicker-calendar a.ui-state-active {
   background-color: #BB8757;
   color: white;
   border-color: #cdc3b7;
 }
-/* line 274, ../sass/_systeme_commandes.scss */
+/* line 295, ../sass/_systeme_commandes.scss */
 .commande-form .date-commande {
   margin-bottom: 53px;
 }
-/* line 276, ../sass/_systeme_commandes.scss */
+/* line 297, ../sass/_systeme_commandes.scss */
 .commande-form .date-commande span {
   background-color: #BB8757;
   color: white;
   font-family: "myriadpro-regular";
   font-size: 20px;
 }
-/* line 286, ../sass/_systeme_commandes.scss */
+/* line 307, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours {
   margin-top: 15px;
 }
-/* line 289, ../sass/_systeme_commandes.scss */
+/* line 310, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours a {
   color: #a94442;
   text-decoration: none;
   font-weight: bold;
 }
-/* line 296, ../sass/_systeme_commandes.scss */
+/* line 317, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   display: none;
 }
-/* line 300, ../sass/_systeme_commandes.scss */
+/* line 321, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   margin-top: 30px;
 }
-/* line 304, ../sass/_systeme_commandes.scss */
+/* line 325, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   margin-bottom: 0px;
 }
-/* line 306, ../sass/_systeme_commandes.scss */
+/* line 327, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production label {
   margin-bottom: 0px;
 }
-/* line 310, ../sass/_systeme_commandes.scss */
+/* line 331, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production .help-block {
   margin-bottom: 0px;
 }
-/* line 315, ../sass/_systeme_commandes.scss */
+/* line 336, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   display: none;
 }
-/* line 319, ../sass/_systeme_commandes.scss */
+/* line 340, ../sass/_systeme_commandes.scss */
 .commande-form .blocs {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
 }
-/* line 324, ../sass/_systeme_commandes.scss */
+/* line 345, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc {
   text-decoration: none;
   width: 268px;
   background-color: white;
   border: 1px solid #d8d8d8;
 }
-/* line 339, ../sass/_systeme_commandes.scss */
+/* line 360, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .nom {
   font-family: "comfortaalight";
   font-size: 20px;
 }
-/* line 345, ../sass/_systeme_commandes.scss */
+/* line 366, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .adresse {
   color: gray;
   font-size: 13px;
   line-height: 16px;
 }
-/* line 351, ../sass/_systeme_commandes.scss */
+/* line 372, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires {
   margin-top: 7px;
 }
-/* line 353, ../sass/_systeme_commandes.scss */
+/* line 374, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires .jour {
   font-weight: bold;
   display: none;
 }
-/* line 360, ../sass/_systeme_commandes.scss */
+/* line 381, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected {
   border-left: solid 5px #BB8757;
 }
-/* line 363, ../sass/_systeme_commandes.scss */
+/* line 384, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected .contenu {
   position: relative;
   left: -4px;
 }
-/* line 369, ../sass/_systeme_commandes.scss */
+/* line 390, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc:hover {
   -moz-box-shadow: 0px 0px 5px #d8d8d8;
   -webkit-box-shadow: 0px 0px 5px #d8d8d8;
   box-shadow: 0px 0px 5px #d8d8d8;
 }
-/* line 374, ../sass/_systeme_commandes.scss */
+/* line 395, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.disabled {
   display: none;
 }
-/* line 381, ../sass/_systeme_commandes.scss */
+/* line 402, ../sass/_systeme_commandes.scss */
 .commande-form #produits {
   margin-top: 15px;
 }
-/* line 384, ../sass/_systeme_commandes.scss */
+/* line 405, ../sass/_systeme_commandes.scss */
 .commande-form #produits #label-produits {
   display: block;
   margin-bottom: 5px;
 }
-/* line 389, ../sass/_systeme_commandes.scss */
+/* line 410, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table {
   margin-top: 7px;
 }
-/* line 392, ../sass/_systeme_commandes.scss */
+/* line 413, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .illu {
   float: left;
   height: auto;
   width: 70px;
   margin-right: 15px;
 }
-/* line 399, ../sass/_systeme_commandes.scss */
+/* line 420, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .photo {
   padding: 0px;
   width: 120px;
 }
-/* line 404, ../sass/_systeme_commandes.scss */
+/* line 425, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .th-photo, .commande-form #produits .table .td-photo {
   width: 120px;
 }
-/* line 408, ../sass/_systeme_commandes.scss */
+/* line 429, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .nom {
   font-family: "comfortaalight";
   font-weight: bold;
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 415, ../sass/_systeme_commandes.scss */
+/* line 436, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .description {
   font-style: italic;
 }
-/* line 419, ../sass/_systeme_commandes.scss */
+/* line 440, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .recette {
   font-size: 12px;
 }
-/* line 423, ../sass/_systeme_commandes.scss */
+/* line 444, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group {
   width: 133px;
 }
-/* line 425, ../sass/_systeme_commandes.scss */
+/* line 446, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group .quantity {
   text-align: center;
 }
-/* line 430, ../sass/_systeme_commandes.scss */
+/* line 451, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .colonne-quantite, .commande-form #produits .table .prix-unit, .commande-form #produits .table .total {
   width: 150px;
   text-align: center;
 }
-/* line 435, ../sass/_systeme_commandes.scss */
+/* line 456, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td#total-commande, .commande-form #produits .table td#total-commande-vrac, .commande-form #produits .table td.total {
   text-align: center;
 }
-/* line 439, ../sass/_systeme_commandes.scss */
+/* line 460, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .epuise {
   display: none;
   text-transform: uppercase;
   font-size: 16px;
   text-align: center;
 }
-/* line 448, ../sass/_systeme_commandes.scss */
+/* line 469, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante {
   font-size: 12px;
   margin-top: 8px;
 }
-/* line 452, ../sass/_systeme_commandes.scss */
+/* line 473, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante .nb {
   font-weight: bold;
 }
-/* line 457, ../sass/_systeme_commandes.scss */
+/* line 478, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.produit, .commande-form #produits .table th.produit {
   width: 70%;
 }
-/* line 461, ../sass/_systeme_commandes.scss */
+/* line 482, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.prix-unit, .commande-form #produits .table th.prix-unit {
   width: 10%;
 }
-/* line 465, ../sass/_systeme_commandes.scss */
+/* line 486, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.colonne-quantite, .commande-form #produits .table th.colonne-quantite {
   width: 10%;
 }
-/* line 469, ../sass/_systeme_commandes.scss */
+/* line 490, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.total, .commande-form #produits .table th.total {
   width: 10%;
 }
-/* line 475, ../sass/_systeme_commandes.scss */
+/* line 496, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed {
   display: none;
   position: fixed;
   background-color: #F8F1DD;
   text-align: center;
 }
-/* line 492, ../sass/_systeme_commandes.scss */
+/* line 513, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed.not-fixed {
   position: relative;
   -moz-box-shadow: none;
   border: solid 1px #e0e0e0;
   padding-right: 20px;
 }
-/* line 500, ../sass/_systeme_commandes.scss */
+/* line 521, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   background-color: white;
   -moz-border-radius: 20px;
   padding: 5px 25px;
   border: solid 1px #e0e0e0;
 }
-/* line 507, ../sass/_systeme_commandes.scss */
-.commande-form #bar-fixed .valider-commande, .commande-form #bar-fixed .btn-commentaire {
+/* line 528, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed .btn-commentaire {
   float: left;
 }
-/* line 511, ../sass/_systeme_commandes.scss */
+/* line 536, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-commentaire {
   margin-right: 10px;
 }
-/* line 515, ../sass/_systeme_commandes.scss */
+/* line 540, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #bloc-valider-commande {
+  text-align: right;
+  margin-top: 20px;
+}
+/* line 544, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #bloc-valider-commande button {
+  width: 300px;
+  margin-right: 10px;
+}
+/* line 550, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #checkbox-credit-pain {
+  float: right;
+  width: 300px;
+  padding: 3px 11px;
+  background-color: white;
+  border: solid 1px #ccc;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  margin-right: 10px;
+  text-shadow: 0 1px 0 #fff;
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+/* line 561, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #checkbox-credit-pain.paiement-impossible {
+  background-color: #e0e0e0;
+}
+/* line 565, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #checkbox-credit-pain .info {
+  color: gray;
+  font-weight: normal;
+}
+/* line 570, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #checkbox-credit-pain .the-credit {
+  background-color: #BB8757;
+  color: white;
+  padding: 2px 8px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+/* line 577, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed #checkbox-credit-pain .montant-paye {
+  color: #BB8757;
+}
+/* line 582, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-retour, .commande-form #bar-fixed .annuler-commande {
   float: left;
   margin-right: 5px;
 }
-/* line 520, ../sass/_systeme_commandes.scss */
+/* line 587, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .annuler-commande {
   color: #b92c28;
   background-color: white;
 }
-/* line 525, ../sass/_systeme_commandes.scss */
+/* line 592, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   display: none;
   font-weight: bold;
   font-family: "comfortaalight";
   font-size: 24px;
 }
-/* line 532, ../sass/_systeme_commandes.scss */
+/* line 599, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .field-commande-commentaire {
   display: none;
 }
 
-/* line 540, ../sass/_systeme_commandes.scss */
+/* line 607, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-widget-header {
   background: none;
   background-color: gray;
   color: black;
   font-weight: normal;
 }
-/* line 548, ../sass/_systeme_commandes.scss */
+/* line 615, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-datepicker-current-day a,
 .ui-datepicker a.ui-state-hover {
   background: none;

frontend/web/js/lechatdesnoisettes.js

 			
 		}) ;
 		chat_systeme_commande_maj_table_prix() ;
+                chat_systeme_commande_credit_pain();
 	}
         
         // commentaire commande
             $('#total-commande-bottom').fadeIn() ;
         else
             $('#total-commande-bottom').hide() ;
+        
+        // maj credit pain
+        chat_systeme_commande_credit_pain_event(prix_global) ;
+        
+        return prix_global ;
+}
+
+function chat_systeme_commande_credit_pain() {
+    $('input[name=credit_pain]').change(function() {
+        var prix_global = chat_systeme_commande_maj_table_prix() ;
+        chat_systeme_commande_credit_pain_event(prix_global) ;
+    }) ;
+}
+
+function chat_systeme_commande_credit_pain_event(prix_global) {
+    var html = '' ;
+    var use_credit_pain = $('input[name=credit_pain]').prop('checked') ;
+
+    var credit_pain = parseFloat($('#montant-credit-pain').val()) ;
+    var credit_pain_dispo = credit_pain ;
+    var montant_paye = 0 
+    if($('#montant-paye').size() && $('#montant-paye').val())
+        montant_paye = parseFloat($('#montant-paye').val()) ;
+    
+    if($('#id-commande').size() && $('#id-commande').val()) {
+        credit_pain_dispo = credit_pain + montant_paye ;
+    }
+    if(prix_global > credit_pain_dispo) {
+        var reste_payer = prix_global - credit_pain_dispo ;
+        if(use_credit_pain) {
+            if(montant_paye) {
+                html += '<span class="montant-paye">'+montant_paye+' € déjà payé</span><br />' ;
+            }
+            html += '<strong>'+credit_pain+' €</strong> seront débités<br />' ;
+            html += 'Restera <strong>'+reste_payer+' €</strong> à payer à la boulangerie' ;
+            $('#checkbox-credit-pain .info').html(html) ;
+        }
+        else {
+            $('#checkbox-credit-pain .info').html('') ;
+        }
+    }
+    else {
+        
+        $('#checkbox-credit-pain').removeClass('paiement-impossible') ;
+        $('input[name=credit_pain]').removeAttr('disabled') ;
+        if(use_credit_pain) {
+            var html = '' ;
+            // à payer
+            if(prix_global > montant_paye)
+            {
+                montant = prix_global - montant_paye ;
+                if(montant_paye) {
+                    html += '<span class="montant-paye">'+montant_paye+' € déjà payé</span><br />' ;
+                }
+                html += '<strong>'+montant+' €</strong> seront débités' ;
+                $('#checkbox-credit-pain .info').html(html) ;
+            }
+            // remboursé
+            else if(prix_global < montant_paye) {
+                montant = montant_paye - prix_global  ;
+                if(montant_paye) {
+                   html += '<span class="montant-paye">'+montant_paye+' € déjà payé</span><br />' ;
+                }
+                html += '<strong>'+montant+' €</strong> seront remboursés' ;
+                $('#checkbox-credit-pain .info').html(html) ;
+                
+            }
+            else {
+                if(montant_paye > 0)
+                    $('#checkbox-credit-pain .info').html('<span class="montant-paye">'+montant_paye+' € déjà payé</span>') ;
+                else
+                    $('#checkbox-credit-pain .info').html('') ;
+            }
+        }
+        else {
+            $('#checkbox-credit-pain .info').html('') 
+        }
+    }
 }
 
 function formate_prix(prix) {

frontend/web/sass/_systeme_commandes.scss

 }
 
 
-.liste-etablissements {
+#main .liste-etablissements {
             
     #bloc-liste-boulangeries {
 
         .panel-body {
             position: relative ;
             width: 100% ;
-            height: 120px ;
-            max-height: 120px;
+            height: 150px ;
+            max-height: 150px;
             text-align: center ;
 
             h3 {
                 padding: 10px 20px ;
             }
             
+            .heure-limite-commande,
+            .credit-pain {
+                margin-top: 15px ;
+                font-size: 13px ;
+            }
+            
             .heure-limite-commande {
-                position: absolute ;
-                bottom: 0px ;
-                right: 0px ;
-                padding: 10px ;
-                border-top: solid 1px #ddd ;
-                border-left: solid 1px #ddd ;
-                font-size: 12px ;
-                .limite {
+                float: left ;
+            }
+            
+            .credit-pain {
+                float: right ;
+                
+                .montant {
+                    font-size: 16px ;
+                    color: $color1 ;
+                    background-color: $color2 ;
+                    padding: 2px 10px ;
+                    @include border-radius(5px) ;
                     font-weight: bold ;
+                    .glyphicon {
+                        font-size: 13px ;
+                    }
                 }
             }
+            
+            .info-credit-pain {
+                font-size: 17px ;
+                position: relative ;
+                top: 2px ;
+                left: 3px ;
+                color: $color1 ; 
+            }
         }
     }  
 }
                     padding: 5px 25px ;
                     border: solid 1px #e0e0e0 ;
                 }
-                
-		.valider-commande, .btn-commentaire {
+                 
+                .btn-commentaire {
 			float: left ;
 		}
                 
+                .valider-commande {
+                    //float: left;
+                }
+                
                 .btn-commentaire {
                     margin-right: 10px ;
                 }
                 
+                #bloc-valider-commande {
+                    text-align: right ;
+                    margin-top: 20px ;
+                    
+                    button {
+                        width: 300px ;
+                        margin-right: 10px ;
+                    }
+                }
+                
+                #checkbox-credit-pain {
+                    float: right ;
+                    width: 300px ;
+                    padding: 3px 11px ;
+                    background-color: white ;
+                    border: solid 1px #ccc ;
+                    @include border-radius(5px) ;
+                    margin-right: 10px  ;
+                    @include text-shadow(0 1px 0 #fff) ;
+                    @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075)) ;
+                    
+                    &.paiement-impossible {
+                        background-color: #e0e0e0 ;
+                    }
+                    
+                    .info {
+                        color: gray ;
+                        font-weight: normal 
+                    }
+                    
+                    .the-credit {
+                        background-color: $color1 ;
+                        color: white ;
+                        padding: 2px 8px;
+                        @include border-radius(5px) ;
+                    }
+                    
+                    .montant-paye {
+                        color: $color1 ;
+                    }
+                }
+                
                 .btn-retour, .annuler-commande {
                     float: left ;
                     margin-right: 5px ;