From 787bc6569127ad31bfdcd06fe280be9d707c79b1 Mon Sep 17 00:00:00 2001 From: nikolay Date: Fri, 12 May 2023 15:10:44 +0400 Subject: [PATCH] change styles --- angular/package-lock.json | 4 +- angular/src/app/app-routing.module.ts | 7 +- angular/src/app/app.module.ts | 2 + .../components/footer/footer.component.scss | 3 +- .../invite-friends.component.scss | 3 +- .../last-order/last-order.component.scss | 1 + .../components/navbar/navbar.component.scss | 2 +- .../guest-card/guest-card.component.html | 208 +++++------------- .../guest-card/guest-card.component.scss | 92 +++++--- .../pages/guest-card/guest-card.component.ts | 16 +- .../loyality-program.component.html | 99 +++++++++ .../loyality-program.component.scss | 3 + .../loyality-program.component.ts | 21 ++ angular/src/environments/environment.ts | 2 +- angular/src/styles.scss | 8 +- 15 files changed, 265 insertions(+), 206 deletions(-) create mode 100644 angular/src/app/pages/loyality-program/loyality-program.component.html create mode 100644 angular/src/app/pages/loyality-program/loyality-program.component.scss create mode 100644 angular/src/app/pages/loyality-program/loyality-program.component.ts diff --git a/angular/package-lock.json b/angular/package-lock.json index 275ecff..8973762 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -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", diff --git a/angular/src/app/app-routing.module.ts b/angular/src/app/app-routing.module.ts index 0764816..827cd44 100644 --- a/angular/src/app/app-routing.module.ts +++ b/angular/src/app/app-routing.module.ts @@ -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 } ]; diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index b689d55..24ffe09 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -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, diff --git a/angular/src/app/components/footer/footer.component.scss b/angular/src/app/components/footer/footer.component.scss index 04b6b18..25bf608 100644 --- a/angular/src/app/components/footer/footer.component.scss +++ b/angular/src/app/components/footer/footer.component.scss @@ -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; diff --git a/angular/src/app/components/invite-friends/invite-friends.component.scss b/angular/src/app/components/invite-friends/invite-friends.component.scss index 0ff76c3..f54e659 100644 --- a/angular/src/app/components/invite-friends/invite-friends.component.scss +++ b/angular/src/app/components/invite-friends/invite-friends.component.scss @@ -1,6 +1,7 @@ :host { padding: 16px; - h2 { + h2 { + font-family: Montserrat; font-style: normal; font-weight: 700; font-size: 17px; diff --git a/angular/src/app/components/last-order/last-order.component.scss b/angular/src/app/components/last-order/last-order.component.scss index 4c5a2c0..199100a 100644 --- a/angular/src/app/components/last-order/last-order.component.scss +++ b/angular/src/app/components/last-order/last-order.component.scss @@ -2,6 +2,7 @@ padding: 24px 16px 56px; & > h2 { + font-family: Montserrat; font-style: normal; font-weight: 700; font-size: 15px; diff --git a/angular/src/app/components/navbar/navbar.component.scss b/angular/src/app/components/navbar/navbar.component.scss index dcd7a52..5ab2ef2 100644 --- a/angular/src/app/components/navbar/navbar.component.scss +++ b/angular/src/app/components/navbar/navbar.component.scss @@ -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; diff --git a/angular/src/app/pages/guest-card/guest-card.component.html b/angular/src/app/pages/guest-card/guest-card.component.html index 4681ca6..f7b5342 100644 --- a/angular/src/app/pages/guest-card/guest-card.component.html +++ b/angular/src/app/pages/guest-card/guest-card.component.html @@ -1,6 +1,13 @@
+
+
+

Уровень {{ currentLvl }}

+

Кэшбек {{ currentLvlPeriod.percent }}%

+
+

{{ getBalanceAmount(customerInfo?.walletBalances) }} бонусов

+
-
+
- Текущий баланс бонусов: - - {{ getBalanceAmount(customerInfo?.walletBalances) }} - бонусов +

