Profile page UI

src/app/notifications/notifications.component.html

@@ -0,0 +1,45 @@
+<div class="heading-holder">
+	<div class="name"> NOTIFICATIONS </div>
+	<ion-button fill="clear"> MARK AS READ </ion-button>
+</div>
+<ul>
+	<li>
+		<figure></figure>
+		<label>
+			<p>
+				You order has been placed. Please wait until you get notified to pick up the order
+			</p>
+			<div class="time"> 10 mins ago </div>
+		</label>
+	</li>
+
+	<li>
+		<figure></figure>
+		<label>
+			<p>
+				You order has been placed. Please wait until you get notified to pick up the order
+			</p>
+			<div class="time"> 10 mins ago </div>
+		</label>
+	</li>
+
+	<li>
+		<figure></figure>
+		<label>
+			<p>
+				You order has been placed. Please wait until you get notified to pick up the order
+			</p>
+			<div class="time"> 10 mins ago </div>
+		</label>
+	</li>
+
+	<li>
+		<figure></figure>
+		<label>
+			<p>
+				You order has been placed. Please wait until you get notified to pick up the order
+			</p>
+			<div class="time"> 10 mins ago </div>
+		</label>
+	</li>
+</ul>

src/app/notifications/notifications.component.scss

@@ -0,0 +1,63 @@
+.heading-holder {
+	background-color: #efefef;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 5%;
+
+	.name {
+		color: var(--brand-dark-grey);
+		font-size: 12px;
+		font-weight: 500;
+		letter-spacing: 0.5px;
+	}
+
+	ion-button {
+		margin: 0;
+		--color: var(--brand-blue);
+		font-size: 12px;
+		--padding-end: 0;
+	}
+}
+
+
+ul {
+	margin: 0;
+	padding: 0;
+
+	li {
+		list-style: none;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		margin: 0 auto;
+		padding: 10px 5%;
+		border-bottom: 1px solid #efefef;
+
+		figure {
+			width: 70px;
+			height: 70px;
+			background-color: #efefef;
+			border-radius: 50%;
+		}
+
+		label {
+			width: calc(100% - 90px);
+		}
+
+		p {
+			font-size: 13px;
+			color: var(--brand-grey);
+			font-weight: 500;
+			line-height: 1.5;
+		}
+
+		.time {
+			opacity: 0.8;
+			font-size: 11px;
+			color: var(--brand-grey);
+			line-height: 1.5;
+			margin-top: 5px;
+		}
+	}
+}

src/app/notifications/notifications.component.spec.ts

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

src/app/notifications/notifications.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss'],
+})
+export class NotificationsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/orders/orders.component.html

@@ -1,10 +1,4 @@
-<div class="tab-utilities-holder">
-    <h5> MY ORDERS </h5>
-    <ion-button fill="clear">
-        SORT / FILTER
-    </ion-button>
+<div class="heading-holder">
+	<div class="name"> MY ORDERS </div>
+	<ion-button fill="clear"> FILTER </ion-button>
 </div>
-
-<p>
-  orders works!
-</p>

src/app/orders/orders.component.scss

@@ -0,0 +1,21 @@
+.heading-holder {
+	background-color: #efefef;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 5%;
+
+	.name {
+		color: var(--brand-dark-grey);
+		font-size: 12px;
+		font-weight: 500;
+		letter-spacing: 0.5px;
+	}
+
+	ion-button {
+		margin: 0;
+		--color: var(--brand-blue);
+		font-size: 12px;
+		--padding-end: 0;
+	}
+}

src/app/orders/orders.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { UserDataService } from '../services/user-data.service';
+import { IMall } from '../models/mall';
+import { MallService } from '../services/mall.service';
+import { CartItemService } from '../services/cart-item.service';
+import CartItem from '../models/cart-item';
+import * as moment from 'moment';
 
 @Component({
     selector: 'app-orders',
@@ -7,11 +11,32 @@ import { UserDataService } from '../services/user-data.service';
     styleUrls: ['./orders.component.scss'],
 })
 export class OrdersComponent implements OnInit {
+	cart_items: any = [];
+    all_malls: Array<IMall> = [];
 
     constructor(
-        private userDataService: UserDataService
+        private mallService: MallService,
+		private cartService: CartItemService,
     ) { }
 
-    ngOnInit() { }
+    ngOnInit() {
+		this.mallService.getAllMalls().then((malls: Array<IMall>) => {
+            this.all_malls = malls;
+        });
+
+        this.cartService.getAllCartItems().then((cart_items: Array<CartItem>) => {
+            this.cart_items = cart_items;
+
+            let i: number;
+
+            for (i = 0; i < this.cart_items.length; i += 1) {
+                let mall = this.all_malls.find(mall => mall.id === this.cart_items[i].mall_id);
+                let outlet = mall.outlets.find(outlet => outlet.id === this.cart_items[i].outlet_id);
+                this.cart_items[i].menu_details = outlet.menu_items.find(item => item.id === this.cart_items[i].menu_item);
+            }
+
+			console.log(this.cart_items);
+        });
+	}
 
 }

