dev #13538

перенес кнопку, вынес функционал в директиву

angular/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.3",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 192.168.0.12",
+    "start": "ng serve --host 192.168.0.14",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

angular/src/app/app.constants.ts

@@ -49,7 +49,7 @@ export const PageListWithBonus: Page[] = [
         description: '',
         resName: 'ref-system',
         onSideBar: true,
-    },
+    }
 ];
 
 export const orderStatuses: OrderStatus = {

angular/src/app/app.module.ts

@@ -33,6 +33,7 @@ import { ShareButtonsModule   } from 'ngx-sharebuttons/buttons';
 import { ShareIconsModule } from 'ngx-sharebuttons/icons';
 import { MessagingService } from './services/messaging.service';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
+import { DownloadAppDirective } from './directives/download-app.directive';
 
 @NgModule({
   declarations: [
@@ -49,7 +50,8 @@ import { NotFoundComponent } from './pages/not-found/not-found.component';
     FooterButtonsComponent,
     UserDataComponent,
     RefSystemComponent,
-    NotFoundComponent
+    NotFoundComponent,
+    DownloadAppDirective
   ],
   imports: [
     BrowserModule,

angular/src/app/components/footer-buttons/footer-buttons.component.html

@@ -1,12 +1,11 @@
 <div class="footer-buttons-container">
-  <!-- *ngIf="deferredPrompt && token?.length" -->
+  <!-- <button
-  <button
     *ngIf="((deviceType == 'android' && deferredPrompt) || deviceType == 'ios') && token?.length"
     class="footer-buttons-container__button download"
     (click)="downloadPWA()"
   >
     <img src="./assets/download.svg" alt="download" />
-  </button>
+  </button> -->
   <button
     *ngIf="!isPermissionNotifications && token?.length"
     class="footer-buttons-container__button"

angular/src/app/components/footer-buttons/footer-buttons.component.ts

@@ -7,37 +7,15 @@ import { MessageService } from 'primeng/api';
   styleUrls: ['./footer-buttons.component.scss']
 })
 export class FooterButtonsComponent implements OnInit {
-  @Input() deferredPrompt: any;
   @Input() token!: string;
   @Input() isPermissionNotifications!: boolean;
-  @Output() downloadingPWA = new EventEmitter<null>();
   @Output() requestingPermission = new EventEmitter<null>();
   public deviceType: 'ios' | 'android' | null = null;
 
   constructor(
-    private messageService: MessageService,
   ) { }
 
   ngOnInit(): void {
-    this.getTypeDevice()
-  }
-
-  getTypeDevice() {
-    const userAgent = window.navigator.userAgent.toLowerCase()
-    const ios = /iphone|ipod|ipad/.test( userAgent );
-    this.deviceType = ios ? 'ios' : 'android'
-  }
-
-  downloadPWA() {
-    if (this.deviceType === 'ios') {
-      this.messageService.add({
-        severity: 'custom',
-        summary: `Для установки нажмите на кнопку поделиться в Вашем браузере и выберите пункт 'На экран «Домой»'`,
-        sticky: true
-      });
-      return
-    }
-    this.downloadingPWA.emit(null)
   }
 
   requestPermission() {

angular/src/app/directives/download-app.directive.spec.ts

@@ -0,0 +1,8 @@
+import { DownloadAppDirective } from './download-app.directive';
+
+describe('DownloadAppDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DownloadAppDirective();
+    expect(directive).toBeTruthy();
+  });
+});

angular/src/app/directives/download-app.directive.ts

@@ -0,0 +1,60 @@
+import { Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Directive({
+  selector: '[appDownloadApp]',
+})
+export class DownloadAppDirective implements OnInit {
+  public deviceType: 'ios' | 'android' | null = null;
+  public deferredPrompt: any;
+
+  constructor(
+    private messageService: MessageService,
+    public renderer: Renderer2,
+    private el: ElementRef
+  ) {}
+  ngOnInit(): void {
+    this.getTypeDevice();
+    this.renderer.listen('window', 'beforeinstallprompt', (e) => {
+      e.preventDefault();
+      this.deferredPrompt = e;
+    });
+    this.renderer.listen('window', 'appinstalled', (evt) => {
+      console.log('INSTALLED!!!');
+    });
+    if ((this.deviceType == 'android' && this.deferredPrompt) || this.deviceType == 'ios') {
+      this.el.nativeElement.style.display = 'none'
+    }
+  }
+
+  getTypeDevice() {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const ios = /iphone|ipod|ipad/.test(userAgent);
+    this.deviceType = ios ? 'ios' : 'android';
+  }
+
+  @HostListener('click', ['$event'])
+  downloadApp(event: MouseEvent) {
+    if (event) {
+      event.preventDefault();
+    }
+    if (!this.deferredPrompt) {
+      this.messageService.add({
+        severity: 'error',
+        summary: 'Не поддерживается в Вашем браузере!',
+      });
+      return;
+    }
+    this.deferredPrompt.prompt();
+    this.deferredPrompt.userChoice.then((res: any) => {
+      if (res.outcome === 'accepted') {
+        this.messageService.add({
+          severity: 'custom',
+          summary: 'Спасибо за установку!',
+        });
+        console.log('User Accepted!!!');
+      }
+      this.deferredPrompt = null;
+    });
+  }
+}

angular/src/app/pages/account/account.component.html

@@ -1,11 +1,19 @@
-<div [ngClass]="{
+<div
-  woocommerce: true,
+  [ngClass]="{
-  'auth-page': currentPage.code === PageCode.Auth
+    woocommerce: true,
-}">
+    'auth-page': currentPage.code === PageCode.Auth
-  <div *ngIf="currentPage.code !== PageCode.Auth" class="top-left-attribute"></div>
+  }"
+>
+  <div
+    *ngIf="currentPage.code !== PageCode.Auth"
+    class="top-left-attribute"
+  ></div>
   <div [ngSwitch]="currentPage.code" class="">
     <ng-container *ngSwitchCase="PageCode.Auth">
