Skip to content

G
getme
Commit e59c26e6 by Arjun
Options

succes, order failed, empty cart -UI

parent aa11ddb9
Showing with 619 additions and 198 deletions
src/app/app-routing.module.ts
......@@ -97,7 +97,9 @@ const routes: Routes = [
loadChildren: './searchmodal/searchmodal.module#SearchmodalPageModule'
}, { path: 'noresult', loadChildren: './noresult/noresult.module#NoresultPageModule' },
{ 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({
......
src/app/cart/cart.page.html
......@@ -9,7 +9,7 @@
<h4>CART</h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
......@@ -27,6 +27,11 @@
</ul>
</div>
<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-slide>
<div class="cart_list" *ngIf="cartService.carts">
......@@ -63,9 +68,10 @@
<div class="checkout_list">
<h5>
<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>
</h5>
</h5>
<ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
<ion-row *ngFor="let carts of cartService.carts">
<ion-col size="6" class="p0">
......@@ -89,7 +95,7 @@
<ion-row>
<ion-col class="p0">
<h6>
{{custAddress.building}},<br/> {{custAddress.landmark}},<br/> {{custAddress.address}}
{{custAddress.building}},<br /> {{custAddress.landmark}},<br /> {{custAddress.address}}
</h6>
</ion-col>
</ion-row>
......@@ -149,25 +155,29 @@
<hr>
<div class="coupon_code">
<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>
</div>
<br/>
<br />
<h6>
<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>
</h6>
<h6>
<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>
</h6>
<h6>
<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>
</h6>
<h6 *ngIf="discountApplied">
......@@ -182,7 +192,8 @@
<p class="textLeft">Total Price:</p>
</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-row>
</div>
......@@ -200,6 +211,7 @@
</div>
</ion-slide>
</ion-slides>
</div>
</div>
</div>
......@@ -262,5 +274,4 @@
</div>
</ion-content>
</div>
</div>
\ No newline at end of file
src/app/cart/cart.page.scss
......@@ -403,6 +403,30 @@
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 @@
<ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
<li *ngFor="let product of prodService.product; let i = index">
<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>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
......@@ -76,7 +78,7 @@
</div>
</ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
<ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
</ul>
</div>
\ No newline at end of file
<ul *ngIf="searchService.searchList">
<li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
</ul>
</div>
\ No newline at end of file
src/app/productlist/productlist.page.scss
......@@ -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 @@
</div>
<div class="clear"></div>
</div>
<ion-content>
<div class="profile_wrapper" *ngIf="loggedUser">
<div class="profile_banner">
......@@ -109,18 +111,20 @@
</ion-col>
</ion-row>
</div>
</div>
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout_inner">
<h4>Logout</h4>
<p>Are you sure to Logout ?</p>
<div class="logout_footer">
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout_inner">
<h4>Logout</h4>
<p>Are you sure to Logout ?</p>
<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>
<button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">Logout</button>
<div class="clear"></div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
......
src/app/profile/profile.page.scss
.profile_wrapper {
.profile_banner {
.profile_wrapper {
.profile_banner {
width: 100%;
background-image: url('../../assets/profile_banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
background-image: url('../../assets/profile_banner.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding-top: 40px;
.profile_circle {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
input {
width: 80px;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url('../../assets/edit_icon.png');
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
input {
width: 80px;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_inner {
margin: 0 auto;
width: 280px;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.edit {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: center;
background-color: #000;
background-image: url('../../assets/edit_icon.png');
background-size: cover;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
}
h5 {
text-align: center;
color: #fff;
margin: 0px;
padding-top: 15px;
font-weight: 600;
padding-bottom: 5px;
}
p {
color: rgba(206, 153, 76, 1);
text-align: center;
margin: 0px;
padding-bottom: 20px;
font-weight: 700;
}
}
.account_wrapper {
width: calc(100% - 40px);
margin: 0 auto;
padding-top: 20px;
padding-bottom: 100px;
.account_header {
padding-bottom: 15px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
}
span {
color: rgba(59, 57, 77, 1);
img {
width: 20px;
}
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-size: 18px;
ion-icon {
color: rgba(176, 174, 199, 1);
}
}
.row {
padding-bottom: 20px;
}
hr {
border-bottom: 1px solid rgba(176, 174, 199, 0.5);
height: 0px;
border-top: none;
margin-top: 15px;
margin-bottom: 15px;
}
}
.logout-pop-wrapper {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.logout_inner {
margin: 0 auto;
width: 280px;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 50%;
border-radius: 10px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 50%;
border-radius: 10px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
}
p {
text-align: center;
}
.logout_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
text-transform: uppercase;
}
.btn-cancel {
border: 1px solid #29285B;
background-color: #29285B;
}
.btn-logout {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
border: 1px solid rgba(0, 0, 0, 0.16);
color: #000;
}
}
}
\ No newline at end of file
}
}
}
\ No newline at end of file
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 {
padding: 0px !important;
}
app-success {
padding: 0px !important;
}
.nav_header {
position: fixed;
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