File

src/app/components/popups/sb-app-share-popup/sb-app-share-popup.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(popoverCtrl: PopoverController, social: SocialSharing, platform: Platform, utilityService: UtilityService, appVersion: AppVersion, navParams: NavParams, telemetryGeneratorService: TelemetryGeneratorService, permissionService: AndroidPermissionsService, commonUtilService: CommonUtilService)
Parameters :
Name Type Optional
popoverCtrl PopoverController No
social SocialSharing No
platform Platform No
utilityService UtilityService No
appVersion AppVersion No
navParams NavParams No
telemetryGeneratorService TelemetryGeneratorService No
permissionService AndroidPermissionsService No
commonUtilService CommonUtilService No

Methods

Private Async checkForPermissions
checkForPermissions()
Returns : Promise<boolean | undefined>
closePopover
closePopover()
Returns : void
Async exportApk
exportApk(shareParams)
Parameters :
Name Optional
shareParams No
Returns : Promise<void>
generateConfirmClickTelemetry
generateConfirmClickTelemetry(shareMode)
Parameters :
Name Optional
shareMode No
Returns : void
generateImpressionTelemetry
generateImpressionTelemetry()
Returns : void
generateInteractTelemetry
generateInteractTelemetry(interactionType, interactSubtype)
Parameters :
Name Optional
interactionType No
interactSubtype No
Returns : void
generateShareClickTelemetry
generateShareClickTelemetry()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
Async ngOnInit
ngOnInit()
Returns : any
Async saveFile
saveFile()
Returns : any
Async shareFile
shareFile()
Returns : any
Async shareLink
shareLink()
Returns : any
Private Async showStoragePermissionPopup
showStoragePermissionPopup()
Returns : Promise<boolean | undefined>

Properties

appName
Type : string
Default value : ''
backButtonFunc
Type : Subscription
filePath
Type : string
fileSize
Type : number
Default value : 0
pageId
Type : string
Public platform
Type : Platform
Public popoverCtrl
Type : PopoverController
shareOptions
Type : object
Default value : { link: { name: 'SHARE_LINK', value: 'link' }, file: { name: 'SEND_FILE', value: 'file' }, save: { name: 'SAVE_FILE_ON_DEVICE', value: 'save' } }
shareType
Type : string
shareUrl
Type : string
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ShareItemType, ShareMode } from '@app/app/app.constant';
import { Environment, ID, ImpressionType, InteractSubtype, InteractType, PageId } from '@app/services';
import { AndroidPermission, AndroidPermissionsStatus } from '@app/services/android-permissions/android-permission';
import { CommonUtilService } from '@app/services/common-util.service';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { NavParams, Platform, PopoverController } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { AndroidPermissionsService } from '../../../../services/android-permissions/android-permissions.service';
import { UtilityService } from '../../../../services/utility-service';

@Component({
  selector: 'app-sb-share-popup',
  templateUrl: './sb-app-share-popup.component.html',
  styleUrls: ['./sb-app-share-popup.component.scss'],
})
export class SbAppSharePopupComponent implements OnInit, OnDestroy {

  backButtonFunc: Subscription;
  shareOptions = {
    link: {
      name: 'SHARE_LINK',
      value: 'link'
    },
    file: {
      name: 'SEND_FILE',
      value: 'file'
    },
    save: {
      name: 'SAVE_FILE_ON_DEVICE',
      value: 'save'
    }
  };
  shareType: string;
  shareUrl: string;
  filePath: string;
  fileSize = 0;
  pageId: string;
  appName = '';

  constructor(
    public popoverCtrl: PopoverController,
    private social: SocialSharing,
    public platform: Platform,
    private utilityService: UtilityService,
    private appVersion: AppVersion,
    private navParams: NavParams,
    private telemetryGeneratorService: TelemetryGeneratorService,
    private permissionService: AndroidPermissionsService,
    private commonUtilService: CommonUtilService) {
    this.pageId = this.navParams.get('pageId');
  }

