wallet credit confirmation

app/assets/stylesheets/app.utilities.scss

@@ -102,6 +102,7 @@ p, .widget p {
 .text-italic { font-style: italic; }
 
 .text-center { text-align: center; }
+.text-right { text-align: right; }
 
 .text-active, .active > .text, .active > .auto .text{display: none !important;}
 .active > .text-active, .active > .auto .text-active{display: inline-block !important;}
@@ -127,6 +128,7 @@ p, .widget p {
 
 .width-35 { width: 35% !important; }
 .width-70 { width: 70%; }
+.width-90 { width: 90%; }
 
 .b{border: 1px solid rgba(0, 0, 0, 0.05)}
 .b-a{border: 1px solid $border-color}

app/assets/templates/wallet/credit_modal.html.erb

@@ -4,15 +4,39 @@
 </div>
 <div class="modal-body">
   <form name="walletForm" ng-class="{'has-error': walletForm.amount.$dirty && walletForm.amount.$invalid}">
-    <div class="text-center amountGroup">
+    <div class="text-right amountGroup m-r-md">
       <span class="beforeAmount" translate>{{ 'credit_label' }}</span>
-      <input class="form-control" type="number" name="amount" ng-model="amount" required min="1" step="any">
+      <input class="form-control m-l"
+             type="number"
+             name="amount"
+             ng-model="amount"
+             required min="1"
+             step="any">
       <span class="afterAmount">{{currencySymbol}}</span>
       <span class="help-block" ng-show="walletForm.amount.$dirty && walletForm.amount.$error.required" translate>{{'amount_is_required'}}</span>
-      <span class="help-block" ng-show="walletForm.amount.$dirty && walletForm.amount.$error.min">{{ 'amount_minimum_1' | translate }}{{currencySymbol}}</span>
+      <span class="help-block" ng-show="walletForm.amount.$dirty && walletForm.amount.$error.min">{{ 'amount_minimum_1' | translate }} {{currencySymbol}}.</span>
+    </div>
+    <div class="text-right amountGroup m-t m-r-md">
+      <span class="beforeAmount" translate>{{ 'confirm_credit_label' }}</span>
+      <input class="form-control m-l"
+             type="number"
+             name="amount_confirm"
+             ng-model="amount_confirm"
+             required
+             min="1"
+             step="any"
+             ng-pattern="amount.toString()">
+      <span class="afterAmount">{{currencySymbol}}</span>
+      <span class="help-block" ng-show="walletForm.amount_confirm.$dirty && walletForm.amount_confirm.$error.required" translate>{{'amount_confirm_is_required'}}</span>
+      <span class="help-block" ng-show="walletForm.amount_confirm.$dirty && walletForm.amount_confirm.$error.pattern">{{ 'amount_confirm_does_not_match' | translate }}</span>
     </div>
   </form>
 
+  <div class="alert alert-warning m-t-md m-b-sm">
+    <i class="fa fa-warning m-sm inline" aria-hidden="true"></i>
+    <div class="inline pull-right width-90 m-t-n-xs" translate>{{ 'warning_uneditable_credit' }}</div>
+  </div>
+
 </div>
 <div class="modal-footer">
   <button class="btn btn-info" ng-click="ok()" ng-disabled="walletForm.$invalid || attempting" translate>{{ 'confirm' }}</button>

config/locales/app.shared.en.yml

@@ -323,11 +323,14 @@ en:
         debit: 'Debit'
         credit_title: 'Credit wallet'
         credit_label: 'Set the amount to be credited'
+        confirm_credit_label: 'Confirm the amount to be credited'
         to_credit: 'Credit'
         wallet_credit_successfully: "Wallet of user is credited successfully."
         a_problem_occurred_for_wallet_credit: "A problem is occurred while taking the credit of wallet"
         amount_is_required: "The amount is required"
         amount_minimum_1: "The amount minimum is 1"
+        amount_confirm_is_required: "The amount confirmation is required"
+        amount_confirm_does_not_match: "The amount confirmation does not match"
         you_have_amount_in_wallet: "You have {{amount}} {{currency}} in your wallet"
         client_have_amount_in_wallet: "Client has {{amount}} {{currency}} in wallet"
         wallet_pay_reservation: "You can pay direct your reservation"
@@ -336,6 +339,7 @@ en:
         debit_reservation_training: "Debit by reservation of training"
         debit_reservation_machine: "Debit by reservation of machine"
         debit_reservation_event: "Debit by reservation of event"
+        warning_uneditable_credit: "Warning: once validated, the credited amount won't be editable anymore."
 
       coupon:
         # promotional coupon (creation/edition form)

config/locales/app.shared.fr.yml

@@ -323,11 +323,14 @@ fr:
         debit: 'Débit'
         credit_title: 'Créditer le porte-monnaie'
         credit_label: 'Indiquez le montant à créditer'
+        confirm_credit_label: 'Confirmez le montant à créditer'
         to_credit: 'Créditer'
         wallet_credit_successfully: "Le porte-monnaie de l'utilisateur a été chargé avec succès."
         a_problem_occurred_for_wallet_credit: "Un problème est survenu lors du chargement du porte-monnaie."
-        amount_is_required: "Le montant est obligatoire"
-        amount_minimum_1: "Le montant minimum est d'1"
+        amount_is_required: "Le montant est requis."
+        amount_minimum_1: "Le montant minimum est de 1"
+        amount_confirm_is_required: "La confirmation du montant est requise."
+        amount_confirm_does_not_match: "La confirmation du montant ne correspond pas."
         you_have_amount_in_wallet: "Vous avez {{amount}} {{currency}} sur votre porte-monnaie"
         client_have_amount_in_wallet: "Le client a {{amount}} {{currency}} sur son porte-monnaie"
         wallet_pay_reservation: "Vous pouvez effectuer directement votre paiement de réservation"
@@ -336,6 +339,7 @@ fr:
         debit_reservation_training: "Payer un reservation de formation"
         debit_reservation_machine: "Payer un reservation de machine"
         debit_reservation_event: "Payer un reservation d'évenement"
+        warning_uneditable_credit: "Attention : une fois validé, le montant crédité ne sera plus modifiable."
 
       coupon:
         # code promotionnel (formulaire de création/édition)