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

<ion-content>
    <div class="header-bar">
        <div class="heading-holder">
            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
            <h3> Cart </h3>
        </div>
    </div>

    <div class="cart-utilities-holder">
        <h5> {{ userCart.orderedlist.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>
        </ion-button>
    </div>

    <ul class="cart-item-list" *ngFor="let outlet of cart_outlets">
		<header class="outlet"> {{ getMallDetails(outlet.mall_id).mall.mall_name }} &gt; {{ getOutletDetails(outlet).outlet_name }} </header>

        <li class="cart-item" *ngFor="let item of userCart.orderedlist; let i = index;" [ngClass]="{'show' : item.outlet_id === outlet.outlet_id && item.mall_id === outlet.mall_id }">
            <header *ngIf="getItemDetails(item)"> {{ i + 1 }}. {{ getItemDetails(item).menu_item_name }} </header>
            <ul class="breakups" *ngIf="!show_order_details && getItemDetails(item)">
                <li>
                    <label>
                        {{ item.quantity }} X &#8377; {{ getItemDetails(item).item_price - getItemDetails(item).item_discount }}
                    </label>
                    <span class="total"> &#8377;  {{ item.total_price }} </span>
                </li>
                <li>
                    <label> Pickup Time </label>
    				<ion-item class="time-holder">
    					{{ getFormatterDateTime(item.pickup_time, 'hh:mm a') }}
    					<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">
                <li>
                    <label> Quantity </label>
                    <div class="quantity-scale-holder">
                        <button (click)="decrementCartCount(item.outlet_id, item.menuitem_id, item.mall_id)"> <ion-icon name="remove"></ion-icon> </button>
                        <div class="quantity"> {{ item.quantity }} </div>
                        <button (click)="incrementCartCount(item.outlet_id, item.menuitem_id, item.mall_id)"> <ion-icon name="add"></ion-icon> </button>
                    </div>
                </li>
                <li>
                    <label> Takeaway </label>
                    <div class="toggle">
                        <ion-toggle [(ngModel)]="item.take_away"></ion-toggle>
                    </div>
                </li>
            </ul>

            <ion-button fill="outline" shape="round" class="add-on-button show" (click)="openInstantMenu(outlet)"> Add on </ion-button>
        </li>
    </ul>

    <div class="total-price-breakup">
        <ul class="breakups">
            <li> <label> Total after discounts </label> <span> &#8377;  {{ getTotalCartAmount() }} </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)="selected_promocode = ''">
					 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> &#8377;  {{ (getTotalCartAmount() + 20) + (getTotalCartAmount() + 20) * (18 / 100) }} </span>
        </div>
    </div>

    <ion-button shape="round" [disabled]="userCart.orderedlist.length === 0" expand="block" 
    class="pay-button" (click)="requestInvoice();"> 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"> 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' : showInstantMenu }" *ngIf="temp_outlet_details">
		<header>
            Add On <button (click)="showInstantMenu = false;"> Done </button>
        </header>
		<section class="items-holder">
            <div class="item" *ngFor="let item of temp_outlet_details.menuitems"
            [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.menu_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> ₹ {{ item.item_price - item.item_discount }} </span>
						<button class="cart-button" *ngIf="isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) === 0" (click)="addToCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)">
							<ion-icon name="cart"></ion-icon>
						</button>
						<div class="count-buttons-holder" *ngIf="isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) > 0">
							<ion-button (click)="decrementCartCount(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)"> <ion-icon name="remove"></ion-icon> </ion-button>
							<span class="count">
								{{ isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) }}
							</span>
							<ion-button (click)="incrementCartCount(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)"> <ion-icon name="add"></ion-icon> </ion-button>
						</div>
	                </div>
                </div>
            </div>
        </section>
	</div>

</ion-content>