dev #12401

сделал страницу с анкетой заполнения информации и правки по дизайну

src/app/app.constants.ts

@@ -36,6 +36,13 @@ export const PageListWithBonus: Page[] = [
         resName: 'orders',
         onSideBar: true,
     },
+    {
+        code: PageCode.UserData,
+        name: 'Заполнить анкету',
+        description: '',
+        resName: 'user-data',
+        onSideBar: true
+    },
     {
         code: PageCode.RefSystem,
         name: 'Пригласить друга',

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { CardComponent } from './components/card/card.component';
 import {InputMaskModule} from "primeng/inputmask";
 import { AuthComponent } from './pages/account/auth/auth.component';
 import {ProgressSpinnerModule} from "primeng/progressspinner";
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AccountComponent } from './pages/account/account.component';
 import { ExitComponent } from './components/exit/exit.component';
 import { HttpClientModule } from '@angular/common/http';
@@ -26,6 +26,7 @@ import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';
 import {ToastModule} from 'primeng/toast';
 import { MessageService } from 'primeng/api';
 import { FooterButtonsComponent } from './components/footer-buttons/footer-buttons.component';
+import { UserDataComponent } from './pages/account/user-data/user-data.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { FooterButtonsComponent } from './components/footer-buttons/footer-butto
     OrdersComponent,
     OrderInfoComponent,
     FooterButtonsComponent,
+    UserDataComponent,
   ],
   imports: [
     BrowserModule,
@@ -65,6 +67,7 @@ import { FooterButtonsComponent } from './components/footer-buttons/footer-butto
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireMessagingModule,
     ToastModule,
+    ReactiveFormsModule
   ],
   providers: [DialogService, MessageService],
   bootstrap: [AppComponent]

src/app/interface/data.ts

