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> {{ 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>
        </ion-button>
    </div>

    <ul class="cart-item-list" *ngFor="let outlet of cart_outlets">
		<header class="outlet"> {{ outlet.name }} </header>
        <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">
                <li>
                    <label> Quantity </label>
                    <div class="quantity-scale-holder">
                        <button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </button>
                        <div class="quantity"> {{ item.quantity }} </div>
                        <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">
                        <ion-toggle [(ngModel)]="item.take_away"></ion-toggle>
                    </div>
                </li>
            </ul>

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

    <div class="total-price-breakup">
        <ul class="breakups">
            <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> &#8377;  {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
        </div>
    </div>

    <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" (click)="placeOrder()"
	[disabled]="cart_items.length === 0"> 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>