+ + Осталось купить на сумму {{ currentLvlPeriod.end - (purchaseData.currentAmount || 0) + 1 }} + рублей, тогда кэшбек будет {{ getNextLevel().percent }}% с + {{ purchaseData.currentPeriod[1].locale('ru').format('D MMMM')}} + + + У Вас последний уровень бонусной программы. Процент начисляемых бонусов: + {{currentLvlPeriod.percent}}% + +

+
- -

- Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г. - по 31.03.2023 г. -

-

- За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила - 3700 руб. -

-

Начисляемый бонус 10% от суммы покупок

- - -

- Участник может использовать Бонусы для «оплаты» до 100% стоимости любой - покупки. -

-

- Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1 - российский рубль / 1 тенге / 1 белорусский рубль. Скидка, предоставляемая - Участнику при списании Бонусов, уменьшает цену товаров в заказе в - соответствии с условиями ПЛ. -

-

- Для списания Бонусов Участник должен попросить об этом в кофе-баре сети - «COFFEE LIKE» кассира до момента пробития фискального чека, после чего им - будет проверена возможность списания Бонусов. -

-

- Для всех Участников возможно списание без использования мобильного - приложения. -

-

Полученные Бонусы не подлежат обмену на денежные средства.

- - -

- Начисленные на счет бонусы сгорают по прошествии 90 дней с момента - совершения последней покупки с начислением или списанием бонусов. -

+ + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - -
- Сумма ваших покупок за период с - {{ purchaseData.currentPeriod[0].format("DD.MM.yyyyг.") }} - - {{ purchaseData.currentAmount }} руб. - - - -
- -

- Начисление Бонусных баллов происходит по дифференцированной шкале в - зависимости от уровня: -

- - - -
    - Уровень {{ index + 1 }} -
  • - Сумма покупок за предыдущий период {{ item.start }}-{{ item.end }} - руб. -
    • -
  • Начисляемый бонус {{ item.percent }}% от суммы покупки
    • -
-
- - -
    - Уровень {{ index + 1 }} -
  • Сумма покупок за предыдущий период — от {{ item.start }} руб.
    • -
  • Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%
    • -
- - - - -
- - -

- До следующего уровня за период с - {{ purchaseData.currentPeriod[0].format("DD.MM.yyyyг") }} по - {{ purchaseData.currentPeriod[1].format("DD.MM.yyyyг") }} - осталось совершить покупки на {{ currentLvlPeriod.end - (purchaseData.currentAmount || 0) + 1 }} рублей -

- - - -

- У Вас последний уровень бонусной программы. Процент начисляемых бонусов: {{currentLvlPeriod.percent}}% -

- - - - - - -

- - Узнать условия начисления бонусов - -

