#Added location popups

angular.json

@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "assets": [
-              "src/favicon.ico",
+              "src/favicon.png",
               "src/assets",
               "src/manifest.webmanifest"
             ],
@@ -92,7 +92,7 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
+              "src/favicon.png",
               "src/assets",
               "src/manifest.webmanifest"
             ],
@@ -130,4 +130,4 @@
       }
     }},
   "defaultProject": "zataakse"
-}
+}

ngsw-config.json

@@ -7,7 +7,7 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/favicon.png",
           "/index.html",
           "/manifest.webmanifest",
           "/*.css",

package.json

@@ -26,6 +26,7 @@
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "hammerjs": "^2.0.8",
+    "ngx-device-detector": "^1.3.20",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

src/app/app.component.html

@@ -1,6 +1,5 @@
 <div style="max-width: 600px;">
   <app-splash-screen></app-splash-screen>
-<app-landing-page></app-landing-page>
-<!-- <router-outlet></router-outlet> -->
-
+  <app-landing-page></app-landing-page>
+  <!-- <router-outlet></router-outlet> -->
 </div>

src/app/shared/shared-components/landing-page/landing-page.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 // import { PrelaunchService } from '../prelaunch.service';
 // import { CookieService } from 'src/app/shared/services/cookie.service';
 import { MatSnackBar, MatBottomSheet, MatDialog } from '@angular/material';