src/app/profile/profile.module.ts

@@ -8,6 +8,8 @@ import { IonicModule } from '@ionic/angular';
 import { ProfilePage } from './profile.page';
 
 import { OrdersComponent } from '../orders/orders.component';
+import { NotificationsComponent } from '../notifications/notifications.component';
+import { ReferComponent } from '../refer/refer.component';
 
 const routes: Routes = [
   {
@@ -23,6 +25,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [ProfilePage, OrdersComponent]
+  declarations: [ProfilePage, OrdersComponent, NotificationsComponent, ReferComponent]
 })
 export class ProfilePageModule {}

src/app/profile/profile.page.html

@@ -42,7 +42,7 @@
             </figure>
             <span> NOTIFICATION </span>
         </div>
-        <div class="tab">
+        <div class="tab" (click)="logout()">
             <figure>
                 <img src="assets/custom/logout.svg">
             </figure>
@@ -50,6 +50,8 @@
         </div>
     </div>
 
-    <app-orders *ngIf="selected_tab === 'MY ORDERS'"></app-orders>
+	<app-notifications *ngIf="selected_tab === 'NOTIFICATION'"></app-notifications>
+	<app-refer *ngIf="selected_tab === 'REFER AND EARN'"></app-refer>
+	<app-orders *ngIf="selected_tab === 'MY ORDERS'"></app-orders>
 
 </ion-content>

src/app/profile/profile.page.scss

@@ -126,26 +126,3 @@
         transition: color 0.4s;
     }
 }
-
-.tab-utilities-holder {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 15px;
-    margin: 0 auto;
-    background-color: #efefef;
-
-    h5 {
-        color: var(--brand-dark-grey);
-        font-size: 12px;
-        margin: 0;
-    }
-
-    ion-button {
-        --padding-end: 0;
-        --color: var(--brand-blue);
-        font-size: 10px;
-        margin: 0;
-    }
-}

src/app/profile/profile.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-profile',
@@ -11,6 +12,7 @@ export class ProfilePage implements OnInit {
 
     constructor(
         private location: Location,
+		private router: Router
     ) { }
 
     ngOnInit() {
@@ -20,4 +22,9 @@ export class ProfilePage implements OnInit {
         this.location.back();
     }
 
+	logout() {
+		localStorage.clear();
+		this.router.navigate(['login']);
+	}
+
 }

src/app/refer/refer.component.html

@@ -0,0 +1,11 @@
+<div class="heading-holder">
+	<div class="name"> REFER &amp; EARN </div>
+</div>
+
+<section class="code-sharing-options">
+	<div>
+		<input class="code" type="text" value="KSH322VD" id="clipboard" contenteditable="false">
+		<ion-button (click)="copy()"> COPY TO CLIPBOARD </ion-button>
+		<p> Share this with your friends and earn upto <span> &#8377; 1000 </span> </p>
+	</div>
+</section>

src/app/refer/refer.component.scss

@@ -0,0 +1,60 @@
+.heading-holder {
+	background-color: #efefef;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 5%;
+
+	.name {
+		color: var(--brand-dark-grey);
+		font-size: 12px;
+		font-weight: 500;
+		letter-spacing: 0.5px;
+	}
+
+	ion-button {
+		margin: 0;
+		--color: var(--brand-blue);
+		font-size: 12px;
+		--padding-end: 0;
+	}
+}
+
+.code-sharing-options {
+	width: 100%;
+	padding: 50px;
+	text-align: center;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.code {
+		background-color: #efefef;
+		padding: 10px;
+		color: var(--brand-grey);
+		font-size: 16px;
+		border: 0px;
+		text-align: center;
+	}
+
+	ion-button {
+		font-size: 12px;
+		display: block;
+		margin: 10px auto;
+		--background: var(--brand-blue);
+	}
+
+	p {
+		font-size: 14px;
+		color: var(--brand-grey);
+		line-height: 1.5;
+		font-weight: 500;
+		letter-spacing: 0.5px;
+
+		span {
+			color: var(--brand-blue);
+			font-weight: 700;
+		}
+	}
+}

src/app/refer/refer.component.spec.ts

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

src/app/refer/refer.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+	selector: 'app-refer',
+	templateUrl: './refer.component.html',
+	styleUrls: ['./refer.component.scss'],
+})
+export class ReferComponent implements OnInit {
+
+	constructor(
+		public toastController: ToastController
+	) { }
+
+	ngOnInit() { }
+
+	copy() {
+		var copyText = document.getElementById("clipboard") as HTMLInputElement;
+		copyText.select();
+		copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+
+		/* Copy the text inside the text field */
+		document.execCommand("copy");
+
+		/* Alert the copied text */
+		this.presentToast("Copied the text: " + copyText.value);
+	}
+
+	async presentToast(text: string) {
+		const toast = await this.toastController.create({
+			message: text,
+			position: 'bottom',
+			duration: 2000,
+			color: 'dark',
+			buttons: [
+				{
+					text: 'Done',
+				}
+			]
+		});
+		toast.present();
+	}
+
+}