Mall Advertisment connection

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { AuthService } from './services/auth.service';
 import { MallService } from './services/mall.service';
 import { OrderService } from './services/order.service';
 import { ToastService } from './services/toast.service';
+import { AdvertisementService } from './services/advertisement.service';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -43,7 +44,8 @@ import { Geolocation } from '@ionic-native/geolocation/ngx';
         MallService,
 		Geolocation,
 		ToastService,
-		OrderService,
+        OrderService,
+        AdvertisementService,
         { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
     ],
     bootstrap: [AppComponent]

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

@@ -89,28 +89,18 @@
         </ion-item>
     </ion-list>
 
-    <div class="advertisement-slots">
-        <figure>
-            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
-        </figure>
-
-        <figure>
-            <img src="https://content.adidas.co.in/static/sign_up_popup/sign_up_popup.jpg">
-        </figure>
-
-        <figure>
-            <img src="https://fsmc.s3.amazonaws.com/a/90804/adidas.jpg">
-        </figure>
-
-        <figure>
-            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
-        </figure>
-
-        <figure>
-            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
-        </figure>
+    <div class="results-utilities-holder" *ngIf="mallDetails.mall.advertisement">
+        <h5> {{ mallDetails.mall.advertisement.length }} ADVERTISEMENTS </h5>
     </div>
 
+    <section class="common-advertisement-banner" *ngIf="mallDetails.mall.advertisement">
+        <a href="#" *ngFor="let advertisement of mallDetails.mall.advertisement">
+            <figure>
+                <img [src]="advertisement.image">
+            </figure>            
+        </a>
+    </section>
+
     <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
             Sort / Filter <button (click)="togglePopup()"> Done </button>

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

@@ -282,22 +282,3 @@
     }
 }
 
-.advertisement-slots {
-    white-space: nowrap;
-    width: 100%;
-    overflow-x: auto;
-
-    figure {
-        margin: 0;
-        display: inline-block;
-        width: 100px;
-        height: 100px;
-        margin: 0 5px;
-
-        img {
-            object-fit: cover;
-            width: 100%;
-            height: 100%;
-        }
-    }
-}

src/app/malls/malls.page.html

@@ -79,22 +79,7 @@
                 </div>
             </ion-label>
         </ion-item>
-    </ion-list>
-
-    <section class="advertisement" *ngIf="tempMalls.length > 0">
-        <div *ngIf="tempMalls[0].mall.advertisement[0]">
-            <div class="heading-holder">
-                <img [src]="tempMalls[0].mall.advertisement[0].image">
-                <header>
-                    {{ tempMalls[0].mall.advertisement[0].mallname }} - <span> Get your food faster then any others </span>
-                </header>
-            </div>
-            <p class="description">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eius molestiae ipsum fugit velit voluptatem vel ad ut debitis earum, nostrum numquam odio maxime eaque corporis! Non et cumque, dignissimos.
-            </p>
-            <a> Know More </a>
-        </div>
-    </section>
+    </ion-list>    
 
     <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>

src/app/malls/malls.page.scss

@@ -77,56 +77,6 @@
     }
 }
 
-.advertisement {
-    background-image: url('../../assets/custom/background-5.svg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: left center;
-    color: white;
-    padding: 15px;
-    width: 100%;
-    margin-bottom: 20px;
-
-    .heading-holder {
-        display: flex;
-        width: 100%;
-        align-items: center;
-
-        img {
-            width: 45px;
-            background-color: white;
-            height: 45px;
-            border-radius: 50%;
-            padding: 1px;
-        }
-
-        header {
-            margin-left: 15px;
-            font-size: 14px;
-            font-weight: 500;
-
-            span {
-                font-weight: 400;
-                font-size: 12px;
-            }
-        }
-    }
-
-    .description {
-        font-size: 12px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        margin-top: 5px;
-    }
-
-    a {
-        font-size: 12px;
-        text-decoration: underline;
-        color: white;
-    }
-}
-
 .food-types-holder{
     display: flex;
     width: 100%;

src/app/malls/malls.page.ts

@@ -30,7 +30,7 @@ export class MallsPage implements OnInit {
             this.tempMalls = JSON.parse(localStorage.allMalls);
         } else {
             this.getMallsByLocation()
-        }     
+        }
     }
 
     doRefresh(e: any) {

src/app/mocks/url.ts

@@ -1,3 +1 @@
-export const URL: string = 'https://mallapi.maiora.co/mall-aggregator';
-
-export const TOKEN: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
+export const URL: string = 'https://mallapi.maiora.co/mall-aggregator';

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

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

src/app/services/advertisement.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { URL } from '../mocks/url';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AdvertisementService {
+    constructor(
+		private http: HttpClient
+    ) { }
+    
+    async getAdvertisement(adv_id: any) {
+		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/advertisement/v1/adv_id/' + adv_id, httpOptions).toPromise();
+	}
+}

src/global.scss

@@ -282,3 +282,29 @@ figure {
 		}
 	}
 }
+
+
+.common-advertisement-banner {    
+    width: 90%;
+    margin: 15px auto;
+
+    a {
+        display: block;
+        border: 2px solid var(--brand-grey);
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    figure {
+        display: block;
+        width: 100%;
+        height: 100px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+}