dev #14607 Море. Правки по сайту: add registration form

angular/src/app/interface/data.ts

@@ -203,6 +203,7 @@ export interface UserInfo {
   OrdersSum: number;
   categories: UserInfoCategory[];
   customer_level: number;
+  birthday: string;
   id: string;
   name: string | null;
   phone: string;
@@ -213,3 +214,9 @@ export interface ResponseError {
   code: number;
   msg: string;
 }
+
+export interface UpdateNewCustomerRequest {
+  name: string;
+  sex: string;
+  birthday: string;
+}

angular/src/app/presentation-options/default-option/default-option-routing.module.ts

@@ -4,6 +4,7 @@ import { GuestCardComponent } from './pages/guest-card/guest-card.component';
 import { AuthGuard } from 'src/app/guards/auth-guard.guard';
 import { LoginComponent } from './pages/login/login.component';
 import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
+import { CreateUserComponent } from './pages/create_user/create_user.component';
 
 const routes: Routes = [
   {
@@ -18,7 +19,11 @@ const routes: Routes = [
   {
     path: 'loyality-program',
     component: LoyalityProgramComponent,
-  }
+  },
+  {
+    path: 'create_user',
+    component: CreateUserComponent,
+  },
 ];
 
 @NgModule({

angular/src/app/presentation-options/default-option/default-option.module.ts

@@ -7,6 +7,9 @@ import { SocialMediaButtonsComponent } from './components/social-media-buttons/s
 import { NavbarComponent } from './components/navbar/navbar.component';
 import { MenuItemComponent } from './components/navbar/menu_item.component';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatSelectModule } from '@angular/material/select';
+import { MatNativeDateModule } from '@angular/material/core';
 import { GuestCardComponent } from './pages/guest-card/guest-card.component';
 import { QrCodeModule } from 'ng-qrcode';
 import { AccordionComponent } from './components/accordion/accordion.component';
@@ -22,6 +25,7 @@ import { DirectivesModule } from 'src/app/directives/directives.module';
 import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
 import { MatButtonModule } from '@angular/material/button';
 import { ToastModule } from 'primeng/toast';
+import { CreateUserComponent } from './pages/create_user/create_user.component';
 
 
 @NgModule({
@@ -37,6 +41,7 @@ import { ToastModule } from 'primeng/toast';
     LoginComponent,
     LoyalityProgramComponent,
     MenuItemComponent,
+    CreateUserComponent,
   ],
   imports: [
     ToastModule,
@@ -51,7 +56,10 @@ import { ToastModule } from 'primeng/toast';
     ReactiveFormsModule,
     MatInputModule,
     DirectivesModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDatepickerModule,
+    MatSelectModule,
+    MatNativeDateModule,
   ],
   bootstrap: [IndexComponent],
 })

angular/src/app/presentation-options/default-option/pages/create_user/create_user.component.html

@@ -0,0 +1,45 @@
+<ng-container *ngIf="!authService.loading">
+<form  
+  (ngSubmit)="submit()"
+  [formGroup]="form"
+  >
+  <div class="container center">
+    <div class="form">
+      <h1>Регистрация</h1>
+      <mat-form-field appearance="outline">
+	<mat-label>Ваше имя</mat-label>
+	<input formControlName="name" matInput type="text" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+	<mat-label>Пол</mat-label>
+	<mat-select formControlName="sex">
+	  <mat-option value="0">Не выбран</mat-option>
+	  <mat-option value="1">Мужчина</mat-option>
+	  <mat-option value="2">Женщина</mat-option>
+	</mat-select>            
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+	<mat-label>Дата рождения</mat-label>
+	<input formControlName="date" matInput [matDatepicker]="picker">      
+	<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+	<mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+      <button mat-raised-button color="primary">Зарегистрироваться</button>
+    </div>
+  </div>
+</form>
+</ng-container>
+
+<ng-container *ngIf="authService.loading">
+  <div class="spinner-container">
+    <ng-container
+      *ngTemplateOutlet="spinner; context: { $implicit: 85 }"
+      ></ng-container>
+  </div>
+</ng-container>
+
+<ng-template #spinner let-diameter>
+  <div class="center wrapper">
+    <mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner>
+  </div>
+</ng-template>

angular/src/app/presentation-options/default-option/pages/create_user/create_user.component.scss

@@ -0,0 +1,22 @@
+h1 {
+    color: var(--text-color);
+    text-align: center;
+}
+
+.center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.container {
+    max-width: 600px;    
+    width: 100%;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}

angular/src/app/presentation-options/default-option/pages/create_user/create_user.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { MessageService } from "primeng/api";
+import { AuthService } from "src/app/services/auth.service";
+import moment from 'moment';
+
+@Component({
+  selector: 'create-user',
+  templateUrl: './create_user.component.html',
+  styleUrls: ['./create_user.component.scss'],
+})
+export class CreateUserComponent implements OnInit {
+  public form = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    sex: new FormControl('', [Validators.required]),
+    date: new FormControl('', [Validators.required]),
+  });
+
+  constructor(
+    public authService: AuthService,
+    private messageService: MessageService,
+  ) { }
+
+  ngOnInit() { }
+
+  submit() {
+    if (this.form.invalid) {
+      this.messageService.add({
+        severity: 'error',
+        summary: 'Введите имя, пол и дату рождения',
+      });
+      return;
+    }
+
+    const name = this.form.value.name!;
+    const sex = this.form.value.sex!;
+    const date = this.form.value.date!;
+
+		const formattedDate = moment(date).format('yyyy-MM-DD');
+
+    this.authService.register(name, sex, formattedDate);
+  }
+}

