Skip to content

G
getme
Commit e59c26e6 by Arjun
Options

succes, order failed, empty cart -UI

parent aa11ddb9
Showing with 451 additions and 30 deletions
src/app/app-routing.module.ts
...@@ -97,7 +97,9 @@ const routes: Routes = [ ...@@ -97,7 +97,9 @@ const routes: Routes = [
loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule' loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
}, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' }, }, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
{ path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' }, { path: 'feedback', loadChildren: './feedback/feedback.module#FeedbackPageModule' },
{ path: 'address', loadChildren: './address/address.module#AddressPageModule' } { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
{ path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
{ path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' }
]; ];
@NgModule({ @NgModule({
......
src/app/cart/cart.page.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<h4>CART</h4> <h4>CART</h4>
</div> </div>
<button class="nav_btn floatRight"> <button class="nav_btn floatRight">
</button> </button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -27,6 +27,11 @@ ...@@ -27,6 +27,11 @@
</ul> </ul>
</div> </div>
<div class="cart_content"> <div class="cart_content">
<div class="no-items-wrapper">
<img src="../../assets/noitem.png">
<h1>There is no products added</h1>
<button>Shop Now</button>
</div>
<ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()"> <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
<ion-slide> <ion-slide>
<div class="cart_list" *ngIf="cartService.carts"> <div class="cart_list" *ngIf="cartService.carts">
...@@ -63,9 +68,10 @@ ...@@ -63,9 +68,10 @@
<div class="checkout_list"> <div class="checkout_list">
<h5> <h5>
<span class="floatLeft">ITEMS</span> <span class="floatLeft">ITEMS</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span> <span class="floatRight" *ngIf="cartService.cartTotal">A$
{{cartService.cartTotal}}</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0"> <ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
<ion-row *ngFor="let carts of cartService.carts"> <ion-row *ngFor="let carts of cartService.carts">
<ion-col size="6" class="p0"> <ion-col size="6" class="p0">
...@@ -89,7 +95,7 @@ ...@@ -89,7 +95,7 @@
<ion-row> <ion-row>
<ion-col class="p0"> <ion-col class="p0">
<h6> <h6>
{{custAddress.building}},<br/> {{custAddress.landmark}},<br/> {{custAddress.address}} {{custAddress.building}},<br /> {{custAddress.landmark}},<br /> {{custAddress.address}}
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
...@@ -149,25 +155,29 @@ ...@@ -149,25 +155,29 @@
<hr> <hr>
<div class="coupon_code"> <div class="coupon_code">
<input class="" placeholder="COUPON CODE" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button> <input class="" placeholder="COUPON CODE" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button>
<br/>&nbsp;<h6>GET50</h6> <br />&nbsp;
<h6>GET50</h6>
<span *ngIf="discountApplied" style="color: red">Promocode applied successfully </span> <span *ngIf="discountApplied" style="color: red">Promocode applied successfully </span>
</div> </div>
<br/> <br />
<h6> <h6>
<span class="floatLeft">PRODUCT COST</span> <span class="floatLeft">PRODUCT COST</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{cartService.cartTotal}}</span> <span class="floatRight" *ngIf="cartService.cartTotal">A$
{{cartService.cartTotal}}</span>
<div class="clear"></div> <div class="clear"></div>
</h6> </h6>
<h6> <h6>
<span class="floatLeft">DELIVERY CHARGE</span> <span class="floatLeft">DELIVERY CHARGE</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getDeliveryCharge(cartService.cartTotal)}}</span> <span class="floatRight" *ngIf="cartService.cartTotal">A$
{{getDeliveryCharge(cartService.cartTotal)}}</span>
<div class="clear"></div> <div class="clear"></div>
</h6> </h6>
<h6> <h6>
<span class="floatLeft">GST/TAX</span> <span class="floatLeft">GST/TAX</span>
<span class="floatRight" *ngIf="cartService.cartTotal">A$ {{getTax(cartService.cartTotal)}}</span> <span class="floatRight" *ngIf="cartService.cartTotal">A$
{{getTax(cartService.cartTotal)}}</span>
<div class="clear"></div> <div class="clear"></div>
</h6> </h6>
<h6 *ngIf="discountApplied"> <h6 *ngIf="discountApplied">
...@@ -182,7 +192,8 @@ ...@@ -182,7 +192,8 @@
<p class="textLeft">Total Price:</p> <p class="textLeft">Total Price:</p>
</ion-col> </ion-col>
<ion-col> <ion-col>
<p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}</p> <p class="textRight" *ngIf="cartService.cartTotal">A$ {{getTotal(cartService.cartTotal)}}
</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
...@@ -200,6 +211,7 @@ ...@@ -200,6 +211,7 @@
</div> </div>
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</div> </div>
</div> </div>
</div> </div>
...@@ -262,5 +274,4 @@ ...@@ -262,5 +274,4 @@
</div> </div>
</ion-content> </ion-content>
</div> </div>
\ No newline at end of file
src/app/cart/cart.page.scss
...@@ -403,6 +403,30 @@ ...@@ -403,6 +403,30 @@
font-weight: 900; font-weight: 900;
} }
} }
.no-items-wrapper {
text-align: center;
padding-top: 40%;
img {
width: 100px;
}
h1 {
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
color: #3B394D;
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 10px;
}
}
} }
} }
} }
......
src/app/failed/failed.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { FailedPage } from './failed.page';
const routes: Routes = [
{
path: '',
component: FailedPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [FailedPage]
})
export class FailedPageModule {}
src/app/failed/failed.page.html 0 → 100644
<ion-content>
<div class="orderfailed-wrapper">
<div class="head">
<img src="../../assets/failed.png">
<h1>Order Failed</h1>
</div>
<div class="content">
<h1>Something went wrong</h1>
<h2>Please check your network or details you <br> provided and try again</h2>
</div>
<button>View Orders</button>
<h3>home</h3>
</div>
</ion-content>
\ No newline at end of file
src/app/failed/failed.page.scss 0 → 100644
.orderfailed-wrapper {
padding: 20px;
text-align: center;
.head {
img {
width: 60px;
}
h1 {
font-size: 18px;
text-transform: uppercase;
color: #29285B;
font-weight: bolder;
margin-top: 15px;
}
}
.content {
margin-top: 30px;
h1 {
color: #B0AEC7;
font-weight: bolder;
margin: 0;
font-size: 16px;
}
h2 {
color: #B0AEC7;
margin-top: 5px;
font-size: 16px;
}
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 50px;
}
h3 {
color: #29285b;
background: none;
font-size: 20px;
font-weight: bolder;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 50px;
}
}
\ No newline at end of file
src/app/failed/failed.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FailedPage } from './failed.page';
describe('FailedPage', () => {
let component: FailedPage;
let fixture: ComponentFixture<FailedPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FailedPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FailedPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/failed/failed.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-failed',
templateUrl: './failed.page.html',
styleUrls: ['./failed.page.scss'],
})
export class FailedPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/productlist/productlist.page.html
...@@ -31,7 +31,9 @@ ...@@ -31,7 +31,9 @@
<ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0"> <ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
<li *ngFor="let product of prodService.product; let i = index"> <li *ngFor="let product of prodService.product; let i = index">
<div class="product_image"> <div class="product_image">
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)"> <div class="load-back">
<img [src]="product.image" onerror="this.src='../assets/[email protected]'" (click)="prodDetails(i)">
</div>
<div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"> <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
</div> </div>
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="featured_badge" *ngIf="product.featured">Featured</div>
...@@ -76,7 +78,7 @@ ...@@ -76,7 +78,7 @@
</div> </div>
</ion-content> </ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]> <div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul *ngIf="searchService.searchList"> <ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li> <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
</ul> </ul>
</div> </div>
\ No newline at end of file \ No newline at end of file
src/app/productlist/productlist.page.scss
...@@ -256,4 +256,11 @@ ...@@ -256,4 +256,11 @@
} }
} }
} }
}
.load-back {
height: 100%;
width: 100%;
background-image: url("../../assets/giphy.gif");
background-position: center;
} }
\ No newline at end of file
src/app/profile/profile.page.html
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="profile_wrapper" *ngIf="loggedUser"> <div class="profile_wrapper" *ngIf="loggedUser">
<div class="profile_banner"> <div class="profile_banner">
...@@ -109,18 +111,20 @@ ...@@ -109,18 +111,20 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
</div> <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]> <div class="logout_inner">
<div class="logout_inner"> <h4>Logout</h4>
<h4>Logout</h4> <p>Are you sure to Logout ?</p>
<p>Are you sure to Logout ?</p> <div class="logout_footer">
<div class="logout_footer"> <button class="btn-cancel floatLeft" (click)="istoggle();">
Cancel
</button>
<button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">
Logout
</button>
<button class="btn-cancel floatLeft" (click)="istoggle();">Cancel</button> <div class="clear"></div>
<button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">Logout</button> </div>
<div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/success/success.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SuccessPage } from './success.page';
const routes: Routes = [
{
path: '',
component: SuccessPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SuccessPage]
})
export class SuccessPageModule {}
src/app/success/success.page.html 0 → 100644
<ion-content>
<div class="success_wrapper">
<div class="cart_head">
<div class="cart_menu_header">
<ul>
<li class="textCenter active">CART</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter">CHECKOUT</li>
<li class="textCenter">
<hr>
</li>
<li class="textCenter">FINISH</li>
</ul>
</div>
<div class="success-set">
<img src="../../assets/white_tick.png">
<h1>Order is placed</h1>
<h2>June 26th 2019, 03:00 PM</h2>
</div>
</div>
<div class="product-countdown">
<h1>The product will be delivered in</h1>
<h2>00:59<span>30</span></h2>
<button>View Orders</button>
<h3>home</h3>
</div>
</div>
</ion-content>
\ No newline at end of file
src/app/success/success.page.scss 0 → 100644
.success_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: auto;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 35px;
.nav_header {
position: static;
background-color: transparent;
.nav_title {
h4 {
color: #FFF;
}
}
}
.cart_menu_header {
padding: 50px 20px 20px 20px;
ul {
margin: 0px;
padding: 10px;
background-color: rgba(273, 273, 273, 0.1);
border-radius: 10px;
li {
list-style: none;
color: #FFF;
width: 20%;
display: inline-block;
font-weight: 700;
font-size: 13px;
hr {
height: 0px;
border-top: none;
width: 90%;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
margin: 0 auto;
border-bottom: 2px dashed rgba(176, 174, 199, 1);
bottom: 4px;
}
}
}
}
.success-set {
text-align: center;
margin-top: 50px;
img {
width: 75px;
}
h1 {
color: #fff;
font-size: 18px;
font-weight: bolder;
margin-top: 5px;
margin-bottom: 0;
text-transform: uppercase;
}
h2 {
color: #fff;
font-size: 12px;
font-weight: lighter;
margin-top: 2px;
}
}
}
.product-countdown {
padding: 20px;
text-align: center;
margin-top: 25px;
h1 {
color: #B0AEC7;
font-size: 16px;
margin-top: 10px;
}
h2 {
color: #3B394D;
font-size: 40px;
font-weight: bolder;
margin-top: 15px;
span {
font-size: 16px;
font-weight: lighter;
}
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 25px;
margin-bottom: 50px;
}
h3 {
color: #29285b;
background: none;
font-size: 20px;
font-weight: bolder;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 50px;
}
}
}
@media only screen and (max-width: 350px) {
.cart_head {
padding-bottom: 15px !important;
.cart_menu_header {
padding: 20px !important;
ul {
li {
font-size: 12px !important;
}
}
}
.success-set {
margin-top: 0 !important;
}
}
}
\ No newline at end of file
src/app/success/success.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SuccessPage } from './success.page';
describe('SuccessPage', () => {
let component: SuccessPage;
let fixture: ComponentFixture<SuccessPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SuccessPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SuccessPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/success/success.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-success',
templateUrl: './success.page.html',
styleUrls: ['./success.page.scss'],
})
export class SuccessPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/global.scss
...@@ -422,6 +422,10 @@ app-deliverypop { ...@@ -422,6 +422,10 @@ app-deliverypop {
padding: 0px !important; padding: 0px !important;
} }
app-success {
padding: 0px !important;
}
.nav_header { .nav_header {
position: fixed; position: fixed;
top: 0px; top: 0px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment