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

This commit is contained in:
nikolay 2023-07-11 12:18:15 +04:00
parent d2669236ec
commit ea5b07964d
6 changed files with 92 additions and 69 deletions

View File

@ -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>

View File

@ -1,51 +1,50 @@
:host {
padding: 24px 16px 0px;
padding: 24px 16px 0px;
& > h2 {
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 20px;
letter-spacing: -0.24px;
}
& > .info-order {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
span {
color: var(--text-color_1);
& > .info-order {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
h2 {
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 20px;
letter-spacing: -0.24px;
}
span {
color: var(--text-color_1);
}
.flex {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
}
}
.flex {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
.evaluate-order {
margin: 24px 0;
width: 100%;
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 {
margin: 24px 0;
width: 100%;
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);
}
.info {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: var(--text-color_1);
}
.info {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: var(--text-color_1);
}
}

View File

@ -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-percent">Кэшбек {{ authService.currentLvlPeriod.percent }}%</p>
<p id="level">Уровень {{ authService.error ? '--' : authService.userInfo.current_level_and_cashback?.current_level }}</p>
<p id="level-percent">Кэшбек {{ authService.error ? '--' : authService.currentLvlPeriod.percent }}%</p>
</div>
<p class="top-info__bonus">
{{ Math.floor(authService.userInfo.walletBalances) }}
бонусов
</p>
<ng-container *ngIf="!authService.error && authService.userInfo.walletBalances < 0">
<p class="top-info__bonus">
Отрицательный баланс бонусов, свяжитесь с техподдержкой
</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>
<app-last-order
[lastOrder]="authService.userInfo?.last_purchase"
[loading]="authService.loading"
></app-last-order>
<a class="guest-card__loyalty-program" routerLink="loyality-program"
>Подробнее о правилах <br />
Программы лояльности</a
>
<ng-container *ngIf="!authService.error">
<span id="bonuses-condition"></span>
<app-last-order
[lastOrder]="authService.userInfo?.last_purchase"
[loading]="authService.loading"
></app-last-order>
<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>

View File

@ -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();
}

View File

@ -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?.slice(2));
this.cookiesService.setCookie('phone-number', this.userInfo!.phone);
}
},
error: (e) => {

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB