cart page UI changes

src/app/cart/cart.page.html

@@ -16,19 +16,23 @@
 
     <ul class="cart-item-list" *ngFor="let outlet of cart_outlets">
 		<header class="outlet"> {{ outlet.name }} </header>
+
+		<ul class="breakups">
+			<li *ngFor="let item of cart_items" [ngClass]="{'hidden' : item.pickup_time !== isMaxDeliveryTime(outlet.id).pickup_time}">
+				<label> Pickup Time </label>
+				<ion-item class="time-holder">
+					{{ getPickupTimeFormat(item.pickup_time) }}
+					<a> Schedule time </a>
+					<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
+					placeholder="Select Date"></ion-datetime>
+				</ion-item>
+			</li>
+		</ul>
+
         <li class="cart-item" [ngClass]="{'show' : outlet.id === item.outlet_id }" *ngFor="let item of cart_items; let i = index;">
             <header> {{ i + 1 }}. {{ item.menu_details.name }} </header>
             <ul class="breakups" *ngIf="!show_order_details">
                 <li> <label> {{ item.quantity }} X &#8377; {{ item.menu_details.price }} </label> <span class="total"> &#8377;  {{ item.total_price }} </span> </li>
-				<li>
-                    <label> Pickup Time </label>
-                    <ion-item class="time-holder">
-                        {{ getPickupTimeFormat(item.pickup_time) }}
-						<a> Schedule time </a>
-						<ion-datetime displayFormat="hh:mm a" [(ngModel)]="item.pickup_time"
-						placeholder="Select Date"></ion-datetime>
-                    </ion-item>
-                </li>
             </ul>
 
             <ul class="breakups" *ngIf="show_order_details">
@@ -40,15 +44,6 @@
                         <button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </button>
                     </div>
                 </li>
-                <li>
-                    <label> Pickup Time </label>
-                    <ion-item class="time-holder">
-                        {{ getPickupTimeFormat(item.pickup_time) }}
-						<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>
                     <div class="toggle">
@@ -56,9 +51,9 @@
                     </div>
                 </li>
             </ul>
-
-            <ion-button fill="outline" shape="round" class="add-on-button" (click)="openInstantMenu(item)"> Add on </ion-button>
         </li>
+
+		<ion-button *ngFor="let item of cart_items" fill="outline" shape="round" class="add-on-button" (click)="openInstantMenu(item)" [ngClass]="{'show' : item.pickup_time === isMaxDeliveryTime(outlet.id).pickup_time}"> Add on </ion-button>
     </ul>
 
     <div class="total-price-breakup">
@@ -145,11 +140,6 @@
 						<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>

src/app/cart/cart.page.scss

@@ -90,12 +90,10 @@ ul {
 .cart-item-list {
     width: 90%;
     margin: 0 auto;
-	padding-bottom: 15px;
     border-bottom: 1px solid #efefef;
 
     .cart-item {
 		display: none;
-		margin-top: 20px;
 
 		&.show {
 			display: block;
@@ -109,12 +107,14 @@ ul {
         justify-content: space-between;
         font-weight: bold;
         color: dimgrey;
+		width: 95%;
+		margin: 0 auto;
 
 		&.outlet {
 			background-color: #efefef;
 			color: var(--brand-grey);
-			margin-bottom: -10px;
 			padding: 5px 10px;
+			width: 100%;
 		}
 
         ion-button {
@@ -133,7 +133,13 @@ ul {
         font-size: 10px;
         margin: 0;
         height: 25px;
-		margin-top: 10px;
+		margin-top: 0px;
+		margin-bottom: 10px;
+		display: none;
+
+		&.show {
+			display: inline-block;
+		}
     }
 }
 
@@ -141,12 +147,19 @@ ul {
     color: var(--brand-dark-grey);
     font-size: 12px;
 	font-weight: 500;
+	width: 95%;
+	margin: 0 auto;
+	padding: 7px 0;
 
     li {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin: 1px auto;
+		width: 100%;
+
+		&.hidden {
+			display: none;
+		}
     }
 
 	ion-button {

src/app/cart/cart.page.ts

@@ -59,7 +59,7 @@ export class CartPage implements OnInit {
         this.cartService.getAllCartItems().then((cart_items: Array<CartItem>) => {
             this.cart_items = cart_items;
 
-            let i: number, j: number;
+            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);
@@ -76,6 +76,19 @@ export class CartPage implements OnInit {
         });
 	}
 
+	isMaxDeliveryTime(outlet_id: string) {
+		let pricing = this.cart_items.filter((item => item.outlet_id === outlet_id));
+		if (pricing.length > 0) {
+			let max = pricing.reduce((prev, current) => {
+				return (prev.pickup_time > current.pickup_time) ? prev : current
+			});
+			return max;
+		} else {
+			return 0;
+		}
+
+	}
+
 	openInstantMenu(item: any) {
 		this.instant_menu = true;
 		this.mallService.getMallByID(item.mall_id).then((data: IMall) => {
@@ -107,8 +120,7 @@ export class CartPage implements OnInit {
     }
 
     decreaseCartItemCount(item: any) {
-		console.log(item);
-        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;
@@ -238,6 +250,7 @@ export class CartPage implements OnInit {
 		this.orderService.createOrder(this.cart_items, calculated_total, this.selected_promocode).then(() => {
 			this.presentToast('Order has been created! :-)', 'dark');
 			this.cartService.clearCartItems();
+			document.querySelector('.menu-icon-holder').classList.remove('hide');
 			this.router.navigate(['/profile']);
 		}, () => {
 			this.presentToast('Failed to create the order, We\'re sorry for the inconvenience', 'danger');