Merge pull request #2404 from sunbird-cb/new-survey-popup-enhnc

New survey popup feature

src/app/component/app-survey/survey-form/survey-form.component.html

@@ -0,0 +1,20 @@
+<div class="main-survey flex items-center justify-center" *ngIf="surveyPopup?.active && isTourDone && localStorageFlag">
+    <div class="surver-inner">
+        <a mat-icon-button class="close-button flex" (click)="closeCard()">
+            <mat-icon>close</mat-icon>
+        </a>
+        <a class="survey-img-link desktop-img" href={{surveyPopup?.surveyUrl}}>
+            <!-- <img class="survey-img" src={{surveyPopupData.l}} /> -->
+            <img i18n-alt alt="Page Banner"  [src]="surveyPopup?.banners"
+                wsUtilsImageResponsive class="banner-image-solo" />
+        </a>
+
+        <div class="mobile-img-box flex flex-col items-center justify-center">
+            <img i18n-alt alt="Page Banner" [src]="surveyPopup?.banners"
+                wsUtilsImageResponsive class="mobile-banner-image-solo" />
+            <a class="mobile-survey-link" href={{surveyPopup?.surveyUrl}}>{{surveyPopup?.buttonName}} </a>
+        </div>
+
+
+    </div>
+</div>

src/app/component/app-survey/survey-form/survey-form.component.scss

@@ -0,0 +1,87 @@
+.main-survey {
+    background-color: rgba(0, 0, 0, 0.4);
+    height: 100vh;
+    width: 100%;
+    z-index: 9999;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin: 0px;
+    padding: 0;
+    overflow: hidden;
+}
+
+.survey-img-link {
+    cursor: pointer;
+    width: 80%;
+    margin: auto;
+}
+.close-button {
+    cursor: pointer;
+    vertical-align: top;
+    color: #000000; 
+    font-size: 20px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    margin-top: 40px;
+    margin-right: 40px;
+    background-color: #FFFFFF;
+    border-radius: 50%;
+    padding: 4px 4px;
+  }
+
+  .desktop-img {
+    display: flex !important;
+    @media screen and (max-width:768px) {
+        display: none !important;
+    }
+  }
+  .mobile-img-box {
+    display: none !important;
+    margin:auto;
+     @media (min-width: 476px) and (max-width: 768px) {
+        display: flex !important;
+        width: 45%;
+    }
+     @media screen and (max-width:475px) {
+        display: flex !important;
+        width: 85%;
+    }
+  }
+  .mobile-survey-link {
+    background-color: #F3962F;
+    text-align: center;
+    color: #fff !important;
+    width: 360px;
+    height: 32px;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    line-height: 30px;
+
+    @media screen and (max-width:768px) {
+        width: 94%;
+        margin: auto;
+    }
+
+  }
+  .surver-inner {
+    padding:0;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .banner-image-solo {
+    width: 100%;
+    height: auto;
+  }
+
+  .mobile-banner-image-solo {
+    width: 100%;
+    height: auto;
+  }
+
+
+

src/app/component/app-survey/survey-form/survey-form.component.spec.ts

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

src/app/component/app-survey/survey-form/survey-form.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { ConfigurationsService } from '@sunbird-cb/utils-v2'
+
+@Component({
+  selector: 'ws-survey-form',
+  templateUrl: './survey-form.component.html',
+  styleUrls: ['./survey-form.component.scss'],
+})
+export class SurveyFormComponent implements OnInit {
+  surveyPopupData: any
+  surveyPopup: any
+  isSurveyPopup = true
+  widgetData: any
+  userRead: any
+  isTourDone: any
+  localStorageFlag: any
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private configSvc: ConfigurationsService,
+  ) { }
+
+  ngOnInit() {
+    if (this.activatedRoute.snapshot.data.pageData && this.activatedRoute.snapshot.data.pageData.data) {
+      this.surveyPopupData = this.activatedRoute.snapshot.data.pageData.data.surveyPopup.banners
+      this.surveyPopup = this.activatedRoute.snapshot.data.pageData.data.surveyPopup
+      this.widgetData = this.activatedRoute.snapshot.data.pageData.data.surveyPopup
+    }
+    this.userRead = this.configSvc.unMappedUser
+    if (this.userRead && this.userRead.profileDetails && this.userRead.profileDetails.get_started_tour) {
+      if (this.userRead.profileDetails.get_started_tour.skipped || this.userRead.profileDetails.get_started_tour.visited) {
+          this.isTourDone = true
+      } else {
+        this.isTourDone = false
+      }
+    }
+    const localFlag = localStorage.getItem('surveyPopup')
+     if (localFlag === 'true') {
+      this.localStorageFlag = true
+     } else if (localFlag === 'false') {
+      this.localStorageFlag = false
+     }
+  }
+
+  closeCard() {
+   this.isSurveyPopup = false
+   if (this.localStorageFlag) {
+    localStorage.setItem('surveyPopup', 'false')
+    this.localStorageFlag = false
+   }
+  }
+}

