diff --git a/src/app/purchase/addaddress/addaddress.component.html b/src/app/purchase/addaddress/addaddress.component.html
new file mode 100644
index 0000000..3587c6e
--- /dev/null
+++ b/src/app/purchase/addaddress/addaddress.component.html
@@ -0,0 +1,56 @@
+<div class="purchase_wrapper">
+ <div class="container-fluid">
+ <app-searchbar>
+ </app-searchbar>
+ <div class="add_address_wrapper">
+ <h4>Add New Address</h4>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Name*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Phone Number*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>House number or Building number*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Area, Road or Colony*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>State*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>City*</p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <p>Land mark <span>(Optional)</span></p>
+ <input class="" type="text">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <button class="add_btn" (click)="goToPage('address')">Add Address</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/purchase/addaddress/addaddress.component.scss b/src/app/purchase/addaddress/addaddress.component.scss
new file mode 100644
index 0000000..e684d5e
--- /dev/null
+++ b/src/app/purchase/addaddress/addaddress.component.scss
@@ -0,0 +1,46 @@
+.purchase_wrapper{
+ .add_address_wrapper{
+ width:calc(100% - 50%);
+ padding-top:30px;
+ margin:0 auto;
+ h4{
+ font-size: 20px;
+ padding-bottom: 40px;
+ }
+ p{
+ margin: 0px;
+ padding-bottom: 15px;
+ font-weight: 600;
+ span{
+ color: #99a7b6;
+ }
+ }
+ input{
+ width:100%;
+ background: #fff;
+ border:none;
+ border-radius:5px;
+ height:45px;
+ padding-left:10px;
+ padding-right: 10px;
+ -webkit-box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
+-moz-box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
+box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
+ &:focus{
+ outline: none;
+ }
+ }
+ .row{
+ padding-bottom: 20px;
+ }
+
+ .add_btn{
+ width:100%;
+ background: #2655bf;
+ color: #fff;
+ text-align: center;
+ height: 45px;
+ border:none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/purchase/addaddress/addaddress.component.spec.ts b/src/app/purchase/addaddress/addaddress.component.spec.ts
new file mode 100644
index 0000000..fc6c778
--- /dev/null
+++ b/src/app/purchase/addaddress/addaddress.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddaddressComponent } from './addaddress.component';
+
+describe('AddaddressComponent', () => {
+ let component: AddaddressComponent;
+ let fixture: ComponentFixture<AddaddressComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AddaddressComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AddaddressComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/purchase/addaddress/addaddress.component.ts b/src/app/purchase/addaddress/addaddress.component.ts
new file mode 100644
index 0000000..308d4cf
--- /dev/null
+++ b/src/app/purchase/addaddress/addaddress.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+ selector: 'app-addaddress',
+ templateUrl: './addaddress.component.html',
+ styleUrls: ['./addaddress.component.scss']
+})
+export class AddaddressComponent implements OnInit {
+
+ constructor(
+ private router : Router,
+ private route : ActivatedRoute
+ ) { }
+
+ ngOnInit() {
+ }
+
+ goToPage(path,data=null){
+ this.router.navigateByUrl(path,{queryParams:data});
+ document.body.scrollTop = document.documentElement.scrollTop = 0;
+ }
+}
diff --git a/src/app/purchase/address/address.component.html b/src/app/purchase/address/address.component.html
index 1756548..9cfee59 100644
--- a/src/app/purchase/address/address.component.html
+++ b/src/app/purchase/address/address.component.html
@@ -27,7 +27,7 @@
Edit
</div>
</li>
- <div class="add_new">
+ <div class="add_new" (click)="goToPage('addaddress')">
Add new Address
</div>
</ul>
diff --git a/src/app/purchase/ordersuccess/ordersuccess.component.html b/src/app/purchase/ordersuccess/ordersuccess.component.html
new file mode 100644
index 0000000..cf25c57
--- /dev/null
+++ b/src/app/purchase/ordersuccess/ordersuccess.component.html
@@ -0,0 +1,93 @@
+<div class="purchase_wrapper">
+ <!-- <div class="order_success_banner">
+ <h4>Order Success!</h4>
+ <p>Total item 1, Payment Successfull</p>
+ <button class="order">Go to my orders</button>
+ </div>
+ <div class="container-fluid">
+ <div class="summary_wrapper">
+ <div class="summary_wrapper_inner">
+ <h4>Product Details</h4>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="image_div"></div>
+ <div class="image_detail">
+ <h5>Appolo Amazer Tubeless 4 Wheeler</h5>
+ <p>Audi Q7</p>
+ </div>
+ <div class="clear"></div>
+ </div>
+ <div class="col-md-6">
+ <h6>
+ <span class="head">Color</span>
+ <span>Black</span>
+ </h6>
+ </div>
+ </div>
+ <hr>
+ <h4>Delivery Address</h4>
+ <div class="row">
+ <div class="col-md-6">
+ <h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2>
+ <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p>
+ </div>
+ <div class="col-md-6">
+ <p>Delivery Expected by Thursday 29 April, 2019</p>
+ </div>
+ </div>
+ <hr>
+ <h4>Payment Details</h4>
+ <div class="row">
+ <div class="col-md-6">
+ <p class="p0">Quantity </p>
+ </div>
+ <div class="col-md-6">
+ <p><strong>1</strong></p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <p>Total Amount</p>
+ </div>
+ <div class="col-md-6">
+ <p><strong style="font-size: 18px;">$ 399</strong></p>
+ </div>
+ </div>
+ <hr>
+ <div class="row">
+ <div class="col-md-6">
+ <p>Order Confirmation mail will be sent to your mail ID <a>dummy@gmail.com</a> </p>
+ </div>
+ <div class="col-md-6">
+ <button class="continue_btn">Continue</button>
+ <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
+ <div class="clear"></div>
+ </div>
+ </div>
+ <hr>
+ </div>
+ </div>
+ </div> -->
+ <!-- <div class="order_failed">
+ <div class="container-fluid">
+ <div class="order_failed">
+ <img src="assets/images/order_failed.png">
+ <h4>Order Failed!</h4>
+ <p>Something went wrong</p>
+ <button class="go_home">Go home</button>
+ <button class="order_again">Order again</button>
+ </div>
+ </div>
+ </div> -->
+
+ <div class="order_failed">
+ <div class="container-fluid">
+ <div class="order_failed">
+ <img src="assets/images/no_result.png">
+ <h4>Oops !</h4>
+ <p>We could find your search results</p>
+ <button class="go_home">Go home</button>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/purchase/ordersuccess/ordersuccess.component.scss b/src/app/purchase/ordersuccess/ordersuccess.component.scss
new file mode 100644
index 0000000..7390e06
--- /dev/null
+++ b/src/app/purchase/ordersuccess/ordersuccess.component.scss
@@ -0,0 +1,156 @@
+.purchase_wrapper{
+ .order_success_banner{
+ background: url("/assets/images/order_banner.png");
+ margin-bottom: 30px;
+ background-position: center;
+ background-size:cover;
+ background-repeat: no-repeat;
+ text-align: center;
+ padding-top: 50px;
+ padding-bottom: 50px;
+ .order{
+ background: #2655bf;
+ color: #fff;
+ border:none;
+ height: 40px;
+ padding-left:2%;
+ padding-right:2%;
+ }
+
+
+ }
+ .summary_wrapper{
+ h3{
+ font-size: 20px;
+ padding-bottom: 20px;
+ }
+ .summary_wrapper_inner{
+ background: #fff;
+ padding:25px;
+ hr{
+ margin-top: 25px;
+ margin-bottom: 25px;
+ }
+ h4{
+ color: #92a1b1;
+ padding-bottom: 10px;
+ font-size: 16px;
+ font-weight: 600;
+ }
+ h6{
+ span{
+
+ }
+ .head{
+ color: #92a1b1;
+ padding-right: 20px;
+ }
+ }
+ .image_div{
+ width:100px;
+ height:100px;
+ float: left;
+ border:1px solid #eee;
+ img{
+ width:100%;
+ height:100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ }
+ .image_detail{
+ float: left;
+ padding: 15px;
+ }
+
+ h2{
+ font-size: 18px;
+ margin:0px;
+ font-weight: 700;
+ padding-bottom: 10px;
+ .address{
+ color: #92a1b1;
+ margin-left: 10px;
+ margin-right: 10px;
+ font-weight: 600;
+ }
+ .number{
+ margin-left:30px;
+ font-weight:400;
+ }
+ }
+
+ p{
+ padding-top: 10px;
+ margin: 0px;
+ a{
+ color: #92a1b1;
+ text-decoration: none;
+ }
+ }
+
+ .continue_btn{
+ background: #2655bf;
+ color: #fff;
+ height: 45px;
+ padding: 8px;
+ padding-left: 8%;
+ padding-right: 8%;
+ border:none;
+ text-align: center;
+ cursor: pointer;
+ }
+ }
+ }
+}
+
+.order_failed{
+ text-align: center;
+ padding-top:8%;
+ padding-bottom:8%;
+ img{
+ margin-bottom: 20px;
+ }
+ h4{
+ margin:0px;
+ padding:0px;
+ font-weight: 600;
+ font-size: 35px;
+ }
+ p{
+ margin:0px;
+ padding:0px;
+ padding-bottom: 30px;
+ font-size:15px;
+ }
+ .go_home{
+ background: #eaeff4;
+ color: #000;
+ height: 45px;
+ padding: 8px;
+ padding-left:3%;
+ padding-right:3%;
+ border:none;
+ text-align: center;
+ cursor: pointer;
+ -webkit-box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+-moz-box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+margin:5px;
+ }
+ .order_again{
+ background: #2655bf;
+ color: #fff;
+ height: 45px;
+ padding: 8px;
+ padding-left:3%;
+ padding-right:3%;
+ border:none;
+ text-align: center;
+ cursor: pointer;
+ -webkit-box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+-moz-box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+box-shadow: 1px -1px 3px -1px rgba(0,0,0,0.75);
+margin:5px;
+ }
+}
\ No newline at end of file
diff --git a/src/app/purchase/ordersuccess/ordersuccess.component.spec.ts b/src/app/purchase/ordersuccess/ordersuccess.component.spec.ts
new file mode 100644
index 0000000..0a30ba6
--- /dev/null
+++ b/src/app/purchase/ordersuccess/ordersuccess.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrdersuccessComponent } from './ordersuccess.component';
+
+describe('OrdersuccessComponent', () => {
+ let component: OrdersuccessComponent;
+ let fixture: ComponentFixture<OrdersuccessComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OrdersuccessComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OrdersuccessComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/purchase/ordersuccess/ordersuccess.component.ts b/src/app/purchase/ordersuccess/ordersuccess.component.ts
new file mode 100644
index 0000000..93dbaa8
--- /dev/null
+++ b/src/app/purchase/ordersuccess/ordersuccess.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-ordersuccess',
+ templateUrl: './ordersuccess.component.html',
+ styleUrls: ['./ordersuccess.component.scss']
+})
+export class OrdersuccessComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/purchase/purchase.module.ts b/src/app/purchase/purchase.module.ts
index 08108e2..9465d3b 100644
--- a/src/app/purchase/purchase.module.ts
+++ b/src/app/purchase/purchase.module.ts
@@ -14,10 +14,12 @@ import { TrackComponent } from './track/track.component';
import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
import { TooltipModule } from 'ng2-tooltip-directive';
+import { AddaddressComponent } from './addaddress/addaddress.component';
+import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
@NgModule({
- declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent],
+ declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent],
imports: [
CommonModule,
moduleRouting,
diff --git a/src/app/purchase/purchase.routing.ts b/src/app/purchase/purchase.routing.ts
index 64329c1..e99b5e3 100644
--- a/src/app/purchase/purchase.routing.ts
+++ b/src/app/purchase/purchase.routing.ts
@@ -8,16 +8,20 @@ import { RatingComponent } from './rating/rating.component';
import { TrackComponent } from './track/track.component';
import { AddressComponent } from './address/address.component';
import { SummaryComponent } from './summary/summary.component';
+import { AddaddressComponent } from './addaddress/addaddress.component';
+import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
const ModuleRoutes: Routes = [
{ path: 'productlist', component: ProductlistComponent},
{ path: 'productdetails', component: ProductdetailsComponent},
{ path: 'cart', component: CartComponent },
- { path: 'orders', component: OrdersComponent },
- { path: 'rating', component: RatingComponent },
- { path: 'track', component: TrackComponent },
- { path: 'address', component: AddressComponent },
- { path: 'summary', component: SummaryComponent }
+ { path: 'orders', component: OrdersComponent},
+ { path: 'rating', component: RatingComponent},
+ { path: 'track', component: TrackComponent},
+ { path: 'address', component: AddressComponent},
+ { path: 'summary', component: SummaryComponent},
+ { path: 'addaddress', component: AddaddressComponent},
+ { path: 'ordersuccess', component: OrdersuccessComponent}
];
diff --git a/src/app/purchase/summary/summary.component.html b/src/app/purchase/summary/summary.component.html
index 41afcf2..e03f564 100644
--- a/src/app/purchase/summary/summary.component.html
+++ b/src/app/purchase/summary/summary.component.html
@@ -37,7 +37,7 @@
<h4>Payment Details</h4>
<div class="row">
<div class="col-md-6">
- <p>Quantity </p>
+ <p class="p0">Quantity </p>
</div>
<div class="col-md-6">
<p><strong>1</strong></p>
diff --git a/src/app/purchase/summary/summary.component.scss b/src/app/purchase/summary/summary.component.scss
index 438eab7..b13b095 100644
--- a/src/app/purchase/summary/summary.component.scss
+++ b/src/app/purchase/summary/summary.component.scss
@@ -14,8 +14,8 @@
h4{
color: #92a1b1;
padding-bottom: 10px;
- font-size: 18px;
- font-weight: 500;
+ font-size: 16px;
+ font-weight: 600;
}
h6{
span{
diff --git a/src/assets/images/no_result.png b/src/assets/images/no_result.png
new file mode 100644
index 0000000..0f101b1
Binary files /dev/null and b/src/assets/images/no_result.png differ
diff --git a/src/assets/images/order_banner.png b/src/assets/images/order_banner.png
new file mode 100644
index 0000000..a76a546
Binary files /dev/null and b/src/assets/images/order_banner.png differ
diff --git a/src/assets/images/order_failed.png b/src/assets/images/order_failed.png
new file mode 100644
index 0000000..32cdd16
Binary files /dev/null and b/src/assets/images/order_failed.png differ