latest

2017-03-11 07:37:09 -05:00
parent 8c688f0db4
commit babfea5e47
19 changed files with 641 additions and 164 deletions
--- a/store-front/src/app/app.module.ts
+++ b/store-front/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { PaymentService } from './services/payment.service';
 import { ShippingService } from './services/shipping.service';
 import { BookService } from './services/book.service';
 import { CartService } from './services/cart.service';
+import { CheckoutService } from './services/checkout.service';

 import { MyAccountComponent } from './components/my-account/my-account.component';
 import { MyProfileComponent } from './components/my-profile/my-profile.component';
@@ -27,6 +28,7 @@ import { BookListComponent } from './components/book-list/book-list.component';
 import { BookDetailComponent } from './components/book-detail/book-detail.component';
 import { ShoppingCartComponent } from './components/shopping-cart/shopping-cart.component';
 import { OrderComponent } from './components/order/order.component';
+import { OrderSummaryComponent } from './components/order-summary/order-summary.component';

@NgModule({
  declarations: [
@@ -39,7 +41,8 @@ import { OrderComponent } from './components/order/order.component';
    BookListComponent,
    BookDetailComponent,
    ShoppingCartComponent,
-    OrderComponent
+    OrderComponent,
+    OrderSummaryComponent
  ],
  imports: [
    BrowserModule,
@@ -55,7 +58,8 @@ import { OrderComponent } from './components/order/order.component';
    PaymentService,
    ShippingService,
    BookService,
-    CartService
+    CartService,
+    CheckoutService
  ],
  bootstrap: [AppComponent]
 })
--- a/store-front/src/app/app.routing.ts
+++ b/store-front/src/app/app.routing.ts
@@ -11,6 +11,8 @@ import {BookListComponent} from './components/book-list/book-list.component';
 import {BookDetailComponent} from './components/book-detail/book-detail.component';
 import {ShoppingCartComponent} from './components/shopping-cart/shopping-cart.component';
 import {OrderComponent} from './components/order/order.component';
