Order page Rate & Review modal

src/app/orders/orders.component.html

@@ -4,16 +4,32 @@
 </div>
 
 <ul class="orders">
-	<li *ngFor="let order of orders" class="order">
+	<li *ngFor="let order of orders" class="order" (click)="selected_order = order">
 		<div class="heading"> Order ID: {{ order.id }} </div>
 		<div class="time-details"> Ordered on {{ getFormattedDate(order.creation_time, 'DD MMMM YYYY @ hh:mm A') }} </div>
 
 		<ul class="ordered-items">
 			<li *ngFor="let item of order.order_items">
-				<label class="name"> {{ item.menu_details.name }} x {{ item.quantity }} </label>
-				<label class="time">
-					Pickup on {{ getFormattedDate(item.pickup_time, 'hh:mm A') }}
-				</label>
+				<div class="order-item-details">
+					<label class="name"> {{ item.menu_details.name }} x {{ item.quantity }} </label>
+					<label class="time">
+						Pickup on {{ getFormattedDate(item.pickup_time, 'hh:mm A') }}
+					</label>
+				</div>
+			</li>
+		</ul>
+		<ul class="ordered-items">
+			<li *ngIf="order.promocode">
+				<div class="order-item-details">
+					<label class="name"> <strong> PROMOCODE </strong> </label>
+					<label class="time"> <strong> {{ order.promocode }} </strong> </label>
+				</div>
+			</li>
+			<li>
+				<div class="order-item-details">
+					<label class="name"> <strong> TOTAL </strong> </label>
+					<label class="time"> <strong> &#8377; {{ order.calculated_total }} </strong> </label>
+				</div>
 			</li>
 		</ul>
 
@@ -23,7 +39,27 @@
 
 		<div class="action-buttons-holder">
 			<ion-button shape="round"> Reorder </ion-button>
-			<ion-button shape="round" fill="outline"> Rate &amp; Review </ion-button>
+			<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
 		</div>
 	</li>
 </ul>
+
+<section class="common-semi-modal rating-modal" [ngClass]="{'active': show_rate_modal}">
+	<header> Rate &amp; Review <button (click)="show_rate_modal = false"> Close </button> </header>
+	<div class="rating">
+		<div class="semi-heading"> Rating </div>
+		<p> Rating the food will help us give you personalised recommendation </p>
+		<div class="star-holder" (click)="setRating()">
+			<ion-icon name="star" (click)="selected_rating = 1"></ion-icon>
+			<ion-icon name="star" (click)="selected_rating = 2"></ion-icon>
+			<ion-icon name="star" (click)="selected_rating = 3"></ion-icon>
+			<ion-icon name="star" (click)="selected_rating = 4"></ion-icon>
+			<ion-icon name="star" (click)="selected_rating = 5"></ion-icon>
+		</div>
+	</div>
+	<div class="review">
+		<div class="semi-heading"> Review </div>
+		<textarea placeholder="Please tell something about the food..."></textarea>
+	</div>
+	<ion-button size="block" shape="round"> Submit Feedback </ion-button>
+</section>

src/app/orders/orders.component.scss

