Cart Page UI completed

src/app/cart/cart.page.html

@@ -6,8 +6,71 @@
         </div>
     </div>
 
-    <div class="results-utilities-holder">
+    <div class="cart-utilities-holder">
         <h5> ITEMS </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>
+        </ion-button>
     </div>
 
+    <ul class="cart-item-list">
+        <li class="cart-item">
+            <header> 1. Mc Chicken Meals <ion-button fill="clear"> Change </ion-button> </header>
+            <ul class="breakups" *ngIf="!show_order_details">
+                <li> <label> 1X Rs.170 </label> <span class="total"> Rs. 170 </span> </li>
+                <li> <label> Today @ 10:am </label> </li>
+            </ul>
+
+            <ul class="breakups" *ngIf="show_order_details">
+                <li>
+                    <label> Quantity </label>
+                    <div class="quantity-scale-holder">
+                        <button> <ion-icon name="remove"></ion-icon> </button>
+                        <div class="quantity"> 0 </div>
+                        <button> <ion-icon name="add"></ion-icon> </button>
+                    </div>
+                </li>
+                <li>
+                    <label> Pickup Time </label>
+                    <div class="time-holder">
+                        Today @ 10:00 am <a> Schedule Time </a>
+                    </div>
+                </li>
+                <li>
+                    <label> Takeaway </label>
+                    <div class="toggle">
+                        <ion-toggle></ion-toggle>
+                    </div>
+                </li>
+            </ul>
+
+            <ion-button fill="outline" shape="round" class="add-on-button"> 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> Item Total </label> <span> Rs. 170 </span> </li>
+            <li> <label> Taxes </label> <span> Rs.6.80 </span> </li>
+            <li> <label> Packaging </label> <span> Rs.20 </span> </li>
+        </ul>
+
+        <div class="total-price">
+            <span> Total </span> <span> Rs. 197 </span>
+        </div>
+    </div>
+
+    <div class="cart-utilities-holder">
+        <h5> Your total savings </h5>
+        <ion-button fill="clear"> Rs. 85 </ion-button>
+    </div>
+
+    <ion-button shape="round" expand="block" class="pay-button"> Pay Now </ion-button>
+
 </ion-content>

src/app/cart/cart.page.scss

@@ -47,3 +47,147 @@
         font-weight: 600;
     }
 }
+
+.cart-utilities-holder {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 90%;
+    margin: 0 auto;
+
+    h5 {
+        color: var(--brand-dark-grey);
+        font-size: 12px;
+    }
+
+    ion-button {
+        --padding-end: 0;
+        --color: var(--brand-blue);
+        font-size: 10px;
+        margin: 0;
+
+        span,ion-icon {
+            vertical-align: middle;
+        }
+    }
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.cart-item-list {
+    width: 90%;
+    margin: 0 auto;
+    border-bottom: 1px solid #efefef;
+
+    .cart-item {
+        margin-bottom: 20px;
+    }
+
+    header {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: bold;
+        color: dimgrey;
+
+        ion-button {
+            --padding-end: 0;
+            --color: var(--brand-blue);
+            font-size: 10px;
+            margin: 0;
+        }
+    }
+
+    .add-on-button {
+        --border-width: 1px;
+        --border-color: var(--brand-blue);
+        --padding-top: 0;
+        --padding-bottom: 0;
+        font-size: 10px;
+        margin: 0;
+        height: 25px;
+    }
+}
+
+.breakups {
+    color: var(--brand-dark-grey);
+    font-size: 10px;
+
+    li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 10px auto;
+    }
+
+    .total {
+        color: dimgrey;
+    }
+
+    .quantity-scale-holder {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--brand-grey);
+        border-radius: 10px;
+        margin: 10px 0;
+
+        button {
+            font-size: 10px;
+            height: 20px;
+            width: 30px;
+            background-color: transparent;
+            &:first-child {
+                border-right: 1px solid var(--brand-grey);
+            }
+            &:last-child {
+                border-left: 1px solid var(--brand-grey);
+            }
+        }
+
+        .quantity {
+            padding: 0 10px;
+        }
+    }
+
+    .time-holder {
+        font-size: 10px;
+
+        a {
+            text-decoration: underline;
+        }
+    }
+}
+
+.total-price-breakup {
+    width: 90%;
+    margin: 0 auto;
+
+    ul {
+        border-top: 1px solid #efefef;
+        padding: 5px 0;
+    }
+
+    .total-price {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 12px;
+        width: 100%;
+        color: dimgrey;
+        padding: 13px 0;
+        border-top: 1px solid #efefef;
+        border-bottom: 1px solid #efefef;
+        font-weight: bold;
+    }
+}
+
+.pay-button {
+    width: 85%;
+    margin: 10px auto;
+    font-size: 12px;
+}

src/app/cart/cart.page.ts

@@ -7,6 +7,7 @@ import { Location } from '@angular/common';
     styleUrls: ['./cart.page.scss'],
 })
 export class CartPage implements OnInit {
+    show_order_details: boolean = false;
 
     constructor(
         private location: Location

src/app/models/cart-item.ts

@@ -6,7 +6,7 @@ class CartItem {
     pickup_time: Date;
     outlet_id: string;
     mall_id: string;
-    is_parcel: boolean;
+    take_away: boolean;
     total_price: number;
 
     constructor(initializationObject: any) {
@@ -30,7 +30,7 @@ class CartItem {
             throw new Error('Missing Mall ID');
         }
 
-        if (!initializationObject.hasOwnProperty('is_parcel')) {
+        if (!initializationObject.hasOwnProperty('take_away')) {
             throw new Error('Missing Parcel Flag');
         }
         this.menu_item = initializationObject.menu_item;
@@ -38,7 +38,7 @@ class CartItem {
         this.pickup_time = initializationObject.pickup_time;
         this.outlet_id = initializationObject.outlet_id;
         this.mall_id = initializationObject.mall_id;
-        this.is_parcel = initializationObject.is_parcel;
+        this.take_away = initializationObject.take_away;
         this.total_price = initializationObject.total_price;
     }
 }
@@ -49,7 +49,7 @@ export interface ICartItem {
     pickup_time: Date;
     outlet_id: string;
     mall_id: string;
-    is_parcel: boolean;
+    take_away: boolean;
     total_price: number;
 }
 

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

@@ -58,7 +58,7 @@ export class OutletDetailsPage implements OnInit {
             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,
-            is_parcel: false,
+            take_away: true,
             total_price: this.calculateDiscount(item.price, item.discount)
         });