  async ngOnInit() {
    this.generateShareClickTelemetry();
    this.generateImpressionTelemetry();
    this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
      this.popoverCtrl.dismiss();
      this.backButtonFunc.unsubscribe();
    });
    this.shareType = this.shareOptions.link.value;
    const packageName = await this.appVersion.getPackageName();
    this.appName = await this.appVersion.getAppName();
    const utmParams = `&referrer=utm_source%3Dmobile%26utm_campaign%3Dshare_app`;
    this.shareUrl = `https://play.google.com/store/apps/details?id=${packageName}${utmParams}`;
    this.utilityService.getApkSize().then(async (fileSize) => {
      this.fileSize = Number(fileSize);
    }).catch(async (err) => {
    });
  }

  generateImpressionTelemetry() {
    this.telemetryGeneratorService.generateImpressionTelemetry(
      ImpressionType.VIEW, '',
      PageId.SHARE_APP_POPUP,
      Environment.SETTINGS);
  }

  generateShareClickTelemetry() {
    this.telemetryGeneratorService.generateInteractTelemetry(ShareItemType.APP,
      '',
      Environment.SETTINGS,
      this.pageId,
      undefined, undefined, undefined, undefined,
      ID.SHARE);
  }

  generateConfirmClickTelemetry(shareMode) {
    this.telemetryGeneratorService.generateInteractTelemetry(shareMode,
      '',
      Environment.SETTINGS,
      PageId.SHARE_APP_POPUP,
      undefined, undefined, undefined, undefined,
      ID.SHARE_CONFIRM);
  }

  generateInteractTelemetry(interactionType, interactSubtype) {
    this.telemetryGeneratorService.generateInteractTelemetry(
      interactionType, interactSubtype,
      PageId.SHARE_APP_POPUP,
      Environment.SETTINGS
    );
  }

  ngOnDestroy(): void {
    this.backButtonFunc.unsubscribe();
  }

  closePopover() {
    this.generateInteractTelemetry(InteractType.TOUCH, InteractSubtype.CLOSE_CLICKED);
    this.popoverCtrl.dismiss();
  }

  async shareLink() {
    this.generateConfirmClickTelemetry(ShareMode.SHARE);
    this.generateInteractTelemetry(InteractType.TOUCH, InteractSubtype.SHARE_APP_INITIATED);
    const appName = await this.appVersion.getAppName();
    const url = this.commonUtilService.translateMessage('SHARE_APP_LINK', { app_name: appName, play_store_url: this.shareUrl });
    if(this.platform.is('ios')) {
      this.social.share(null, null, null, this.shareUrl);
    } else {
      this.social.share(null, null, null, url);
    }
    
    this.popoverCtrl.dismiss();
    this.generateInteractTelemetry(InteractType.OTHER, InteractSubtype.SHARE_APP_SUCCESS);
  }

  async shareFile() {
    await this.checkForPermissions().then((result) => {
      if (result) {
        this.generateConfirmClickTelemetry(ShareMode.SEND);
        this.generateInteractTelemetry(InteractType.TOUCH, InteractSubtype.SHARE_APP_INITIATED);
        const shareParams = {
          byFile: true,
        };
        this.exportApk(shareParams);
        this.popoverCtrl.dismiss();
        this.generateInteractTelemetry(InteractType.OTHER, InteractSubtype.SHARE_APP_SUCCESS);
      } else {
        this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
      }
    });
  }

  async saveFile() {
    await this.checkForPermissions().then((result) => {
      if (result) {
        this.generateConfirmClickTelemetry(ShareMode.SAVE);
        this.generateInteractTelemetry(InteractType.TOUCH, InteractSubtype.SHARE_APP_INITIATED);
        const shareParams = {
          saveFile: true,
        };
        this.exportApk(shareParams);
        this.popoverCtrl.dismiss();
        this.generateInteractTelemetry(InteractType.OTHER, InteractSubtype.SHARE_APP_SUCCESS);
      } else {
        this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
      }
    });
  }

  async exportApk(shareParams): Promise<void> {
    let destination = '';
    if (shareParams.saveFile) {
      const folderPath = this.platform.is('ios') ? cordova.file.documentsDirectory : cordova.file.externalRootDirectory 
      destination = folderPath + 'Download/';
    }
    const loader = await this.commonUtilService.getLoader();
    await loader.present();
    this.utilityService.exportApk(destination).then(async (output) => {
      if (shareParams.byFile) {
        this.social.share('', '', 'file://' + output, '');
      } else {
        this.commonUtilService.showToast('FILE_SAVED', '', 'green-toast');
      }
      await loader.dismiss();
    }).catch(async (err) => {
      await loader.dismiss();
    });
  }

  private async checkForPermissions(): Promise<boolean | undefined> {
    if(this.platform.is('ios')) {
      return new Promise<boolean | undefined>(async (resolve, reject) => {
        resolve(true);
      });
    }
    return new Promise<boolean | undefined>(async (resolve, reject) => {
      const permissionStatus = await this.commonUtilService.getGivenPermissionStatus(AndroidPermission.WRITE_EXTERNAL_STORAGE);

      if (permissionStatus.hasPermission) {
        resolve(true);
      } else if (permissionStatus.isPermissionAlwaysDenied) {
        await this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
        resolve(false);
      } else {
        this.showStoragePermissionPopup().then((result) => {
          if (result) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      }
    });
  }
  private async showStoragePermissionPopup(): Promise<boolean | undefined> {
    await this.popoverCtrl.dismiss();
    return new Promise<boolean | undefined>(async (resolve, reject) => {
      const confirm = await this.commonUtilService.buildPermissionPopover(
        async (selectedButton: string) => {
          if (selectedButton === this.commonUtilService.translateMessage('NOT_NOW')) {
            this.telemetryGeneratorService.generateInteractTelemetry(
              InteractType.TOUCH,
              InteractSubtype.NOT_NOW_CLICKED,
              Environment.SETTINGS,
              PageId.PERMISSION_POPUP);
            await this.commonUtilService.showSettingsPageToast('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
          } else if (selectedButton === this.commonUtilService.translateMessage('ALLOW')) {
            this.telemetryGeneratorService.generateInteractTelemetry(
              InteractType.TOUCH,
              InteractSubtype.ALLOW_CLICKED,
              Environment.SETTINGS,
              PageId.PERMISSION_POPUP);
            this.permissionService.requestPermission(AndroidPermission.WRITE_EXTERNAL_STORAGE)
              .subscribe(async (status: AndroidPermissionsStatus) => {
                if (status.hasPermission) {
                  this.telemetryGeneratorService.generateInteractTelemetry(
                    InteractType.TOUCH,
                    InteractSubtype.ALLOW_CLICKED,
                    Environment.SETTINGS,
                    PageId.APP_PERMISSION_POPUP
                  );
                  resolve(true);
                } else if (status.isPermissionAlwaysDenied) {
                  await this.commonUtilService.showSettingsPageToast
                    ('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
                  resolve(false);
                } else {
                  this.telemetryGeneratorService.generateInteractTelemetry(
                    InteractType.TOUCH,
                    InteractSubtype.DENY_CLICKED,
                    Environment.SETTINGS,
                    PageId.APP_PERMISSION_POPUP
                  );
                  await this.commonUtilService.showSettingsPageToast
                    ('FILE_MANAGER_PERMISSION_DESCRIPTION', this.appName, this.pageId, true);
                }
                resolve(undefined);
              });
          }
        }, this.appName, this.commonUtilService.translateMessage('FILE_MANAGER'), 'FILE_MANAGER_PERMISSION_DESCRIPTION', this.pageId, true
      );
      await confirm.present();
    });
  }
}
<ion-header class="sb-popover-header">
  <ion-toolbar class="sb-popover-toolbar">
    <ion-title class="sb-popover-title">{{'SHARE' | translate}}
      <ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="sb-popover-container ion-no-padding">
  <ion-list lines="none" class="content-share">
    <ion-radio-group [(ngModel)]="shareType">
      <div>
        <ion-item>
          <ion-label>{{shareOptions.link.name | translate}}</ion-label>
          <ion-radio slot="start" value="{{shareOptions.link.value}}"></ion-radio>
        </ion-item>
        <p class="share-url">{{shareUrl}}</p>
      </div>

      <ion-item>
        <ion-label>{{shareOptions.file.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.file.value}}"></ion-radio>
      </ion-item>
      <p class="share-desc" *ngIf="fileSize">{{ 'DOWNLOAD_FILE_SIZE' | translate: {'%s': fileSize | fileSize } }}</p>

      <ion-item *ngIf="!platform.is('ios')">
        <ion-label>{{shareOptions.save.name | translate}}</ion-label>
        <ion-radio slot="start" value="{{shareOptions.save.value}}"></ion-radio>
      </ion-item>
      <p class="share-desc">{{'DOWNLOAD_PATH' | translate}}</p>

    </ion-radio-group>
  </ion-list>
</ion-content>

<ion-footer>
  <div class="sb-popover-footer">
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.link.value"
      (click)="shareLink()">{{'SHARE' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.file.value"
      (click)="shareFile()">{{'SEND' | translate}}</button>
    <button class="sb-popover-action-btn width-100 popover-color" *ngIf="shareType === shareOptions.save.value"
      (click)="saveFile()">{{'SAVE' | translate}}</button>
  </div>
</ion-footer>

./sb-app-share-popup.component.scss

@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_variables.scss";

.flex-grow-1{
    flex-grow: 1;
}

.sb-popover .sb-popover-footer .sb-popover-action-btn.sb-btn-outline-info {
    color: $primary-color;
    margin: 0 10px;
}

.content-share{
    ion-radio{
        margin-right: 10px !important;
    }
    .share-link{
        border-bottom: 1px solid map-get($colors, empty_color);
    }
    .share-url{
        margin-left: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 15px;
        border: 1px solid $light-blue;
        padding: 5px;
        color: map-get($colors, gray_solid);
        position: relative;
        top: -0.625rem;
    }
    .share-desc{
        text-align: left;
        margin-left: 50px;
        color: map-get($colors, gray_solid);
        position: relative;
    }
    .share-info{
        background: $light-blue;
        margin-left: 20px;
        padding: 5px;
        margin-right: 15px;
        text-align: left;
        margin-bottom: 20px;
        color: map-get($colors, light_black);
        ion-icon{
            color: map-get($colors, gray_solid);
            position: relative;
            top: 0.188rem;
        }
    }
}

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""