Partial commit for Models, Mocks and services refactoring

package-lock.json

@@ -10618,8 +10618,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-      "dev": true
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",

package.json

@@ -31,6 +31,7 @@
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
+    "uuid": "^3.3.2",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
@@ -81,4 +82,4 @@
       "android"
     ]
   }
-}
+}

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ const routes: Routes = [
   { path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' },
   { path: 'mall-details', loadChildren: './mall-details/mall-details.module#MallDetailsPageModule' },
   { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' },
+  { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -19,8 +19,8 @@
         <button>
             <ion-icon src="assets/custom/002-bookmark.svg"></ion-icon>
         </button>
-        <button>
-            <ion-icon src="assets/custom/003-shop.svg"></ion-icon>
+        <button (click)="navigateTo('cart')">
+            <ion-icon src="assets/custom/cart.svg"></ion-icon>
         </button>
         <button>
             <ion-icon src="assets/custom/004-map.svg"></ion-icon>

src/app/cart/cart.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CartPage } from './cart.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CartPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CartPage]
+})
+export class CartPageModule {}

src/app/cart/cart.page.html

@@ -0,0 +1,13 @@
+<ion-content>
+    <div class="header-bar" [ngClass]="{'active' : show_top_bar }">
+        <div class="heading-holder">
+            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
+            <h3> Cart </h3>
+        </div>
+    </div>
+
+    <div class="results-utilities-holder">
+        <h5> ITEMS </h5>
+    </div>
+
+</ion-content>

src/app/cart/cart.page.scss

@@ -0,0 +1,49 @@
+.header-bar {
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    height: 75px;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    position: sticky;
+    box-shadow: 0px 3px 5px var(--brand-grey);
+    margin-bottom: 20px;
+
+    .heading-holder {
+        display: flex;
+        align-items: center;
+    }
+
+    button, a {
+        background-color: white;
+        color: var(--brand-blue);
+        font-size: 18px;
+        padding: 5px;
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.active {
+            color: white;
+            background-color: var(--brand-blue);
+        }
+    }
+
+    h3 {
+        font-size: 16px;
+        color: white;
+        letter-spacing: 0.5px;
+        margin-left: 10px;
+        font-weight: 600;
+    }
+}

src/app/cart/cart.page.spec.ts

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartPage } from './cart.page';
+
+describe('CartPage', () => {
+  let component: CartPage;
+  let fixture: ComponentFixture<CartPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CartPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CartPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cart/cart.page.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+    selector: 'app-cart',
+    templateUrl: './cart.page.html',
+    styleUrls: ['./cart.page.scss'],
+})
+export class CartPage implements OnInit {
+
+    constructor(
+        private location: Location
+    ) { }
+
+    ngOnInit() {
+    }
+
+    back() {
+        this.location.back();
+    }
+
+}

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

@@ -62,7 +62,7 @@
     </div>
 
     <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
-        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : outlet.is_food_outlet }"
+        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : outlet.outlet_type === 'FOOD' }"
         (click)="outletDetails(mall_details.id, outlet.id)">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
@@ -81,8 +81,8 @@
                 </p>
                 <div class="offers-holder">
                     <div class="offer">
-                        <span *ngIf="outlet.is_food_outlet"> <ion-icon name="restaurant"></ion-icon> Food </span>
-                        <span *ngIf="!outlet.is_food_outlet"> <ion-icon name="basket"></ion-icon> Shopping </span>
+                        <span *ngIf="outlet.outlet_type === 'FOOD'"> <ion-icon name="restaurant"></ion-icon> Food </span>
+                        <span *ngIf="outlet.outlet_type === 'SHOP'"> <ion-icon name="basket"></ion-icon> Shopping </span>
                         Offers: <strong> {{ outlet.offers.length }}  </strong>
                     </div>
                 </div>
@@ -91,7 +91,7 @@
     </ion-list>
 
     <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'shopping'">
