Orders page UI

src/app/cart/cart.page.ts

@@ -227,7 +227,8 @@ export class CartPage implements OnInit {
     }
 
 	placeOrder() {
-		this.orderService.createOrder(this.cart_items).then(() => {
+		let calculated_total = (this.total_cart_amount + 20) + ((this.total_cart_amount + 20) * (18 / 100));
+		this.orderService.createOrder(this.cart_items, calculated_total, this.selected_promocode).then(() => {
 			this.presentToast('Order has been created! :-)', 'dark');
 			this.cartService.clearCartItems();
 			this.router.navigate(['/profile']);

src/app/orders/orders.component.html

@@ -1,4 +1,29 @@
 <div class="heading-holder">
 	<div class="name"> MY ORDERS </div>
-	<ion-button fill="clear"> FILTER </ion-button>
+	<ion-button fill="clear"> SORT / FILTER </ion-button>
 </div>
+
+<ul class="orders">
+	<li *ngFor="let order of orders" class="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>
+			</li>
+		</ul>
+
+		<p class="note">
+			We will notify you each time a order is ready for pickup
+		</p>
+
+		<div class="action-buttons-holder">
+			<ion-button shape="round"> Reorder </ion-button>
+			<ion-button shape="round" fill="outline"> Rate &amp; Review </ion-button>
+		</div>
+	</li>
+</ul>

src/app/orders/orders.component.scss

@@ -19,3 +19,89 @@
 		--padding-end: 0;
 	}
 }
+
+
+ul.orders {
+	padding: 0;
+	margin: 0;
+
+	.order {
+		list-style: none;
+		padding: 20px 5%;
+		color: var(--brand-dark-grey);
+		line-height: 1.6;
+		border-bottom: 1px solid #efefef;
+
+		.heading {
+			width: 50%;
+			font-size: 15px;
+			width: 50%;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			font-weight: 600;
+		}
+
+		.time-details {
+			font-size: 13px;
+			color: var(--brand-grey);
+		}
+	}
+
+	.ordered-items {
+		list-style: none;
+		padding: 0;
+		margin: 10px 0 0;
+
+		li {
+			display: flex;
+			width: 100%;
+			justify-content: space-between;
+			margin: 0px auto;
+			align-items: center;
+			color: var(--brand-grey);
+
+			.name {
+				font-size: 13px;
+				letter-spacing: 0.5px;
+			}
+
+			.time {
+				font-size: 12px;
+			}
+		}
+	}
+
+	.note {
+		color: var(--brand-grey);
+		font-size: 13px;
+		padding: 10px 0;
+		margin-top: 10px;
+		border-top: 1px solid #efefef;
+	}
+
+	.action-buttons-holder {
+		display: flex;
+		align-items: center;
+		width: 100%;
+
+		ion-button {
+			--padding-top: 0px;
+			--padding-bottom: 0px;
+			height: 30px;
+			margin-right: 10px;
+			font-size: 12px;
+			font-weight: 400;
+			letter-spacing: 0.5px;
+
+			&:first-child {
+				--background: var(--brand-blue);
+			}
+
+			&:last-child {
+				--color: var(--brand-blue);
+				--border-color: var(--brand-blue);
+			}
+		}
+	}
+}

src/app/orders/orders.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { IMall } from '../models/mall';
-import { MallService } from '../services/mall.service';
-import { CartItemService } from '../services/cart-item.service';
 import { OrderService } from '../services/order.service';
+import * as moment from 'moment';
 
 @Component({
     selector: 'app-orders',
@@ -10,16 +8,20 @@ import { OrderService } from '../services/order.service';
     styleUrls: ['./orders.component.scss'],
 })
 export class OrdersComponent implements OnInit {
-	cart_items: any = [];
-    all_malls: Array<IMall> = [];
+	orders: any = [];
 
     constructor(
-        private mallService: MallService,
 		private orderService: OrderService
     ) { }
 
     ngOnInit() {
+		this.orderService.getCreatedOrders().then((data: any) => {
+			this.orders = data.reverse();
+		});
+	}
 
+	getFormattedDate(date : Date, format: string) {
+		return moment(date).format(format);
 	}
 
 }

src/app/services/order.service.ts

@@ -13,11 +13,14 @@ export class OrderService {
 		private storage: Storage
 	) { }
 
-	async createOrder(cart_items: Array<CartItem>) {
+	async createOrder(cart_items: Array<CartItem>, calculated_total: number, promocode: string) {
 		return this.storage.get('orders').then((data: string) => {
 			if (data === null) {
 				this.orders.push({
 					id: uuid(),
+					calculated_total: calculated_total,
+					promocode: promocode,
+					creation_time: new Date(),
 					order_items: cart_items
 				});
 				this.storage.set('orders', JSON.stringify(this.orders)).then((data) => {
@@ -27,6 +30,9 @@ export class OrderService {
 				this.orders = JSON.parse(data);
 				this.orders.push({
 					id: uuid(),
+					calculated_total: calculated_total,
+					promocode: promocode,
+					creation_time: new Date(),
 					order_items: cart_items
 				});
 				this.storage.set('orders', JSON.stringify(this.orders));
@@ -38,7 +44,11 @@ export class OrderService {
 
 	async getCreatedOrders() {
 		return await this.storage.get('orders').then((data: string) => {
-			return JSON.parse(data);
+			if (data === null) {
+				return [];
+			} else {
+				return JSON.parse(data);
+			}
 		});
 	}