Merge branch 'coffee-like-test' into coffee-like

angular/src/app/presentation-options/default-option/components/last-order/last-order.component.html

@@ -1,6 +1,6 @@
-<h2>Ваш предыдущий заказ</h2>
 <div class="info-order">
   <ng-container *ngIf="lastOrder">
+    <h2>Ваш предыдущий заказ</h2>
     <p class="flex"><span>Дата: </span>
       <span *ngIf="!loading">{{lastOrder!.last_purchase_date}}</span>    
     </p>
@@ -10,7 +10,7 @@
   </ng-container>
   <ng-container *ngIf="!lastOrder">
     <p class="flex">
-      <span>Данные не найдены</span>
+      <span>Покупок за последние пол года не было</span>
     </p>
   </ng-container>
 </div>

angular/src/app/presentation-options/default-option/components/last-order/last-order.component.scss

@@ -1,51 +1,50 @@
 :host {
-  padding: 24px 16px 0px;
+    padding: 24px 16px 0px;
 
-  & > h2 {
+    & > .info-order {
-    font-style: normal;
+	font-style: normal;
-    font-weight: 700;
+	font-weight: 400;
-    font-size: 15px;
+	font-size: 12px;
-    line-height: 20px;
+	line-height: 16px;
-    letter-spacing: -0.24px;
+	h2 {
-  }
+	    font-style: normal;
-
+	    font-weight: 700;
-  & > .info-order {
+	    font-size: 15px;
-    font-style: normal;
+	    line-height: 20px;
-    font-weight: 400;
+	    letter-spacing: -0.24px;
-    font-size: 12px;
+	}
-    line-height: 16px;
+	span {
-    span {
+	    color: var(--text-color_1);
-      color: var(--text-color_1);
+	}
+	.flex {
+	    display: flex;
+	    align-items: center;
+	    flex-direction: row;
+	    gap: 8px;
+	}
     }
-    .flex {
+
-      display: flex;
+    .evaluate-order {
-      align-items: center;
+	margin: 24px 0;
-      flex-direction: row;
+	width: 100%;
-      gap: 8px;
+	padding: 12px;
+	text-align: center;
+	border: 2px solid var(--button-color);
+	border-radius: 6px;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 17px;
+	line-height: 22px;
+	letter-spacing: -0.408px;
+	background-color: transparent;
+	color: var(--button-color);
     }
-  }
 
-  .evaluate-order {
+    .info {
-    margin: 24px 0;
+	font-style: normal;
-    width: 100%;
+	font-weight: 400;
-    padding: 12px;
+	font-size: 12px;
-    text-align: center;
+	line-height: 16px;
-    border: 2px solid var(--button-color);
+	color: var(--text-color_1);
-    border-radius: 6px;
+    }
-    font-style: normal;
-    font-weight: 700;
-    font-size: 17px;
-    line-height: 22px;
-    letter-spacing: -0.408px;
-    background-color: transparent;
-    color: var(--button-color);
-  }
-
-  .info {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    color: var(--text-color_1);
-  }
 }

angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html

@@ -1,14 +1,12 @@
 <div class="container">
-  <div class="block">
-    <h1 class="title">{{title}}</h1>
-  </div>
   <div class="block">
     <div class="back">
-    <mat-icon *ngIf="backEvent" style="cursor: pointer;" aria-hidden="false" aria-label="Назад" fontIcon="arrow_back_ios" class="back-arrow" (click)="back()"></mat-icon>
+      <mat-icon *ngIf="backEvent" style="cursor: pointer;" aria-hidden="false" aria-label="Назад" fontIcon="arrow_back_ios" class="back-arrow" (click)="back()"></mat-icon>
-  </div>    
+    </div>
+    <h1 class="title">{{title}}</h1>      
     <!-- <div class="plug"></div> -->
     <div *ngIf="showDropdown" class="backdrop" (click)="closeMenu()"></div>
-    <div *ngIf="showMenu" class="menu">
+    <div class="menu">
       <button mat-button (click)="toggleMenu()">
 	<span class="material-icons" style="color: white !important">
 	  more_horiz	
@@ -23,10 +21,28 @@
 	    </span>
 	    <span class="item_title">О приложении</span>
 	  </menu-item>
-	  <menu-item [handler]="handler(addToWallet)">
+	  <ng-container *ngIf="isios">	    
-	    <img src="./assets/apple_wallet.svg" class="icon" width="24" height="24" />
+	    <menu-item [handler]="handler(addToWallet)">
-	    <span class="item_title">Добавить карточку в Wallet</span>
+	      <img src="./assets/apple_wallet.svg" class="icon" width="24" height="24" alt="" />
-	  </menu-item>	  
+	      <span class="item_title">Добавить карточку в Wallet</span>
+	    </menu-item>	  	    
+	  </ng-container>
+	  <ng-container *ngIf="!isios">
+	    <menu-item appDownloadApp [handler]="handler(installApp)">
+	      <img src="./assets/coffee-like-logo.svg" width="24" height="24" alt="" />
+	      <span class="item_title">
+		Установить приложение
+	      </span>
+	    </menu-item>
+	    <menu-item *ngIf="!messagingService.checkRequestPermission()" [handler]="handler(messagingService.requestPermission)">
+	      <span class="material-icons" style="color: var(--main-color)">
+		notifications
+	      </span>
+	      <span class="item_title">
+		Подписаться на уведомления
+	      </span>
+	    </menu-item>
+	  </ng-container>
 	  <menu-item [handler]="handler(logout)">
 	    <span class="material-icons" style="color: var(--main-color)">
 	      logout
@@ -36,16 +52,5 @@
 	</ul>
       </div>
     </div>
-    <div class="wrapper" *ngIf="!showMenu">
-      <button
-	mat-button
-	*ngIf="!messagingService.checkRequestPermission()"
-	(click)="messagingService.requestPermission()"
-	class="notification"
-	>
-	<img src="./assets/notification.svg" alt="notification" />
-      </button>
-      <button mat-stroked-button appDownloadApp>Установить</button>
-    </div>
   </div>
 </div>

angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss

@@ -22,11 +22,11 @@
     gap: 10px;
     .block {
 	display: flex;	
-	justify-content: space-between;
 	align-items: center;
+	justify-content: space-between;
     }
     .back {
-	width: 40px;      
+	width: 64px;      
     }
     .back-arrow {
 	font-size: 16px;
@@ -44,22 +44,16 @@
 	font-size: 17px;
 	line-height: 22px;
 	margin: 0 auto;	
-	
-    }
-    .wrapper {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	min-width: 40px;
     }    
     .menu {
 	position: relative;
+	width: 64px;
 	
 	.menu__dropdown {
 	    z-index: 110;
-	    position: fixed;
+	    position: absolute;
 	    background-color: white;
-	    width: fit-content;
+	    width: 250px;
 	    height: fit-content;	  
 	    right: 20px;
 	    border-radius: 6px;

angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts

@@ -16,8 +16,8 @@ export class NavbarComponent implements OnInit {
   @Input() title: string = 'Название не задано'
   @Input() backEvent?: () => void;
 
-  showMenu: boolean = false;
   showDropdown: boolean = false;
+  isios: boolean = false;
 
   constructor(
     public messagingService: MessagingService,
@@ -37,9 +37,7 @@ export class NavbarComponent implements OnInit {
   aboutApp() { }
 
   ngOnInit(): void {
-    const deviceType = getTypeDevice();
+    this.isios = getTypeDevice() == DeviceType.ios;
-
-    this.showMenu = deviceType === DeviceType.ios;
   }
 
   toggleMenu() {
@@ -78,5 +76,7 @@ export class NavbarComponent implements OnInit {
       },
     });
   }
+
+  installApp = () => { }
 }
 

angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html

@@ -1,19 +1,26 @@
-<app-navbar title="Карта гостя" [backEvent]="showBack ? logout : undefined"></app-navbar>
+<app-navbar title="Карта гостя"></app-navbar>
 <ng-container *ngIf="!authService.loading && authService.userInfo">
   <div class="guest-card">
     <div class="top-info">
       <div class="top-info__level">
-        <p id="level">Уровень {{ authService.userInfo.current_level_and_cashback?.current_level ?? '--' }}</p>
+        <p id="level">Уровень {{ authService.error ? '--' : authService.userInfo.current_level_and_cashback?.current_level }}</p>
-        <p id="level-percent">Кэшбек {{ authService.currentLvlPeriod.percent }}%</p>  
+        <p id="level-percent">Кэшбек {{ authService.error ? '--' : authService.currentLvlPeriod.percent }}%</p>  
       </div>
-      <p class="top-info__bonus">	
+      <ng-container *ngIf="!authService.error && authService.userInfo.walletBalances < 0">
-	{{ Math.floor(authService.userInfo.walletBalances) }}
+	<p class="top-info__bonus">
-        бонусов	  			    
+	  Отрицательный баланс бонусов, свяжитесь с техподдержкой
-      </p>
+	</p>
+      </ng-container>
+      <ng-container *ngIf="authService.error || authService.userInfo.walletBalances >= 0">
+	<p class="top-info__bonus">	
+	  {{ authService.error ? '--' : Math.floor(authService.userInfo.walletBalances) }}
+          бонусов	  			    
+	</p>
+      </ng-container>            
     </div>
     <div class="guest-card__qr" (click)="qrCodeClick()">      
       <qr-code
-        [value]="authService.userInfo?.phone?.substr(1) || 'Данные не найдены'"
+        [value]="phone || 'Данные не найдены'"
         [margin]="0"
         [size]="qrCodeSize"	  	  
         errorCorrectionLevel="H"
@@ -23,10 +30,10 @@
       <p>        
         Осталось купить на сумму
         <span class="price">{{
-          authService.userInfo.next_level.sum_for_next_level
+          authService.error ? '--' : authService.userInfo.next_level.sum_for_next_level
           }}</span>
         рублей, тогда кэшбек будет
-        <span class="percent">{{ authService.userInfo.next_level.cashback }}%</span>
+        <span class="percent">{{ authService.error ? '--' : authService.userInfo.next_level.cashback}}%</span>
         с
         {{
         authService.currentPeriod[1]
@@ -35,15 +42,28 @@
         }}               
       </p>
     </div>
-    <span id="bonuses-condition"></span>
+    <ng-container *ngIf="!authService.error">
-    <app-last-order
+      <span id="bonuses-condition"></span>
-      [lastOrder]="authService.userInfo?.last_purchase"
+      <app-last-order
-      [loading]="authService.loading"
+	[lastOrder]="authService.userInfo?.last_purchase"
-    ></app-last-order>
+	[loading]="authService.loading"
-    <a class="guest-card__loyalty-program" routerLink="loyality-program"       
+	></app-last-order>
-      >Подробнее о правилах <br />
+      
-      Программы лояльности</a
+      <a class="guest-card__loyalty-program" routerLink="loyality-program">
-    >
+	Подробнее о правилах
+	<br />
+	Программы лояльности
+      </a>
+    </ng-container>
+    <ng-container *ngIf="authService.error">
+      <img src="./assets/broken.jpg" alt="" />
+      <p>
+	Упс, что-то пошло не так..
+	Мы уже работаем над этой проблемой.
+	Попробуйте обновить страницу или зайти попозже.
+	Приносим извинения за неудобства.
+      </p>
+    </ng-container>
   </div>
   <app-footer></app-footer>
 </ng-container>

angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts

@@ -4,7 +4,6 @@ import { ExitComponent } from 'src/app/components/exit/exit.component';
 import { CookiesService } from 'src/app/services/cookies.service';
 import { MessageService } from 'primeng/api';
 import { MessagingService } from 'src/app/services/messaging.service';
-import { DeviceType, getTypeDevice } from 'src/app/utils';
 import { AuthService } from 'src/app/services/auth.service';
 
 @Component({
@@ -16,7 +15,7 @@ export class GuestCardComponent implements OnInit {
   public qrCodeSize: number = 85;
   private isQrCodeClicked: boolean = false;
   public Math: Math = Math;
-  public showBack: boolean = false;
+  public phone?: string;
 
   constructor(
     private _bottomSheet: MatBottomSheet,
@@ -27,7 +26,7 @@ export class GuestCardComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.showBack = getTypeDevice() === DeviceType.android;
+    this.phone = this.cookiesService.getItem('phone-number') || this.authService.userInfo?.phone;
 
     this.requestPermission();
   }

angular/src/app/services/auth.service.ts

@@ -17,7 +17,7 @@ export class AuthService {
   currentPeriod: Moment[] = [];
   userInfo?: UserInfo;
   loading: boolean = false;
-  error: any;
+  error?: any;
   timeLeft: number = 0;
 
   get currentLvlPeriod(): lvlPeriod {
@@ -50,6 +50,7 @@ export class AuthService {
       return;
     }
 
+		this.error = null;
     this.loading = true;
 
     this.wpJsonService
@@ -60,6 +61,7 @@ export class AuthService {
       )
       .subscribe({
         next: (value) => {
+          this.userInfo = value.customer_info;
           if (value && value.error && value.error.code === 11) {
             this.wpJsonService.newCustomer(
               environment.systemId,
@@ -72,15 +74,14 @@ export class AuthService {
                 }
               })
           } else if (value && value.error && value.error.code > 1) {
+						this.error = value.error;
             this.messageService.clear();
             this.messageService.add({
               severity: 'error',
               summary: 'Произошла ошибка! Попробуйте позже',
             });
           } else if (value && value.customer_info) {
-            this.userInfo = value.customer_info;
+            this.cookiesService.setCookie('phone-number', this.userInfo!.phone);
-
-            this.cookiesService.setCookie('phone-number', this.userInfo!.phone?.slice(2));
           }
         },
         error: (e) => {

angular/src/assets/coffee-like-logo.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="35.6446mm" height="51.1881mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 4756.71 6830.97"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#005C50;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Слой_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M3624.79 6537.21l-2493 0 -593.79 -5550.88 3680.77 0 -593.98 5550.88zm961.94 -6281.71l-202.72 0 -78.95 -255.5 -3853.44 0 -78.85 255.5 -202.76 0 -170 550.53 241.74 0 644.49 6024.94 2984.16 0 644.68 -6024.94 241.65 0 -169.99 -550.53z"/>
+  <polygon class="fil0" points="1026.49,2860.81 3728.55,2860.81 3874.58,1495.52 880.44,1495.52 "/>
+  <polygon class="fil0" points="1202.08,4502.38 3552.85,4502.38 3699.07,3135.98 1055.9,3135.98 "/>
+  <polygon class="fil0" points="1377.49,6144.24 3379.23,6144.24 3523.42,4777.69 1231.56,4777.69 "/>
+ </g>
+</svg>