-        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : !outlet.is_food_outlet }">
+        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : outlet.outlet_type === 'SHOP' }">
             <img src="{{ outlet.image_url }}" slot="start">
             <ion-label>
                 <h3>
@@ -109,8 +109,8 @@
                 </p>
                 <div class="offers-holder">
                     <div class="offer">
-                        <span *ngIf="outlet.is_food_outlet"> <ion-icon name="restaurant"></ion-icon> Food </span>
-                        <span *ngIf="!outlet.is_food_outlet"> <ion-icon name="basket"></ion-icon> Shopping </span>
+                        <span *ngIf="outlet.outlet_type === 'FOOD'"> <ion-icon name="restaurant"></ion-icon> Food </span>
+                        <span *ngIf="outlet.outlet_type === 'SHOP'"> <ion-icon name="basket"></ion-icon> Shopping </span>
                         Offers: <strong> {{ outlet.offers.length }}  </strong>
                     </div>
                 </div>

src/app/mocks/malls.ts

@@ -0,0 +1,76 @@
+import Offer from '../models/offer';
+import { OUTLETS } from './outlets';
+
+export const MALLS = [{
+    id: '0001',
+    name: 'Gopalan Arcade Mall',
+    address: 'Mysore Road, Bangalore',
+    is_bookmarked: true,
+    is_archived: false,
+    image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    outlets: OUTLETS,
+    offer_collection: [{
+        name: 'Food',
+        offers: [new Offer({
+            name: 'McDonalds Offer',
+            description: 'Get 25% offer on you first meal',
+            coupon_code: 'MCD25F',
+        })]
+    }, {
+        name: 'Shopping',
+        offers: []
+    }],
+    rating: 4.1,
+    distance: 2,
+    location: {
+        latitude: 12.903903292,
+        longitude: 34.940349039
+    }
+},
+{
+    id: '0002',
+    name: 'Gopalan Cinemas',
+    address: 'Kenchana Halli',
+    is_bookmarked: false,
+    is_archived: false,
+    image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    outlets: [],
+    offer_collection: [{
+        name: 'Food',
+        offers: []
+    }, {
+        name: 'Shopping',
+        offers: []
+    }],
+    rating: 4.5,
+    distance: 2,
+    location: {
+        latitude: 12.903903292,
+        longitude: 34.940349039
+    }
+},
+{
+    id: '0003',
+    name: 'Gopalan Mall',
+    address: 'Mysore Road, Bangalore',
+    is_bookmarked: false,
+    is_archived: false,
+    image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    outlets: [],
+    offer_collection: [{
+        name: 'Food',
+        offers: []
+    }, {
+        name: 'Shopping',
+        offers: []
+    }],
+    rating: 4.3,
+    distance: 2,
+    location: {
+        latitude: 12.903903292,
+        longitude: 34.940349039
+    }
+}];

src/app/mocks/menu-items.ts

