src/app/components/rating-alert/rating-alert.component.ts
OnInit
selector | app-rating-alert |
styleUrls | ./rating-alert.component.scss |
templateUrl | ./rating-alert.component.html |
Properties |
|
Methods |
|
constructor(preference: SharedPreferences, telemetryService: TelemetryService, popOverCtrl: PopoverController, appVersion: AppVersion, utilityService: UtilityService, appRatingService: AppRatingService, platform: Platform, telemetryGeneratorService: TelemetryGeneratorService, navParams: NavParams, commonUtilService: CommonUtilService)
|
|||||||||||||||||||||||||||||||||
Parameters :
|
Private Async appRatePopup |
appRatePopup()
|
Returns :
any
|
Async calculateAppRatingCountAppeared | ||||
calculateAppRatingCountAppeared(value)
|
||||
Parameters :
Returns :
unknown
|
closePopover |
closePopover()
|
Returns :
void
|
Async countAppRatingPopupAppeared |
countAppRatingPopupAppeared()
|
Returns :
unknown
|
getAppName |
getAppName()
|
Returns :
void
|
goToHelpSection |
goToHelpSection()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
rateContent | ||||
rateContent(ratingCount)
|
||||
Parameters :
Returns :
void
|
Async rateLater |
rateLater()
|
Returns :
any
|
rateOnStore |
rateOnStore()
|
Returns :
void
|
submitRating |
submitRating()
|
Returns :
void
|
Public appLogo$ |
Type : Observable<string>
|
Public appName |
Type : string
|
Public appRate |
Type : number
|
Default value : 0
|
Private Readonly appRateView |
Type : object
|
Default value : {
appRate: { type: ViewType.APP_RATE, heading: 'APP_RATING_RATE_EXPERIENCE', message: 'APP_RATING_TAP_ON_STARS' },
storeRate: {
type: ViewType.STORE_RATE,
heading: 'APP_RATING_THANKS_FOR_RATING',
message: 'APP_RATING_RATE_ON_PLAYSTORE'
},
helpDesk: { type: ViewType.HELP_DESK, heading: 'APP_RATING_THANKS_FOR_RATING', message: 'APP_RATING_REPORT_AN_ISSUE' }
}
|
Private appRatingPopCount |
Type : number
|
Default value : 0
|
backButtonFunc |
Default value : undefined
|
Public currentViewText |
Type : ViewText
|
Private pageId |
Type : string
|
Default value : ''
|
Private rateLaterClickedCount |
Type : number
|
Default value : 0
|
import { Component, Inject, OnInit } from '@angular/core';
import { NavParams, Platform, PopoverController } from '@ionic/angular';
import { AppRatingService } from '@app/services/app-rating.service';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import { UtilityService } from '@app/services/utility-service';
import { SharedPreferences, TelemetryService } from 'sunbird-sdk';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { Observable } from 'rxjs';
import { PreferenceKey, StoreRating } from '@app/app/app.constant';
import {
Environment,
ImpressionSubtype,
ImpressionType,
InteractSubtype,
InteractType
} from '@app/services/telemetry-constants';
import { map } from 'rxjs/operators';
import { CommonUtilService } from '@app/services/common-util.service';
enum ViewType {
APP_RATE = 'appRate',
STORE_RATE = 'storeRate',
HELP_DESK = 'helpDesk',
}
interface ViewText {
type: string;
heading: string;
message: string;
}
@Component({
selector: 'app-rating-alert',
templateUrl: './rating-alert.component.html',
styleUrls: ['./rating-alert.component.scss'],
})
export class AppRatingAlertComponent implements OnInit {
private readonly appRateView = {
appRate: { type: ViewType.APP_RATE, heading: 'APP_RATING_RATE_EXPERIENCE', message: 'APP_RATING_TAP_ON_STARS' },
storeRate: {
type: ViewType.STORE_RATE,
heading: 'APP_RATING_THANKS_FOR_RATING',
message: 'APP_RATING_RATE_ON_PLAYSTORE'
},
helpDesk: { type: ViewType.HELP_DESK, heading: 'APP_RATING_THANKS_FOR_RATING', message: 'APP_RATING_REPORT_AN_ISSUE' }
};
public appRate = 0;
private pageId = '';
public currentViewText: ViewText;
public appLogo$: Observable<string>;
public appName: string;
backButtonFunc = undefined;
private appRatingPopCount = 0;
private rateLaterClickedCount = 0;
constructor(
@Inject('SHARED_PREFERENCES') private preference: SharedPreferences,
@Inject('TELEMETRY_SERVICE') private telemetryService: TelemetryService,
private popOverCtrl: PopoverController,
private appVersion: AppVersion,
private utilityService: UtilityService,
private appRatingService: AppRatingService,
private platform: Platform,
private telemetryGeneratorService: TelemetryGeneratorService,
private navParams: NavParams,
private commonUtilService: CommonUtilService,
) {
this.getAppName();
this.appLogo$ = this.preference.getString('app_logo').pipe(
map((logo) => logo || './assets/imgs/ic_launcher.png')
);
this.currentViewText = this.appRateView[ViewType.APP_RATE];
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.closePopover();
});
}
ngOnInit() {
this.pageId = this.navParams.get('pageId');
this.telemetryGeneratorService.generateImpressionTelemetry(
ImpressionType.VIEW,
ImpressionSubtype.APP_RATING_POPUP,
this.pageId,
Environment.HOME
);
this.appRatePopup();
}
getAppName() {
this.appVersion.getAppName()
.then((appName: any) => {
this.appName = appName;
});
}
closePopover() {
this.popOverCtrl.dismiss(null);
if (this.backButtonFunc) {
this.backButtonFunc.unsubscribe();
}
}
async rateLater() {
this.rateLaterClickedCount = await this.appRatingService.rateLaterClickedCount();
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.RATE_LATER_CLICKED,
Environment.HOME,
this.pageId,
undefined,
{ rateLaterCount: this.rateLaterClickedCount }
);
this.closePopover();
}
rateOnStore() {
this.appVersion.getPackageName().then((pkg: any) => {
this.utilityService.openPlayStore(pkg);
this.appRatingService.setEndStoreRate(this.appRate);
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.PLAY_STORE_BUTTON_CLICKED,
Environment.HOME,
this.pageId,
undefined,
{ appRating: this.appRate }
);
this.popOverCtrl.dismiss(StoreRating.RETURN_CLOSE);
});
}
submitRating() {
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.RATING_SUBMITTED,
Environment.HOME,
this.pageId,
undefined,
{ appRating: this.appRate }
);
if (this.appRate >= StoreRating.APP_MIN_RATE) {
this.currentViewText = this.appRateView[ViewType.STORE_RATE];
} else {
this.currentViewText = this.appRateView[ViewType.HELP_DESK];
}
}
goToHelpSection() {
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.HELP_SECTION_CLICKED,
Environment.HOME,
this.pageId
);
this.popOverCtrl.dismiss(StoreRating.RETURN_HELP);
}
private async appRatePopup() {
this.appRatingPopCount = await this.countAppRatingPopupAppeared();
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.OTHER,
InteractSubtype.APP_RATING_APPEARED,
this.pageId,
Environment.HOME,
undefined,
{ appRatingPopAppearedCount: this.appRatingPopCount }
);
this.rateContent(0);
}
async calculateAppRatingCountAppeared(value) {
return this.preference.putString(PreferenceKey.APP_RATING_POPUP_APPEARED, String(value)).toPromise().then(() => value);
}
async countAppRatingPopupAppeared() {
return this.preference.getString(PreferenceKey.APP_RATE_LATER_CLICKED).toPromise().then(async (val) => {
if (val) {
const incrementedVal = Number(val) + 1;
await this.calculateAppRatingCountAppeared(incrementedVal);
return incrementedVal;
} else {
return this.calculateAppRatingCountAppeared(1);
}
});
}
rateContent(ratingCount){
const ratingDomTag = document.getElementsByTagName('rating');
this.commonUtilService.setRatingStarAriaLabel(ratingDomTag, ratingCount);
}
}
<ion-content class="ion-no-padding sb-popover-container app-rate-center">
<div class="sb-popover-items">
<ion-icon end name="close" class="sb-modal-close ion-float-right" (click)="closePopover()"></ion-icon>
<img class="img-container app-rating-img" src="{{appLogo$ | async}}" alt="rating">
<div class="app-rate-appname" *ngIf="appName?.length"><strong>{{appName}}</strong></div>
<div class="app-rate-heading"><strong>{{currentViewText.heading | translate}}</strong></div>
<div class="app-rate-message ion-padding-bottom" [ngClass]="{'app-rate-ptb-16':currentViewText.type !== 'appRate'}">
{{currentViewText.message | translate}}</div>
<div class="popover-ratings" *ngIf="currentViewText.type === 'appRate'">
<rating [(ngModel)]="appRate" (ngModelChange)="rateContent($event)"></rating>
<ion-row class="ion-padding-top ion-padding-bottom">
<ion-col size="6" class="btn-pr-8">
<ion-button fill="outline" expand="block" class="app-rate-btn-outline" (click)="rateLater()">
{{'BTN_LATER' | translate}}</ion-button>
</ion-col>
<ion-col size="6" class="btn-pl-8">
<ion-button [disabled]="!appRate" expand="block" class="app-rate-btn" (click)="submitRating()">
{{'BTN_SUBMIT' | translate}}</ion-button>
</ion-col>
</ion-row>
</div>
<div *ngIf="currentViewText.type === 'storeRate'">
<ion-row class="ion-padding-bottom">
<ion-col size="5" class="btn-pr-8">
<ion-button fill="outline" expand="block" class="app-rate-btn-outline" (click)="rateLater()">
{{'BTN_LATER' | translate}}</ion-button>
</ion-col>
<ion-col size="7" class="btn-pl-8">
<ion-button expand="block" class="app-rate-btn app-rate-btn-ellipsis" (click)="rateOnStore()">
{{'BTN_RATE_ON_PLAYSTORE' | translate}}</ion-button>
</ion-col>
</ion-row>
</div>
<div class="ion-padding-bottom" *ngIf="currentViewText.type === 'helpDesk'">
<button class="sb-popover-action-btn ion-margin-bottom"
(click)="goToHelpSection()">{{'BTN_VISIT_HELP_SECTION' | translate}}</button>
</div>
</div>
</ion-content>
./rating-alert.component.scss
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/variables.scss";
@import "src/assets/styles/_variables.scss";
:host {
.sb-modal-close{
font-size: 1.5rem !important;
position: absolute;
right: 10%;
}
.content-rating-alert ion-backdrop {
background-color: map-get($colors, dark) !important;
opacity: 0.4 !important;
}
.app-rate-heading{
margin: $base-block-space 0;
color: $info-color;
}
.app-rate-message{
margin-bottom: $base-block-space;
color: $gray-800;
}
.app-rate-appname{
line-height: 1.3;
color: $info-color;
opacity: 0.9;
}
.app-rate-btn{
background-color: $info-color;
height: ($base-block-space*5)-2;
border-radius: 2px !important
}
.app-rate-btn-outline{
border-color: $info-color;
color: $info-color;
height: ($base-block-space*5)-2;
border-radius: 2px !important
}
.app-rate-ptb-16 {
padding: 16px 0;
}
.app-rate-btn-ellipsis span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 3;
}
.button-md{
text-transform: none !important;
}
.sb-popover-items{
padding-bottom: 0 !important;
background-color: map-get($colors, white);
border-radius: 5px;
}
.sb-popover-footer{
margin: 0 !important
}
.app-rating-img{
margin-top: $base-block-space * 3;
margin-bottom: $base-block-space * 0.5;
height: $base-block-space * 7;
}
.btn-pr-8{
padding-right: $base-block-space * 1 !important;
}
.btn-pl-8{
padding-left: $base-block-space * 1 !important;
}
.sc-ion-buttons-md-s .button-has-icon-only.button-clear {
height: 2rem !important;
width:auto !important;
}
.app-rate-center {
--padding-start: 5%;
--padding-end: 5%;
--padding-top: 5%;
--padding-bottom: 5%;
--background: transparent;
}
}