dev #14716 Отображение в интерфейсе ошибок с бека

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/pages/guest-card/guest-card.component.html

@@ -3,17 +3,24 @@
   <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

@@ -17,6 +17,7 @@ export class GuestCardComponent implements OnInit {
   private isQrCodeClicked: boolean = false;
   public Math: Math = Math;
   public showBack: boolean = false;
+  public phone?: string;
 
   constructor(
     private _bottomSheet: MatBottomSheet,
@@ -29,6 +30,8 @@ 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) => {