Merge branch 'coffee-like-test' into coffee-like
This commit is contained in:
nikolay
commit
377f72ebe7
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
<mat-icon *ngIf="backEvent" style="cursor: pointer;" aria-hidden="false" aria-label="Назад" fontIcon="arrow_back_ios" class="back-arrow" (click)="back()"></mat-icon>
|
||||
</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
|
||||
@ -16,17 +14,35 @@
|
||||
</button>
|
||||
|
||||
<div class="menu__dropdown" *ngIf="showDropdown">
|
||||
<ul>
|
||||
<ul>
|
||||
<menu-item [handler]="handler(aboutApp)">
|
||||
<span class="material-icons icon" style="color: var(--main-color)">
|
||||
info
|
||||
</span>
|
||||
<span class="item_title">О приложении</span>
|
||||
</menu-item>
|
||||
<menu-item [handler]="handler(addToWallet)">
|
||||
<img src="./assets/apple_wallet.svg" class="icon" width="24" height="24" />
|
||||
<span class="item_title">Добавить карточку в Wallet</span>
|
||||
</menu-item>
|
||||
<ng-container *ngIf="isios">
|
||||
<menu-item [handler]="handler(addToWallet)">
|
||||
<img src="./assets/apple_wallet.svg" class="icon" width="24" height="24" alt="" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -21,12 +21,12 @@
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.back {
|
||||
width: 40px;
|
||||
width: 64px;
|
||||
}
|
||||
.back-arrow {
|
||||
font-size: 16px;
|
||||
@ -43,23 +43,17 @@
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 40px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
}
|
||||
.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;
|
||||
|
||||
@ -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.showMenu = deviceType === DeviceType.ios;
|
||||
this.isios = getTypeDevice() == DeviceType.ios;
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
@ -78,5 +76,7 @@ export class NavbarComponent implements OnInit {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
installApp = () => { }
|
||||
}
|
||||
|
||||
|
||||
@ -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-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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
BIN
angular/src/assets/broken.jpg
Normal file
BIN
angular/src/assets/broken.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
22
angular/src/assets/coffee-like-logo.svg
Normal file
22
angular/src/assets/coffee-like-logo.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue
Block a user