Melhorias no processo de checkout

Author: jdc-developer

src/app/app.module.ts

@@ -73,7 +73,7 @@ import { OrderService } from './services/order.service';
       { path: 'login', component: LoginComponent },
 
       { path: 'check-out', component: CheckOutComponent, canActivate: [AuthGuard] },
-      { path: 'sucesso', component: OrderSuccessComponent, canActivate: [AuthGuard] },
+      { path: 'sucesso/:id', component: OrderSuccessComponent, canActivate: [AuthGuard] },
       { path: 'meus-pedidos', component: MyOrdersComponent, canActivate: [AuthGuard] },
 
       { path: 'admin/produtos/novo', component: ProductFormComponent, canActivate: [AuthGuard, AdminAuthGuard] },

src/app/check-out/check-out.component.html

@@ -4,21 +4,24 @@ <h2>Envio</h2>
     <form #f="ngForm" (ngSubmit)="save(f.value)">
       <div class="form-group">
         <label for="name">Nome</label>
-        <input name="name" id="name" [(ngModel)]="order.name"  type="text" class="form-control">
+        <input #name="ngModel" name="name" id="name" required [(ngModel)]="shipping.name"  type="text" class="form-control">
+        <div *ngIf="name.touched && name.invalid" class="alert alert-danger">O nome é obrigatório</div>
       </div>
       <div class="form-group">
         <label for="address">Endereço</label>
-        <input name="address" [(ngModel)]="order.address"  id="address" type="text" class="form-control" placeholder="Linha 1"><br>
-        <input name="address1" id="address1" type="text" class="form-control" placeholder="Linha 2">
+        <input #address="ngModel" name="address" required [(ngModel)]="shipping.address"  id="address" type="text" class="form-control" placeholder="Linha 1">
+        <div *ngIf="address.touched && address.invalid" class="alert alert-danger">O endereço é obrigatório</div><br>
+        <input name="address1" id="address1" [(ngModel)]="shipping.address1" type="text" class="form-control" placeholder="Linha 2">
       </div>
       <div class="form-group">
         <label for="city">Cidade</label>
-        <input #city="ngModel" [(ngModel)]="order.city" name="city" id="city" type="text" class="form-control">
+        <input #city="ngModel" required [(ngModel)]="shipping.city" name="city" id="city" type="text" class="form-control">
+        <div *ngIf="city.touched && city.invalid" class="alert alert-danger">A cidade é obrigatória</div>
       </div>
-      <button class="btn btn-primary">Realizar pedido</button>
+      <button [disabled]="f.invalid" class="btn btn-primary">Realizar pedido</button>
     </form>
   </div>
   <div class="col-md-6">
-    <shopping-cart-card [shopping-cart]="cart$ | async"></shopping-cart-card>
+    <shopping-cart-card [shopping-cart]="cart"></shopping-cart-card>
   </div>
 </div>

src/app/check-out/check-out.component.ts

@@ -1,39 +1,45 @@
-import { Component, OnInit } from '@angular/core';
+import { ShoppingCart } from './../models/shopping-cart';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Order } from '../models/order';
 import { ShoppingCartService } from '../services/shopping-cart.service';
 import { OrderService } from '../services/order.service';
 import { Router } from '@angular/router';
-import { UserService } from '../services/user.service';
+import { Subscription } from 'rxjs/Subscription';
+import { AuthService } from '../services/auth.service';
 
 @Component({
   selector: 'app-check-out',
   templateUrl: './check-out.component.html',
   styleUrls: ['./check-out.component.css']
 })
-export class CheckOutComponent implements OnInit {
+export class CheckOutComponent implements OnInit, OnDestroy {
 
-  order: Order = {
-    key: '',
-    name: '',
-    address: '',
-    city: '',
-    cart: null
-  };
-
-  cart$;
+  shipping = {};
+  cart: ShoppingCart;
+  cartSubscription: Subscription;
+  userId: string;
+  userSubscription: Subscription;
 
   constructor(
     private cartService: ShoppingCartService,
     private orderService: OrderService,
-    private userService: UserService,
+    private authService: AuthService,
     private router: Router) { }
 
  async ngOnInit() {
-    this.cart$ = await this.cartService.getCart();
+    const cart$ = await this.cartService.getCart();
+    this.cartSubscription = cart$.subscribe(cart => this.cart = cart);
+    this.userSubscription = this.authService.user$.subscribe(user => this.userId = user.uid);
+  }
+
+  ngOnDestroy() {
+    this.cartSubscription.unsubscribe();
+    this.userSubscription.unsubscribe();
   }
 
-  save(order) {
-    this.orderService.create(order);
-    this.router.navigate(['/order-success']);
+  async save() {
+    const order = new Order(this.userId, this.shipping, this.cart);
+    const result = await this.orderService.placeOrder(order);
+    this.router.navigate(['/sucesso', result.key]);
   }
 }

src/app/models/order.ts

@@ -2,10 +2,22 @@ import { ShoppingCart } from './shopping-cart';
 import { AppUser } from './app-user';
 
 export class Order {
+    datePlaced: number;
+    items: any[];
 
-    key: string;
-    name: string;
-    address: string;
-    city: string;
-    cart: ShoppingCart;
+    constructor(public uderId: string, public shipping: any, shoppingCart: ShoppingCart) {
+        this.datePlaced = new Date().getTime();
+
+        this.items = shoppingCart.items.map(i => {
+            return {
+                product: {
+                title: i.title,
+                imageUrl: i.imageUrl,
+                price: i.price
+                },
+                quantity: i.quantity,
+                totalPrice: i.totalPrice
+            };
+        });
+    }
 }

src/app/services/order.service.ts

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
 import { Order } from '../models/order';
 import { AngularFireDatabase } from 'angularfire2/database';
+import { ShoppingCartService } from './shopping-cart.service';
 
 @Injectable()
 export class OrderService {
 
-  constructor(private db: AngularFireDatabase) { }
+  constructor(private db: AngularFireDatabase, private service: ShoppingCartService) { }
 
-  create(order: Order) {
-    return this.db.list('/orders').push(order);
+  async placeOrder(order: Order) {
+    const result = await this.db.list('/orders').push(order);
+    this.service.clearCart();
+    return result;
   }
 
   getAll() {

src/app/shopping-cart/shopping-cart.component.html

@@ -2,6 +2,7 @@ <h1>Carrinho</h1>
 <div class="row col-10" *ngIf="cart$ | async as cart">
   <p>
     Você tem {{ cart.totalItemsCount }} itens no seu carrinho.
+    <button *ngIf="cart.items.length" class="btn btn-light btn-sm" (click)="clearCart()">Limpar Carrinho</button>
   </p>
   <table class="table">
     <thead>
@@ -31,12 +32,5 @@ <h1>Carrinho</h1>
       </tr>
     </tfoot>
   </table>
-</div>
-<div class="row">
-  <div class="col-md-2">
-    <button routerLink="/check-out" class="btn btn-primary">Check-out</button>
-  </div>
-  <div class="col-md-2">
-    <button class="btn btn-danger" (click)="clearCart()">Limpar Carrinho</button>
-  </div>
+  <button  *ngIf="cart.items.length" routerLink="/check-out" class="btn btn-primary">Check-out</button>
 </div>