dev #13306

Доработки

angular/src/app/components/navbar/navbar.component.scss

@@ -29,6 +29,12 @@
     margin-left: 12px;
 }
 
+@media screen and (max-width: 600px) {
+    .container-navbar {
+        justify-content: center;
+    }
+}
+
 @media screen and (max-width: 549px) {
     .container-navbar {
         .menu {

angular/src/app/components/user-data-order/user-data-order.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="mainFormGroup && !loading; else loadingEl" class="woocommerce-shipping-fields__field-wrapper">
-    <form (ngSubmit)="submit()" [formGroup]="mainFormGroup" action="false" autocomplete="on">
+    <form *ngIf="!showAuthoriztion; else authEl" (ngSubmit)="submit()" [formGroup]="mainFormGroup" action="false" autocomplete="on">
         <h2 class="order_form__title">Оформление заказа</h2>
         <p *ngIf="hasError" class="request-error-message">
             Произошла ошибка. Попробуйте позже.
@@ -73,4 +73,8 @@
     <div class="angular-spinner-container" style="width: fit-content; height: 100%; margin: 16px auto;">
         <p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
     </div>
-</ng-template>
+</ng-template>
+
+<ng-template #authEl>
+    <app-auth (phoneConfirmed)="phoneConfirmed()"></app-auth>
+  </ng-template>

angular/src/app/components/user-data-order/user-data-order.component.ts

@@ -39,6 +39,7 @@ export class UserDataOrderComponent implements OnInit {
   public checkAddress: boolean = true;
   public showMyMessage: boolean = false;
   public order!: Order;
+  public showAuthoriztion = false;
 
   public userData: UserData = {
     first_name: null,
@@ -76,6 +77,7 @@ export class UserDataOrderComponent implements OnInit {
   ) { }
 
   async ngOnInit() {
+    this.checkAuthorization(true)
     this._createMainForm();
     this.getTerminalList();
     this.selectedTerminal = JSON.parse(this.cookiesService.getItem('selectedTerminal') || '')
@@ -102,6 +104,21 @@ export class UserDataOrderComponent implements OnInit {
     })
   }
 
+  checkAuthorization(showAuthoriztion: boolean, forced = false) {
+    if (!this.getToken() || forced) {
+      this.showAuthoriztion = showAuthoriztion
+    }
+  }
+
+  getToken(): string | void {
+    return this.cookiesService.getItem('token');
+  }
+
+  phoneConfirmed() {
+    this.showAuthoriztion = false
+    this.checkAuthorization(true)
+  }
+
   changeDeliveryType(event: any) {
     this.deliverData.deliveryType = event.value;
     if (this.deliverData.deliveryType?.title) {

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

@@ -4,14 +4,18 @@
     'auth-page': showAuthoriztion
   }"
 >
-  <div *ngIf="!showAuthoriztion" class="account-page">
+  <div *ngIf="!showAuthoriztion; else authEl" class="account-page">
     <div *ngIf="showAuthoriztion" class="top-left-attribute"></div>
     <div [ngSwitch]="currentPage.code" class="">
       <ng-container *ngSwitchCase="PageCode.Orders">
-        <app-orders (deauthorization)="changePage(pageList[0])"></app-orders>
+        <app-orders
+          [currentPage]="currentPage"
+          (deauthorization)="changePage(pageList[0])"
+        ></app-orders>
       </ng-container>
       <ng-container *ngSwitchCase="PageCode.BonusProgram">
         <app-bonus-program
+          [currentPage]="currentPage"
           (deauthorization)="changePage(pageList[0])"
         ></app-bonus-program>
       </ng-container>
@@ -46,7 +50,7 @@
             </div>
           </li>
         </ng-container>
-        <li class="woocommerce-MyAccount-navigation-link" (click)="logout()">
+        <li class="woocommerce-MyAccount-navigation-link" (click)="logout($event)">
           <div class="container">
             <img src="./assets/menu-icons/exit.png" alt="Иконка меню" />
             <div class="menu-item-info">
@@ -95,3 +99,7 @@
     </ng-template>
   </p-toast>
 </div>
+
+<ng-template #authEl>
+  <app-auth (phoneConfirmed)="phoneConfirmed()"></app-auth>
+</ng-template>

angular/src/app/pages/account/account.component.ts

@@ -83,7 +83,8 @@ export class AccountComponent implements OnInit {
 
   phoneConfirmed(): void {
     this.refSystem();
-    this.checkAuthorization(false, true)
+    this.showAuthoriztion = false
+    this.checkAuthorization(true)
   }
 
   async refSystem() {
@@ -212,9 +213,13 @@ export class AccountComponent implements OnInit {
   onConfirm() {
     this.deleteToken();
     this.showAuthoriztion = true;
+    this.messageService.clear('c')
   }
 
-  logout() {
+  logout(event?: MouseEvent) {
+    if (event) {
+      event.preventDefault()
+    }
     this.messageService.add({ key: 'c', sticky: true, severity: 'warn', summary: 'Вы уверены, что хотите выйти?' });
   }
 }

angular/src/app/pages/account/bonus-program/bonus-program.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { lastValueFrom } from 'rxjs';
 import { orderStatuses, PageList, PageListWithBonus } from 'src/app/app.constants';
 import { BonusProgramAccount, Page, Purchase, Transaction } from 'src/app/interface/data';
@@ -18,6 +18,7 @@ import { WpJsonService } from 'src/app/services/wp-json.service';
   styleUrls: ['./bonus-program.component.scss']
 })
 export class BonusProgramComponent implements OnInit {
+  @Input() currentPage!: Page;
   @Output() deauthorization = new EventEmitter<boolean>(false)
   public accountData!: BonusProgramAccount;
   public purchases: Purchase[] = [];
@@ -25,7 +26,6 @@ export class BonusProgramComponent implements OnInit {
   readonly orderStatuses = orderStatuses;
   readonly moment = moment;
   readonly pageList = environment.hasBonusProgram ? PageListWithBonus : PageList;
-  public currentPage: Page = this.pageList[1];
   public userName: string = '';
   public deviceType: 'ios' | 'android' | null = null;
 

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

@@ -1,4 +1,5 @@
 <div class="orders">
+  <h2>{{ currentPage.name }}</h2>
   <table
     class="woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table"
   >

angular/src/app/pages/account/orders/orders.component.scss

@@ -1,70 +1,84 @@
 .show-more-orders {
-    text-align: center;
+  text-align: center;
-    cursor: pointer;
+  cursor: pointer;
-    color: #09467f;
+  color: #09467f;
-    margin-top: 16px;
+  margin-top: 16px;
 }
 .woocommerce-MyAccount-content {
-    max-width: 400px;
+  max-width: 400px;
-    margin-left: calc(50vw - 200px);
+  margin-left: calc(50vw - 200px);
 }
 .woocommerce-orders-table {
-    border: 2px solid #dee2e6;
+  border: 2px solid #dee2e6;
-    border-bottom: 0;
+  border-bottom: 0;
-    border-radius: 0.25rem;
+  border-radius: 0.25rem;
-    border-collapse: separate;
+  border-collapse: separate;
-    text-align: left;
+  text-align: left;
-    margin-top: 8px;
+  margin-top: 8px;
+  width: 100%;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  thead {
+    display: none;
+  }
+  .woocommerce-orders-table {
+    &__cell {
+      padding: 0.7rem 1.5rem;
+      border-bottom: 2px solid #dee2e6;
+      text-align: right !important;
+      display: block;
+      &::before {
+        content: attr(data-title) ": ";
+        font-weight: 700;
+        float: left;
+      }
+    }
+    &__row {
+      display: block;
+      &:nth-child(even) {
+        background: #ebebeb;
+      }
+    }
+    // &__cell-order-actions::before {
+    //     display: none;
+    // }
+    &__cell-order-actions {
+      &.red-color {
+        color: #ed0000;
+      }
+      &.green-color {
+        color: #00a700;
+      }
+    }
+    &__cell-order-number a {
+      text-decoration: none;
+      color: #009688;
+    }
+  }
+
+  .woocommerce-button {
+    display: inline-block;
+    color: #ffffff;
+    background-color: #009688;
+    padding: 13px;
+    border-radius: 4px;
+    text-decoration: none;
     width: 100%;
-    max-width: 400px;
+    text-align: center;
-    margin-left: auto;
+  }
-    margin-right: auto;
+}
-    thead {
+
-        display: none;
+:host {
+  .orders {
+    h2 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+      max-width: 400px;
+      margin: 0 auto;
+      width: 100%;
     }
-    .woocommerce-orders-table {
+  }
-        &__cell {
+}
-            padding: 0.7rem 1.5rem;
-            border-bottom: 2px solid #dee2e6;
-            text-align: right!important;
-            display: block;
-            &::before {
-                content: attr(data-title) ": ";
-                font-weight: 700;
-                float: left;
-            }
-        }
-        &__row {
-            display: block;
-            &:nth-child(even) {
-                background: #ebebeb;
-            }
-        }
-        // &__cell-order-actions::before {
-        //     display: none;
-        // }
-        &__cell-order-actions {
-            &.red-color {
-                color: #ed0000;
-            }
-            &.green-color {
-                color: #00a700
-            }
-        }
-        &__cell-order-number a {
-            text-decoration: none;
-            color: #009688;
-        }
-    }
-    
-    .woocommerce-button {
-        display: inline-block;
-        color: #ffffff;
-        background-color: #009688;
-        padding: 13px;
-        border-radius: 4px;
-        text-decoration: none;
-        width: 100%;
-        text-align: center;
-    }
-}

angular/src/app/pages/account/orders/orders.component.ts

@@ -1,7 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Purchase } from 'src/app/interface/data';
+import { Page, Purchase } from 'src/app/interface/data';
 import * as moment from 'moment-timezone';
 import { lastValueFrom } from 'rxjs';
 import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';
@@ -15,6 +15,7 @@ import { CookiesService } from 'src/app/services/cookies.service';
   styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
+  @Input() currentPage!: Page;
   @Input() handleHttpError!: (error: HttpErrorResponse) => void;
   @Output() deauthorization = new EventEmitter<boolean>(false)
   public lastViewOrder: number = 3;

angular/src/app/pages/cart/cart.component.ts

@@ -41,6 +41,7 @@ export class CartComponent implements OnInit {
 
   toggleSideBar(): void{
     this.visibleSidebar = !this.visibleSidebar;
+    this.orderConfirmed = false;
     this.loadCart()
   }
 
@@ -98,6 +99,7 @@ export class CartComponent implements OnInit {
   onConfirm() {
     this.cartService.clearCart()
     this.loadCart()
+    this.visibleSidebar = false
     this.messageService.clear('c');
   }
 

angular/src/app/pages/products/products.component.scss

@@ -52,10 +52,10 @@
             justify-content: space-between;
             font-size: 14px;
             align-items: center;
-            // margin-left: -24px;
             overflow-x: auto;
             width: 100%;
             margin-right: 16px;
+            gap: 8px;
 
             &::-webkit-scrollbar {
                 width: 0;
@@ -63,9 +63,12 @@
 
             .group-container {
                 font-weight: 600;
-                padding: 6px 24px;
+                padding: 8px 24px;
-                transition: all .5s;
+                transition: all 0.5s;
                 border-radius: 1.125rem;
+                text-align: center;
+                background: #ededed;
+                border: none;
                 cursor: pointer;
 
                 &.non-visible {