dev #12401

правки

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

@@ -1,4 +1,18 @@
 <div class="footer-buttons-container">
-    <button *ngIf="deferredPrompt && token?.length" class="footer-buttons-container__button" (click)="downloadPWA()">Установить на главный экран</button>
-    <button *ngIf="!isPermissionNotifications" class="footer-buttons-container__button" (click)="requestPermission()" value="click to copy" >Подписаться на уведомления</button>
+  <!-- *ngIf="deferredPrompt && token?.length" -->
+  <button
+    *ngIf="true"
+    class="footer-buttons-container__button"
+    (click)="downloadPWA()"
+  >
+    <img src="./assets/download.svg" alt="download" />
+  </button>
+  <button
+    *ngIf="!isPermissionNotifications"
+    class="footer-buttons-container__button"
+    (click)="requestPermission()"
+    value="click to copy"
+  >
+    <img src="./assets/notification.svg" alt="notification" />
+  </button>
 </div>

src/app/components/footer-buttons/footer-buttons.component.scss

@@ -1,25 +1,33 @@
 :host {
+  .footer-buttons-container {
     position: fixed;
     bottom: 16px;
-    width: 100%;
+    right: 0;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     z-index: 9999;
-    .footer-buttons-container {
-        max-width: 400px;
-        width: 90vw;
-        &__button {
-            width: 100%;
-            height: 34px;
-            background: #09467f;
-            border: solid #fff 1px !important;
-            color: #fff;
-            border-radius: 5px;
-            font-weight: 600;
-            letter-spacing: 2px;
-            border: none;
-            margin-top: 8px;
-            cursor: pointer;
-        }
+    flex-direction: column;
+    align-items: flex-end;
+    padding: 0 8px;
+    &__button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 60px;
+      height: 60px;
+      background: #09467f;
+      border: solid #fff 1px !important;
+      color: #fff;
+      border-radius: 100%;
+      font-weight: 600;
+      letter-spacing: 2px;
+      border: none;
+      margin-top: 8px;
+      margin-right: 0;
+      cursor: pointer;
+      img {
+        width: 60%;
+      }
     }
-}
+  }
+}

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

@@ -14,10 +14,12 @@
         characterPattern="[0-9]"
         styleClass="woocommerce-Input woocommerce-Input--text input-text"
         name="phone"
+        type="tel"
         inputId="phone"
         autocomplete="phone"
         placeholder="+7 (000) 000-00-00"
-        [unmask]="true"
+        mask="+7 (999) 999-9999"
+        [unmask]="false"
         [(ngModel)]="phone"
       ></p-inputMask>
     </p>
@@ -57,7 +59,8 @@
       </label>
       <input
         pInputText
-        type="text"
+        type="number"
+        pattern="\d*"
         class="woocommerce-Input woocommerce-Input--text input-text"
         name="code"
         id="code"

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

@@ -1,6 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
 import { CookiesService } from 'src/app/services/cookies.service';
 import { FormatPhoneService } from 'src/app/services/format-phone.service';
 import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