+import { LocationPopupComponent } from '../location-popup/location-popup.component';
 // import { LocationPopupComponent } from '../location-popup/location-popup.component';
 
 @Component({
@@ -96,14 +97,14 @@ export class LandingPageComponent implements OnInit, OnDestroy {
   }
 
   onSubmitButtonClick() {
-    // const disRef = this.bottomsheet.open(LocationPopupComponent, {
-    //   data: {
-    //     isLocationNotAllowed: false,
-    //   }
-    // });
-    // disRef.afterDismissed().subscribe(() => {
-    //   this.setCurrentLocation();
-    // });
+    const disRef = this.bottomsheet.open(LocationPopupComponent, {
+      data: {
+        isLocationNotAllowed: false,
+      }
+    });
+    disRef.afterDismissed().subscribe(() => {
+      this.setCurrentLocation();
+    });
   }
 
   setCurrentLocation() {
@@ -113,20 +114,18 @@ export class LandingPageComponent implements OnInit, OnDestroy {
         position => {
           const latitude = position.coords.latitude;
           const longitude = position.coords.longitude;
-          // this.cookieService.setLocationPermissionStatus(true);
           // this.prelaunchService.setLocationData(latitude, longitude);
           this.router.navigate(['login-signup']);
         },
         error => {
           // User blocked location
           // LocationPopupComponent
           if (error.code === 1) {
-            // this.bottomsheet.open(LocationPopupComponent, {
-            //   data: {
-            //     isLocationNotAllowed: true,
-            //   }
-            // });
-            // this.cookieService.setLocationPermissionStatus(false);
+            this.bottomsheet.open(LocationPopupComponent, {
+              data: {
+                isLocationNotAllowed: true,
+              }
+            });
           }
           console.log(error);
         }

src/app/shared/shared-components/location-dialog/location-dialog.component.html

@@ -0,0 +1,13 @@
+<div matRipple class="locationdialog-conatiner custom-scroll">
+  <div class="cross">
+    <button mat-icon-button aria-label="" (click)="closePage()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <div *ngFor="let browser of selectedBrowser" class="browser-content">
+    <!--browser name will change when other browser detects -->
+    <h3>Step: {{ browser.step }}</h3>
+    <img src="{{ browser.image }}" height="120px" alt="" />
+    <p>{{ browser.text }}</p>
+  </div>
+</div>

src/app/shared/shared-components/location-dialog/location-dialog.component.scss

@@ -0,0 +1,28 @@
+.locationdialog-conatiner {
+    position: relative;
+    padding: 15px 10px;
+    .cross {
+        position: absolute;
+        right: 5px;
+        top: -5px;
+        margin: 20px;
+        width: 20px;
+        height: 20px;
+    }
+    background-color: #f6f6f6;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 75vh;
+    .browser-content {
+        margin: 15px 0px;
+        img {
+            width: 100%;
+            height: auto;
+        }
+        h3 {
+            font-weight: bolder;
+            text-decoration: underline;
+            text-align: center;
+        }
+    }
+}

src/app/shared/shared-components/location-dialog/location-dialog.component.ts

@@ -0,0 +1,143 @@
+import { Component, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { MatBottomSheetRef } from '@angular/material';
+
+export const BROWSERS = {
+  CHROME: 'Chrome',
+  FIREFOX: 'Firefox',
+  SAFARI: 'Safari',
+  OPERA: 'Opera',
+  IE: 'IE',
+  MS_EDGE: 'MS-Edge',
+  MS_EDGE_CHROMIUM: 'MS-Edge-Chromium',
+  FB_MESSANGER: 'FB-Messanger',
+  SAMSUNG: 'Samsung',
+  UCBROWSER: 'UC-Browser',
+  UNKNOWN: 'Unknown'
+};
+@Component({
+  selector: 'app-location-dialog',
+  templateUrl: './location-dialog.component.html',
+  styleUrls: ['./location-dialog.component.scss'],
+})
+export class LocationDialogComponent implements OnInit {
+  selectedBrowser = [];
+  stepsMap = {
+    [BROWSERS.CHROME]: [
+      {
+        step: '1',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '2',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '3',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+    ],
+    [BROWSERS.MS_EDGE]: [
+      {
+        step: '1',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '2',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '3',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+    ],
+    [BROWSERS.FIREFOX]: [
+      {
+        step: '1',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '2',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '3',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+    ],
+    [BROWSERS.SAFARI]: [
+      {
+        step: '1',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '2',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '3',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+    ],
+    [BROWSERS.UNKNOWN]: [
+      {
+        step: '1',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '2',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+      {
+        step: '3',
+        image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+      },
+    ],
+  };
+
+  chrome = [
+    {
+      step: '1',
+      image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+    },
+    {
+      step: '2',
+      image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+    },
+    {
+      step: '3',
+      image: 'https://password-managers.bestreviews.net/files/six-web-browsers.png',
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.",
+    },
+  ];
+  deviceInfo: any;
+
+  constructor(private deviceService: DeviceDetectorService, private bottomRef: MatBottomSheetRef<LocationDialogComponent>) {}
+
+  ngOnInit() {
+    console.log('hello `Home` component');
+    this.deviceInfo = this.deviceService.getDeviceInfo();
+    this.selectedBrowser = this.stepsMap[this.deviceInfo.browser];
+  }
+
+  closePage() {
+    this.bottomRef.dismiss();
+  }
+}

src/app/shared/shared-components/location-popup/location-popup.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="isLocationNotAllowed" class="location-popup-content-area">
+    <img height="70px" src="assets/img/sad.svg" alt="gift" />
+    <div class="content">{{ 'MAIN_PAGE.OFFER_NEAR_ME' | translate }}</div>
+    <button mat-raised-button color="primary" (click)="gotoHelpForLocation()">{{ 'MAIN_PAGE.ENABLE' | translate }}</button>
+</div>
+<div *ngIf="!isLocationNotAllowed" class="location-popup-content-area">
+    <img height="70px" src="assets/img/sad.svg" alt="gift" />
+    <div class="content">{{ 'MAIN_PAGE.NEED_LOCATION_FOR_OFFER' | translate }}</div>
+    <button mat-raised-button color="primary" (click)="onAllow()">{{ 'OKAY' | translate }}</button>
+</div>

src/app/shared/shared-components/location-popup/location-popup.component.scss

@@ -0,0 +1,9 @@
+.location-popup-content-area{
+  display: flex;
+  flex-flow: column;
+  padding: 10px;
+  .content{
+    padding: 13px;
+    text-align: center;
+  }
+}

src/app/shared/shared-components/location-popup/location-popup.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialog, MatBottomSheetRef, MAT_DIALOG_DATA, MAT_BOTTOM_SHEET_DATA, MatBottomSheet } from '@angular/material';
+import { LocationDialogComponent } from '../location-dialog/location-dialog.component';
+
+@Component({
+  selector: 'app-location-popup',
+  templateUrl: './location-popup.component.html',
+  styleUrls: ['./location-popup.component.scss']
+})
+export class LocationPopupComponent implements OnInit {
+  isLocationNotAllowed = false;
+  constructor(private bottomSheet: MatBottomSheet,
+              private bottomSheetRef: MatBottomSheetRef<LocationPopupComponent>,
+              @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) {
+    this.isLocationNotAllowed = data.isLocationNotAllowed;
+  }
+
+  ngOnInit() {
+  }
+
+  gotoHelpForLocation() {
+    console.log('goto help');
+    this.bottomSheetRef.dismiss();
+    this.openDialog();
+  }
+
+  openDialog(): void {
+    const dialogRef = this.bottomSheet.open(LocationDialogComponent, {
+      data: null,
+    });
+
+    dialogRef.afterDismissed().subscribe((result) => {
+      // Navigate to page
+      console.log('The dialog was closed', result);
+    });
+  }
+
+  onAllow() {
+    this.bottomSheetRef.dismiss();
+  }
+
+
+
+}

src/app/shared/shared-components/shared-components.module.ts

@@ -4,16 +4,19 @@ import { SplashScreenComponent } from './splash-screen/splash-screen.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { MaterialModule } from '../material-module/material.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { LocationDialogComponent } from './location-dialog/location-dialog.component';
+import { LocationPopupComponent } from './location-popup/location-popup.component';
 
 
 
 @NgModule({
-  declarations: [SplashScreenComponent, LandingPageComponent],
+  declarations: [SplashScreenComponent, LandingPageComponent, LocationPopupComponent, LocationDialogComponent],
   imports: [
     CommonModule,
     MaterialModule,
     TranslateModule.forChild()
   ],
+  entryComponents: [LocationPopupComponent, LocationDialogComponent],
   exports: [SplashScreenComponent, LandingPageComponent]
 })
 export class SharedComponentsModule { }