Impleted FAQs with Api call

src/app/faq/faq.component.html

@@ -1,3 +1,23 @@
-<p>
-  faq works!
-</p>
+<div class="heading-holder">
+	<div class="name"> FAQs </div>
+</div>
+
+<div class="faq-container">
+	<li *ngFor="let mockFaq of mockFaqs; let index = index" 
+		[ngClass]="{'active' : selectedQuestions === index}"
+		(click)="selectedQuestions = index"
+		>
+		<div class="upfold" >
+			<h3>{{mockFaq.title}}</h3>
+			<ion-icon name="arrow-down" mode="ios" ></ion-icon>
+		</div>
+		<div class='subquestions' *ngFor="let question of mockFaq.questions;">
+			<h3>{{question.sub_question}}</h3>
+			<h5>Subheader</h5>
+			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similique
+				eaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias
+				quidem
+				corrupti tenetur facilis temporibus error.</p>
+		</div>
+	</li>
+</div>

src/app/faq/faq.component.scss

@@ -0,0 +1,88 @@
+.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;
+	}
+}
+
+
+.faq-container{
+    li{
+        list-style: none;
+        width: 90%;
+        border-radius: 10px;
+        background-color: white;
+        box-shadow: 0px 0px 10px #c7c4c4;
+        color: var(--brand-dark-grey);
+        line-height: 1.6;
+        border-bottom: 1px solid lightgrey;
+        margin: 20px auto;
+        padding: 0 20px;
+        max-height: 50vh;
+        overflow: auto;
+
+        &.active {
+            .subquestions {
+                display: block;
+            }
+        }
+
+		.upfold{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 50px;
+            position: sticky;
+            top: 0;
+            background-color: white;
+
+            h3{
+                font-size: 18px;
+                font-weight: 600;
+                }
+            ion-icon {
+                font-size: 20px;
+            }
+        }
+
+        .subquestions{
+            display: none;
+            padding: 10px 0;
+
+            div{
+                margin: 10px auto;
+            }
+            
+            h3{
+                font-size: 18px;
+                font-weight: 600;
+                }
+            h5{
+                font-size: 16px;
+                font-weight: 600;
+                padding: 5px 0;
+                color: var(--brand-grey);
+            }
+            p{
+                font-size: 12px;
+                text-align: justify;
+                color: var(--brand-grey);
+            }
+        }
+	}
+}

src/app/faq/faq.component.ts

@@ -1,14 +1,167 @@
 import { Component, OnInit } from '@angular/core';
+import { HelpService } from '../services/help.service';
+import { LoadingController } from '@ionic/angular';
+import { AlertController } from '@ionic/angular';
+import { ToastService } from '../services/toast.service';
+
 
 @Component({
-  selector: 'app-faq',
-  templateUrl: './faq.component.html',
-  styleUrls: ['./faq.component.scss'],
+    selector: 'app-faq',
+    templateUrl: './faq.component.html',
+    styleUrls: ['./faq.component.scss'],
 })
 export class FaqComponent implements OnInit {
 
-  constructor() { }
+    allFaqs: any = [];
+    loader: any;
+    selectedQuestions: number = 0;
+
+    mockFaqs = [
+        {
+            title: "What are the return guidelines?",
+            questions: [
+                {
+                    sub_question: "Questions1",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions2",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions3",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions4",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions5",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                },
+            ]
+        },{
+            title: "How can I return a Gift?",
+            questions: [
+                {
+                    sub_question: "Questions1",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions2",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions3",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions4",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions5",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                },
+            ]
+        },{
+            title: "Title 1",
+            questions: [
+                {
+                    sub_question: "Questions1",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions2",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions3",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions4",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions5",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                },
+            ]
+        },{
+            title: "Title 1",
+            questions: [
+                {
+                    sub_question: "Questions1",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions2",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions3",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions4",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                }, {
+                    sub_question: "Questions5",
+                    subHeader: "Headers",
+                    subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error',
+                },
+            ]
+        },
+    ]
+
+
+    constructor(
+        private helpService: HelpService,
+        public loadingController: LoadingController,
+        public alertController: AlertController,
+        private toastService: ToastService,
+
+
+
+    ) { }
+
+    ngOnInit() { }
+
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+            message: 'Please wait...',
+            spinner: 'dots',
+            mode: 'ios'
+        });
+        await this.loader.present();
+    }
+
+    async presentAlert(message: string) {
+        const alert = await this.alertController.create({
+            message: message,
+            mode: 'ios',
+            buttons: ['OK']
+        });
+
+        await alert.present();
+    }
+
 
-  ngOnInit() {}
+    getAllfaqs() {
+        this.helpService.allFaqs().then((response) => {
+            this.allFaqs = response;
+            this.loader ? this.loader.dismiss() : null;
+            console.log(this.allFaqs)
+        }, (error) => {
+            this.loader ? this.loader.dismiss() : null
+            console.log(error);
+        });
+    }
 
 }

src/app/profile/profile.module.ts

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

src/app/profile/profile.page.html

@@ -51,8 +51,8 @@
             </figure>
             <span> NOTIFICATION </span>
         </div>
-        <div class="tab" [ngClass]="{'active' : selected_tab === 'NOTIFICATION'}"
-        (click)="selected_tab = 'NOTIFICATION'">
+        <div class="tab" [ngClass]="{'active' : selected_tab === 'FAQs'}"
+        (click)="selected_tab = 'FAQs'">
             <figure>
                 <img src="assets/custom/hotel-bell.svg">
             </figure>
@@ -69,5 +69,6 @@
 	<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>
+	<app-faq *ngIf="selected_tab === 'FAQs'"></app-faq>
 
 </ion-content>

src/app/profile/profile.page.scss

@@ -99,7 +99,7 @@
     overflow: auto;
 
     .tab {
-        width: 90px;
+        width: 25%;
 
         &.active {
             figure {

src/app/services/help.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HelpService } from './help.service';
+
+describe('HelpService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: HelpService = TestBed.get(HelpService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/help.service.ts

@@ -0,0 +1,26 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { URL } from '../mocks/url';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HelpService {
+
+    constructor(
+        private http: HttpClient
+    ) { }
+
+    async allFaqs(){
+        const httpOptions={
+            headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+            })
+        };
+
+        return await this.http.get(URL + '/api/maioraservice/faq/getall/', httpOptions).toPromise()
+    }
+}