Skip to content

G
getme
Commit 0add8d89 by amalk
Options

payment selection AND delivery modal

parent 3647d1df
Showing with 537 additions and 12 deletions
src/app/app-routing.module.ts
...@@ -26,7 +26,8 @@ const routes: Routes = [ ...@@ -26,7 +26,8 @@ const routes: Routes = [
{ path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' }, { path: 'reviewlist', loadChildren: './reviewlist/reviewlist.module#ReviewlistPageModule' },
{ path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' }, { path: 'catagory', loadChildren: './catagory/catagory.module#CatagoryPageModule' },
{ path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' }, { path: 'trackorder', loadChildren: './trackorder/trackorder.module#TrackorderPageModule' },
{ path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' }, { path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' }, { path: 'storelist', loadChildren: './storelist/storelist.module#StorelistPageModule' },
{ path: 'nearby', loadChildren: './nearby/nearby.module#NearbyPageModule' },
{ path: 'review', loadChildren: './review/review.module#ReviewPageModule' }, { path: 'review', loadChildren: './review/review.module#ReviewPageModule' },
{ path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' } { path: 'delivery', loadChildren: './delivery/delivery.module#DeliveryPageModule' }
......
src/app/app.component.ts
...@@ -22,7 +22,6 @@ export class AppComponent { ...@@ -22,7 +22,6 @@ export class AppComponent {
initializeApp() { initializeApp() {
this.platform.ready().then(() => { this.platform.ready().then(() => {
this.statusBar.styleDefault(); this.statusBar.styleDefault();
this.splashScreen.hide();
this.statusBar.overlaysWebView(false); this.statusBar.overlaysWebView(false);
}); });
} }
......
src/app/app.module.ts
...@@ -22,6 +22,7 @@ import { environment } from '../environments/environment'; ...@@ -22,6 +22,7 @@ import { environment } from '../environments/environment';
import { ServiceService } from './../config/service.service'; import { ServiceService } from './../config/service.service';
import { AuthService } from './../config/auth.service'; import { AuthService } from './../config/auth.service';
import { from } from 'rxjs'; import { from } from 'rxjs';
import { DeliverypopPageModule} from './deliverypop/deliverypop.module';
...@@ -36,6 +37,7 @@ import { from } from 'rxjs'; ...@@ -36,6 +37,7 @@ import { from } from 'rxjs';
AppRoutingModule, AppRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase), AngularFireModule.initializeApp(environment.firebase),
DeliverypopPageModule,
AngularFireAuthModule, AngularFireAuthModule,
AngularFirestoreModule AngularFirestoreModule
], ],
......
src/app/cart/cart.page.html
...@@ -99,13 +99,33 @@ ...@@ -99,13 +99,33 @@
<span class="floatRight">CHANGE</span> <span class="floatRight">CHANGE</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<div class="payment_method">
<input type="radio" id="test1" name="radio-group" checked (click)="getwaypaypal()">
<label for="test1">
<p>PayPal</p>
</label>
</div>
<div class="card_div" [hidden]="gateway !=1">
<input class="card_no borderNone widthFull" placeholder="PayPal ID">
</div>
<div class="payment_method">
<input type="radio" id="test2" name="radio-group" (click)="getwayafterpay()">
<label for="test2">
<p>AfterPay</p> <p>AfterPay</p>
<div class="card_div"> </label>
</div>
<div class="card_div" [hidden]="gateway !=2">
<input class="card_no" placeholder="**** **** **** 1458"> <input class="card_no" placeholder="**** **** **** 1458">
<input class="cv_number" placeholder="CVV"> <input class="cv_number" placeholder="CVV">
</div> </div>
<div class="after_pay"> <div class="payment_method">
Pay Pal <input type="radio" id="test3" name="radio-group" (click)="getwaypayk()">
<label for="test3">
<p>PayK</p>
</label>
</div>
<div class="card_div" [hidden]="gateway !=3">
<input class="card_no borderNone widthFull" placeholder="PafyK ID">
</div> </div>
<div class="delivery_time"> <div class="delivery_time">
<ul> <ul>
...@@ -156,9 +176,9 @@ ...@@ -156,9 +176,9 @@
<div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);"> <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
PAY PAY
</div> </div>
<!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="goToPage('orderplaced')"> <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
FINISH FINISH
</div> --> </div>
</div> </div>
</ion-content> </ion-content>
<!-- <div class="loader"> <!-- <div class="loader">
......
src/app/cart/cart.page.scss
...@@ -57,6 +57,61 @@ ...@@ -57,6 +57,61 @@
padding: 15px; padding: 15px;
height: calc(100vh - 180px); height: calc(100vh - 180px);
overflow: scroll; overflow: scroll;
.payment_method {
width: 100%;
padding-bottom: 15px;
padding-top: 15px;
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
width: 100%;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid #29285b;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: '';
width: 12px;
height: 12px;
background: #29285b;
position: absolute;
top: 5px;
left: 5px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
h5 { h5 {
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
margin: 0px; margin: 0px;
...@@ -70,8 +125,7 @@ ...@@ -70,8 +125,7 @@
margin: 0px; margin: 0px;
text-align: left; text-align: left;
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
padding-bottom: 15px; padding-left: 10px;
padding-top: 15px;
} }
h6 { h6 {
margin: 0px; margin: 0px;
...@@ -126,7 +180,7 @@ ...@@ -126,7 +180,7 @@
} }
.delivery_time { .delivery_time {
width: 100%; width: 100%;
padding-top: 50px; padding-top: 30px;
padding-bottom: 20px; padding-bottom: 20px;
ul { ul {
margin: 0px; margin: 0px;
......
src/app/cart/cart.page.ts
...@@ -4,6 +4,8 @@ import { Location } from '@angular/common'; ...@@ -4,6 +4,8 @@ import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { CartsService } from './../../config/cart.service'; import { CartsService } from './../../config/cart.service';
import { OrdersService } from './../../config/order.service'; import { OrdersService } from './../../config/order.service';
import { ModalController } from '@ionic/angular';
import { DeliverypopPage } from '../deliverypop/deliverypop.page';
@Component({ @Component({
...@@ -16,6 +18,7 @@ export class CartPage implements OnInit { ...@@ -16,6 +18,7 @@ export class CartPage implements OnInit {
@ViewChild(IonSlides, { static: false }) slides: IonSlides; @ViewChild(IonSlides, { static: false }) slides: IonSlides;
currentIndex: any; currentIndex: any;
count: any; count: any;
gateway:any;
cartwizard = { cartwizard = {
initialSlide: 0, initialSlide: 0,
speed: 1000, speed: 1000,
...@@ -27,17 +30,38 @@ export class CartPage implements OnInit { ...@@ -27,17 +30,38 @@ export class CartPage implements OnInit {
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location, private location: Location,
public cartService: CartsService, public cartService: CartsService,
public orderService: OrdersService public orderService: OrdersService,
public modalController: ModalController
) { ) {
this.currentIndex = 0; this.currentIndex = 0;
this.count = 1; this.count = 1;
this.gateway = 1;
this.cartService.cartList(); this.cartService.cartList();
} }
ngOnInit() { ngOnInit() {
} }
getwaypaypal(){
this.gateway = 1;
}
getwayafterpay(){
this.gateway = 2;
}
getwaypayk(){
this.gateway = 3;
}
async finishpop() {
const modal = await this.modalController.create({
component: DeliverypopPage
});
return await modal.present();
}
goToPage(path, data = null) { goToPage(path, data = null) {
......
src/app/deliverypop/deliverypop.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 { DeliverypopPage } from './deliverypop.page';
const routes: Routes = [
{
path: '',
component: DeliverypopPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [DeliverypopPage]
})
export class DeliverypopPageModule {}
src/app/deliverypop/deliverypop.page.html 0 → 100644
<ion-content>
<div class="cart_wrapper">
<div class="cart_head">
<div class="nav_header">
<button class="nav_btn nav_back_white floatLeft" (click)="closeModal()">
<img src="../assets/arrow_white.png">
</button>
<div class="nav_title floatLeft">
<h4></h4>
</div>
<button class="nav_btn floatRight">
</button>
<div class="clear"></div>
</div>
<img src="../assets/white_tick.png">
<h4>RIDER HAS<br> DELIVERED YOUR ORDER </h4>
<p>June 26th 2019, 03:00 PM</p>
</div>
</div>
</ion-content>
<ion-footer padding>
<div class="row">
<button class="login_btn">I GOT MY ORDER</button>
</div>
<div class="row">
<button class="resend_btn">I DIDN'T GOT THE ORDER</button>
</div>
<div class="row">
<button class="cancel_btn">CANCEL THIS ORDER</button>
</div>
</ion-footer>
\ No newline at end of file
src/app/deliverypop/deliverypop.page.scss 0 → 100644
.nav_header {
box-shadow: none;
}
.cart_wrapper {
width: 100%;
.cart_head {
width: 100%;
height: 240px;
text-align: center;
background-image: url("../../assets/[email protected]");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
.nav_header {
position: static;
background-color: transparent;
.nav_title {
h4 {
color: #FFF;
}
}
}
img {
width: 70px;
}
h4 {
color: #fff;
font-weight: bolder;
margin-bottom: 5px;
text-align: center;
}
p {
color: rgba(215, 213, 228, 1);
margin: 0px;
padding: 0px;
font-size: 14px;
text-align: center;
}
}
.order_status {
width: 100%;
padding: 20px;
.track_btn {
border-radius: 5px;
height: 40px;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
}
.status_div {
margin-bottom: 10px;
margin-top: 10px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
h6 {
margin: 0px;
padding: 0px;
color: rgba(215, 213, 228, 1);
}
}
.go_green {
h4 {
color: rgba(53, 203, 171, 1);
}
}
.go_green.status_gap {
border-left: 2px dashed rgba(53, 203, 171, 1);
}
.status_gap {
border-left: 2px dashed rgba(215, 213, 228, 1);
height: 30px;
}
}
.nearby_shop_list {
ul {
margin: 0px;
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 120px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
}
}
}
}
}
.product_detail {
padding: 10px;
hr {
border-bottom: 1px solid rgba(176, 174, 199);
height: 0px;
border-top: none;
}
h6 {
margin: 0px;
padding: 0px;
color: #29285b;
font-size: 18px;
padding-bottom: 15px;
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 18px;
line-height: 25px;
padding-bottom: 15px;
strong {
color: rgba(41, 40, 91, 1);
}
span {
color: rgba(41, 40, 91, 1);
}
.afterpay {
color: rgba(206, 153, 76, 1);
padding-left: 10px;
}
}
h4 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: 900;
font-size: 18px;
padding-top: 20px;
padding-bottom: 10px;
}
.cancel_btn {
border-radius: 8px;
height: 45px;
width: 100%;
background-color: #29285b;
color: #FFF;
font-size: 18px;
font-weight: lighter;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
}
.related_product_slider {
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
font-size: 18px;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
font-size: 18px;
}
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url("../../assets/Group32_2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 500;
text-align: left;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
text-align: left;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1)
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
}
}
}
.row {
margin-bottom: 30px;
}
.login_btn {
width: 100%;
background-color: #29285b;
color: #fff;
border-radius: 8px;
height: 45px;
font-size: 16px;
}
.resend_btn {
width: 100%;
background-color: transparent;
color: #29285b;
border-radius: 8px;
height: 45px;
font-size: 16px;
font-weight: 900;
border: 1px solid rgba(176, 174, 199, 1);
}
.cancel_btn {
width: 100%;
background-color: transparent;
color: rgba(176, 174, 199, 1);
border-radius: 8px;
height: 45px;
font-size: 16px;
font-weight: 900;
}
\ No newline at end of file
src/app/deliverypop/deliverypop.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeliverypopPage } from './deliverypop.page';
describe('DeliverypopPage', () => {
let component: DeliverypopPage;
let fixture: ComponentFixture<DeliverypopPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DeliverypopPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DeliverypopPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/deliverypop/deliverypop.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
@Component({
selector: 'app-deliverypop',
templateUrl: './deliverypop.page.html',
styleUrls: ['./deliverypop.page.scss'],
})
export class DeliverypopPage implements OnInit {
constructor(
private modalController: ModalController,
private navParams: NavParams
) { }
ngOnInit() {
}
async closeModal() {
const onClosedData: string = "Wrapped Up!";
await this.modalController.dismiss(onClosedData);
}
}
src/app/login/login.page.html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="social_div"> <div class="social_div">
<div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);"> <div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="presentModal()">
Facebook Facebook
</div> </div>
<div class="social_btn"> <div class="social_btn">
......
src/app/login/login.page.ts
...@@ -3,6 +3,7 @@ import { Router, ActivatedRoute } from '@angular/router'; ...@@ -3,6 +3,7 @@ import { Router, ActivatedRoute } from '@angular/router';
import { AuthService } from './../../config/auth.service'; import { AuthService } from './../../config/auth.service';
import { async } from 'q'; import { async } from 'q';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: './login.page.html', templateUrl: './login.page.html',
...@@ -26,4 +27,5 @@ export class LoginPage implements OnInit { ...@@ -26,4 +27,5 @@ export class LoginPage implements OnInit {
} }
src/global.scss
...@@ -394,6 +394,10 @@ app-delivery { ...@@ -394,6 +394,10 @@ app-delivery {
padding: 0px !important; padding: 0px !important;
} }
app-deliverypop {
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