angular/src/app/presentation-options/default-option/pages/login/login.component.html

@@ -15,30 +15,22 @@
     (ngSubmit)="submitNumber()"
     [formGroup]="phoneForm"
     >
-    <!-- <div class="input-container"> -->
-      <mat-form-field appearance="outline">
-	<mat-label>Ваше имя</mat-label>
-	<input formControlName="name" matInput type="text" />
-      </mat-form-field>
-      <!-- </div> -->
     <div class="input-container">
-      <!-- <label for="number">Номер телефона</label>
+      <mat-form-field appearance="outline">
-	   <input id="number" type="text" placeholder="Введите номер" /> -->
+	<mat-label>Номер телефона</mat-label>
-	   <mat-form-field appearance="outline">
+	<ngx-mat-intl-tel-input
-	     <mat-label>Номер телефона</mat-label>
+          formControlName="phone"
-	     <ngx-mat-intl-tel-input
+          [enablePlaceholder]="true"
-               formControlName="phone"
+          [enableSearch]="false"
-               [enablePlaceholder]="true"
+          [onlyCountries]="['ru', 'kg', 'by', 'kz', 'fi', 'de']"
-               [enableSearch]="false"
+          [preferredCountries]="['ru']"
-               [onlyCountries]="['ru', 'kg', 'by', 'kz', 'fi', 'de']"
+          name="phone"
-               [preferredCountries]="['ru']"
+          #phone
-               name="phone"
+	  >
-               #phone
+	</ngx-mat-intl-tel-input>
-	       >
+      </mat-form-field>
-	     </ngx-mat-intl-tel-input>
-	   </mat-form-field>
     </div>
-    <button>Принять участие</button>
+    <button mat-raised-button color="primary">Принять участие</button>
   </form>
 </div>
 <ng-template #smsCode>
@@ -87,7 +79,7 @@
 		  maxlength="1"
 		  /></label>
       </div>
-      <button>Войти</button>
+      <button mat-raised-button color="primary">Войти</button>
     </form>
     <p class="resend-code">
       Не пришло SMS?<br />

angular/src/app/presentation-options/default-option/pages/login/login.component.ts