-      <app-auth [handleHttpError]="handleHttpErrorFunc" (phoneConfirmed)="phoneConfirmed()"></app-auth>
+      <app-auth
+        [handleHttpError]="handleHttpErrorFunc"
+        (phoneConfirmed)="phoneConfirmed()"
+      ></app-auth>
     </ng-container>
     <ng-container *ngSwitchCase="PageCode.Orders">
       <app-orders></app-orders>
@@ -20,15 +28,27 @@
       <app-ref-system></app-ref-system>
     </ng-container>
   </div>
-  <nav *ngIf="currentPage.code !== PageCode.Auth" class="woocommerce-MyAccount-navigation">
+  <nav
+    *ngIf="currentPage.code !== PageCode.Auth"
+    class="woocommerce-MyAccount-navigation"
+  >
     <ul>
       <ng-container *ngFor="let page of pageList; let index = index">
-        <li *ngIf="page.onSideBar" class="woocommerce-MyAccount-navigation-link" [ngClass]="{
+        <li
+          *ngIf="page.onSideBar"
+          class="woocommerce-MyAccount-navigation-link"
+          [ngClass]="{
             'is-active': page === currentPage,
             first: index === 1
-          }" (click)="changePage($event, page)">
+          }"
+          (click)="changePage($event, page)"
+        >
           <div class="container">
-            <img src="{{ './assets/menu-icons/' + page.resName + '.png' }}" alt="Иконка меню" />
+            <img
+              style="width: 36px"
+              src="{{ './assets/menu-icons/' + page.resName + '.png' }}"
+              alt="Иконка меню"
+            />
             <div class="menu-item-info">
               <a href="#">{{ page.name }}</a>
               <p>{{ page.description }}</p>
@@ -36,7 +56,26 @@
           </div>
         </li>
       </ng-container>
