From b4ffe61f3ed23bb1f91c119ced4962f73de9a41a Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Fri, 16 Aug 2019 12:00:10 -0300
Subject: [PATCH] Arreglo en pantallo de pagos.

---
 src/app/app-routing.module.ts                      |   2 +-
 .../confirmacion-carrito.component.html            | 119 ++++++++++++++++-----
 src/app/components/header/header.component.html    |   2 +-
 3 files changed, 95 insertions(+), 28 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 324a3db..a039787 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,13 +12,13 @@ const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
+  { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
       { path: 'pago', component: PagoComponent }
     ]
   },
diff --git a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
index 23b64f0..6c395a0 100644
--- a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
+++ b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
@@ -1,42 +1,109 @@
-<div class="row">
-  <div class="col-12">
+<div class="row m-0 fade-in bg-primary-gradient disable-user-select">
+  <div class="col-12 p-0 vh-100">
+
+    <!-- TOP HEADER -->
+    <app-header></app-header>
 
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
-        <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
+        <p class="h5 py-1 bg-gray text-muted text-center m-0">
+          Pagar
+          <i class="fa fa-usd"></i>
+        </p>
       </div>
     </div>
 
-    <div class="row m-3 d-flex align-items-center">
-      <div class="col-4">
-        <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
-      </div>
-      <div class="col-8">
-        <h2>¿Desea finalizar su compra?</h2>
-        <h3>Por favor, controle y confirme su compra.</h3>
-      </div>
-      <div class="col-sm-7">
-
-        <div class="row pr-3 vh-50 overflow-scroll">
-          <div class="col-4 p-2" *ngFor="let producto of productos">
-            <div class="card card-effect bg-white rounded-sm shadow border-0">
-              <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">
-              <div class="card-body">
-                <p class="h5 text-left m-0">{{producto.variable}}</p>
-                <div class="text-left">
-                  <p class="m-0"><small>ASDASDSADASDSA</small></p>
-                  <p class="m-0"><small>COD. 1222</small></p>
-                  <p class="m-0"><strong>$ 563</strong></p>
+    <div class="row m-0">
+      <div class="col-12">
+
+        <!-- TEXTO DE IZQUIERDA -->
+        <div class="row mx-2 mt-4 text-white">
+          <div class="col-sm-2 my-auto">
+            <p class="h2">Mi Compra
+              <i class="fa fa-shopping-cart "></i>
+            </p>
+          </div>
+          <div class="col-sm-4 my-auto">
+            <p class="h3">¿Desea finalizar su compra?</p>
+            <p class="h4">Por favor, controle y confirme su compra.</p>
+          </div>
+        </div>
+
+        <div class="row">
+          <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
+          <div class="col-sm-7">
+            <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
+              <div class="col-4 p-2" *ngFor="let producto of productos">
+                <div class="bg-white rounded-sm shadow border-0">
+                  <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
+                  <div class="p-2">
+                    <p class="h6 text-left m-0">ZARAZA</p>
+                    <div class="row justify-content-between m-0">
+                      <div class="col-12 p-0">
+                        <div class="text-left">
+                          <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
+                          <p class="m-0 h6"><small>COD. 5656</small></p>
+                        </div>
+                      </div>
+                      <div class="col-12 my-auto pt-2 pr-2 p-0">
+                        <p class="text-right m-0 h6">{{20 | currency}}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-sm-5">
+            <div class="row h-100 ml-3">
+              <!-- TICKET -->
+              <div class="col-sm-7">
+                <div class="card rounded-sm shadow">
+                  <div class="card-body">
+                    <p class="h5 card-title">Su Ticket</p>
+                    <p class="h6 card-text text-left mt-4">
+                      Ticket detalle.
+                    </p>
+                    <p class="h4 card-text text-right mt-3 mb-0">
+                      Total {{230 | currency}}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="row m-0 fixed-bottom">
+                <!-- OPCIONES ABAJO DERECHA -->
+                <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
+                  <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
+                    <div class="card-body row m-0">
+                      <div class="col-12 p-3">
+                        <button type="button" class="btn btn-block btn-light shadow btn-sm shadow">
+                          <span class="pr-1">Volver</span>
+                          <i class="fa fa-undo text-warning"></i>
+                        </button>
+                        <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
+                          <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
+                          <i class="fa fa-check text-success"></i>
+                        </button>
+                        <button type="button" class="btn btn-block btn-light shadow btn-sm shadow">
+                          <span class="pr-1">Cancelar</span>
+                          <i class="fa fa-times text-danger"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="col-sm-5">
-        <h3>TOTAL: $553</h3>
+
       </div>
     </div>
+
+
   </div>
+
 </div>
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index ec55ddc..3731a7a 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,4 +1,4 @@
-<div class="row bg-light p-4 justify-content-between">
+<div class="row m-0 bg-light p-4 justify-content-between">
   <div class="col-auto">
     <img src="{{apiUrl}}/imagenes/logoaxion.png">
   </div>
-- 
1.9.1