@@ -32,6 +32,14 @@ ul.orders {
 		line-height: 1.6;
 		border-bottom: 1px solid #efefef;
 
+		&.expand {
+
+			.heading {
+				width: 100%;
+				white-space: normal;
+			}
+		}
+
 		.heading {
 			width: 50%;
 			font-size: 15px;
@@ -54,16 +62,33 @@ ul.orders {
 		margin: 10px 0 0;
 
 		li {
-			display: flex;
-			width: 100%;
-			justify-content: space-between;
-			margin: 0px auto;
-			align-items: center;
-			color: var(--brand-grey);
+
+			.outlet-name {
+				font-size: 14px;
+				font-weight: 600;
+				letter-spacing: 0.5px;
+			}
+
+			.order-item-details {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				margin: 0px auto 5px;
+				align-items: center;
+				color: var(--brand-grey);
+			}
 
 			.name {
 				font-size: 13px;
 				letter-spacing: 0.5px;
+				display: flex;
+				align-items: center;
+
+				img {
+					width: 50px;
+					height: 50px;
+					margin-right: 10px;
+				}
 			}
 
 			.time {
@@ -105,3 +130,76 @@ ul.orders {
 		}
 	}
 }
+
+
+.rating-modal {
+	color: var(--brand-dark-grey);
+	transform: translateY(100vh);
+
+	&.active {
+		transform: translateY(0);
+	}
+
+	.semi-heading {
+		text-align: center;
+		font-size: 18px;
+		font-weight: 500;
+	}
+
+	.rating {
+		padding: 20px 15px;
+
+		p {
+			font-size: 14px;
+			color: var(--brand-grey);
+			text-align: center;
+			line-height: 1.5;
+			margin: 15px 0;
+		}
+
+		.star-holder {
+			text-align: center;
+
+			ion-icon {
+				color: var(--brand-grey);
+				margin: 0 5px;
+				font-size: 30px;
+				transition: color 0.3s;
+
+				&.active {
+					color: #fbae17;
+				}
+			}
+		}
+	}
+
+	.review {
+		border-top: 1px solid #efefef;
+		padding: 15px;
+
+		.semi-heading {
+			text-align: left;
+		}
+
+		textarea {
+			outline: none;
+			width: 100%;
+			height: 70px;
+			background-color: #efefef;
+			padding: 10px;
+			font-size: 12px;
+			color: var(--brand-dark-grey);
+			border: 0px;
+			border-radius: 10px;
+			margin: 15px auto 0;
+			resize: none;
+		}
+	}
+
+	ion-button {
+		--background: var(--brand-blue);
+		font-size: 12px;
+		width: calc(100% - 30px);
+		margin: 0 auto 15px;
+	}
+}

src/app/orders/orders.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { OrderService } from '../services/order.service';
+import { MallService } from '../services/mall.service';
+import { IMall } from '../models/mall';
+import { IOutlet } from '../models/outlet';
+import { OutletService } from '../services/outlet.service';
 import * as moment from 'moment';
 
 @Component({
@@ -9,19 +13,63 @@ import * as moment from 'moment';
 })
 export class OrdersComponent implements OnInit {
 	orders: any = [];
+	all_malls: Array<IMall> = [];
+	all_outlets: Array<IOutlet> = [];
+	selected_rating: number = 0;
+	show_rate_modal: boolean = false;
 
     constructor(
-		private orderService: OrderService
+		private orderService: OrderService,
+		private mallService: MallService,
+		private outletService: OutletService
     ) { }
 
     ngOnInit() {
 		this.orderService.getCreatedOrders().then((data: any) => {
 			this.orders = data.reverse();
+			console.log(this.orders);
 		});
+
+		this.mallService.getAllMalls().then((malls: Array<IMall>) => {
+            this.all_malls = malls;
+        });
+
+		this.outletService.getAllOutlets().then((outlets: Array<IOutlet>) => {
+			this.all_outlets = outlets;
+		});
+	}
+
+	setRating() {
+		let i: number, j:number, stars: any;
+		stars = document.querySelectorAll('.star-holder ion-icon');
+
+		for (i = 0; i < stars.length ; i += 1) {
+			stars[i].classList.remove('active');
+		}
+
+		for (i = 0; i < this.selected_rating ; i += 1) {
+			stars[i].classList.add('active');
+		}
 	}
 
 	getFormattedDate(date : Date, format: string) {
 		return moment(date).format(format);
 	}
 
+	getMallName(id: string) {
+		return this.all_malls.find((mall) => {
+			return mall.id === id;
+		}).name;
+	}
+
+	getOutletName(id: string) {
+		return this.all_outlets.find((mall) => {
+			return mall.id === id;
+		}).name;
+	}
+
+	getRating() {
+
+	}
+
 }

src/app/profile/profile.page.ts

@@ -18,6 +18,13 @@ export class ProfilePage implements OnInit {
     ngOnInit() {
     }
 
+	ionViewDidEnter() {
+		this.selected_tab = '';
+		setTimeout(() => {
+			this.selected_tab = 'MY ORDERS';
+		}, 100);
+	}
+
     back() {
         this.location.back();
     }

src/app/services/outlet.service.ts

@@ -30,10 +30,15 @@ export class OutletService {
         };
     }
 
-    private async fetchOutlets() {
+    public async fetchOutlets() {
         this.outlets = await Promise.all(OUTLETS.map(this.getDenormalizedOutlet));
     }
 
+	async getAllOutlets() {
+		this.outlets = await Promise.all(OUTLETS.map(this.getDenormalizedOutlet));
+		return this.outlets;
+	}
+
     public async getOutletByID(id: string) {
         await this.fetchOutlets();
         return this.outlets.find((outlet) => outlet.id === id);