@@ -4,7 +4,8 @@ export enum PageCode {
     Auth,
     Orders,
     BonusProgram,
-    RefSystem
+    RefSystem,
+    UserData
 }
   
 export interface Page {
@@ -17,6 +18,12 @@ export interface Page {
     onSideBar: boolean
 }
 
+export interface UserDataForm {
+    name: string;
+    birthdate: string;
+    gender: string;
+}
+
 export interface BonusProgramAccount {
     BonusProgramName: string;
     BonusProgramTypeID: string;

src/app/pages/account/account.component.html

@@ -13,6 +13,9 @@
     <ng-container *ngSwitchCase="PageCode.BonusProgram">
       <app-bonus-program></app-bonus-program>
     </ng-container>
+    <ng-container *ngSwitchCase="PageCode.UserData">
+      <app-user-data></app-user-data>
+    </ng-container>
   </div>
   <nav
     *ngIf="currentPage.code !== PageCode.Auth"

src/app/pages/account/bonus-program/bonus-program.component.html

@@ -8,9 +8,10 @@
                 <span *ngIf="accountData">#{{accountData.CardNumber}}</span>
             </div>
             <div class="card-container__decorative-pattern">
-                <div class="imgs-row"></div>
+                <!-- <div class="imgs-row"></div>
                 <div class="imgs-row" style="background-position-x: -22px;"></div>
-                <div class="imgs-row"></div>
+                <div class="imgs-row"></div> -->
+                <img src="../../../../assets/card-decorative-pattern.svg" alt="">
             </div>
             <div class="card-container__content">
                 <div class="info" *ngIf="accountData">

src/app/pages/account/bonus-program/bonus-program.component.scss

@@ -2,19 +2,22 @@
   .woocommerce-MyAccount-content {
     display: flex;
     flex-direction: column;
-    & > h2 {
+
+    &>h2 {
       font-style: normal;
       font-weight: 700;
       font-size: 20px;
       line-height: 24px;
     }
-    & > p {
+
+    &>p {
       font-style: normal;
       font-weight: 400;
       font-size: 15px;
       line-height: 18px;
       margin-top: 8px;
     }
+
     .card-container {
       background: #09467f;
       box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
@@ -24,15 +27,18 @@
       overflow: hidden;
       max-width: 400px;
       width: 100%;
+
       &__header {
         height: 62px;
         color: #fff;
         display: flex;
         justify-content: space-between;
+
         img {
           height: 38px;
           margin-top: 15px;
         }
+
         span {
           font-style: normal;
           font-weight: 400;
@@ -42,32 +48,45 @@
           margin-right: 18px;
         }
       }
+
       &__decorative-pattern {
         height: 122px;
-        background-color: #fff;
+        background-color: #B8DEFF;
-        padding-top: 9px;
+        // padding-top: 9px;
-        .imgs-row {
+        display: flex;
-          background: url("../../../../assets/card-decorative-pattern.png")
+        justify-content: center;
-            repeat-x;
+        align-items: center;
-          height: 32%;
+        img {
+          height: 90px;
         }
+
+        // .imgs-row {
+        //   background: url("../../../../assets/card-decorative-pattern.png") repeat-x;
+        //   height: 32%;
+        // }
       }
+
       &__content {
-        background-color: #b8deff;
+        background-color: #09467f;
+        color: #fff;
+
         .info {
           height: 79px;
-          border-bottom: solid #0d457e 1px;
+          border-bottom: solid #fff 1px;
           padding: 14px 18px;
+
           .row {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 7px;
+
             .key {
               font-size: 14px;
               line-height: 17px;
               font-weight: 400;
             }
+
             .value {
               font-size: 18px;
               font-weight: 600;
@@ -75,11 +94,13 @@
           }
         }
       }
+
       &__barcode-container {
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 33px 0;
+
         #barcode {
           border-radius: 16px;
         }
@@ -96,6 +117,7 @@
       -ms-user-select: none;
       -o-user-select: none;
       user-select: none;
+
       &__front,
       &__back {
         display: block;
@@ -112,10 +134,12 @@
         padding: 12px;
         background-size: cover;
       }
+
       &__front {
         transform: rotateY(0deg);
         background-image: url(../../../../assets/background.svg);
       }
+
       &__back {
         position: absolute;
         opacity: 0;
@@ -124,27 +148,32 @@
         transform: rotateY(-180deg);
         background: #000;
       }
+
       &.active_back {
-        > .card-content__front {
+        >.card-content__front {
           transform: rotateY(180deg);
           opacity: 0;
         }
-        > .card-content__back {
+
+        >.card-content__back {
           opacity: 1;
           transform: rotateY(0deg);
         }
       }
+
       &__logo {
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+
         .title {
           color: #03d1be;
           font-weight: 600;
           letter-spacing: 2px;
         }
       }
+
       &__footer {
         display: flex;
         justify-content: space-between;
@@ -152,10 +181,12 @@
         position: absolute;
         bottom: 12px;
         width: calc(100% - 24px);
+
         .count {
           font-size: 22px;
         }
       }
+
       &__barcode-container {
         display: flex;
         justify-content: center;
@@ -163,6 +194,7 @@
         height: 100%;
       }
     }
+
     .explanation {
       font-size: 12px;
       margin-bottom: 8px;

src/app/pages/account/user-data/user-data.component.html

@@ -0,0 +1,33 @@
+<form class="woocommerce-form woocommerce-form-login login" action="false" (ngSubmit)="saveData()"
+    [formGroup]="userDataFormGroup">
+    <h2>Личные данные</h2>
+    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+        <label for="phone">Заполните поля анкеты</label>
+        <input formControlName="name" pInputText type="text"
+            class="woocommerce-Input woocommerce-Input--text input-text" name="name" id="name" placeholder="Имя" />
+    </p>
+    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+        <input formControlName="birthdate" pInputText type="text"
+            class="woocommerce-Input woocommerce-Input--text input-text" name="birthdate" id="birthdate"
+            placeholder="Дата рождения (00.00.00)" />
+    </p>
+    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+        <select formControlName="gender" name="gender" id="gender" required>
+            <option value="" disabled selected>Выберите пол</option>
+            <option value="Мужской">Мужской</option>
+            <option value="Женский">Женский</option>
+        </select>
+    </p>
+    <p class="form-row" style="margin-bottom: 6px;">
+        <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="save"
+            value="Сохранить" [disabled]="false">
+            Сохранить
+        </button>
+    </p>
+    <span class="policy">Нажимая кнопку, Вы соглашаетесь с Политикой
+        обработки персональных данных.</span>
+    <div class="decoration-pattern">
+        <img style="height: 34px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
+        <img style="height: 16px; margin-left: 2px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
+    </div>
+</form>

src/app/pages/account/user-data/user-data.component.scss

@@ -0,0 +1,131 @@
+:host {
+    display: flex;
+    justify-content: center;
+
+    .woocommerce-form-login__submit {
+        width: 150px;
+    }
+
+    h2 {
+        color: #fff;
+        width: 100%;
+        height: 49px;
+        text-align: left;
+        padding-top: 13px;
+        padding-left: 32px;
+        background: #0d457e;
+        position: relative;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 24px;
+
+        &::before {
+            content: "";
+            width: 19px;
+            height: 4px;
+            background: #fff;
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 24px;
+        }
+    }
+
+    .woocommerce-form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: #ffffff;
+        box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
+        border-radius: 15px;
+        min-height: 262px;
+        max-width: 400px;
+        overflow: auto;
+        position: relative;
+        padding-bottom: 10px;
+    }
+
+    .form-row {
+        width: 80%;
+        margin-bottom: 16px;
+        max-width: 400px;
+
+        .button {
+            width: 100%;
+            font-weight: 600;
+            letter-spacing: 2px;
+            border: none;
+            height: 45px;
+            background: #b8deff;
+            border-radius: 15px;
+            color: #000;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 20px;
+        }
+
+        label {
+            display: inline-block;
+            margin-bottom: 8px;
+            margin-top: 15px;
+            color: #000;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 22px;
+        }
+
+        .input-text {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+                "Segoe UI Symbol";
+            font-size: 1rem;
+            color: #495057;
+            background: #ffffff;
+            padding: 0.5rem 0.75rem;
+            border: 1px solid #ced4da;
+            transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+            -webkit-appearance: none;
+            appearance: none;
+            border-radius: 4px;
+            width: 100%;
+        }
+
+        select {
+            background: #FFFFFF;
+            border: 1px solid #B8DEFF;
+            border-radius: 15px;
+            width: 100%;
+            height: 45px;
+            padding: 0 10px;
+
+            option[value=""][disabled] {
+                display: none;
+            }
+        }
+
+        select:required:invalid {
+            color: #7D7D7D;
+        }
+    }
+
+    .policy {
+        width: 80%;
+        text-align: center;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 15px;
+        color: #BDBDBD;
+    }
+
+    .decoration-pattern {
+        margin-top: 12px;
+        display: flex;
+        align-items: end;
+        margin-left: 0;
+        width: 92%;
+    }
+}

src/app/pages/account/user-data/user-data.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDataComponent } from './user-data.component';
+
+describe('UserDataComponent', () => {
+  let component: UserDataComponent;
+  let fixture: ComponentFixture<UserDataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserDataComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/account/user-data/user-data.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UserDataForm } from 'src/app/interface/data';
+
+@Component({
+  selector: 'app-user-data',
+  templateUrl: './user-data.component.html',
+  styleUrls: ['./user-data.component.scss']
+})
+export class UserDataComponent implements OnInit {
+  public userDataFormGroup!: FormGroup;
+  public userData: UserDataForm = {
+    name: '',
+    birthdate: '',
+    gender: '',
+  }
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.userDataFormGroup = new FormGroup({
+      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
+      birthdate: new FormControl('', [Validators.required]),
+      gender: new FormControl('', [Validators.required]),
+    })
+  }
+
+  saveData() {
+    this.userData = this.userDataFormGroup.value as UserDataForm
+    console.log('####: ', this.userData)
+  }
+
+}

src/app/pages/main/main.component.ts

@@ -36,7 +36,7 @@ export class MainComponent implements OnInit {
     })
     route.queryParams.subscribe( (params) => {
       console.log('####: ', params)
-      this.token = params['token']
+      if (params['token']) this.token = params['token']
     });
   }