added badge modal explainer

src/app/core/config/i18n/el.ts

@@ -872,7 +872,8 @@ export const locale = {
         QR_CODE: 'Ο QR Κωδικός σου',
         WALLET_TITLE: 'Το πορτοφόλι μου',
         WALLET_SUBTITLE: 'σε όλο το δίκτυο',
-        WALLET_DESC:'Εδώ βλέπεις τους πόντους σου και τις καμπάνιες που συμμετέχεις.'
+        WALLET_DESC:'Εδώ βλέπεις τους πόντους σου και τις καμπάνιες που συμμετέχεις.',
+        BADGE_READ:'Μάθε περισσότερα για το σήμα σου εδώ.'
       },
       WIZARD: {
         NEXT_STEP: 'Επόμενο Βήμα',

src/app/member-menu/member-dashboard/member-dashboard.component.html

@@ -6,10 +6,26 @@
       <sng-loyalty_badge-card *ngIf="configAccess[1]"></sng-loyalty_badge-card>
       <!--end::Loyalty Badge-->
 
+      <!--begin::Loyalty Badge Modal-->
+      <span class="badge-more" (click)="openBadgeExplainer()" >{{'MEMBER.DASHBOARD.BADGE_READ' | translate}}</span>
+      <ng-template #badgeModal let-c="close" let-d="dismiss">
+        <div class="container wallet-popup">
+          <button type="button" class="close-btn" aria-label="Close" (click)="d('Cross click')">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <div class="badge-text mt-3">
+            <p [innerHTML]="'badge_explain' | content_translate: 'content'"></p>
+          </div>
+        </div>
+      </ng-template>
+      <!--end::Loyalty Badge Modal-->
+
       <!--begin::Microcredit Badge-->
       <sng-microcredit_badge-card *ngIf="!configAccess[1]&&configAccess[2]"></sng-microcredit_badge-card>
       <!--end::Microcredit Badge-->
 
+
+
     </div>
 
 

src/app/member-menu/member-dashboard/member-dashboard.component.scss

@@ -24,6 +24,14 @@
   }
 }
 
+.badge-more{
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover{
+    color:$primary;
+  }
+}
+
 .wallet-card {
   &-header {
     border-bottom: 2px solid #eee;

src/app/member-menu/member-dashboard/member-dashboard.component.ts

@@ -1,38 +1,85 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
+import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 /**
  * Environment
  */
 import { environment } from '../../../environments/environment';
 
 @Component({
-	selector: 'app-member-dashboard',
-	templateUrl: './member-dashboard.component.html',
-	styleUrls: ['./member-dashboard.component.scss']
+  selector: 'app-member-dashboard',
+  templateUrl: './member-dashboard.component.html',
+  styleUrls: ['./member-dashboard.component.scss']
 })
 export class MemberDashboardComponent implements OnInit, OnDestroy {
 
+	/**
+	 * Children Modals
+	 */
+  @ViewChild('badgeModal') badgeModal: NgbModalRef;
+
+
+
 
 	/**
 	 * Configuration and Static Data
 	 */
-	public configAccess: Boolean[] = environment.access;
+  public configAccess: Boolean[] = environment.access;
 
 	/**
 	 * Component Constructor
-	 *
+	 * @param modalService: NgbModal
 	 */
-	constructor() { }
+  constructor(
+    private modalService: NgbModal,
+  ) { }
 
 	/**
 	 * On Init
 	 */
-	ngOnInit() {
-	}
+  ngOnInit() {
+  }
 
 	/**
 	 * On Destroy
 	 */
-	ngOnDestroy() {
+  ngOnDestroy() {
+  }
+
+	/**
+	 * Close Modal on Browser Back Button
+	 */
+  controlModalState(state: boolean): void {
+    if (state) {
+      const modalState = {
+        modal: true,
+        desc: 'MemberDashboardModals'
+      };
+      history.pushState(modalState, null);
+    } else {
+      if (window.history.state.modal) {
+        history.back();
+      }
+    }
+  }
+
+  @HostListener('window:popstate')
+  dismissModal(): void {
+    if (this.modalService.hasOpenModals()) {
+      this.modalService.dismissAll();
+      this.controlModalState(false);
+    }
+  }
+
+	/**
+	 * Open Badge Modal
+	 */
+	openBadgeExplainer(): void {
+		this.controlModalState(true);
+		this.modalService.open(this.badgeModal)
+			.result.then(
+			() => { this.controlModalState(false); console.log('closed'); },
+			() => { this.controlModalState(false); console.log('dismissed'); });
 	}
-}
+
+
+}