@@ -0,0 +1,71 @@
+import MenuItem from '../models/menu-item';
+
+export const MENU_ITEMS_1 = [new MenuItem({
+    id: '0001',
+    name: 'McSpicy Paneer',
+    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
+    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
+    is_vegeterian: true,
+    wait_duration: 10,
+    price: 90,
+    discount: 10,
+    rating: 4,
+    tags: ['burger', 'breakfast']
+}), new MenuItem({
+    id: '0002',
+    name: 'McAloo Tikki',
+    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
+    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
+    is_vegeterian: true,
+    wait_duration: 13,
+    price: 120,
+    discount: 50,
+    rating: 4.0,
+    tags: ['spicy', 'dinner']
+}), new MenuItem({
+    id: '0003',
+    name: 'McPork',
+    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
+    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
+    is_vegeterian: false,
+    wait_duration: 20,
+    price: 300,
+    discount: 5,
+    rating: 4.9,
+    tags: ['spicy', 'dinner', 'pork']
+})];
+
+export const MENU_ITEMS_2 = [new MenuItem({
+    id: '0001',
+    name: 'Margherita Pizza',
+    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-pizzas-side-1.jpg',
+    description: 'Cheese pizza topped with tomato sauce, garlic sauce and fresh basil.',
+    is_vegeterian: true,
+    wait_duration: 25,
+    price: 150,
+    discount: 0,
+    rating: 3.5,
+    tags: ['pizza', 'hot']
+}), new MenuItem({
+    id: '0002',
+    name: 'Espresso Shot',
+    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-classic-hot-bottom.jpg',
+    description: 'Coffee at its simplest best. Without milk, served with cold water on the side. We call it a simple big-shot.',
+    is_vegeterian: true,
+    wait_duration: 5,
+    price: 80,
+    discount: 0,
+    rating: 4.5,
+    tags: ['hot', 'beverage']
+}), new MenuItem({
+    id: '0003',
+    name: 'The Coffee Gola',
+    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-Coffetini-Easel-side.jpg',
+    description: 'The perfect blend of coffee, almonds and a rich vanilla gola. Sure to give you an exotic kulfi experience.',
+    is_vegeterian: true,
+    wait_duration: 15,
+    price: 200,
+    discount: 10,
+    rating: 4.9,
+    tags: ['cold', 'beverage']
+})];

src/app/mocks/outlets.ts

@@ -0,0 +1,42 @@
+import Outlet, { OutletType } from '../models/outlet';
+import Offer from '../models/offer';
+import { MENU_ITEMS_1, MENU_ITEMS_2 } from './menu-items';
+
+export const OUTLETS = [new Outlet({
+    id: '0001',
+    image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg',
+    name: 'McDonalds',
+    description: 'Veg / Non-Veg Food Restaurant',
+    tags: ['dinner', 'spicy', 'breakfast', 'pork'],
+    menu_items: MENU_ITEMS_1,
+    offers: [new Offer({
+        name: 'McDonalds Offer',
+        description: 'Get 25% offer on you first meal',
+        coupon_code: 'MCD25F',
+    })],
+    outlet_type: OutletType.FOOD,
+    is_bookmarked: false,
+    rating: 3.5,
+}), new Outlet({
+    id: '0002',
+    image_url: 'https://pbs.twimg.com/profile_images/354890582/symbol.jpg',
+    name: 'Shopper\'s stop',
+    description: 'Clothing store',
+    offers: [],
+    tags: [],
+    menu_items: [],
+    outlet_type: OutletType.SHOP,
+    is_bookmarked: true,
+    rating: 4.8,
+}), new Outlet({
+    id: '0003',
+    image_url: 'https://www.mbarendezvous.com/images/top-stories-img/bannerimage_1463407053.jpg',
+    name: 'Cafe Coffee Day',
+    description: 'Veg / Non-Veg Cafe',
+    tags: ['hot', 'cold', 'pizza', 'beverage'],
+    menu_items: MENU_ITEMS_2,
+    offers: [],
+    outlet_type: OutletType.FOOD,
+    is_bookmarked: false,
+    rating: 4,
+})];

src/app/models/cart-item.ts

@@ -0,0 +1,44 @@
+class CartItem {
+    menu_item_id: string;
+    quantity: number;
+    pickup_time: Date;
+    outlet_id: string;
+    mall_id: string;
+    is_parcel: boolean;
+    total_price: number;
+
+    constructor(initializationObject: any) {
+        if (!initializationObject.hasOwnProperty('menu_item_id')) {
+            throw new Error('Missing Menu item ID');
+        }
+
+        if (!initializationObject.hasOwnProperty('quantity')) {
+            throw new Error('Missing quantity');
+        }
+
+        if (!initializationObject.hasOwnProperty('pickup_time')) {
+            throw new Error('Missing Pickup time');
+        }
+
+        if (!initializationObject.hasOwnProperty('outlet_id')) {
+            throw new Error('Missing Outlet ID');
+        }
+
+        if (!initializationObject.hasOwnProperty('mall_id')) {
+            throw new Error('Missing Mall ID');
+        }
+
+        if (!initializationObject.hasOwnProperty('is_parcel')) {
+            throw new Error('Missing Parcel Flag');
+        }
+        this.menu_item_id = initializationObject.menu_item_id;
+        this.quantity = initializationObject.quantity;
+        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.total_price = initializationObject.total_price;
+    }
+}
+
+export default CartItem;

