30-04-2019|15:52

src/app/purchase/addaddress/addaddress.component.html

+<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

src/app/purchase/addaddress/addaddress.component.scss

+.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

src/app/purchase/addaddress/addaddress.component.spec.ts

+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();
+  });
+});

src/app/purchase/addaddress/addaddress.component.ts

+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;
+  }
+}

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>

src/app/purchase/ordersuccess/ordersuccess.component.html

+<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>[email protected]</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

src/app/purchase/ordersuccess/ordersuccess.component.scss

+.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

src/app/purchase/ordersuccess/ordersuccess.component.spec.ts

+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();
+  });
+});

src/app/purchase/ordersuccess/ordersuccess.component.ts

+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() {
+  }
+
+}

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,

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}
 
 ];
 

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>

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{