gofnnp/h-usersite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change styles

Browse Source
This commit is contained in:
nikolay 2023-05-12 15:10:44 +04:00
parent 04ecbb837c
commit 787bc65691
15 changed files with 265 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
angular/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "coffee-like",
"version": "0.0.1",
"version": "0.0.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "coffee-like",
"version": "0.0.1",
"version": "0.0.2",
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/cdk": "^14.2.1",

7
angular/src/app/app-routing.module.ts
View File

@ -4,6 +4,7 @@ import { MainComponent } from './pages/main/main.component';
import { GuestCardComponent } from './pages/guest-card/guest-card.component';
import { LoginComponent } from './pages/login/login.component';
import { AuthGuard } from './guards/auth-guard.guard';
import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
const routes: Routes = [
{
@ -14,7 +15,11 @@ const routes: Routes = [
{
path: 'login',
component: LoginComponent
}
},
{
path: 'loyality-program',
component: LoyalityProgramComponent,
}
// { path: '**', component: NotFoundComponent }
];

2
angular/src/app/app.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainComponent } from './pages/main/main.component';
@ -79,6 +80,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
SocialMediaButtonsComponent,
LoginComponent,
FocusNextInputDirective,
LoyalityProgramComponent,
],
imports: [
BrowserModule,

3
angular/src/app/components/footer/footer.component.scss
View File

@ -5,7 +5,8 @@
gap: 20px;
padding-bottom: 100px;
h3 {
margin: 0;
margin: 0;
font-family: Montserrat;
font-style: normal;
font-weight: 400;
font-size: 15px;

3
angular/src/app/components/invite-friends/invite-friends.component.scss
View File

@ -1,6 +1,7 @@
:host {
padding: 16px;
h2 {
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 700;
font-size: 17px;

1
angular/src/app/components/last-order/last-order.component.scss
View File

@ -2,6 +2,7 @@
padding: 24px 16px 56px;
& > h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 700;
font-size: 15px;

2
angular/src/app/components/navbar/navbar.component.scss
View File

@ -24,7 +24,7 @@
visibility: hidden;
}
.title {
font-family: "Gotham Pro", sans-serif;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 22px;

204
angular/src/app/pages/guest-card/guest-card.component.html
View File

@ -1,6 +1,13 @@
<app-navbar title="Карта гостя" (backEvent)="logout()"></app-navbar>
<div class="guest-card">
<div class="top-info">
<div class="top-info__level">
<p id="level">Уровень {{ currentLvl }}</p>
<p id="level-percent">Кэшбек {{ currentLvlPeriod.percent }}%</p>
</div>
<p class="top-info__bonus">{{ getBalanceAmount(customerInfo?.walletBalances) }} бонусов</p>
</div>
<div class="guest-card__qr" (click)="qrCodeClick()">
<ng-container *ngIf="customerInfo">
<qr-code
@ -17,166 +24,49 @@
</ng-container>
</div>
<div class="guest-card__user-description">
Текущий баланс бонусов:
<span *ngIf="customerInfo">
{{ getBalanceAmount(customerInfo?.walletBalances) }}
бонусов</span
>
<p>
<ng-container *ngIf="currentLvlPeriod.end">
Осталось купить на сумму <span class="price">{{ currentLvlPeriod.end - (purchaseData.currentAmount || 0) + 1 }}</span>
рублей, тогда кэшбек будет <span class="percent">{{ getNextLevel().percent }}%</span> с
{{ purchaseData.currentPeriod[1].locale('ru').format('D MMMM')}}
</ng-container>
<ng-container *ngIf="!currentLvlPeriod.end">
У Вас последний уровень бонусной программы. Процент начисляемых бонусов:
{{currentLvlPeriod.percent}}%
</ng-container>
</p>
</div>
<span id="bonuses-condition"></span>
<app-accordion header="Условия начисления бонусов">
<p>
Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г.
по 31.03.2023 г.
</p>
<p>
За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила
3700 руб.
</p>
<p>Начисляемый бонус 10% от суммы покупок</p>
</app-accordion>
<app-accordion header="Условия «оплаты» покупки бонусами">
<p>
Участник может использовать Бонусы для «оплаты» до 100% стоимости любой
покупки.
</p>
<p>
Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1
российский рубль / 1 тенге / 1 белорусский рубль. Скидка, предоставляемая
Участнику при списании Бонусов, уменьшает цену товаров в заказе в
соответствии с условиями ПЛ.
</p>
<p>
Для списания Бонусов Участник должен попросить об этом в кофе-баре сети
«COFFEE LIKE» кассира до момента пробития фискального чека, после чего им
будет проверена возможность списания Бонусов.
</p>
<p>
Для всех Участников возможно списание без использования мобильного
приложения.
</p>
<p>Полученные Бонусы не подлежат обмену на денежные средства.</p>
</app-accordion>
<app-accordion header="Особые условия">
<p>
Начисленные на счет бонусы сгорают по прошествии 90 дней с момента
совершения последней покупки с начислением или списанием бонусов.
</p>
<ul>
Возврат покупки, за которую бонусы были начислены:
<li>
В случае, если бонусов на счету достаточно для списания, бонусы
списываются в полном ранее начисленном за возвращаемый товар объеме.
</li>
<li>
В случае, если бонусов на счету недостаточно, формируется минусовой
баланс.
</li>
</ul>
<!-- <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> -->
<ul>
Возврат покупки, которая была оплачена бонусами:
<li>
В случае предъявления Участником кассового или товарного чека, сумма
бонусов, списанная для оплаты возвращаемого товара, зачисляется на счет
участника.
</li>
<li>
В случае возврата товара с применением оплаты бонусами, клиенту
возвращается денежная сумма в размере, внесенном Участником в оплату
товара при покупке, за вычетом суммы, оплаченной бонусами.
</li>
</ul>
</app-accordion>
<div
class="guest-card__purchases-description"
[ngStyle]="{
display: purchaseData.$loading ? 'grid' : 'block'
}"
>
Сумма ваших покупок за период с
{{ purchaseData.currentPeriod[0].format("DD.MM.yyyyг.") }} -
<span *ngIf="!purchaseData.$loading"
>{{ purchaseData.currentAmount }} руб.</span
>
<ng-container *ngIf="purchaseData.$loading">
<ng-container
*ngTemplateOutlet="spinner; context: { $implicit: 24 }"
></ng-container>
</ng-container>
</div>
<app-accordion header="Узнать % начисляемых бонусов">
<p>
Начисление Бонусных баллов происходит по дифференцированной шкале в
зависимости от уровня:
</p>
<ng-container
*ngFor="let item of lvlPeriods; let index = index; let last = last"
>
<ng-container *ngIf="!last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>
Сумма покупок за предыдущий период {{ item.start }}-{{ item.end }}
руб.
</li>
<li>Начисляемый бонус {{ item.percent }}% от суммы покупки</li>
</ul>
<br />
</ng-container>
<ng-container *ngIf="last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>Сумма покупок за предыдущий период — от {{ item.start }} руб.</li>
<li>Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%</li>
</ul>
</ng-container>
</ng-container>
</app-accordion>
<div class="guest-card__level-info">
<ng-container *ngIf="!purchaseData.$loading">
<ng-container *ngIf="currentLvlPeriod.end">
<h2>
До следующего уровня за период с
{{ purchaseData.currentPeriod[0].format("DD.MM.yyyyг") }} по
{{ purchaseData.currentPeriod[1].format("DD.MM.yyyyг") }}
осталось совершить покупки на {{ currentLvlPeriod.end - (purchaseData.currentAmount || 0) + 1 }} рублей
</h2>
<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>
<p class="show-more">
<a href="#bonuses-condition">
Узнать условия начисления бонусов
</a>
</p>
</div>
<hr />
<!-- </div> -->
<app-last-order
[lastOrder]="lastPurchase"
[loading]="purchaseData.$loading"
@ -187,7 +77,7 @@
<div class="guest-card__download-app">
<img src="/assets/download-app.svg" alt="Скачай приложение" />
</div>
<a class="guest-card__loyalty-program" routerLink="loyalty-program"
<a class="guest-card__loyalty-program" routerLink="loyality-program"
>Подробнее о правилах <br />
Программы лояльности</a
>

84
angular/src/app/pages/guest-card/guest-card.component.scss
View File

@ -3,11 +3,42 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0 0;
max-width: 600px;
margin: 0 auto;
.top-info {
padding: 8px 0 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #292929;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #000000;
border-top: 1px solid #888888;
&__level {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 16px;
}
& p {
color: #28AF49;
}
p.top-info__bonus{
font-size: 20px;
}
}
&__qr {
margin: 10px;
padding: 10px;
width: fit-content;
background-image: linear-gradient(
@ -32,21 +63,23 @@
}
&__user-description {
margin: 18px 0 0;
background-color: #292929;
padding: 14px 24px;
width: 100%;
text-align: left;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
// font-family: "Goldman";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: -0.5px;
span {
color: #f2994a;
p {
width: 60%;
text-align: center;
margin: 0 auto;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: -0.5px;
}
.price,
.percent {
font-weight: bold;
}
}
@ -54,9 +87,7 @@
margin: 0;
padding: 14px 24px;
width: 100%;
text-align: left;
border-bottom: 1px solid #fff;
// font-family: "Goldman";
text-align: center;
font-style: normal;
font-weight: 400;
font-size: 16px;
@ -70,13 +101,16 @@
}
&__level-info {
padding: 36px;
padding-top: 36px;
padding-left: 36px;
padding-right: 36px;
display: flex;
flex-direction: column;
align-items: center;
h2 {
font-style: normal;
font-style: normal;
font-family: Montserrat;
font-weight: 700;
font-size: 17px;
line-height: 22px;
@ -149,18 +183,6 @@
}
}
& > .show-more {
margin-top: 42px;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: center;
a {
text-decoration: none;
color: #28af49;
}
}
}
&__download-app {

16
angular/src/app/pages/guest-card/guest-card.component.ts
View File

@ -58,6 +58,7 @@ export class GuestCardComponent implements OnInit {
public discountLevel: number = 4.2;
public lvlPeriods: lvlPeriod[] = lvlPeriods;
public currentLvlPeriod!: lvlPeriod;
public currentLvl: number = 1;
constructor(
private _bottomSheet: MatBottomSheet,
@ -101,13 +102,24 @@ export class GuestCardComponent implements OnInit {
return moment(value.transactionCreateDate).isBetween(this.purchaseData.currentPeriod[0], this.purchaseData.currentPeriod[1])
})
const currentAmount = this.purchaseData.currentAmount || 0
this.currentLvlPeriod = this.lvlPeriods.find((item) => item.start <= currentAmount && currentAmount <= (item.end || Infinity))!
this.purchaseData.$loading = false;
const index = this.lvlPeriods.findIndex((item) => item.start <= currentAmount && currentAmount <= (item.end || Infinity))!
if(index != -1) {
this.currentLvlPeriod = this.lvlPeriods[index];
this.currentLvl = index + 1;
this.purchaseData.$loading = false;
}
});
},
});
}
getNextLevel(): lvlPeriod {
if(this.currentLvl == this.lvlPeriods.length) {
return lvlPeriods[this.currentLvl - 1];
}
return lvlPeriods[this.currentLvl];
}
qrCodeClick() {
this.isQrCodeClicked = !this.isQrCodeClicked;
this.qrCodeSize = this.isQrCodeClicked ? 180 : 85;

99
angular/src/app/pages/loyality-program/loyality-program.component.html Normal file
View File

@ -0,0 +1,99 @@
<app-navbar title="Программа лояльности" (backEvent)="goBack()"></app-navbar>
<div class="loyality-program">
<app-accordion header="Условия начисления бонусов">
<p>
Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г.
по 31.03.2023 г.
</p>
<p>
За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила
3700 руб.
</p>
<p>Начисляемый бонус 10% от суммы покупок</p>
</app-accordion>
<app-accordion header="Условия «оплаты» покупки бонусами">
<p>
Участник может использовать Бонусы для «оплаты» до 100% стоимости любой
покупки.
</p>
<p>
Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1
российский рубль / 1 тенге / 1 белорусский рубль. Скидка, предоставляемая
Участнику при списании Бонусов, уменьшает цену товаров в заказе в
соответствии с условиями ПЛ.
</p>
<p>
Для списания Бонусов Участник должен попросить об этом в кофе-баре сети
«COFFEE LIKE» кассира до момента пробития фискального чека, после чего им
будет проверена возможность списания Бонусов.
</p>
<p>
Для всех Участников возможно списание без использования мобильного
приложения.
</p>
<p>Полученные Бонусы не подлежат обмену на денежные средства.</p>
</app-accordion>
<app-accordion header="Особые условия">
<p>
Начисленные на счет бонусы сгорают по прошествии 90 дней с момента
совершения последней покупки с начислением или списанием бонусов.
</p>
<ul>
Возврат покупки, за которую бонусы были начислены:
<li>
В случае, если бонусов на счету достаточно для списания, бонусы
списываются в полном ранее начисленном за возвращаемый товар объеме.
</li>
<li>
В случае, если бонусов на счету недостаточно, формируется минусовой
баланс.
</li>
</ul>
<ul>
Возврат покупки, которая была оплачена бонусами:
<li>
В случае предъявления Участником кассового или товарного чека, сумма
бонусов, списанная для оплаты возвращаемого товара, зачисляется на счет
участника.
</li>
<li>
В случае возврата товара с применением оплаты бонусами, клиенту
возвращается денежная сумма в размере, внесенном Участником в оплату
товара при покупке, за вычетом суммы, оплаченной бонусами.
</li>
</ul>
</app-accordion>
<app-accordion header="Узнать % начисляемых бонусов">
<p>
Начисление Бонусных баллов происходит по дифференцированной шкале в
зависимости от уровня:
</p>
<ng-container
*ngFor="let item of lvlPeriods; let index = index; let last = last"
>
<ng-container *ngIf="!last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>
Сумма покупок за предыдущий период {{ item.start }}-{{ item.end }}
руб.
</li>
<li>Начисляемый бонус {{ item.percent }}% от суммы покупки</li>
</ul>
<br />
</ng-container>
<ng-container *ngIf="last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>Сумма покупок за предыдущий период — от {{ item.start }} руб.</li>
<li>Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%</li>
</ul>
</ng-container>
</ng-container>
</app-accordion>
</div>

3
angular/src/app/pages/loyality-program/loyality-program.component.scss Normal file
View File

@ -0,0 +1,3 @@
.loyality-program {
margin-bottom: 20px;
}

21
angular/src/app/pages/loyality-program/loyality-program.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { lvlPeriod } from 'src/app/interface/data';
import { lvlPeriods } from 'src/app/app.constants';
@Component({
selector: 'loyality-program',
templateUrl: './loyality-program.component.html',
styleUrls: ['./loyality-program.component.scss'],
})
export class LoyalityProgramComponent implements OnInit {
constructor(private _location: Location) {}
public lvlPeriods: lvlPeriod[] = lvlPeriods;
goBack() {
this._location.back();
}
ngOnInit(): void {}
}

2
angular/src/environments/environment.ts
View File

@ -19,7 +19,7 @@ export const environment = {
},
version: packageJson.version,
appleWalletEndpoint: 'http://192.168.0.179:4200/apns/api',
icardProxy: 'http://192.168.0.14:4200/icard-proxy/',
icardProxy: 'http://localhost:4200/icard-proxy/',
appleWalletSecret: 'Token F5mbzEERAznGKVbB6l',
clientName: 'coffeeLike'
};

8
angular/src/styles.scss
View File

@ -9,13 +9,15 @@ blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
// @import url('./app/styles/_fonts.scss');
@import url('https://fonts.cdnfonts.com/css/gotham-pro');
// @import url('https://fonts.cdnfonts.com/css/gotham-pro');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
font-family: 'Gotham Pro';
// font-family: 'Gotham Pro';
font-family: 'Montserrat', sans-serif;
}
body {
background-color: #231F20;
}