108 lines
4.2 KiB
HTML
108 lines
4.2 KiB
HTML
<app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar>
|
||
|
||
<ng-container *ngIf="!this.loyaltyProgram.purchaseData.$loading">
|
||
<div class="guest-card">
|
||
<div class="top-info">
|
||
<div class="top-info__level">
|
||
<p id="level">Уровень {{ loyaltyProgram.currentLvl }}</p>
|
||
<p id="level-percent">Кэшбек {{ loyaltyProgram.currentLvlPeriod.percent }}%</p>
|
||
</div>
|
||
<p class="top-info__bonus">
|
||
{{ Math.floor(loyaltyProgram.getBalanceAmount(customerInfo?.walletBalances)) }}
|
||
бонусов
|
||
</p>
|
||
</div>
|
||
<div class="guest-card__qr" (click)="qrCodeClick()">
|
||
<ng-container *ngIf="customerInfo">
|
||
<qr-code
|
||
[value]="customerInfo?.phone.substr(2) || 'Данные не найдены'"
|
||
[margin]="0"
|
||
[size]="qrCodeSize"
|
||
darkColor="#231F20"
|
||
lightColor="#008251"
|
||
errorCorrectionLevel="H"
|
||
></qr-code>
|
||
</ng-container>
|
||
<ng-container *ngIf="!customerInfo">
|
||
<ng-container
|
||
*ngTemplateOutlet="spinner; context: { $implicit: 85 }"
|
||
></ng-container>
|
||
</ng-container>
|
||
</div>
|
||
<div class="guest-card__user-description">
|
||
<p>
|
||
<ng-container *ngIf="loyaltyProgram.currentLvlPeriod.end">
|
||
Осталось купить на сумму
|
||
<span class="price">{{
|
||
loyaltyProgram.currentLvlPeriod.end -
|
||
(loyaltyProgram.purchaseData.currentAmount || 0) +
|
||
1
|
||
}}</span>
|
||
рублей, тогда кэшбек будет
|
||
<span class="percent"
|
||
>{{ loyaltyProgram.getNextLevel().percent }}%</span
|
||
>
|
||
с
|
||
{{
|
||
loyaltyProgram.purchaseData.currentPeriod[1]
|
||
.locale("ru")
|
||
.format("D MMMM")
|
||
}}
|
||
</ng-container>
|
||
<ng-container *ngIf="!loyaltyProgram.currentLvlPeriod.end">
|
||
У Вас последний уровень бонусной программы. Процент начисляемых
|
||
бонусов:
|
||
{{ loyaltyProgram.currentLvlPeriod.percent }}%
|
||
</ng-container>
|
||
</p>
|
||
</div>
|
||
<span id="bonuses-condition"></span>
|
||
|
||
<!-- <div class="guest-card__level-info"> -->
|
||
<!-- <ng-container *ngIf="!purchaseData.$loading"> -->
|
||
<!-- <ng-container *ngIf="currentLvlPeriod.end"> -->
|
||
<!-- <\!-- <input -\-> -->
|
||
<!-- <\!-- type="range" -\-> -->
|
||
<!-- <\!-- [value]="purchaseData.currentAmount" -\-> -->
|
||
<!-- <\!-- [min]="currentLvlPeriod.start" -\-> -->
|
||
<!-- <\!-- [max]="currentLvlPeriod.end" -\-> -->
|
||
<!-- <\!-- [step]="0.01" -\-> -->
|
||
<!-- <\!-- disabled="true" -\-> -->
|
||
<!-- <\!-- [ngStyle]="{ -\-> -->
|
||
<!-- <\!-- 'background-size': ((purchaseData.currentAmount! - currentLvlPeriod.start) / (currentLvlPeriod.end - currentLvlPeriod.start + 1)) * 100 + '% 100%' -\-> -->
|
||
<!-- <\!-- }" -\-> -->
|
||
<!-- <\!-- /> -\-> -->
|
||
<!-- </ng-container> -->
|
||
<!-- <ng-container *ngIf="!currentLvlPeriod.end"> -->
|
||
<!-- <h2> -->
|
||
<!-- У Вас последний уровень бонусной программы. Процент начисляемых бонусов: {{currentLvlPeriod.percent}}% -->
|
||
<!-- </h2> -->
|
||
<!-- </ng-container> -->
|
||
<!-- </ng-container> -->
|
||
<!-- <ng-container *ngIf="purchaseData.$loading"> -->
|
||
<!-- <ng-container -->
|
||
<!-- *ngTemplateOutlet="spinner; context: { $implicit: 48 }" -->
|
||
<!-- ></ng-container> -->
|
||
<!-- </ng-container> -->
|
||
|
||
<!-- </div> -->
|
||
<app-last-order
|
||
[lastOrder]="lastPurchase"
|
||
[loading]="loyaltyProgram.purchaseData.$loading"
|
||
></app-last-order>
|
||
<a class="guest-card__loyalty-program" routerLink="loyality-program"
|
||
>Подробнее о правилах <br />
|
||
Программы лояльности</a
|
||
>
|
||
</div>
|
||
</ng-container>
|
||
<ng-container *ngIf="this.loyaltyProgram.purchaseData.$loading">
|
||
<ng-container
|
||
*ngTemplateOutlet="spinner; context: { $implicit: 85 }"
|
||
></ng-container>
|
||
</ng-container>
|
||
|
||
<ng-template #spinner let-diameter>
|
||
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner>
|
||
</ng-template>
|