src/app/home/home.module.ts

@@ -13,7 +13,7 @@ import {
 } from '@sunbird-cb/collection'
 import { SkeletonLoaderModule } from '@sunbird-cb/collection/src/lib/_common/skeleton-loader/skeleton-loader.module'
 import { ProfileCardStatsModule } from '@sunbird-cb/collection/src/lib/_common/profile-card-stats/profile-card-stats.module'
-import { PipeRelativeTimeModule } from '@sunbird-cb/utils-v2'
+import { PipeRelativeTimeModule, ImageResponsiveModule } from '@sunbird-cb/utils-v2'
 import { WeeklyClapsModule } from '@sunbird-cb/collection/src/lib/_common/weekly-claps/weekly-claps.module'
 import { TipsForLearnerModule } from '@sunbird-cb/collection/src/lib/_common/tips-for-learner/tips-for-learner.module'
 import { UpdatePostsModule } from '@sunbird-cb/collection/src/lib/_common/update-posts/update-posts.module'
@@ -42,13 +42,14 @@ import { UserLeaderboardModule } from '@sunbird-cb/collection/src/lib/_common/us
 import { MatTooltipModule } from '@angular/material'
 import { ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule } from '@sunbird-cb/consumption'
 import { SurveyFormModule } from '@sunbird-cb/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module'
+import { SurveyFormComponent } from '../component/app-survey/survey-form/survey-form.component'
 
 @NgModule({
   declarations: [
     HomeComponent, FeedListComponent, InsightSideBarComponent,
     PageContainerComponent, DiscussionInfoComponent, ClientSliderComponent,
     HomeOtherPortalComponent, HomeContainerComponent, DiscussHubComponent,
-    NetworkHubComponent, NotificationComponent],
+    NetworkHubComponent, NotificationComponent, SurveyFormComponent],
   imports: [
     CommonModule,
     RouterModule,
@@ -71,6 +72,7 @@ import { SurveyFormModule } from '@sunbird-cb/collection/src/lib/_common/survey-
     RecentRequestsModule,
     SkeletonLoaderModule,
     PipeRelativeTimeModule,
+    ImageResponsiveModule,
     AvatarPhotoModule,
     PendingRequestModule,
     ContentStripWithTabsLibModule,

src/app/home/home/home.component.html

@@ -1,3 +1,4 @@
+<ws-survey-form></ws-survey-form>
 <div class="mat-body-2 karmapoints-panel" *ngIf="isKPPanelenabled">
     <p class="margin-remove"> {{'appKarmapointsPanel.earn' |translate}}
         <img src="/assets/icons/home/karma-badge.svg" alt="KarmaPoints">

src/app/services/init.service.ts

@@ -858,6 +858,12 @@ export class InitService {
         })
       }
     })
+    const checkSurvey = localStorage.getItem('surveyPopup')
+    if (checkSurvey && checkSurvey === 'false') {
+      localStorage.setItem('surveyPopup', 'false')
+    } else {
+      localStorage.setItem('surveyPopup', 'true')
+    }
   }
 
   // get default url