-      <li class="woocommerce-MyAccount-navigation-link" (click)="logout($event)">
+      <li
+        class="woocommerce-MyAccount-navigation-link"
+        *appDownloadApp
+      >
+        <div class="container">
+          <img
+            style="width: 36px"
+            src="./assets/menu-icons/download-app.png"
+            alt="Иконка меню"
+          />
+          <div class="menu-item-info">
+            <a href="#">Установить приложение</a>
+            <!-- <p>{{ page.description }}</p> -->
+          </div>
+        </div>
+      </li>
+      <li
+        class="woocommerce-MyAccount-navigation-link"
+        (click)="logout($event)"
+      >
         <div class="container">
           <img src="./assets/menu-icons/exit.png" alt="Иконка меню" />
           <div class="menu-item-info">
@@ -46,9 +85,12 @@
       </li>
     </ul>
   </nav>
-  <span class="version" [ngClass]="{
+  <span
+    class="version"
+    [ngClass]="{
       version: true
-    }">
+    }"
+  >
     v{{ version }}
   </span>
-</div>
+</div>

angular/src/app/pages/account/account.component.ts

@@ -133,6 +133,10 @@ export class AccountComponent implements OnInit {
 
   changePage(event: MouseEvent, page: Page): void {
     event.preventDefault();
+    if (page.resName === 'download-app') {
+      
+      return
+    }
     this.currentPage = page;
     // let params = new HttpParams();
     // params = params.append('activePage', this.currentPage.code);

angular/src/app/pages/account/bonus-program/bonus-program.component.ts

@@ -1,7 +1,16 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
-import { orderStatuses, PageList, PageListWithBonus } from 'src/app/app.constants';
+import {
-import { BonusProgramAccount, Page, Purchase, Transaction } from 'src/app/interface/data';
+  orderStatuses,
+  PageList,
+  PageListWithBonus,
+} from 'src/app/app.constants';
+import {
+  BonusProgramAccount,
+  Page,
+  Purchase,
+  Transaction,
+} from 'src/app/interface/data';
 import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
 import * as moment from 'moment-timezone';
 import * as barcode from 'jsbarcode';
@@ -10,20 +19,22 @@ import { AppleWalletService } from 'src/app/services/apple-wallet.service';
 import { CookiesService } from 'src/app/services/cookies.service';
 import { DOCUMENT } from '@angular/common';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-bonus-program',
   templateUrl: './bonus-program.component.html',
-  styleUrls: ['./bonus-program.component.scss']
+  styleUrls: ['./bonus-program.component.scss'],
 })
 export class BonusProgramComponent implements OnInit {
-
   public accountData!: BonusProgramAccount;
   public purchases: Purchase[] = [];
   public loadingBonuses: boolean = false;
   readonly orderStatuses = orderStatuses;
   readonly moment = moment;
-  readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
+  readonly pageList = environment.hasBonusProgram
+    ? PageListWithBonus
+    : PageList;
   public currentPage: Page = this.pageList[1];
   public userName: string = '';
   public deviceType: 'ios' | 'android' | null = null;
@@ -34,67 +45,98 @@ export class BonusProgramComponent implements OnInit {
     private cookiesService: CookiesService,
     @Inject(DOCUMENT) private document: Document,
     private http: HttpClient,
-  ) { }
+    private messageService: MessageService,
+  ) {}
 
   ngOnInit(): void {
     this.getAccountData();
-    this.getTypeDevice()
+    this.getTypeDevice();
   }
 
   getTypeDevice() {
-    const userAgent = window.navigator.userAgent.toLowerCase()
+    const userAgent = window.navigator.userAgent.toLowerCase();
-    const ios = /iphone|ipod|ipad/.test( userAgent );
+    const ios = /iphone|ipod|ipad/.test(userAgent);
-    this.deviceType = ios ? 'ios' : 'android'
+    this.deviceType = ios ? 'ios' : 'android';
   }
 
