From 0abdb264f5bacbbe0b9dde7ba51a319489ed9f40 Mon Sep 17 00:00:00 2001 From: nikolay Date: Thu, 29 Jun 2023 11:53:38 +0400 Subject: [PATCH] =?UTF-8?q?dev=20#14607=20=D0=9C=D0=BE=D1=80=D0=B5.=20?= =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D1=81?= =?UTF-8?q?=D0=B0=D0=B9=D1=82=D1=83:=20change=20interface=20and=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/footer/footer.component.html | 5 +- .../navbar/menu_item.component.scss | 6 +- .../components/navbar/navbar.component.html | 8 +- .../components/navbar/navbar.component.scss | 6 +- .../components/navbar/navbar.component.ts | 2 +- .../guest-card/guest-card.component.html | 82 +--- .../guest-card/guest-card.component.scss | 417 ++++++++++-------- .../pages/login/login.component.html | 186 ++++---- .../pages/login/login.component.scss | 23 +- .../pages/login/login.component.ts | 14 +- angular/src/app/services/auth.service.ts | 2 - angular/src/styles.scss | 66 ++- 12 files changed, 422 insertions(+), 395 deletions(-) diff --git a/angular/src/app/presentation-options/default-option/components/footer/footer.component.html b/angular/src/app/presentation-options/default-option/components/footer/footer.component.html index c79ae71..8b13789 100644 --- a/angular/src/app/presentation-options/default-option/components/footer/footer.component.html +++ b/angular/src/app/presentation-options/default-option/components/footer/footer.component.html @@ -1,4 +1 @@ -Логотип -

Горячая линия

-8 (800) 333-41-30 - + diff --git a/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss b/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss index 80f9464..e061452 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss +++ b/angular/src/app/presentation-options/default-option/components/navbar/menu_item.component.scss @@ -9,11 +9,7 @@ &:hover { background-color: var(--main-color_hover); } - - .title { - color: var(--text-color); - } - + .icon { } diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html index 3068813..8f045da 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.html @@ -7,7 +7,7 @@
@@ -15,7 +15,7 @@
    - + info О приложении @@ -40,7 +40,9 @@ (click)="messagingService.requestPermission()" class="notification" > - notification + + notifications +
diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss index 51150dc..83d8bf7 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.scss @@ -1,9 +1,9 @@ :host { width: 100%; - .notification { + .notification { img { - width: 28px; + width: 28px; height: 28px; } } @@ -60,7 +60,7 @@ box-shadow: 0px 2px 5px -3px black; .item_title { - color: var(--text-color); + color: var(--background-color); font-size: 14px; font-style: normal; } diff --git a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts index 7e76690..6879771 100644 --- a/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts +++ b/angular/src/app/presentation-options/default-option/components/navbar/navbar.component.ts @@ -39,7 +39,7 @@ export class NavbarComponent implements OnInit { ngOnInit(): void { const deviceType = getTypeDevice(); - this.showMenu = deviceType === DeviceType.ios; + this.showMenu = deviceType !== DeviceType.ios; } toggleMenu() { diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html index 89ef48b..9a2b9f7 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html @@ -1,77 +1,39 @@
-
-
-

Уровень {{ authService.userInfo.customer_level }}

-

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

-
-

- - {{ Math.floor(authService.getBalanceAmount($any(authService.userInfo.walletBalances))) }} - бонусов - - - Ошибка! Отрицательный баланс бонусов - -

+
+ Владелец карты + {{authService.userInfo.name}} +
+
+ Бонусы + {{authService.getBalanceAmount($any(authService.userInfo?.walletBalances))}}
-
-
-

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

-
- - - Подробнее о правилах
- Программы лояльности + [value]="authService.userInfo?.phone?.substr(1) || 'Данные не найдены'" + [margin]="0" + [size]="qrCodeSize" + darkColor="#000000FF" + lightColor="#FFFFFFFF" + errorCorrectionLevel="H" + > + {{authService.userInfo?.phone}} +
- +

Данные недоступны, попробуйте позже

 - + diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss index c4b9e03..cb89e17 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss @@ -1,217 +1,268 @@ :host { - .guest-card { - display: flex; - flex-direction: column; - align-items: center; - max-width: 600px; - margin: 0 auto; + // .guest-card { + // display: flex; + // flex-direction: column; + // 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; + // .top-info { + // padding: 8px 0 0; + // width: 100%; + // display: flex; + // flex-direction: column; + // align-items: center; - &__level { - width: 100%; + // &__level { + // width: 100%; - display: flex; - align-items: center; - justify-content: space-around; + // display: flex; + // align-items: center; + // justify-content: space-around; - font-size: 16px; - } + // font-size: 16px; + // } - & p { - color: var(--button-color); - } + // & p { + // color: var(--button-color); + // } - p.top-info__bonus { - font-size: 20px; - } - } + // p.top-info__bonus { + // font-size: 20px; + // } + // } - &__qr { - margin: 10px; - padding: 5px; - width: fit-content; - // background-image: linear-gradient( - // #008251 33%, - // transparent 0px, - // transparent 67%, - // #008251 0px - // ), - // linear-gradient( - // 90deg, - // #008251 33%, - // transparent 0px, - // transparent 66%, - // #008251 0px - // ), - // linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0), - // linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0); - // background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px; - // background-position: 0 0, 0 0, 100% 100%, 100% 100%; - // background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; - cursor: pointer; - } + // &__qr { + // margin: 10px; + // padding: 5px; + // width: fit-content; + // // background-image: linear-gradient( + // // #008251 33%, + // // transparent 0px, + // // transparent 67%, + // // #008251 0px + // // ), + // // linear-gradient( + // // 90deg, + // // #008251 33%, + // // transparent 0px, + // // transparent 66%, + // // #008251 0px + // // ), + // // linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0), + // // linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0); + // // background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px; + // // background-position: 0 0, 0 0, 100% 100%, 100% 100%; + // // background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; + // cursor: pointer; + // } - &__user-description { - padding: 14px 24px; + // &__user-description { + // padding: 14px 24px; - 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; - } + // 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; - } - } + // .price, + // .percent { + // font-weight: bold; + // } + // } - &__purchases-description { - margin: 0; - padding: 14px 24px; - width: 100%; - text-align: center; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 19px; - letter-spacing: -0.5px; - grid-template-columns: calc(100% - 24px) 24px; + // &__purchases-description { + // margin: 0; + // padding: 14px 24px; + // width: 100%; + // text-align: center; + // font-style: normal; + // font-weight: 400; + // font-size: 16px; + // line-height: 19px; + // letter-spacing: -0.5px; + // grid-template-columns: calc(100% - 24px) 24px; - span { - color: #219653; - } - } + // span { + // color: #219653; + // } + // } - &__level-info { - padding-top: 36px; - padding-left: 36px; - padding-right: 36px; - display: flex; - flex-direction: column; - align-items: center; + // &__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-size: 17px; - line-height: 22px; - text-align: center; - letter-spacing: -0.408px; - } + // h2 { + // font-style: normal; + // font-weight: 700; + // font-size: 17px; + // line-height: 22px; + // text-align: center; + // letter-spacing: -0.408px; + // } - input[type="range"] { - -webkit-appearance: none; - width: 100%; - height: 6px; - border-radius: 5px; - display: block; - position: relative; - background: #231f20; - box-shadow: 0px 0px 3px #f2c94c59; - background-image: linear-gradient(#f2c94c, #f2c94c); - background-size: 70% 100%; - background-repeat: no-repeat; + // input[type="range"] { + // -webkit-appearance: none; + // width: 100%; + // height: 6px; + // border-radius: 5px; + // display: block; + // position: relative; + // background: #231f20; + // box-shadow: 0px 0px 3px #f2c94c59; + // background-image: linear-gradient(#f2c94c, #f2c94c); + // background-size: 70% 100%; + // background-repeat: no-repeat; - &::before, - &::after { - content: " "; - display: block; - width: 16px; - height: 16px; - border-radius: 100%; - position: absolute; - top: -5px; - } + // &::before, + // &::after { + // content: " "; + // display: block; + // width: 16px; + // height: 16px; + // border-radius: 100%; + // position: absolute; + // top: -5px; + // } - &::before { - background-color: #f2c94c; - left: 0px; - } + // &::before { + // background-color: #f2c94c; + // left: 0px; + // } - &::after { - background-color: #f2c94c; - right: 0px; - } + // &::after { + // background-color: #f2c94c; + // right: 0px; + // } - &::-webkit-slider-thumb { - -webkit-appearance: none; - background: #f2c94c; - width: 16px; - height: 16px; - border-radius: 100%; - } + // &::-webkit-slider-thumb { + // -webkit-appearance: none; + // background: #f2c94c; + // width: 16px; + // height: 16px; + // border-radius: 100%; + // } - &::-ms-thumb { - -webkit-appearance: none; - height: 20px; - width: 20px; - border-radius: 50%; - background: #f2c94c; - cursor: ew-resize; - box-shadow: 0 0 2px 0 #555; - transition: background 0.3s ease-in-out; - } + // &::-ms-thumb { + // -webkit-appearance: none; + // height: 20px; + // width: 20px; + // border-radius: 50%; + // background: #f2c94c; + // cursor: ew-resize; + // box-shadow: 0 0 2px 0 #555; + // transition: background 0.3s ease-in-out; + // } - &::-moz-range-thumb { - -webkit-appearance: none; - height: 20px; - width: 20px; - border-radius: 50%; - background: #f2c94c; - cursor: ew-resize; - box-shadow: 0 0 2px 0 #555; - transition: background 0.3s ease-in-out; - } - } - } + // &::-moz-range-thumb { + // -webkit-appearance: none; + // height: 20px; + // width: 20px; + // border-radius: 50%; + // background: #f2c94c; + // cursor: ew-resize; + // box-shadow: 0 0 2px 0 #555; + // transition: background 0.3s ease-in-out; + // } + // } + // } - &__download-app { - width: 100%; - position: relative; - margin-top: 32px; - display: flex; - justify-content: flex-end; - img { - width: 100%; - max-width: calc(100% - 16px); - } - } + // &__download-app { + // width: 100%; + // position: relative; + // margin-top: 32px; + // display: flex; + // justify-content: flex-end; + // img { + // width: 100%; + // max-width: calc(100% - 16px); + // } + // } - &__loyalty-program { - text-align: center; - color: var(--button-color); - font-style: normal; - font-weight: bold; - font-size: 12px; - line-height: 16px; - text-decoration: none; - margin: 17px 0 0; - } - } + // &__loyalty-program { + // text-align: center; + // color: var(--button-color); + // font-style: normal; + // font-weight: bold; + // font-size: 12px; + // line-height: 16px; + // text-decoration: none; + // margin: 17px 0 0; + // } + // } - .wrapper { - padding-top: 20px; - } + // .wrapper { + // padding-top: 20px; + // } - .not-found { + .not-found { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; - } + } + .guest-card { + max-width: 600px; + margin: 0 auto; + margin-top: 20px; + display: flex; + flex-direction: column; + gap: 20px; + + span { + color: var(--text-color); + font-style: italic; + } + + .owner { + display: flex; + flex-direction: column; + + span { + font-size: 12px; + } + span.name { + font-size: 16px; + } + } + .bonuses { + display: flex; + justify-content: space-between; + align-items: center; + span { + font-size: 18px; + } + } + .guest-card__qr { + margin: 0 auto; + margin-top: 100px; + width: fit-content; + padding: 8px; + border-radius: 6px; + background: #ffffff; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + .qr-value { + color: var(--background-color); + } + } + } + .spinner-container { + margin-top: 40px; + } } app-accordion { diff --git a/angular/src/app/presentation-options/default-option/pages/login/login.component.html b/angular/src/app/presentation-options/default-option/pages/login/login.component.html index 58ad660..5da8335 100644 --- a/angular/src/app/presentation-options/default-option/pages/login/login.component.html +++ b/angular/src/app/presentation-options/default-option/pages/login/login.component.html @@ -3,102 +3,98 @@ [title]="phoneForm.value.phone" [backEvent]="backToPhoneForm" [ngStyle]="{ - position: 'absolute', - top: 0 - }" -> -

Участвуй в программе лояльности COFFEE LIKE

-

Начни получать бонусы прямо сейчас

-
- - - Ваше имя - - - -
- - - Номер телефона - - - -
-

- Используя приложение, вы принимаете условия - и соглашаетесь на получение рекламно-информационных сообщений -

- -
- - -

Введите код из SMS

-
-
- - - - + position: 'absolute', + top: 0 + }" + > +
+ + + + Ваше имя + + + +
+ + + Номер телефона + + +
- + -

- Не пришло SMS?
- - Отправим повторно через {{authService.timeLeft}}с - - - Отправить повторно - -

+
+ +
+

Введите код из SMS

+
+
+ + + + +
+ +
+

+ Не пришло SMS?
+ + Отправим повторно через {{authService.timeLeft}}с + + + Отправить повторно + +

+
diff --git a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss index 7e84dfd..845139b 100644 --- a/angular/src/app/presentation-options/default-option/pages/login/login.component.scss +++ b/angular/src/app/presentation-options/default-option/pages/login/login.component.scss @@ -1,13 +1,19 @@ :host { - padding-top: 48px; - display: flex; - flex-direction: column; - align-items: center; - max-width: 600px; - margin: 0 auto 52px; + display: flex; + flex-direction: column; + align-items: center; padding-left: 20px; padding-right: 20px; - + color: var(--text-color); + + .wrapper { + max-width: 600px; + width: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } h1 { margin-top: 20px; width: 302px; @@ -41,7 +47,8 @@ } form { - display: flex; + display: flex; + width: 100%; flex-direction: column; align-items: center; margin-top: 35px; diff --git a/angular/src/app/presentation-options/default-option/pages/login/login.component.ts b/angular/src/app/presentation-options/default-option/pages/login/login.component.ts index 22915b7..f764e7e 100644 --- a/angular/src/app/presentation-options/default-option/pages/login/login.component.ts +++ b/angular/src/app/presentation-options/default-option/pages/login/login.component.ts @@ -27,12 +27,12 @@ export class LoginComponent implements OnInit { code2: new FormControl('', [Validators.required]), code3: new FormControl('', [Validators.required]), }); - private inputIds = ['field', 'field1', 'field2', 'field3']; + private inputIds = ['field', 'field1', 'field2', 'field3']; constructor( public authService: AuthService, private router: Router, - private messageService: MessageService, + private messageService: MessageService, ) { } ngOnInit(): void { } @@ -104,12 +104,12 @@ export class LoginComponent implements OnInit { if (this.phoneForm.invalid) { this.phoneForm.markAsTouched(); - this.messageService.clear(); - this.messageService.add({ + this.messageService.clear(); + this.messageService.add({ severity: 'error', - summary: 'Введите имя и телефон', + summary: 'Введите имя и телефон', }); - + return; } const data = this.phoneForm.value; @@ -125,7 +125,7 @@ export class LoginComponent implements OnInit { const phoneData = this.phoneForm.value; this.authService.submitCode( - Object.values(data).join(''), phoneData.phone!, phoneData.name!); + Object.values(data).join(''), phoneData.phone!, phoneData.name!); } backToPhoneForm = () => { diff --git a/angular/src/app/services/auth.service.ts b/angular/src/app/services/auth.service.ts index e5db85b..d20cb01 100644 --- a/angular/src/app/services/auth.service.ts +++ b/angular/src/app/services/auth.service.ts @@ -90,8 +90,6 @@ export class AuthService { this.userInfo = value.customer_info; this.cookiesService.setCookie('phone-number', this.userInfo!.phone?.slice(2)); - - this.getLastPurchase(); } }, error: (e) => { diff --git a/angular/src/styles.scss b/angular/src/styles.scss index f284643..cc33085 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -2,21 +2,21 @@ @include mat.core(); -$primary: ( - 50 : #f0e4ec, - 100 : #d9bcd0, - 200 : #bf90b0, - 300 : #a56390, - 400 : #924179, - 500 : #7f2061, - 600 : #771c59, - 700 : #6c184f, - 800 : #621345, - 900 : #4f0b33, - A100 : #ff85c7, - A200 : #ff52b0, - A400 : #ff1f99, - A700 : #ff068d, +$accent: ( + 50 : #e0e0e0, + 100 : #b3b3b3, + 200 : #808080, + 300 : #4d4d4d, + 400 : #262626, + 500 : #000000, + 600 : #000000, + 700 : #000000, + 800 : #000000, + 900 : #000000, + A100 : #a6a6a6, + A200 : #8c8c8c, + A400 : #737373, + A700 : #666666, contrast: ( 50 : #000000, 100 : #000000, @@ -35,7 +35,7 @@ $primary: ( ) ); -$accent: ( +$primary: ( 50 : #ffffff, 100 : #ffffff, 200 : #ffffff, @@ -111,24 +111,34 @@ body { } :root { - --main-color: #7F2061; + --main-color: #000000; --main-border-radius: 35px; - --background-color: #ffffff; + --background-color: #000000; - --text-color: #222222; - --text-color_1: #666666; + --text-color: #ffffff; + --text-color_1: #aaaaaa; - --button-color: #7F2061; - --button-color_disabled: #4a0d37; + --button-color: #ffffff; + --button-color_disabled: #aaaaaa; - --button-text-color: #ffffff; + --button-text-color: #000000; --button-text-color_disabled: #cccccc; --main-color_hover: rgba(127, 32, 97, 0.3); } .mdc-button__label { - color: var(--button-text-color) !important; + color: var(--background-color) !important; +} + +.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__leading, +.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__notch, +.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__trailing { + border-color: var(--text-color_1); +} + +.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__leading { + } .mat-mdc-outlined-button:not(:disabled) { @@ -151,6 +161,14 @@ body { font-family: Montserrat, sans-serif; } +.mdc-text-field:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-floating-label { + color: var(--text-color_1); +} + +.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input { + color: var(--text-color); +} + hr { width: 100%; border-top: 1px solid #BDBDBD;