src/app/models/menu-item.ts

@@ -0,0 +1,58 @@
+export class MenuItem {
+    id: string;
+    name: string;
+    image_url?: string;
+    description: string;
+    is_vegeterian: boolean;
+    wait_duration: number;
+    price: number;
+    discount: number;
+    rating: number;
+    tags: Array<string>;
+
+    constructor(initializationObject: any) {
+        if (!initializationObject.hasOwnProperty('id')) {
+            throw new Error('Missing id')
+        }
+        if (!initializationObject.hasOwnProperty('name')) {
+            throw new Error('Missing name')
+        }
+        if (!initializationObject.hasOwnProperty('description')) {
+            throw new Error('Missing description')
+        }
+        if (!initializationObject.hasOwnProperty('is_vegeterian')) {
+            throw new Error('Missing is_vegeterian')
+        }
+        if (!initializationObject.hasOwnProperty('wait_duration')) {
+            throw new Error('Missing wait_duration')
+        }
+        if (!initializationObject.hasOwnProperty('price')) {
+            throw new Error('Missing price')
+        }
+        if (!initializationObject.hasOwnProperty('discount')) {
+            throw new Error('Missing discount')
+        }
+        if (!initializationObject.hasOwnProperty('rating')) {
+            throw new Error('Missing rating')
+        }
+        if (!initializationObject.hasOwnProperty('tags')) {
+            throw new Error('Missing tags')
+        }
+
+        this.id = initializationObject.id;
+        this.name = initializationObject.name;
+        this.description = initializationObject.description;
+        this.is_vegeterian = initializationObject.is_vegeterian;
+        this.wait_duration = initializationObject.wait_duration;
+        this.price = initializationObject.price;
+        this.discount = initializationObject.discount;
+        this.rating = initializationObject.rating;
+        this.tags = initializationObject.tags;
+
+        if (initializationObject.hasOwnProperty('image_url')) {
+            this.image_url = initializationObject.image_url;
+        }
+    }
+};
+
+export default MenuItem;

src/app/models/offer.ts

