Cart page UI

src/app/cart/cart.page.html

@@ -7,7 +7,7 @@
     </div>
 
     <div class="cart-utilities-holder">
-        <h5> {{ cart_items.length }} ITEMS </h5>
+        <h5> {{ cart_items.length }} ITEM(S) </h5>
         <ion-button fill="clear" (click)="show_order_details=!show_order_details">
             <span *ngIf="!show_order_details"> Show Order Details <ion-icon name="ios-arrow-down"></ion-icon> </span>
             <span *ngIf="show_order_details"> Hide Order Details <ion-icon name="ios-arrow-up"></ion-icon> </span>
@@ -16,12 +16,12 @@
 
     <ul class="cart-item-list">
         <li class="cart-item" *ngFor="let item of cart_items; let i = index;">
-            <header> {{ i + 1 }}. {{ item.menu_details.name }}
-                <ion-button fill="clear" (click)="goToOutlet(item.mall_id, item.outlet_id)"> Change </ion-button>
-            </header>
+            <header> {{ i + 1 }}. {{ item.menu_details.name }} </header>
             <ul class="breakups" *ngIf="!show_order_details">
-                <li> <label> {{ item.quantity }} X Rs.{{ item.menu_details.price }} </label> <span class="total"> Rs. {{ item.total_price }} </span> </li>
-                <li> <label> {{ getPickupTimeFormat(item.pickup_time) }} </label> </li>
+                <li> <label> {{ item.quantity }} X &#8377; {{ item.menu_details.price }} </label> <span class="total"> &#8377;  {{ item.total_price }} </span> </li>
+                <li>
+					<label> {{ getPickupTimeFormat(item.pickup_time) }} </label>
+				</li>
             </ul>
 
             <ul class="breakups" *ngIf="show_order_details">
@@ -35,9 +35,12 @@
                 </li>
                 <li>
                     <label> Pickup Time </label>
-                    <div class="time-holder">
+                    <ion-item class="time-holder">
                         {{ getPickupTimeFormat(item.pickup_time) }}
-                    </div>
+						<a> Schedule time </a>
+						<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
+						placeholder="Select Date"></ion-datetime>
+                    </ion-item>
                 </li>
                 <li>
                     <label> Takeaway </label>
@@ -47,32 +50,103 @@
                 </li>
             </ul>
 
-            <ion-button fill="outline" shape="round" class="add-on-button"> Add on </ion-button>
+            <ion-button fill="outline" shape="round" class="add-on-button" (click)="openInstantMenu(item)"> Add on </ion-button>
         </li>
     </ul>
 
-    <div class="cart-utilities-holder">
-        <h5> PROMOCODE </h5>
-        <ion-button fill="clear"> Apply </ion-button>
-    </div>
-
     <div class="total-price-breakup">
         <ul class="breakups">
-            <li> <label> Total after discounts </label> <span> Rs. {{ total_cart_amount }} </span> </li>
-            <li> <label> Packaging </label> <span> Rs.20 </span> </li>
+            <li> <label> Total after discounts </label> <span> &#8377;  {{ total_cart_amount }} </span> </li>
+			<li> <label> Promocode </label> <span>
+				<ion-button fill="clear" *ngIf="!selected_promocode" (click)="show_promocodes = true"> Apply </ion-button>
+				<ion-button fill="clear" *ngIf="selected_promocode" (click)="removePromocode()">
+					 Remove {{ selected_promocode }}
+					 <ion-icon name="close-circle"></ion-icon>
+				</ion-button>
+			</span> </li>
+            <li> <label> Packaging </label> <span> &#8377; 20 </span> </li>
             <li> <label> GST </label> <span> 18% </span> </li>
         </ul>
 
         <div class="total-price">