@@ -27,18 +28,25 @@ export class AuthComponent {
     private cookiesService: CookiesService,
     private router: Router,
     private route: ActivatedRoute,
+    private messageService: MessageService,
   ) {
   }
 
   getCode(event: SubmitEvent): void {
     event.preventDefault();
     this.loading = true;
-    this.phoneToConfirm = '+7' + this.phone.replace(/\D/g, '');
+    this.phoneToConfirm = '+' + this.phone.replace(/\D/g, '');
     this.jsonrpc.rpc({
       method: 'sendVerifyByPhone',
       params: [this.phoneToConfirm]
     }, RpcService.authService, false).subscribe({
         next: (result) => {
+          if (result.code === -1) {
+            this.messageService.add({
+              severity: 'error',
+              summary: 'Произошла ошибка, попробуйте позже!',
+            });
+          }
           if (result.code === 0) {
             this.isCodeConfirm = true;
           }
@@ -53,7 +61,7 @@ export class AuthComponent {
     event.preventDefault();
     this.jsonrpc.rpc({
       method: 'getTokenByPhone',
-      params: [this.phoneToConfirm, this.code]
+      params: [this.phoneToConfirm, String(this.code)]
     }, RpcService.authService, false).subscribe({
         next: (result) => {
           if (result.code === 0) {

src/app/pages/account/ref-system/ref-system.component.html

@@ -13,8 +13,8 @@
   ></p-progressSpinner>
   <share-buttons
     [theme]="'modern-dark'"
-    [include]="['facebook', 'twitter', 'whatsapp', 'vk', 'copy']"
-    [show]="5"
+    [include]="['telegram', 'whatsapp', 'vk', 'copy', 'facebook', 'twitter']"
+    [show]="4"
     [url]="refUrl"
     style="display: flex; justify-content: center;"
   ></share-buttons>

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

@@ -1,16 +1,23 @@
-import { Component, ComponentRef, ElementRef, EmbeddedViewRef, OnInit, Renderer2, ViewContainerRef } from "@angular/core";
-import { AngularFireMessaging } from "@angular/fire/compat/messaging";
-import { ActivatedRoute } from "@angular/router";
-import { CardComponent } from "src/app/components/card/card.component";
-import { AccountComponent } from "../account/account.component";
-import {MessageService} from 'primeng/api';
-import { MessagingService } from "src/app/services/messaging.service";
-
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EmbeddedViewRef,
+  OnInit,
+  Renderer2,
+  ViewContainerRef,
+} from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/compat/messaging';
+import { ActivatedRoute } from '@angular/router';
+import { CardComponent } from 'src/app/components/card/card.component';
+import { AccountComponent } from '../account/account.component';
+import { MessageService } from 'primeng/api';
+import { MessagingService } from 'src/app/services/messaging.service';
 
 @Component({
-    selector: 'app-main',
-    templateUrl: './main.component.html',
-    styleUrls: ['./main.component.scss']
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss'],
 })
 export class MainComponent implements OnInit {
   private cardComponent!: ComponentRef<CardComponent>;
@@ -22,55 +29,73 @@ export class MainComponent implements OnInit {
   public message: any;
 
   constructor(
-      private route: ActivatedRoute,
-      private viewContainerRef: ViewContainerRef,
-      private afMessaging: AngularFireMessaging,
-      public el: ElementRef,
-      public renderer: Renderer2,
-      private messageService: MessageService,
-      private messagingService: MessagingService,
+    private route: ActivatedRoute,
+    private viewContainerRef: ViewContainerRef,
+    private afMessaging: AngularFireMessaging,
+    public el: ElementRef,
+    public renderer: Renderer2,
+    private messageService: MessageService,
+    private messagingService: MessagingService
   ) {
     renderer.listen('window', 'appinstalled', (evt) => {
-      console.log('INSTALLED!!!')
-    })
+      console.log('INSTALLED!!!');
+    });
     renderer.listen('window', 'beforeinstallprompt', (e) => {
-      e.preventDefault()
-      this.deferredPrompt = e
-    })
-    route.queryParams.subscribe( (params) => {
-      console.log('####: ', params)
-      if (params['token']) this.token = params['token']
+      e.preventDefault();
+      this.deferredPrompt = e;
+    });
+    route.queryParams.subscribe((params) => {
+      console.log('####: ', params);
+      if (params['token']) this.token = params['token'];
     });
   }
 
-  ngOnInit(): void {    
+  ngOnInit(): void {
     this.appendAccount();
     // 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:'success', summary:'Спасибо за установку!'});
-        console.log('User Accepted!!!')
+        this.messageService.add({
+          severity: 'success',
+          summary: 'Спасибо за установку!',
+        });
+        console.log('User Accepted!!!');
       }
       this.deferredPrompt = null;
-    })
+    });
   }
 
   checkRequestPermission() {
-    this.isPermissionNotifications = Notification.permission !== 'granted' ? false : true
+    this.isPermissionNotifications =
+      Notification.permission !== 'granted' ? false : true;
   }
 
   requestPermission() {
-    this.messagingService.requestPermission()
-    this.messagingService.receiveMessage()
-    this.message = this.messagingService.currentMessage
-    
+    if ('safari' in window) {
+      console.log('safari');
+      
+      // var permissionData = window.safari.pushNotification.permission('web.com.example.domain');
+      // $scope.checkRemotePermission(permissionData);
+    } else {
+      //FIREBASE HERE
+      this.messagingService.requestPermission();
+      this.messagingService.receiveMessage();
+      this.message = this.messagingService.currentMessage;
+    }
   }
   // test function
-  copyMessage(val: string | null){
+  copyMessage(val: string | null) {
     const selBox = document.createElement('textarea');
     selBox.style.position = 'fixed';
     selBox.style.left = '0';
@@ -99,10 +124,11 @@ export class MainComponent implements OnInit {
     const route = this.route.snapshot.url[0]?.path;
     const element = document.getElementsByClassName('main-container');
     if (element[0]) {
-      this.accountComponent = this.viewContainerRef.createComponent(AccountComponent);
+      this.accountComponent =
+        this.viewContainerRef.createComponent(AccountComponent);
       const domElem = (this.accountComponent.hostView as EmbeddedViewRef<any>)
         .rootNodes[0] as HTMLElement;
       element[0].appendChild(domElem);
     }
   }
-}
+}

src/assets/download.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 10L12 15L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15V3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/notification.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g fill="#fff" data-name="Layer 2" id="Layer_2"><path d="M16,29a4,4,0,0,1-4-4,1,1,0,0,1,1-1h6a1,1,0,0,1,1,1A4,4,0,0,1,16,29Zm-1.73-3a2,2,0,0,0,3.46,0Z"/><path d="M18,7H14a1,1,0,0,1-1-1,3,3,0,0,1,6,0A1,1,0,0,1,18,7ZM16,5h0Z"/><path d="M27,26H5a1,1,0,0,1-1-1,7,7,0,0,1,3-5.75V14a9,9,0,0,1,8.94-9h.11a9,9,0,0,1,9,9v5.25A7,7,0,0,1,28,25h0A1,1,0,0,1,27,26ZM6.1,24H25.9a5,5,0,0,0-2.4-3.33,1,1,0,0,1-.5-.87V14A7,7,0,1,0,9,14v5.8a1,1,0,0,1-.5.87A5,5,0,0,0,6.1,24Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>

src/index.html

@@ -12,6 +12,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;400&amp;display=swap" rel="stylesheet">
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 </head>
 <body>
   <app-root></app-root>