+import { OrderSummaryComponent } from './components/order-summary/order-summary.component';
+

 const appRoutes: Routes = [
  {
@@ -45,6 +47,10 @@ const appRoutes: Routes = [
  {
    path: 'order',
    component: OrderComponent
+  },
+  {
+    path: 'orderSummary',
+    component: OrderSummaryComponent
  }
 ];

--- a/store-front/src/app/components/order-summary/order-summary.component.css
+++ b/store-front/src/app/components/order-summary/order-summary.component.css
--- a/store-front/src/app/components/order-summary/order-summary.component.html
+++ b/store-front/src/app/components/order-summary/order-summary.component.html
@@ -0,0 +1,45 @@
+<div class="container">
+    <div class="row">
+        <div class="col-xs-8">
+            <h2 class="section-headline"><span>Order Summary</span></h2>
+        </div>
+        <div class="col-xs-4">
+            <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
+        </div>
+    </div>
+    <hr style="position: absolute; width:100%; height:6px; background-color: #333; z-index: -1; margin-top: -80px;" />
+    <img class="img-responsive" src="{{serverPath}}/image/wood.png" style="margin-top: -75px;" />
+    <div class="row" style="margin-top: 120px;">
+        <div class="col-xs-12">
+            <div class="alert alert-success">
+                <h3><i class="fa fa-check" aria-hidden="true" style="color: limegreen"></i> Thank you, your order has
+                    been placed.</h3>
+                <h4>
+                    The estimated delivery date is <span>{{estimatedDeliveryDate}}</span></h4>
+            </div>
+            <h3>List of Items</h3>
+
+            <div class="row " *ngFor="let cartItem of cartItemList ">
+                <hr/>
+                <div class="col-xs-2 ">
+                    <a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
+                </div>
+                <div class="col-xs-6 ">
+                    <a class="pointer" (click)="onSelect(cartItem.book)"><h4>{{cartItem.book.title}}</h4></a>
+                    <p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
+                    <p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
+                    </p>
+                    <p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
+                </div>
+                <div class="col-xs-2 ">
+                    <h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"
+                                                                             >{{cartItem.book.ourPrice}}</span>
+                        </h5>
+                </div>
+                <div class="col-xs-2 text-center ">
+                    <h5 style="font-size: large ">{{cartItem.qty}}</h5>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
--- a/store-front/src/app/components/order-summary/order-summary.component.spec.ts
+++ b/store-front/src/app/components/order-summary/order-summary.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { OrderSummaryComponent } from './order-summary.component';
+
+describe('OrderSummaryComponent', () => {
+  let component: OrderSummaryComponent;
+  let fixture: ComponentFixture<OrderSummaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderSummaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/store-front/src/app/components/order-summary/order-summary.component.ts
+++ b/store-front/src/app/components/order-summary/order-summary.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {AppConst} from '../../constants/app-const';
+
+
+@Component({
+  selector: 'app-order-summary',
+  templateUrl: './order-summary.component.html',
+  styleUrls: ['./order-summary.component.css']
+})
+export class OrderSummaryComponent implements OnInit {
+  private serverPath = AppConst.serverPath;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/store-front/src/app/components/order/order.component.html
+++ b/store-front/src/app/components/order/order.component.html
@@ -1,7 +1,7 @@
 <div class="container">
    <div class="row">
        <div class="col-xs-8">
-            <h2 class="section-headline"><span>Shopping Cart</span></h2>
+            <h2 class="section-headline"><span>Checkout</span></h2>
        </div>
        <div class="col-xs-4">
            <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
@@ -294,16 +294,17 @@
                            </div>
                            <div class="panel-body ">
                                <h4>Choose your shipping method:</h4>
-                                <div class="radio ">
+                                <div class="radio">
                                    <label>
-                                        <input type="radio" name="shippingMethod " value="groundShipping " checked="checked " /> Ground Shipping
+                                        <input type="radio" name="shippingMethod" value="groundShipping" [(ngModel)]="shippingMethod" /> Ground Shipping
                                    </label>
                                </div>
-                                <div class="radio ">
+                                <div class="radio">
                                    <label>
-                                        <input type="radio" name="shippingMethod " value="premiumShipping " /> Premium Shipping
+                                        <input type="radio" name="shippingMethod" value="premiumShipping" [(ngModel)]="shippingMethod" /> Premium Shipping
                                    </label>
                                </div>
+                                
                                <div class="row ">
                                    <div class="col-xs-8 ">
                                        <h4>Products</h4></div>
--- a/store-front/src/app/components/order/order.component.ts
+++ b/store-front/src/app/components/order/order.component.ts
@@ -5,6 +5,7 @@ import {Router} from "@angular/router";
 import {CartService} from '../../services/cart.service';
 import {ShippingService} from '../../services/shipping.service';
 import {PaymentService} from '../../services/payment.service';
+import {CheckoutService} from '../../services/checkout.service';
 import {CartItem} from '../../models/cart-item';
 import {ShoppingCart} from '../../models/shopping-cart';
 import {ShippingAddress} from '../../models/shipping-address';
@@ -14,6 +15,7 @@ import {UserBilling} from '../../models/user-billing';
 import {UserShipping} from '../../models/user-shipping';
 import {Payment} from '../../models/payment';

+
@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
@@ -38,12 +40,14 @@ export class OrderComponent implements OnInit {
  private emptyShippingList: boolean = true;
  private emptyPaymentList: boolean = true;
  private stateList: string[] = [];
+  private shippingMethod:string;

  constructor(
  	private router:Router, 
  	private cartService: CartService, 
  	private shippingService: ShippingService,
-  	private paymentService: PaymentService
+  	private paymentService: PaymentService,
+  	private checkoutService: CheckoutService
  	) { }

  onSelect(book:Book) {
@@ -87,26 +91,26 @@ export class OrderComponent implements OnInit {

  setPaymentMethod(userPayment: UserPayment) {
  	this.payment.type = userPayment.type;
-  	this.payment.cardName = userPayment.cardName;
  	this.payment.cardNumber = userPayment.cardNumber;
  	this.payment.expiryMonth = userPayment.expiryMonth;
  	this.payment.expiryYear = userPayment.expiryYear;
  	this.payment.cvc = userPayment.cvc;
  	this.payment.holderName = userPayment.holderName;
  	this.payment.defaultPayment = userPayment.defaultPayment;
-  	this.payment.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
-  	this.payment.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
-  	this.payment.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
-  	this.payment.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
-  	this.payment.billingAddress.billingAddressState = userPayment.userBilling.userBillingState;
-  	this.payment.billingAddress.billingAddressCountry = userPayment.userBilling.userBillingCountry;
-  	this.payment.billingAddress.billingAddressZipcode = userPayment.userBilling.userBillingZipcode;
+  	this.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
+  	this.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
+  	this.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
+  	this.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
+  	this.billingAddress.billingAddressState = userPayment.userBilling.userBillingState;
+  	this.billingAddress.billingAddressCountry = userPayment.userBilling.userBillingCountry;
+  	this.billingAddress.billingAddressZipcode = userPayment.userBilling.userBillingZipcode;
  }

  setBillingAsShipping(checked:boolean){
  	console.log("same as shipping")

  	if(checked) {
+  	this.billingAddress.billingAddressName = this.shippingAddress.shippingAddressName;
  	this.billingAddress.billingAddressStreet1 = this.shippingAddress.shippingAddressStreet1;
  	this.billingAddress.billingAddressStreet2 = this.shippingAddress.shippingAddressStreet2;
  	this.billingAddress.billingAddressCity = this.shippingAddress.shippingAddressCity;
@@ -114,6 +118,7 @@ export class OrderComponent implements OnInit {
  	this.billingAddress.billingAddressCountry = this.shippingAddress.shippingAddressCountry;
  	this.billingAddress.billingAddressZipcode = this.shippingAddress.shippingAddressZipcode;
  } else {
+  	this.billingAddress.billingAddressName = "";
  	this.billingAddress.billingAddressStreet1 = "";
  	this.billingAddress.billingAddressStreet2 = "";
  	this.billingAddress.billingAddressCity = "";
@@ -123,7 +128,23 @@ export class OrderComponent implements OnInit {
  }
  }

+  onSubmit(){
+  	this.checkoutService.checkout(
+  			this.shippingAddress,
+  			this.billingAddress,
+  			this.payment,
+  			this.shippingMethod
+  		).subscribe(
+      res=>{
+          console.log(res.text());
+        },
+        error=>{
+          console.log(error.text());
+        }
+    );

+  	this.router.navigate(['/orderSummary']);
+  }

  ngOnInit() {
  	this.getCartItemList();
@@ -165,12 +186,12 @@ export class OrderComponent implements OnInit {
    	this.stateList.push(s);
    }

-    this.payment.billingAddress = this.billingAddress;
    this.payment.type="";
    this.payment.expiryMonth="";
    this.payment.expiryYear="";
    this.billingAddress.billingAddressState="";
    this.shippingAddress.shippingAddressState="";
+    this.shippingMethod="groundShipping";
  }


--- a/store-front/src/app/components/shopping-cart/shopping-cart.component.html
+++ b/store-front/src/app/components/shopping-cart/shopping-cart.component.html
@@ -1,7 +1,7 @@
 <div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="col-xs-8">
-            <h2 class="section-headline"><span>Checkout</span></h2>
+            <h2 class="section-headline"><span>Shopping Cart</span></h2>
        </div>
        <div class="col-xs-4">
            <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
--- a/store-front/src/app/models/billing-address.ts
+++ b/store-front/src/app/models/billing-address.ts
@@ -7,4 +7,5 @@ export class BillingAddress {
    public billingAddressState:string;
    public billingAddressCountry:string;
    public billingAddressZipcode:string;
+    public order: Order;
 }
--- a/store-front/src/app/models/payment.ts
+++ b/store-front/src/app/models/payment.ts
@@ -3,7 +3,6 @@ import {BillingAddress} from './billing-address';
 export class Payment {
 	public id: number;
    public type: string;
-    public cardName: string;
    public cardNumber: string;
    public expiryMonth: string;
    public expiryYear: string;
--- a/store-front/src/app/models/shipping-address.ts
+++ b/store-front/src/app/models/shipping-address.ts
@@ -1,3 +1,5 @@
+import {Order} from "./order";
+
 export class ShippingAddress {
    public id:number;
    public shippingAddressName:string;
@@ -7,4 +9,5 @@ export class ShippingAddress {
    public shippingAddressState:string;
    public shippingAddressCountry:string;
    public shippingAddressZipcode:string;
+    public order:Order;
 }
--- a/store-front/src/app/services/checkout.service.spec.ts
+++ b/store-front/src/app/services/checkout.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CheckoutService } from './checkout.service';
+
+describe('CheckoutService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CheckoutService]
+    });
+  });
+
+  it('should ...', inject([CheckoutService], (service: CheckoutService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/store-front/src/app/services/checkout.service.ts
+++ b/store-front/src/app/services/checkout.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import {Headers, Http} from "@angular/http";
+import {AppConst} from '../constants/app-const';
+import {ShippingAddress} from '../models/shipping-address';
+import {BillingAddress} from '../models/billing-address';
+import {Payment} from '../models/payment';
+
+@Injectable()
+export class CheckoutService {
+
+  constructor(private http: Http) { }
+
+  checkout(
+  		shippingAddress:ShippingAddress,
+  		billingAddress:BillingAddress,
+  		payment:Payment,
+  		shippingMethod:string
+  	) {
+    let url = AppConst.serverPath+"/checkout/checkout";
+    let order = {
+    	"shippingAddress" : shippingAddress,
+    	"billingAddress" : billingAddress,
+    	"payment" : payment,
+    	"shippingMethod" : shippingMethod
+    }
+    let tokenHeader = new Headers ({
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.post(url, order, {headers : tokenHeader});
+  }
+
+}