-
-
+ Скачай приложение - Подробнее о правилах
Программы лояльности diff --git a/angular/src/app/pages/guest-card/guest-card.component.scss b/angular/src/app/pages/guest-card/guest-card.component.scss index 3795539..4527ee3 100644 --- a/angular/src/app/pages/guest-card/guest-card.component.scss +++ b/angular/src/app/pages/guest-card/guest-card.component.scss @@ -2,12 +2,43 @@ .guest-card { display: flex; flex-direction: column; - align-items: center; - padding: 8px 0 0; + align-items: center; 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,31 +63,31 @@ } &__user-description { - margin: 18px 0 0; - 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; + background-color: #292929; + padding: 14px 24px; - 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; + } } &__purchases-description { 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; @@ -69,15 +100,18 @@ } } - &__level-info { - padding: 36px; + &__level-info { + padding-top: 36px; + padding-left: 36px; + padding-right: 36px; display: flex; flex-direction: column; align-items: center; h2 { - font-style: normal; - font-weight: 700; + font-style: normal; + font-family: Montserrat; + font-weight: 700; font-size: 17px; line-height: 22px; text-align: center; @@ -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 { diff --git a/angular/src/app/pages/guest-card/guest-card.component.ts b/angular/src/app/pages/guest-card/guest-card.component.ts index 1517d89..a36ee96 100644 --- a/angular/src/app/pages/guest-card/guest-card.component.ts +++ b/angular/src/app/pages/guest-card/guest-card.component.ts @@ -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; diff --git a/angular/src/app/pages/loyality-program/loyality-program.component.html b/angular/src/app/pages/loyality-program/loyality-program.component.html new file mode 100644 index 0000000..23962b7 --- /dev/null +++ b/angular/src/app/pages/loyality-program/loyality-program.component.html @@ -0,0 +1,99 @@ + + +
+ +

+ Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г. + по 31.03.2023 г. +

+

+ За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила + 3700 руб. +

+

Начисляемый бонус 10% от суммы покупок

+ + +

+ Участник может использовать Бонусы для «оплаты» до 100% стоимости любой + покупки. +

+

+ Списание Бонусов происходит из расчета 1:1 (один Бонус дает скидку 1 + российский рубль / 1 тенге / 1 белорусский рубль. Скидка, предоставляемая + Участнику при списании Бонусов, уменьшает цену товаров в заказе в + соответствии с условиями ПЛ. +

+

+ Для списания Бонусов Участник должен попросить об этом в кофе-баре сети + «COFFEE LIKE» кассира до момента пробития фискального чека, после чего им + будет проверена возможность списания Бонусов. +

+

+ Для всех Участников возможно списание без использования мобильного + приложения. +

+

Полученные Бонусы не подлежат обмену на денежные средства.

+ + +

+ Начисленные на счет бонусы сгорают по прошествии 90 дней с момента + совершения последней покупки с начислением или списанием бонусов. +

+ +
    + Возврат покупки, за которую бонусы были начислены: +
  • + В случае, если бонусов на счету достаточно для списания, бонусы + списываются в полном ранее начисленном за возвращаемый товар объеме. +
    • +
  • + В случае, если бонусов на счету недостаточно, формируется минусовой + баланс. +
    • +
+ +
    + Возврат покупки, которая была оплачена бонусами: +
  • + В случае предъявления Участником кассового или товарного чека, сумма + бонусов, списанная для оплаты возвращаемого товара, зачисляется на счет + участника. +
    • +
  • + В случае возврата товара с применением оплаты бонусами, клиенту + возвращается денежная сумма в размере, внесенном Участником в оплату + товара при покупке, за вычетом суммы, оплаченной бонусами. +
    • +
+ + + +

+ Начисление Бонусных баллов происходит по дифференцированной шкале в + зависимости от уровня: +

+ + + +
    + Уровень {{ index + 1 }} +
  • + Сумма покупок за предыдущий период {{ item.start }}-{{ item.end }} + руб. +
    • +
  • Начисляемый бонус {{ item.percent }}% от суммы покупки
    • +
+
+ + +
    + Уровень {{ index + 1 }} +
  • Сумма покупок за предыдущий период — от {{ item.start }} руб.
    • +
  • Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%
    • +
+ + + +
diff --git a/angular/src/app/pages/loyality-program/loyality-program.component.scss b/angular/src/app/pages/loyality-program/loyality-program.component.scss new file mode 100644 index 0000000..7225d85 --- /dev/null +++ b/angular/src/app/pages/loyality-program/loyality-program.component.scss @@ -0,0 +1,3 @@ +.loyality-program { + margin-bottom: 20px; +} diff --git a/angular/src/app/pages/loyality-program/loyality-program.component.ts b/angular/src/app/pages/loyality-program/loyality-program.component.ts new file mode 100644 index 0000000..cd19f75 --- /dev/null +++ b/angular/src/app/pages/loyality-program/loyality-program.component.ts @@ -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 {} +} diff --git a/angular/src/environments/environment.ts b/angular/src/environments/environment.ts index 060fb78..f753a94 100644 --- a/angular/src/environments/environment.ts +++ b/angular/src/environments/environment.ts @@ -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' }; diff --git a/angular/src/styles.scss b/angular/src/styles.scss index 9a2ffb2..7c4de9f 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -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; }