-  async getAccountData(): Promise<void>{
+  async getAccountData(): Promise<void> {
     this.loadingBonuses = true;
 
-    this.jsonrpc.rpc({
+    this.jsonrpc
-      method: 'getAdditionalInfo',
+      .rpc(
-      params: []
+        {
-    }, RpcService.authService, true).subscribe({
+          method: 'getAdditionalInfo',
-      next: (res) => {
+          params: [],
-        this.userName = res.data.first_name
+        },
-      },
+        RpcService.authService,
-      error: (err) => {
+        true
-        console.error('Error: ', err)
+      )
-      }
+      .subscribe({
-    });
+        next: (res) => {
+          this.userName = res?.data?.first_name;
+        },
+        error: (err) => {
+          console.error('Error: ', err);
+        },
+      });
 
-    this.accountData = (await lastValueFrom(
+    const getAccount = await lastValueFrom(
-      this.jsonrpc.rpc({
+      this.jsonrpc.rpc(
-        method: 'GetAccounts',
+        {
-        params: []
+          method: 'GetAccounts',
-      },
+          params: [],
-      RpcService.bonusService
+        },
-    )))['Cards'][0];
+        RpcService.bonusService
+      )
+    );
+
+    this.accountData = getAccount && getAccount['Cards'][0];
     this.loadingBonuses = false;
-    
+    if (this.accountData) {
-    barcode("#barcode")
+      barcode('#barcode')
-    .options({font: "OCR-B"}) // Will affect all barcodes
+        .options({ font: 'OCR-B' }) // Will affect all barcodes
-    .EAN13(`${this.accountData.CardNumber}`.padStart(12, "0"), {fontSize: 18, textMargin: 0})
+        .EAN13(`${this.accountData.CardNumber}`.padStart(12, '0'), {
-    .render();
+          fontSize: 18,
-    const transactions: Transaction[] = (await lastValueFrom(
+          textMargin: 0,
-      this.jsonrpc.rpc(
+        })
-        {
+        .render();
-          method: 'GetAccountTransactions',
+    }
-          params: []
+    const getTransactions = (
-        },
+      await lastValueFrom(
-        RpcService.bonusService
+        this.jsonrpc.rpc(
-      )))['Transactions'];
+          {
+            method: 'GetAccountTransactions',
+            params: [],
+          },
+          RpcService.bonusService
+        )
+      )
+    )
+    if (!getTransactions) {
+      this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
+      return
+    }
+    const transactions: Transaction[] = getTransactions && getTransactions['Transactions'];
 
-    const purchases: Purchase[] = (await lastValueFrom(
+    const getPurchases = (
-      this.jsonrpc.rpc(
+      await lastValueFrom(
-        {
+        this.jsonrpc.rpc(
-          method: 'GetAccountPurchase',
+          {
-          params: []
+            method: 'GetAccountPurchase',
-        },
+            params: [],
-        RpcService.bonusService
+          },
-      )))['Purchases'];
+          RpcService.bonusService
+        )
+      )
+    )
+    if (!getPurchases) {
+      this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
+      return
+    }
+    const purchases: Purchase[] = getPurchases && getPurchases['Purchases'];
 
-    this.purchases = purchases.map<Purchase>((purchase) => {
+    this.purchases = purchases && purchases.map<Purchase>((purchase) => {
-      const id = purchase.ID.slice(0,36).toLowerCase();
+      const id = purchase.ID.slice(0, 36).toLowerCase();
       purchase.Transactions = transactions.filter((transaction) => {
         const same = transaction.Purchase === id;
         transaction.HasPurchase = same;
@@ -102,28 +144,27 @@ export class BonusProgramComponent implements OnInit {
       });
       return purchase;
     });
-    transactions.forEach((transaction) => {
+    transactions &&  transactions.forEach((transaction) => {
-      if(!transaction.HasPurchase){
+      if (!transaction.HasPurchase) {
-  			this.purchases.push({
+        this.purchases.push({
-  				ID: transaction.ID,
+          ID: transaction.ID,
           PurchaseDate: transaction.Date,
           Transactions: [transaction],
           IsSingleTransaction: true,
-        })
+        });
       }
     });
-    this.purchases = this.purchases.sort((a,b) => {
+    this.purchases = this.purchases && this.purchases.sort((a, b) => {
       return moment(a.PurchaseDate).date() - moment(b.PurchaseDate).date();
     });
   }
 
-
   async addCardToWallet(e: any) {
-    e.preventDefault()
+    e.preventDefault();
-    const token = this.cookiesService.getItem('token')
+    const token = this.cookiesService.getItem('token');
-    const accountData = (await lastValueFrom(
+    const accountData = (
-      this.jsonrpc
+      await lastValueFrom(
-        .rpc(
+        this.jsonrpc.rpc(
           {
             method: 'getTokenData',
             params: [],
@@ -131,19 +172,17 @@ export class BonusProgramComponent implements OnInit {
           RpcService.authService,
           true
         )
-    )).data
+      )
+    ).data;
     if (token && accountData.user_id) {
       this.appleWallet.generateCard(token, accountData.user_id).subscribe({
         next: (res: any) => {
-          this.document.location.href = res.url
+          this.document.location.href = res.url;
         },
         error: (err) => {
           console.log('Error: ', err);
-          
+        },
-        }
+      });
-      })
     }
-    
   }
-
 }

angular/src/app/pages/account/orders/orders.component.html

@@ -67,7 +67,7 @@
     </tbody>
   </table>
   <p
-    *ngIf="purchases.length !== purchasesShortArray.length"
+    *ngIf="purchases?.length !== purchasesShortArray?.length"
     class="show-more-orders"
     (click)="getMoreOrders()"
   >
@@ -75,12 +75,12 @@
   </p>
   <p-progressSpinner
     *ngIf="ordersLoadingStatus"
-    [style]="{ width: '100%' }"
+    [style]="{ display: 'block' }"
     strokeWidth="2"
     styleClass="angular-spinner"
   ></p-progressSpinner>
   <p
-    *ngIf="purchases.length === 0 && !ordersLoadingStatus"
+    *ngIf="purchases?.length === 0 && !ordersLoadingStatus"
     style="width: 100%; text-align: center"
   >
     Нет заказов

angular/src/app/pages/account/orders/orders.component.ts

@@ -5,11 +5,12 @@ import { Purchase } from 'src/app/interface/data';
 import * as moment from 'moment-timezone';
 import { lastValueFrom } from 'rxjs';
 import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-orders',
   templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.scss']
+  styleUrls: ['./orders.component.scss'],
 })
 export class OrdersComponent implements OnInit {
   @Input() handleHttpError!: (error: HttpErrorResponse) => void;
@@ -23,24 +24,31 @@ export class OrdersComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private jsonrpc: JsonrpcService,
-  ) { }
+    private messageService: MessageService,
+  ) {}
 
   ngOnInit(): void {
-    this.getOrders()
+    this.getOrders();
   }
 
-  async getOrders(){
+  async getOrders() {
-    const purchases: Purchase[] = (await lastValueFrom(
+    const getPurchases = await lastValueFrom(
       this.jsonrpc.rpc(
         {
           method: 'GetAccountPurchase',
-          params: []
+          params: [],
         },
         RpcService.bonusService
-      )))['Purchases'];
+      )
+    );
+    if (!getPurchases) {
+      this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
+      return
+    }
+    const purchases: Purchase[] = getPurchases && getPurchases['Purchases'];
 
-    this.purchases = purchases.map<Purchase>((purchase) => {
+    this.purchases = purchases && purchases.map<Purchase>((purchase) => {
-      const id = purchase.ID.slice(0,36).toLowerCase();
+      const id = purchase.ID.slice(0, 36).toLowerCase();
       // purchase.Transactions = transactions.filter((transaction) => {
       //   const same = transaction.Purchase === id;
       //   transaction.HasPurchase = same;
@@ -48,7 +56,7 @@ export class OrdersComponent implements OnInit {
       // });
       return purchase;
     });
-    this.purchasesShortArray = this.purchases.slice(0, this.lastViewOrder)
+    this.purchasesShortArray = this.purchases && this.purchases.slice(0, this.lastViewOrder);
     this.ordersLoadingStatus = false;
   }
 

angular/src/app/pages/account/ref-system/ref-system.component.ts

@@ -31,7 +31,6 @@ export class RefSystemComponent implements OnInit {
           true
         )
     )).data
-    console.log(accountData);
     
     this.refUrl += accountData.user_id
     this.loading = false

angular/src/app/pages/account/user-data/user-data.component.ts

@@ -34,6 +34,10 @@ export class UserDataComponent implements OnInit {
       params: []
     }, RpcService.authService, true).subscribe({
       next: (res) => {
+        if (!res.data) {
+          this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});
+          return
+        }
         const { first_name, birthdate, gender } = res.data
         this.userData = { first_name, birthdate, gender }
         this.createUserDataForm({...this.userData})

angular/src/app/pages/main/main.component.html

@@ -1,7 +1,7 @@
 <div class="main-container">
     <app-navbar></app-navbar>
     <p-toast position="top-center"></p-toast>
-    <app-footer-buttons [token]="token" [deferredPrompt]="deferredPrompt"
+    <app-footer-buttons [token]="token"
-        [isPermissionNotifications]="isPermissionNotifications" (downloadingPWA)="downloadPWA()"
+        [isPermissionNotifications]="isPermissionNotifications"
         (requestingPermission)="requestPermission()"></app-footer-buttons>
 </div>

angular/src/app/pages/main/main.component.ts

@@ -24,7 +24,6 @@ export class MainComponent implements OnInit {
   private cardComponent!: ComponentRef<CardComponent>;
   private accountComponent!: ComponentRef<AccountComponent>;
   public messagingToken!: string | null;
-  public deferredPrompt: any;
   public isPermissionNotifications: boolean = false;
   public token = '';
   public message: any;
@@ -32,20 +31,11 @@ export class MainComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private viewContainerRef: ViewContainerRef,
-    private afMessaging: AngularFireMessaging,
     public el: ElementRef,
     public renderer: Renderer2,
-    private messageService: MessageService,
     private messagingService: MessagingService,
     private cookiesService: CookiesService,
   ) {
-    renderer.listen('window', 'appinstalled', (evt) => {
-      console.log('INSTALLED!!!');
-    });
-    renderer.listen('window', 'beforeinstallprompt', (e) => {
-      e.preventDefault();
-      this.deferredPrompt = e;
-    });
     route.queryParams.subscribe((params) => {
       if (params['token']) {
         this.token = params['token']
@@ -61,27 +51,6 @@ export class MainComponent implements OnInit {
     // this.checkRequestPermission()
   }
 
-  downloadPWA() {
-    if (!this.deferredPrompt) {
-      this.messageService.add({
-        severity: 'error',
-        summary: 'Не поддерживается в Вашем браузере!',
-      });
-      return;
-    }
-    this.deferredPrompt.prompt();
-    this.deferredPrompt.userChoice.then((res: any) => {
-      if (res.outcome === 'accepted') {
-        this.messageService.add({
-          severity: 'custom',
-          summary: 'Спасибо за установку!',
-        });
-        console.log('User Accepted!!!');
-      }
-      this.deferredPrompt = null;
-    });
-  }
-
   checkRequestPermission() {
     this.isPermissionNotifications =
       Notification.permission !== 'granted' ? false : true;
@@ -100,20 +69,6 @@ export class MainComponent implements OnInit {
       this.message = this.messagingService.currentMessage;
     }
   }
-  // test function
-  copyMessage(val: string | null) {
-    const selBox = document.createElement('textarea');
-    selBox.style.position = 'fixed';
-    selBox.style.left = '0';
-    selBox.style.top = '0';
-    selBox.style.opacity = '0';
-    if (val) selBox.value = val;
-    document.body.appendChild(selBox);
-    selBox.focus();
-    selBox.select();
-    document.execCommand('copy');
-    document.body.removeChild(selBox);
-  }
 
   appendCard(): void {
     const route = this.route.snapshot.url[0]?.path;