-            <span> Total </span> <span> Rs. {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
+            <span> Total </span> <span> &#8377;  {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
         </div>
     </div>
 
-    <div class="cart-utilities-holder">
-        <h5> Your total savings </h5>
-        <ion-button fill="clear"> Rs. 0 </ion-button>
+    <div class="cart-utilities-holder total-savings">
+        <h5> Your Total Savings </h5>
+        <ion-button fill="clear"> &#8377;  {{ total_savings }} </ion-button>
     </div>
 
     <ion-button shape="round" expand="block" class="pay-button"> Pay Now </ion-button>
 
+	<div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
+		<header>
+            APPLY PROMOCODE <button (click)="show_promocodes = false; calculateTotalAfterPromo()"> Done </button>
+        </header>
+		<ion-list>
+			<ion-item (click)="selected_promocode = 'SAVE100'">
+				<ion-radio slot="start" [checked]="selected_promocode === 'SAVE100'"></ion-radio>
+				<ion-label class="ion-text-wrap">
+					<div class="heading"> Upto &#8377; 100 Offer </div>
+					<div class="code"> Promocode: <span> SAVE100 </span> </div>
+					<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aliquid quod omnis sed voluptatem, eos sapiente quaerat, consequatur neque beatae architecto commodi! Debitis, qui eum iure perspiciatis aperiam cumque voluptatum? </p>
+					<a> Terms & Condition </a>
+				</ion-label>
+			</ion-item>
+			<ion-item (click)="selected_promocode = 'SAVE10PER'">
+				<ion-radio slot="start" [checked]="selected_promocode === 'SAVE10PER'"></ion-radio>
+				<ion-label class="ion-text-wrap">
+					<div class="heading"> Upto &#8377; 10 Percert Offer </div>
+					<div class="code"> Promocode: <span> SAVE10PER </span> </div>
+					<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aliquid quod omnis sed voluptatem, eos sapiente quaerat, consequatur neque beatae architecto commodi! Debitis, qui eum iure perspiciatis aperiam cumque voluptatum? </p>
+					<a> Terms & Condition </a>
+				</ion-label>
+			</ion-item>
+		</ion-list>
+	</div>
+
+	<div class="common-semi-modal instant-menu" [ngClass]="{'active' : instant_menu }" *ngIf="temp_outlet_details">
+		<header>
+            Add On <button (click)="instant_menu = false;"> Done </button>
+        </header>
+		<section class="items-holder">
+            <div class="item" *ngFor="let item of temp_outlet_details.menu_items"
+            [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
+                <div class="stats-holder" *ngIf="show_grid">
+					<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
+                	<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
+                </div>
+                <div class="image-holder">
+                	<img [src]="item.image_url">
+					<div class="label-holder">
+	                    <div class="category" [ngClass]="{'non-veg' : !item.is_vegeterian, 'veg' : item.is_vegeterian }"></div>
+	                </div>
+                </div>
+
+                <div class="content-holder">
+					<h5> {{ item.name }} </h5>
+
+					<div class="stats-holder" *ngIf="!show_grid">
+						<div class="stat"> <ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </span> </div>
+	                	<div class="stat"> <ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span> </div>
+	                </div>
+
+	                <div class="price">
+	                    <span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
+						<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
+							<ion-icon name="cart"></ion-icon>
+						</button>
+						<div class="count-buttons-holder" *ngIf="checkIfPresentInCart(item.id)">
+		                    <ion-button (click)="decreaseInstantCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </ion-button>
+		                    <div class="count"> {{ getItemCount(item.id) }} </div>
+		                    <ion-button (click)="increaseInstantCartItemCount(item)"> <ion-icon name="add"></ion-icon> </ion-button>
+		                </div>
+	                </div>
+                </div>
+
+            </div>
+        </section>
+	</div>
+
 </ion-content>

src/app/cart/cart.page.scss

@@ -55,16 +55,23 @@
     width: 90%;
     margin: 0 auto;
 
+	&.total-savings {
+		h5 {
+			color: var(--brand-blue);
+		}
+	}
+
     h5 {
         color: var(--brand-dark-grey);
-        font-size: 12px;
+        font-size: 14px;
         margin: 0;
     }
 
     ion-button {
         --padding-end: 0;
         --color: var(--brand-blue);
-        font-size: 10px;
+        font-size: 12px;
+		letter-spacing: 0;
         margin: 0;
 
         span,ion-icon {
@@ -86,12 +93,13 @@ ul {
     border-bottom: 1px solid #efefef;
 
     .cart-item {
-        margin-bottom: 20px;
         border-bottom: 1px solid #efefef;
-        padding-bottom: 20px;
+        padding-bottom: 15px;
+		margin-bottom: 10px;
 
         &:last-child {
             border-bottom: 0;
+			margin-bottom: 0;
         }
     }
 
@@ -119,18 +127,34 @@ ul {
         font-size: 10px;
         margin: 0;
         height: 25px;
+		margin-top: 10px;
     }
 }
 
 .breakups {
     color: var(--brand-dark-grey);
-    font-size: 10px;
+    font-size: 12px;
+	font-weight: 500;
 
     li {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin: 10px auto;
+        margin: 1px auto;
+    }
+
+	ion-button {
+        --padding-end: 0;
+        --color: var(--brand-blue);
+		text-transform: capitalize;
+        font-size: 12px;
+        margin: 0;
+
+		ion-icon {
+			color: var(--brand-dark-grey);
+			margin-left: 5px;
+			font-size: 16px;
+		}
     }
 
     .total {
@@ -163,10 +187,28 @@ ul {
     }
 
     .time-holder {
-        font-size: 10px;
+        font-size: 12px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+		--border-width: 0;
+		position: relative;
+		--color: var(--brand-dark-grey);
+		font-weight: 500;
+		position: relative;
+		right: -30px;
+
+		a {
+			margin: 0 5px;
+		}
+
+		ion-datetime {
+			opacity: 0;
+			width: 0;
+			padding: 0;
+			height: 0;
+			overflow: hidden;
+		}
 
         a {
             text-decoration: underline;
@@ -177,9 +219,9 @@ ul {
 .total-price-breakup {
     width: 90%;
     margin: 0 auto;
+	padding-top: 7px;
 
     ul {
-        border-top: 1px solid #efefef;
         padding: 5px 0;
     }
 
@@ -202,3 +244,153 @@ ul {
     margin: 10px auto;
     font-size: 12px;
 }
+
+.instant-menu {
+	.items-holder {
+	    padding: 17px;
+		width: 100%;
+	    overflow-x: auto;
+		white-space: nowrap;
+
+	    .item {
+			overflow: hidden;
+	        width: 45%;
+			display: inline-block;
+	        position: relative;
+	        box-shadow: 0px 0px 5px rgba(#000000, 0.2);
+			padding: 10px;
+			border-radius: 10px;
+			margin-right: 5vw;
+
+	        &.hide {
+	            display: none;
+	        }
+
+			.stats-holder {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				font-size: 12px;
+				color: var(--brand-grey);
+				font-weight: 500;
+				padding-bottom: 10px;
+
+				ion-icon {
+					font-size: 14px;
+					float: left;
+					position: relative;
+					top: 1px;
+					margin-right: 3px;
+				}
+			}
+
+	        .image-holder {
+				position: relative;
+
+				img {
+		            border-radius: 5px;
+		            height: 80px;
+		            width: 100%;
+		            object-fit: cover;
+		        }
+
+				.category {
+					background-color: white;
+		            border: 1px solid var(--brand-dark-grey);
+					border-radius: 2px;
+		            width: 16px;
+		            height: 16px;
+		            position: absolute;
+					left: 3px;
+					bottom: 7px;
+		            display: flex;
+		            align-items: center;
+		            justify-content: center;
+
+		            &::before {
+		                content: '';
+		                width: 8px;
+		                height: 8px;
+		                background-color: var(--brand-grey);
+		                border-radius: 50%;
+		            }
+
+		            &.veg {
+		                border-color: var(--ion-color-success);
+
+		                &::before {
+		                    background-color: var(--ion-color-success);
+		                }
+		            }
+
+		            &.non-veg {
+		                border-color: var(--ion-color-danger);
+
+		                &::before {
+		                    background-color: var(--ion-color-danger);
+		                }
+		            }
+		        }
+			}
+
+	        h5 {
+	            font-size: 14px;
+	            color: var(--brand-dark-grey);
+	            font-weight: bold;
+	            letter-spacing: 0.5px;
+	            margin: 10px 0;
+	            white-space: nowrap;
+	            text-overflow: ellipsis;
+	        }
+	    }
+
+	    .price {
+	        display: flex;
+	        align-items: center;
+	        margin-bottom: 0px;
+			justify-content: space-between;
+
+			span {
+				color: var(--brand-dark-grey);
+	            font-size: 14px;
+				font-weight: 700;
+				width: 40%;
+			}
+
+			.cart-button {
+		        background-color: var(--brand-blue);
+		        color: white;
+		        font-size: 12px;
+		        width: 30px;
+				height: 30px;
+		        border-radius: 50%;
+		    }
+
+			.count-buttons-holder {
+			    display: flex;
+			    width: 60%;
+			    justify-content: space-between;
+			    align-items: center;
+			    background-color: #efefef;
+
+			    ion-button {
+			        margin: 0;
+			        width: 30px;
+			        height: 30px;
+			        --padding-start: 0;
+			        --padding-end: 0;
+			        --padding-top: 0;
+			        --padding-bottom: 0;
+			        font-size: 10px;
+			        --background: var(--brand-blue);
+			    }
+
+			    .count {
+			        color: var(--brand-dark-grey);
+			        font-size: 12px;
+			    }
+			}
+	    }
+	}
+}

src/app/cart/cart.page.ts

@@ -6,6 +6,7 @@ import { MallService } from '../services/mall.service';
 import { IMall } from '../models/mall';
 import * as moment from 'moment';
 import { Router } from '@angular/router';
+import { IOutlet } from '../models/outlet';
 
 @Component({
     selector: 'app-cart',
@@ -17,7 +18,14 @@ export class CartPage implements OnInit {
     cart_items: any = [];
     all_malls: Array<IMall> = [];
     total_cart_amount: number = 0;
-    total_discount: number = 0;
+    show_promocodes: boolean = false;
+	selected_promocode: string = '';
+	total_savings: number = 0;
+	temp_outlet_details: IOutlet;
+	instant_menu: boolean = false;
+	mall_details: IMall;
+    outlet_details: IOutlet;
+	new_pickup_time: Date;
 
     constructor(
         private location: Location,
@@ -29,6 +37,15 @@ export class CartPage implements OnInit {
     ngOnInit() {}
 
     ionViewDidEnter() {
+		document.querySelector('.menu-icon-holder').classList.add('hide');
+		this.refresh();
+    }
+
+	refresh() {
+		this.show_order_details = false;
+	    this.cart_items = [];
+	    this.all_malls= [];
+	    this.total_cart_amount = 0;
 
         this.mallService.getAllMalls().then((malls: Array<IMall>) => {
             this.all_malls = malls;
@@ -46,11 +63,23 @@ export class CartPage implements OnInit {
                 this.total_cart_amount += this.cart_items[i].total_price;
             }
         });
+	}
+
+	openInstantMenu(item: any) {
+		this.instant_menu = true;
+		this.mallService.getMallByID(item.mall_id).then((data: IMall) => {
+            this.mall_details = data;
+            this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === item.outlet_id);
+            this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
+        });
+	}
 
-    }
+	ngOnDestroy() {
+		document.querySelector('.menu-icon-holder').classList.remove('hide');
+	}
 
     increaseCartItemCount(item: any) {
-        let i: number, cart_items;
+        let i: number, cart_items: any;
         for (i = 0; i < this.cart_items.length; i += 1) {
             if (this.cart_items[i].menu_item === item.menu_item) {
                 this.cart_items[i].quantity += 1;
@@ -62,10 +91,12 @@ export class CartPage implements OnInit {
         for (i = 0; i < cart_items.length; i += 1) {
             delete cart_items[i]['menu_details'];
         }
+		this.calculateTotalAfterPromo();
         this.cartService.updateCartItems(cart_items);
     }
 
     decreaseCartItemCount(item: any) {
+		console.log(item);
         let i: number, cart_items;
         for (i = 0; i < this.cart_items.length; i += 1) {
             if (this.cart_items[i].menu_item === item.menu_item) {
@@ -81,7 +112,7 @@ export class CartPage implements OnInit {
         for (i = 0; i < cart_items.length; i += 1) {
             delete cart_items[i]['menu_details'];
         }
-        console.log(cart_items);
+		this.calculateTotalAfterPromo();
         this.cartService.updateCartItems(cart_items);
     }
 
@@ -101,4 +132,94 @@ export class CartPage implements OnInit {
         return price - (price * discount / 100);
     }
 
+	calculateTotalAfterPromo() {
+		switch(this.selected_promocode) {
+			case 'SAVE100':
+			if (this.total_cart_amount > 100) {
+				this.total_cart_amount = this.total_cart_amount - 100;
+				this.total_savings = 100;
+			}
+			break;
+			case 'SAVE10PER': this.total_cart_amount = this.total_cart_amount - ((this.total_cart_amount * 10) / 100);
+			this.total_savings = (this.total_cart_amount * 10) / 100;
+			break;
+		}
+	}
+
+	removePromocode() {
+		this.total_savings = 0;
+		this.total_cart_amount = 0;
+		this.selected_promocode = '';
+		let i: number;
+
+		for (i = 0; i < this.cart_items.length; i += 1) {
+			let mall = this.all_malls.find(mall => mall.id === this.cart_items[i].mall_id);
+			let outlet = mall.outlets.find(outlet => outlet.id === this.cart_items[i].outlet_id);
+			this.cart_items[i].menu_details = outlet.menu_items.find(item => item.id === this.cart_items[i].menu_item);
+			this.total_cart_amount += this.cart_items[i].total_price;
+		}
+	}
+
+	checkIfPresentInCart(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+	getItemCount(id: string) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === id) {
+                return this.cart_items[i].quantity;
+            }
+        }
+        return 0;
+    }
+
+
+	addToCart(item: any) {
+        this.cart_items.push({
+            menu_item: item.id,
+            quantity: 1,
+            pickup_time: new Date(new Date().setMinutes(new Date().getMinutes() + item.wait_duration)),
+            outlet_id: this.outlet_details.id,
+            mall_id: this.mall_details.id,
+            take_away: true,
+            total_price: this.calculateDiscount(item.price, item.discount)
+        });
+
+        this.cartService.updateCartItems(this.cart_items).then(() => {
+			this.refresh();
+		});
+    }
+
+	decreaseInstantCartItemCount(item: any) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === item.id) {
+                this.cart_items[i].quantity -= 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
+                if (this.cart_items[i].quantity === 0) {
+                    this.cart_items.splice(i, 1);
+                }
+            }
+        }
+        this.cartService.updateCartItems(this.cart_items);
+    }
+
+	increaseInstantCartItemCount(item: any) {
+        let i: number;
+        for (i = 0; i < this.cart_items.length; i += 1) {
+            if (this.cart_items[i].menu_item === item.id) {
+                this.cart_items[i].quantity += 1;
+                this.cart_items[i].total_price = this.calculateDiscount(item.price, item.discount) * this.cart_items[i].quantity;
+            }
+        }
+        this.cartService.updateCartItems(this.cart_items);
+    }
+
 }

src/app/mall-details/mall-details.page.html

@@ -139,7 +139,7 @@
         </figure>
     </div>
 
-    <div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
+    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
             Sort / Filter <button (click)="togglePopup()"> Done </button>
         </header>

src/app/malls/malls.page.html

@@ -44,7 +44,7 @@
 						Food Offers: <strong> {{ mall.offers.length }}  </strong>
                     </div>
 					<div class="offer">
-                        <ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon> 
+                        <ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon>
 						Shopping Offers: <strong> {{ mall.offers.length }}  </strong>
                     </div>
                 </div>
@@ -87,7 +87,7 @@
         <a> Know More </a>
     </section>
 
-    <div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
+    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
             Sort / Filter <button (click)="togglePopup()"> Done </button>
         </header>

src/app/malls/malls.page.ts

@@ -25,7 +25,6 @@ export class MallsPage implements OnInit {
     ionViewDidEnter() {
         this.mallService.getAllMalls().then((data: Array<IMall>) => {
             this.malls = data;
-			console.log(this.malls);
         });
     }
 

src/app/mocks/menu-items.ts

@@ -7,7 +7,7 @@ export const MENU_ITEMS_1 = [new MenuItem({
     description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
     is_vegeterian: true,
     wait_duration: 10,
-    price: 90,
+    price: 120,
     discount: 10,
     rating: 4,
     tags: ['burger', 'breakfast']
@@ -17,10 +17,10 @@ export const MENU_ITEMS_1 = [new MenuItem({
     image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
     description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship McChicken tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. Chicken Tikka burger recipe.',
     is_vegeterian: false,
-    wait_duration: 10,
-    price: 90,
-    discount: 10,
-    rating: 4,
+    wait_duration: 20,
+    price: 180,
+    discount: 5,
+    rating: 4.5,
     tags: ['burger', 'spicy', 'chicken']
 })];
 

src/app/outlet-details/outlet-details.page.html

@@ -46,8 +46,8 @@
     <div class="menu-card-holder">
         <header>
             <div>
-				<button color="default" fill="clear" (click)="togglePopup()"> FILTER </button>
-				<button color="default" fill="clear" (click)="togglePopup()"> SORT </button>
+				<button color="default" fill="clear" (click)="show_filter_popup = true"> FILTER </button>
+				<button color="default" fill="clear" (click)="show_sort_popup = true"> SORT </button>
             </div>
             <div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
         </header>
@@ -105,9 +105,9 @@
     </div>
 
 
-    <div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
+    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
-            SORT <button (click)="togglePopup()"> Done </button>
+            SORT <button (click)="show_sort_popup = false"> Done </button>
         </header>
 
         <div class="sort-buttons-holder">
@@ -134,4 +134,16 @@
         </div>
     </div>
 
+	<div class="common-semi-modal filter-holder" [ngClass]="{'active' : show_filter_popup }">
+		<header>
+            FILTER <button (click)="show_filter_popup = false"> Done </button>
+        </header>
+		<ion-list>
+			<ion-item *ngFor="let tag of outlet_details.tags" (click)="filterByTag(tag)">
+				<ion-checkbox slot="start" [checked]="selected_tag === tag"></ion-checkbox>
+				<ion-label> {{ tag }} </ion-label>
+			</ion-item>
+		</ion-list>
+	</div>
+
 </ion-content>

src/app/outlet-details/outlet-details.page.scss

@@ -282,11 +282,13 @@
 
 	&.list-mode {
 		flex-direction: column;
+		padding-bottom: 15px;
 
 		.item {
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
+			margin-bottom: 15px;
 
 			.stats-holder {
 				width: 65%;

src/app/outlet-details/outlet-details.page.ts

@@ -24,7 +24,8 @@ export class OutletDetailsPage implements OnInit {
     show_sort_popup: boolean = false;
     selected_sort: string = null;
     cart_items: Array<CartItem> = [];
-	show_grid: boolean = false;
+	show_grid: boolean = true;
+	show_filter_popup: boolean = false;
 
     constructor(
         private route: ActivatedRoute,
@@ -34,20 +35,24 @@ export class OutletDetailsPage implements OnInit {
     ) { }
 
     ngOnInit() {
-        let mall_id = this.route.snapshot.paramMap.get('mall_id');
+
+    }
+
+	ionViewDidEnter() {
+		let mall_id = this.route.snapshot.paramMap.get('mall_id');
         let outlet_id = this.route.snapshot.paramMap.get('outlet_id');
 
         this.cartService.getAllCartItems().then((data: Array<CartItem>) => {
             this.cart_items = data;
-            console.log(data);
         });
 
         this.mallService.getMallByID(mall_id).then((data: IMall) => {
             this.mall_details = data;
             this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
             this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
+			console.log(this.temp_outlet_details);
         });
-    }
+	}
 
     back() {
         this.location.back();
@@ -177,8 +182,4 @@ export class OutletDetailsPage implements OnInit {
         }
     }
 
-    togglePopup() {
-        this.show_sort_popup = !this.show_sort_popup;
-    }
-
 }

src/global.scss

@@ -8,236 +8,276 @@
  * For more information on global stylesheets, visit the documentation:
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
-
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
-
-/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */
 @import "~@ionic/angular/css/normalize.css";
 @import "~@ionic/angular/css/structure.css";
 @import "~@ionic/angular/css/typography.css";
-@import '~@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/display.css'; /* Optional CSS utils that can be commented out */
 @import "~@ionic/angular/css/padding.css";
 @import "~@ionic/angular/css/float-elements.css";
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
-
-
 ion-content {
-    --padding-bottom: 30px;
+	--padding-bottom: 30px;
 }
-
-ion-button, button, a, p, div, input {
-    font-family: 'Roboto', sans-serif;
-    text-transform: none;
-    outline: none;
+a,
+button,
+div,
+input,
+ion-button,
+p {
+	font-family: 'Roboto', sans-serif;
+	text-transform: none;
+	outline: none;
 }
-
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
 	margin: 0;
 }
-
 figure {
-    margin: 0;
+	margin: 0;
 }
-
 * {
-    font-family: 'M PLUS Rounded 1c', sans-serif;
-    margin: 0;
+	font-family: 'M PLUS Rounded 1c', sans-serif;
+	margin: 0;
 }
-
 .results-utilities-holder {
-    display: flex;
-    width: 100%;
-    margin: 10px auto 0;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: bold;
-
-    &.no-padding {
-        margin: 0 auto;
-    }
-
-    h5 {
-        margin: 0 0 0 10px;
-        color: var(--brand-dark-grey);
-        font-size: 10px;
-    }
-
-    ion-button {
-        margin: 0;
-        font-size: 10px;
-        padding: 0;
-    }
+	display: flex;
+	width: 100%;
+	margin: 10px auto 0;
+	justify-content: space-between;
+	align-items: center;
+	font-weight: bold;
+	&.no-padding {
+		margin: 0 auto;
+	}
+	h5 {
+		margin: 0 0 0 10px;
+		color: var(--brand-dark-grey);
+		font-size: 10px;
+	}
+	ion-button {
+		margin: 0;
+		font-size: 10px;
+		padding: 0;
+	}
 }
-
 .result-list ion-item {
-    margin: 0 0 20px;
-
-    ion-label {
-        padding: 0;
-        margin: 0;
-    }
-
-    img {
-        align-self: flex-start;
-        width: 70px;
-        height: 70px;
-        object-fit: cover;
-        margin-right: 15px;
-    }
-
-    h3 {
-        margin: 0;
-        color: var(--brand-dark-grey);
-        font-weight: 500;
-        font-size: 14px;
-        letter-spacing: 0.5px;
-        text-overflow: ellipsis;
-        display: flex;
-        justify-content: space-between;
-
-        ion-icon {
-            color: var(--brand-grey);
-            font-size: 16px;
-
-            &.active {
-                color: var(--brand-blue);
-            }
-        }
-    }
-
-    .description {
-        font-size: 10px;
-        color: var(--brand-grey);
-    }
-
-    .offers-holder {
-        display: flex;
-        justify-content: space-between;
-        color: var(--brand-yellow);
-        letter-spacing: 0.5px;
-        border-bottom: 1px solid #efefef;
-        padding: 0 0 7px;
-        margin-bottom: 7px;
+	margin: 0 0 20px;
+	ion-label {
+		padding: 0;
+		margin: 0;
+	}
+	img {
+		align-self: flex-start;
+		width: 70px;
+		height: 70px;
+		object-fit: cover;
+		margin-right: 15px;
+	}
+	h3 {
+		margin: 0;
+		color: var(--brand-dark-grey);
+		font-weight: 500;
+		font-size: 14px;
+		letter-spacing: 0.5px;
+		text-overflow: ellipsis;
+		display: flex;
+		justify-content: space-between;
+		ion-icon {
+			color: var(--brand-grey);
+			font-size: 16px;
+			&.active {
+				color: var(--brand-blue);
+			}
+		}
+	}
+	.description {
+		font-size: 10px;
+		color: var(--brand-grey);
+	}
+	.offers-holder {
+		display: flex;
+		justify-content: space-between;
+		color: var(--brand-yellow);
+		letter-spacing: 0.5px;
+		border-bottom: 1px solid #efefef;
+		padding: 0 0 7px;
+		margin-bottom: 7px;
 		align-items: center;
-
 		ion-icon {
 			color: var(--brand-grey);
 		}
-
-        .offer {
-            font-size: 11px;
-            width: 50%;
-        }
-    }
-
-    .utilities-holder {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .container {
-            display: flex;
-            width: 40%;
-            justify-content: space-between;
-
-            .utility {
-                width: 50%;
-                font-size: 10px;
-                color: var(--brand-grey);
-                font-weight: bold;
-            }
-
-            .utility-button {
-                text-align: right;
-                width: 50%;
-                background-color: transparent;
-                border: 0;
-                font-size: 16px;
-                color: var(--brand-grey);
-            }
-        }
-    }
+		.offer {
+			font-size: 11px;
+			width: 50%;
+		}
+	}
+	.utilities-holder {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.container {
+			display: flex;
+			width: 40%;
+			justify-content: space-between;
+
+			&:last-child {
+				justify-content: flex-end;
+			}
+
+			.utility {
+				width: 50%;
+				font-size: 10px;
+				color: var(--brand-grey);
+				font-weight: bold;
+			}
+			.utility-button {
+				text-align: right;
+				background-color: transparent;
+				border: 0;
+				font-size: 16px;
+				color: var(--brand-grey);
+			}
+		}
+	}
 }
-
-.sort-filter-holder {
-    background-color: white;
-    position: fixed;
-    width: 100%;
-    z-index: 5;
-    bottom: 0;
-    left: 0;
-    box-shadow: 0px 0px 5px var(--brand-grey);
-    transition: transform 0.5s;
-    transform: translateY(50vh);
-
-    &.active {
-        transform: translateY(0);
-    }
-
-    header {
-        background-color: var(--brand-blue);
-        color: white;
-        display: flex;
-        justify-content: space-between;
-        padding: 15px;
-        font-size: 14px;
-        align-items: center;
-        position: relative;
-
-        button {
-            background-color: transparent;
-            border: 1px solid white;
-            font-size: 10px;
-            height: 25px;
-            padding: 0 15px;
-            color: white;
-            border-radius: 30px;
-        }
-    }
-
-    .sort-buttons-holder {
-        display: flex;
-        padding: 15px;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        position: relative;
-
-        button {
-            background-color: transparent;
-            color: var(--brand-dark-grey);
-            font-size: 10px;
-            margin-bottom: 30px;
-
-            &.active {
-                color: var(--brand-blue);
-                .icon-holder {
-                    border-color: var(--brand-blue);
-                    color: var(--brand-blue);
-                }
-            }
-
-            .icon-holder {
-                border: 1px solid var(--brand-grey);
-                color: var(--brand-grey);
-                width: 50px;
-                height: 50px;
-                margin: 0 auto 10px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 50%;
-                letter-spacing: 0.5px;
-                font-size: 15px;
-
-                ion-icon {
-                    font-size: 24px;
-                }
-            }
-        }
-    }
+.common-semi-modal {
+	background-color: white;
+	position: fixed;
+	width: 100%;
+	z-index: 5;
+	bottom: 0;
+	left: 0;
+	box-shadow: 0 0 5px var(--brand-grey);
+	transition: transform 0.5s;
+	transform: translateY(50vh);
+	&.active {
+		transform: translateY(0);
+	}
+	header {
+		background-color: var(--brand-blue);
+		color: white;
+		display: flex;
+		justify-content: space-between;
+		padding: 15px;
+		font-size: 14px;
+		align-items: center;
+		position: relative;
+		button {
+			background-color: transparent;
+			border: 1px solid white;
+			font-size: 10px;
+			height: 25px;
+			padding: 0 15px;
+			color: white;
+			border-radius: 30px;
+			letter-spacing: 1px;
+		}
+	}
+	&.sort-holder {
+		.sort-buttons-holder {
+			display: flex;
+			padding: 15px;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			position: relative;
+			button {
+				background-color: transparent;
+				color: var(--brand-dark-grey);
+				font-size: 10px;
+				margin-bottom: 30px;
+				&.active {
+					color: var(--brand-blue);
+					.icon-holder {
+						border-color: var(--brand-blue);
+						color: var(--brand-blue);
+					}
+				}
+				.icon-holder {
+					border: 1px solid var(--brand-grey);
+					color: var(--brand-grey);
+					width: 50px;
+					height: 50px;
+					margin: 0 auto 10px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border-radius: 50%;
+					letter-spacing: 0.5px;
+					font-size: 15px;
+					ion-icon {
+						font-size: 24px;
+					}
+				}
+			}
+		}
+	}
+	&.filter-holder {
+		height: 80vh;
+		overflow-y: auto;
+		transform: translateY(80vh);
+		&.active {
+			transform: translateY(0);
+		}
+		&.with-border {
+			ion-item {
+				border-bottom: 1px solid #efefef;
+				--padding-start: 20px;
+				--padding-end: 20px;
+				--padding-top: 10px;
+				--padding-bottom: 10px;
+			}
+		}
+		ion-list {
+			ion-item {
+				--inner-border-width: 0;
+				--color: var(--brand-dark-grey);
+				font-size: 14px;
+
+				ion-label {
+					padding-left: 20px;
+					letter-spacing: 0.5px;
+					font-weight: 500;
+					text-transform: capitalize;
+					.heading {
+						font-size: 14px;
+						font-weight: 500;
+					}
+					.code {
+						font-size: 12px;
+						margin: 3px 0;
+						span {
+							color: var(--brand-blue);
+							font-weight: 600;
+						}
+					}
+					a,
+					p {
+						color: var(--brand-grey);
+						font-size: 12px;
+						line-height: 1.5;
+					}
+					a {
+						text-decoration: underline;
+					}
+				}
+			}
+			ion-checkbox {
+				--background-checked: var(--brand-blue);
+				--border-color: var(--brand-blue);
+				--size: 16px;
+			}
+			ion-radio {
+				align-self: flex-start;
+				--color-checked: var(--brand-blue);
+				transform: scale(0.7);
+			}
+		}
+	}
 }