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>

    <ng-container *ngIf="allMalls.length > 0">
        <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>
    </ng-container>    

    <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_promo" (click)="show_promocodes = true"> Apply </ion-button>
				<ion-button fill="clear" *ngIf="selected_promo" (click)="selected_promo = ''">
					 Remove {{ selected_promo.offersCode }}
					 <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() + (getTotalCartAmount() * (18 / 100)) ) + 20 }} </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 *ngFor="let promoCodes of mallPromoCodes">
            <ion-item (click)="selected_promo = code" 
            *ngFor="let code of promoCodes">
				<ion-radio slot="start" [checked]="selected_promo === code"></ion-radio>
				<ion-label class="ion-text-wrap">
					<div class="heading"> {{ code.offersTitle }} </div>
					<div class="code"> Promocode: <span> {{ code.offersCode }} </span> </div>
					<p> {{ code.offerSummary }} </p>
					<a> Max Amount of offer: &#8377; {{ code.offersMaxcount }} </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>