@@ -18,7 +18,6 @@ import { MessageService } from 'primeng/api';
 export class LoginComponent implements OnInit {
   public isShowNumber: boolean = true;
   public phoneForm = new FormGroup({
-    name: new FormControl('', [Validators.required]),
     phone: new FormControl('', [Validators.required]),
   });
   public codeForm = new FormGroup({
@@ -125,7 +124,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!);
   }
 
   backToPhoneForm = () => {

angular/src/app/services/auth.service.ts

@@ -4,7 +4,7 @@ import { WpJsonService } from './wp-json.service';
 import { environment } from 'src/environments/environment';
 import { JsonrpcService, RpcService } from './jsonrpc.service';
 import { MessageService } from 'primeng/api';
-import { UserInfo, Purchase, lvlPeriod, UserInfoWalletBalance, ResponseError } from '../interface/data';
+import { UserInfo, Purchase, lvlPeriod, UserInfoWalletBalance } from '../interface/data';
 import { lvlPeriods } from 'src/app/app.constants';
 import moment, { Moment } from 'moment-timezone';
 import { Router } from '@angular/router';
@@ -69,7 +69,10 @@ export class AuthService {
       )
       .subscribe({
         next: (value) => {
-          if (value && value.error && value.error.code > 1) {
+          if (value && value.customer_info && value.customer_info.errorCode === 'Customer_CustomerNotFound'
+            || !this.userHasData(value?.customer_info)) {
+            this.router.navigate(['create_user']);
+          } else if (value && value.error && value.error.code > 1) {
             this.messageService.clear();
             this.messageService.add({
               severity: 'error',
@@ -90,6 +93,10 @@ export class AuthService {
       });
   }
 
+  userHasData(user?: UserInfo) {
+    return user && (user.name || user.birthday);
+  }
+
   logout() {
     this.userInfo = undefined;
     this.cookiesService.logout();
@@ -145,7 +152,7 @@ export class AuthService {
       });
   }
 
-  submitCode(code: string, phone: string, name: string) {
+  submitCode(code: string, phone: string) {
     this.loading = true;
     this.jsonrpc
       .rpc(
@@ -160,38 +167,9 @@ export class AuthService {
         next: (result) => {
           if (result.code === 0) {
             this.cookiesService.setCookie('token', result?.data?.token);
-            this.jsonrpc.rpc(
+            this.router.navigate(['/']);
-              {
-                method: 'updateAdditionalInfo',
-                params: [
-                  {
-                    first_name: name,
-                    birth_day: '01.01.1999'
-                  },
-                ],
-              },
-              RpcService.authService,
-              true
-            ).subscribe({
-              next: () => {
-                this.router.navigate(['/']);
 
-                this.wpJsonService.newCustomer(
+            this.getUserInfo();
-                  environment.systemId,
-                  result?.data?.token,
-                  environment.icardProxy,
-                )
-                  .subscribe({
-                    next: () => {
-                      this.getUserInfo();
-                    }
-                  })
-              },
-              error: (err) => {
-                console.error(err);
-								this.loading = false;
-              },
-            })
           } else if (result.code === 230) {
             this.messageService.clear();
             this.messageService.add({
@@ -202,7 +180,7 @@ export class AuthService {
         },
         error: (error) => {
           console.error(error);
-					this.loading = false;
+          this.loading = false;
         },
       });
   }
@@ -261,4 +239,45 @@ export class AuthService {
       return accumulator + currentValue.balance;
     }, 0);
   }
+
+  register(name: string, sex: string, date: string) {
+    if (this.token) {
+      this.loading = true;
+
+      this.jsonrpc.rpc(
+        {
+          method: 'updateAdditionalInfo',
+          params: [
+            {
+              first_name: name,
+              birth_day: '01.01.1999'
+            },
+          ],
+        },
+        RpcService.authService,
+        true
+      ).subscribe({
+        next: () => {
+          this.wpJsonService.updateNewCustomer(environment.systemId, this.token!, {
+            name,
+            sex: sex,
+            birthday: date,
+          })
+            .subscribe({
+              next: () => {
+                this.router.navigate(['/']);
+                this.getUserInfo();
+              },
+              error: () => {
+                this.loading = false;
+              }
+            });
+        },
+        error: (err) => {
+          console.error(err);
+          this.loading = false;
+        },
+      })
+    }
+  }
 }

angular/src/app/services/wp-json.service.ts

@@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { CookiesService } from "./cookies.service";
 import { Observable, of, switchMap } from "rxjs";
 import { JsonRpcBody } from "./jsonrpc.service";
-import { DeliveryType, AcceptedOrder, Product } from "../interface/data";
+import { DeliveryType, AcceptedOrder, Product, UpdateNewCustomerRequest } from "../interface/data";
 
 export enum Method {
 
@@ -59,6 +59,10 @@ export class WpJsonService {
     return this._request(`purchase/${systemId}/${token}/${delta || ''}`, 'GET', null, false, url)
   }
 
+	updateNewCustomer(systemId: string, token: string, data: UpdateNewCustomerRequest) {
+		return this._request(`update_new_customer/${systemId}/${token}/`, 'POST', data, false, environment.icardProxy);
+	}
+
   // getSiteConfig(): Observable<any> {
   //   return this._request(`/assets/site-config.json`, 'GET', null, false)
   // }

angular/src/styles.scss

@@ -127,10 +127,6 @@ body {
     --main-color_hover: rgba(208, 180, 133, 0.2);
 }
 
-.mdc-button__label {
-    color: var(--text-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 {
@@ -138,7 +134,11 @@ body {
 }
 
 .mat-mdc-outlined-button:not(:disabled) {
-    border-color: var(--text-color) !important;    
+    border-color: var(--text-color) !important;
+    
+    .mdc-button__label {
+	color: var(--text-color);
+    }
 }
 
 .mat-h1,
@@ -170,6 +170,14 @@ body {
     color: var(--text-color);
 }
 
+.mat-datepicker-toggle {
+    color: var(--text-color_2);
+}
+
+.mat-mdc-select-value {
+    color: var(--text-color);
+}
+
 hr {
     width: 100%;
     border-top: 1px solid #BDBDBD;