UI: mob app qr code - added links to stores for badges

ui-ngx/src/app/core/http/mobile-app.service.ts

@@ -18,7 +18,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { defaultHttpOptionsFromConfig, RequestConfig } from '@core/http/http-utils';
 import { Observable } from 'rxjs';
-import { MobileAppSettings } from '@shared/models/mobile-app.models';
+import { MobileAppSettings, MobileAppStoreLinks } from '@shared/models/mobile-app.models';
 
 @Injectable({
   providedIn: 'root'
@@ -42,4 +42,8 @@ export class MobileAppService {
     return this.http.get<string>(`/api/mobile/deepLink`, defaultHttpOptionsFromConfig(config));
   }
 
+  public getMobileAppStoreLinks(config?: RequestConfig): Observable<MobileAppStoreLinks> {
+    return this.http.get<MobileAppStoreLinks>('/api/mobile/app/storeLinks', defaultHttpOptionsFromConfig(config));
+  }
+
 }

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html

@@ -28,8 +28,12 @@
       <div class="tb-qrcode" (click)="navigateByDeepLink($event)" [innerHTML]="qrCodeSVG | safe: 'html'" ></div>
       <div class="tb-badges" *ngIf="(mobileAppSettings?.iosConfig.enabled || mobileAppSettings?.androidConfig.enabled) &&
                                   mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer">
-        <img *ngIf="mobileAppSettings?.iosConfig.enabled" src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
-        <img *ngIf="mobileAppSettings?.androidConfig.enabled" src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">
+        <img *ngIf="mobileAppSettings?.iosConfig.enabled"
+             (click)="navigateByStoreLink($event, appStoreLink)"
+             src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
+        <img *ngIf="mobileAppSettings?.androidConfig.enabled"
+             (click)="navigateByStoreLink($event, googlePlayLink)"
+             src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">
       </div>
     </div>
     <div class="tb-qrcode-label" *ngIf="mobileAppSettings?.qrCodeConfig.qrCodeLabelEnabled">

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss

@@ -68,6 +68,9 @@
     flex-direction: column;
     flex: 0.44;
     gap: 8px;
+    img {
+      cursor: pointer;
+    }
   }
 }
 

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts

@@ -45,6 +45,9 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
   private deepLinkTTL: number;
   private deepLinkTTLTimeoutID: NodeJS.Timeout;
 
+  googlePlayLink: string;
+  appStoreLink: string;
+
   previewMode = false;
 
   badgePosition = BadgePosition;
@@ -108,6 +111,10 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
     } else {
       this.previewMode = true;
     }
+    this.mobileAppService.getMobileAppStoreLinks().subscribe(storeLinks => {
+      this.googlePlayLink = storeLinks.googlePlayLink;
+      this.appStoreLink = storeLinks.appStoreLink;
+    });
     this.initMobileAppQRCode();
   }
 
@@ -130,6 +137,13 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
     }
   }
 
+  navigateByStoreLink($event, storeLink: string) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    window.open(storeLink, '_blank');
+  }
+
   private initMobileAppQRCode() {
     if (this.deepLinkTTLTimeoutID) {
       clearTimeout(this.deepLinkTTLTimeoutID);

ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html

@@ -76,6 +76,15 @@
               </mat-form-field>
             </div>
           </div>
+          <div class="tb-form-panel no-border no-padding-top"
+               *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">
+            <div class="tb-form-row column-xs">
+              <div class="fixed-title-width-230">{{ 'admin.mobile-app.store-link' | translate }}</div>
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">
+              </mat-form-field>
+            </div>
+          </div>
         </div>
         <div class="tb-form-panel stroked no-padding no-gap" formGroupName="iosConfig">
           <div class="tb-form-row no-border no-padding-bottom">
@@ -101,6 +110,15 @@
               </mat-form-field>
             </div>
           </div>
+          <div class="tb-form-panel no-border no-padding-top"
+               *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value">
+            <div class="tb-form-row column-xs">
+              <div class="fixed-title-width-230">{{ 'admin.mobile-app.store-link' | translate }}</div>
+              <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">
+              </mat-form-field>
+            </div>
+          </div>
         </div>
       </div>
       <div class="tb-form-panel" formGroupName="qrCodeConfig">

ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts

@@ -128,11 +128,13 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
       androidConfig: this.fb.group({
         enabled: [true],
         appPackage: [{value: '', disabled: true}, [Validators.required]],
-        sha256CertFingerprints: [{value: '', disabled: true}, [Validators.required]]
+        sha256CertFingerprints: [{value: '', disabled: true}, [Validators.required]],
+        storeLink: ['']
       }),
       iosConfig: this.fb.group({
         enabled: [true],
-        appId: [{value: '', disabled: true}, [Validators.required]]
+        appId: [{value: '', disabled: true}, [Validators.required]],
+        storeLink: ['']
       }),
       qrCodeConfig: this.fb.group({
         showOnHomePage: [true],

ui-ngx/src/app/shared/models/mobile-app.models.ts

@@ -26,12 +26,14 @@ export interface MobileAppSettings extends HasTenantId {
 export interface AndroidConfig {
   enabled: boolean;
   appPackage: string;
-  sha256CertFingerprints: string
+  sha256CertFingerprints: string;
+  storeLink: string;
 }
 
 export interface IosConfig {
   enabled: boolean;
   appId: string;
+  storeLink: string;
 }
 
 export interface QRCodeConfig {
@@ -52,6 +54,11 @@ export enum BadgePosition {
   LEFT = 'LEFT'
 }
 
+export interface MobileAppStoreLinks {
+  googlePlayLink: string;
+  appStoreLink: string;
+}
+
 export const badgePositionTranslationsMap = new Map<BadgePosition, string>([
   [BadgePosition.RIGHT, 'admin.mobile-app.right'],
   [BadgePosition.LEFT, 'admin.mobile-app.left']

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -437,6 +437,7 @@
             "ios": "iOS",
             "app-id": "App ID",
             "app-id-required": "App ID is required",
+            "store-link": "Store link",
             "appearance": "Appearance",
             "appearance-on-home-page": "Appearance on Home page",
             "enabled": "Enabled",