@@ -1,7 +1,8 @@
-export class Offer {
+class Offer {
     name: string;
     description: string;
     coupon_code: string;
+    image_url?: string;
 
     constructor(initializationObject: any) {
 
@@ -21,9 +22,15 @@ export class Offer {
         this.name = initializationObject.name;
         this.description = initializationObject.description;
         this.coupon_code = initializationObject.coupon_code;
+
+        if (initializationObject.hasOwnProperty('image_url')) {
+            this.image_url = initializationObject.image_url;
+        }
     }
 }
 
+export default Offer;
+
 export type OfferCollection = {
     name: string,
     offers: Array<Offer>,

src/app/models/outlet.ts

@@ -0,0 +1,74 @@
+import Offer from './offer';
+import MenuItem from './menu-item';
+
+export enum OutletType {
+    FOOD = 'FOOD',
+    SHOP = 'SHOP',
+};
+
+class Outlet {
+    id: string;
+    image_url?: string;
+    name: string;
+    description: string;
+    offers: Array<Offer>;
+    tags: Array<string>;
+    menu_items: Array<MenuItem>;
+    outlet_type: OutletType;
+    is_bookmarked: boolean;
+    rating: number;
+
+    constructor(initializationObject: any) {
+        if (!initializationObject.hasOwnProperty('id')) {
+            throw new Error('Missing ID');
+        }
+
+        if (!initializationObject.hasOwnProperty('name')) {
+            throw new Error('Missing name');
+        }
+
+        if (!initializationObject.hasOwnProperty('description')) {
+            throw new Error('Missing description');
+        }
+
+        if (!initializationObject.hasOwnProperty('offers')) {
+            throw new Error('Missing Offers');
+        }
+
+        if (!initializationObject.hasOwnProperty('tags')) {
+            throw new Error('Missing tags');
+        }
+
+        if (!initializationObject.hasOwnProperty('menu_items')) {
+            throw new Error('Missing Menu Items');
+        }
+
+        if (!initializationObject.hasOwnProperty('outlet_type')) {
+            throw new Error('Missing Outlet type');
+        }
+
+        if (!initializationObject.hasOwnProperty('is_bookmarked')) {
+            throw new Error('Missing Bookmarked flag');
+        }
+
+        if (!initializationObject.hasOwnProperty('rating')) {
+            throw new Error('Missing Rating');
+        }
+
+        this.id = initializationObject.id;
+        this.name = initializationObject.name;
+        this.description = initializationObject.description;
+        this.offers = initializationObject.offers;
+        this.tags = initializationObject.tags;
+        this.menu_items = initializationObject.menu_items;
+        this.outlet_type = initializationObject.outlet_type;
+        this.is_bookmarked = initializationObject.is_bookmarked;
+        this.rating = initializationObject.rating;
+
+        if (initializationObject.hasOwnProperty('image_url')) {
+            this.image_url = initializationObject.image_url;
+        }
+    }
+}
+
+export default Outlet;

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

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
-import { Mall, Outlet, MenuItem, MallService } from '../services/mall.service';
+import { Mall, MallService } from '../services/mall.service';
+import CartItem from '../models/cart-item';
+import Outlet from '../models/outlet';
+import MenuItem from '../models/menu-item';
 
 @Component({
     selector: 'app-outlet-details',
@@ -18,6 +21,7 @@ export class OutletDetailsPage implements OnInit {
     selected_description: string = null;
     show_sort_popup: boolean = false;
     selected_sort: string = null;
+    cart: Array<CartItem> = [];
 
     constructor(
         private route: ActivatedRoute,
@@ -34,6 +38,10 @@ export class OutletDetailsPage implements OnInit {
             this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
             this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
         });
+
+        this.mallService.getCartItems().then((data: Array<CartItem>) => {
+            this.cart = data;
+        });
     }
 
     back() {

src/app/services/mall.service.ts

@@ -1,37 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Offer, OfferCollection } from '../models/offer';
-
-type CoOrdinates = {
-    latitude: number,
-    longitude: number,
-};
-
-
-export type MenuItem = {
-    id: string,
-    name: string,
-    image_url?: string,
-    description: string,
-    is_vegeterian: boolean,
-    wait_duration: number,
-    price: number,
-    discount: number,
-    rating: number,
-    tags: Array<string>
-};
-
-export type Outlet = {
-    id: string,
-    image_url?: string,
-    name: string,
-    description: string,
-    offers: Array<Offer>,
-    tags: Array<string>,
-    menu_items: Array<MenuItem>,
-    is_food_outlet: boolean,
-    is_bookmarked: boolean,
-    rating: number,
-};
+import { OfferCollection } from '../models/offer';
+import { CoOrdinates } from '../shared/common-types';
+import Outlet from '../models/outlet';
+import { MALLS } from '../mocks/malls';
+import CartItem from '../models/cart-item';
 
 export type Mall = {
     id: string,
@@ -45,194 +17,28 @@ export type Mall = {
     rating: number,
     distance: number,
     location: CoOrdinates,
+    address: string
 };
 
 @Injectable({
     providedIn: 'root'
 })
 export class MallService {
-    private malls: Array<Mall>;
+    malls: Array<Mall>;
+    cart: Array<CartItem> = [];
 
     constructor() {
-        this.malls = [{
-            id: '00001',
-            name: 'Gopalan Mall',
-            is_bookmarked: true,
-            is_archived: false,
-            image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            outlets: [{
-                id: '0001',
-                image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg',
-                name: 'McDonalds',
-                description: 'Veg / Non-Veg Food Restaurant',
-                tags: ['dinner', 'spicy', 'breakfast', 'pork'],
-                menu_items: [{
-                    id: '0001',
-                    name: 'McSpicy Paneer',
-                    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
-                    is_vegeterian: true,
-                    wait_duration: 10,
-                    price: 90,
-                    discount: 10,
-                    rating: 4,
-                    tags: ['burger', 'breakfast']
-                }, {
-                    id: '0002',
-                    name: 'McAloo Tikki',
-                    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
-                    is_vegeterian: true,
-                    wait_duration: 13,
-                    price: 120,
-                    discount: 50,
-                    rating: 4.0,
-                    tags: ['spicy', 'dinner']
-                }, {
-                    id: '0003',
-                    name: 'McPork',
-                    image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
-                    is_vegeterian: false,
-                    wait_duration: 20,
-                    price: 300,
-                    discount: 5,
-                    rating: 4.9,
-                    tags: ['spicy', 'dinner', 'pork']
-                }],
-                offers: [{
-                    name: 'McDonalds Offer',
-                    description: 'Get 25% offer on you first meal',
-                    coupon_code: 'MCD25F',
-                }],
-                is_food_outlet: true,
-                is_bookmarked: false,
-                rating: 3.5,
-            }, {
-                id: '0002',
-                image_url: 'https://pbs.twimg.com/profile_images/354890582/symbol.jpg',
-                name: 'Shopper\'s stop',
-                description: 'Clothing store',
-                offers: [],
-                tags: [],
-                menu_items: [],
-                is_food_outlet: false,
-                is_bookmarked: true,
-                rating: 4.8,
-            }, {
-                id: '0003',
-                image_url: 'https://www.mbarendezvous.com/images/top-stories-img/bannerimage_1463407053.jpg',
-                name: 'Cafe Coffee Day',
-                description: 'Veg / Non-Veg Cafe',
-                tags: ['hot', 'cold', 'pizza', 'beverage'],
-                menu_items: [{
-                    id: '0001',
-                    name: 'Margherita Pizza',
-                    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-pizzas-side-1.jpg',
-                    description: 'Cheese pizza topped with tomato sauce, garlic sauce and fresh basil.',
-                    is_vegeterian: true,
-                    wait_duration: 25,
-                    price: 150,
-                    discount: 0,
-                    rating: 3.5,
-                    tags: ['pizza', 'hot']
-                }, {
-                    id: '0002',
-                    name: 'Espresso Shot',
-                    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-classic-hot-bottom.jpg',
-                    description: 'Coffee at its simplest best. Without milk, served with cold water on the side. We call it a simple big-shot.',
-                    is_vegeterian: true,
-                    wait_duration: 5,
-                    price: 80,
-                    discount: 0,
-                    rating: 4.5,
-                    tags: ['hot', 'beverage']
-                }, {
-                    id: '0003',
-                    name: 'The Coffee Gola',
-                    image_url: 'https://www.cafecoffeeday.com/thelounge/images/ccd-lounge-Coffetini-Easel-side.jpg',
-                    description: 'The perfect blend of coffee, almonds and a rich vanilla gola. Sure to give you an exotic kulfi experience.',
-                    is_vegeterian: true,
-                    wait_duration: 15,
-                    price: 200,
-                    discount: 10,
-                    rating: 4.9,
-                    tags: ['cold', 'beverage']
-                }],
-                offers: [],
-                is_food_outlet: true,
-                is_bookmarked: false,
-                rating: 4,
-            }],
-            offer_collection: [{
-                name: 'Food',
-                offers: [{
-                    name: 'McDonalds Offer',
-                    description: 'Get 25% offer on you first meal',
-                    coupon_code: 'MCD25F',
-                }]
-            }, {
-                name: 'Shopping',
-                offers: []
-            }],
-            rating: 4.1,
-            distance: 2,
-            location: {
-                latitude: 12.903903292,
-                longitude: 34.940349039
-            }
-        },
-        {
-            id: '00002',
-            name: 'Gopalan Mall 2',
-            is_bookmarked: false,
-            is_archived: false,
-            image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            outlets: [],
-            offer_collection: [{
-                name: 'Food',
-                offers: []
-            }, {
-                name: 'Shopping',
-                offers: []
-            }],
-            rating: 4.5,
-            distance: 2,
-            location: {
-                latitude: 12.903903292,
-                longitude: 34.940349039
-            }
-        },
-        {
-            id: '00003',
-            name: 'Gopalan Mall 3',
-            is_bookmarked: false,
-            is_archived: false,
-            image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            outlets: [],
-            offer_collection: [{
-                name: 'Food',
-                offers: []
-            }, {
-                name: 'Shopping',
-                offers: []
-            }],
-            rating: 4.3,
-            distance: 2,
-            location: {
-                latitude: 12.903903292,
-                longitude: 34.940349039
-            }
-        }];
+        this.malls = MALLS;
     }
 
     public async getAllMalls() {
         return this.malls;
     }
 
+    public async getCartItems() {
+        return this.cart;
+    }
+
     public async getMallByID(id: string) {
         return this.malls.find((mall) => mall.id === id);
     }

src/app/shared/common-types.ts

@@ -0,0 +1,4 @@
+export type CoOrdinates = {
+    latitude: number,
+    longitude: number,
+};

src/assets/custom/cart.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m95.333 206.734c-3.839 0-7.678-1.464-10.606-4.394-5.858-5.858-5.858-15.355 0-21.213l128.533-128.533c5.857-5.858 15.355-5.858 21.213 0s5.858 15.355 0 21.213l-128.533 128.533c-2.929 2.929-6.768 4.394-10.607 4.394z" fill="#1e4e63"/><path d="m416.667 206.734c-3.839 0-7.678-1.464-10.606-4.394l-128.534-128.533c-5.858-5.858-5.858-15.355 0-21.213 5.857-5.858 15.355-5.858 21.213 0l128.533 128.533c5.858 5.858 5.858 15.355 0 21.213-2.929 2.929-6.768 4.394-10.606 4.394z" fill="#0b2e3c"/><path d="m416.667 463.8h-321.334c-7.333 0-13.59-5.301-14.796-12.534l-32.133-192.8c-.725-4.349.5-8.797 3.351-12.162 2.85-3.364 7.036-5.304 11.445-5.304h385.6c4.409 0 8.595 1.94 11.445 5.304 2.85 3.365 4.076 7.813 3.351 12.162l-32.133 192.8c-1.206 7.233-7.464 12.534-14.796 12.534z" fill="#69afe7"/><path d="m431.462 451.266 32.133-192.8c.725-4.349-.5-8.797-3.351-12.162-2.85-3.364-7.036-5.304-11.445-5.304h-192.799v222.8h160.667c7.332 0 13.59-5.301 14.795-12.534z" fill="#2680ff"/><path d="m497 271h-482c-8.284 0-15-6.716-15-15v-64.267c0-8.284 6.716-15 15-15h482c8.284 0 15 6.716 15 15v64.267c0 8.284-6.716 15-15 15z" fill="#7ed6f4"/><path d="m512 256v-64.267c0-8.284-6.716-15-15-15h-241v94.267h241c8.284 0 15-6.716 15-15z" fill="#69afe7"/></svg>

src/global.scss

@@ -85,7 +85,7 @@ header, h1, h2, h3, h4, h5 {
     border-radius: 50%;
     color: var(--brand-blue);
     text-align: center;
-    z-index: 2;
+    z-index: 5;
     bottom: -60px;
     padding-top: 10px;
     transition: transform 0.3s;
@@ -109,7 +109,7 @@ header, h1, h2, h3, h4, h5 {
     position: fixed;
     left: calc((100% - 150%) / 2);
     bottom: -150px;
-    z-index: 1;
+    z-index: 4;
     height: 300px;
     width: 150%;
     padding: 20px 30%;