dev #13306

Доработки
2022-12-28 14:24:10 +04:00 · 2022-12-28 14:24:10 +04:00 · 88a88e7541
commit 88a88e7541
parent 3040cef0b8
11 changed files with 137 additions and 76 deletions
--- a/angular/src/app/components/navbar/navbar.component.scss
+++ b/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 {
--- a/angular/src/app/components/user-data-order/user-data-order.component.html
+++ b/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>
--- a/angular/src/app/components/user-data-order/user-data-order.component.ts
+++ b/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) {
--- a/angular/src/app/pages/account/account.component.html
+++ b/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>
--- a/angular/src/app/pages/account/account.component.ts
+++ b/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: 'Вы уверены, что хотите выйти?' });
  }
 }
--- a/angular/src/app/pages/account/bonus-program/bonus-program.component.ts
+++ b/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;

--- a/angular/src/app/pages/account/orders/orders.component.html
+++ b/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"
  >
--- a/angular/src/app/pages/account/orders/orders.component.scss
+++ b/angular/src/app/pages/account/orders/orders.component.scss
@ -1,70 +1,84 @@
 .show-more-orders {
-    text-align: center;
-    cursor: pointer;
-    color: #09467f;
-    margin-top: 16px;
+  text-align: center;
+  cursor: pointer;
+  color: #09467f;
+  margin-top: 16px;
 }
 .woocommerce-MyAccount-content {
-    max-width: 400px;
-    margin-left: calc(50vw - 200px);
+  max-width: 400px;
+  margin-left: calc(50vw - 200px);
 }
 .woocommerce-orders-table {
-    border: 2px solid #dee2e6;
-    border-bottom: 0;
-    border-radius: 0.25rem;
-    border-collapse: separate;
-    text-align: left;
-    margin-top: 8px;
+  border: 2px solid #dee2e6;
+  border-bottom: 0;
+  border-radius: 0.25rem;
+  border-collapse: separate;
+  text-align: left;
+  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;
-    margin-left: auto;
-    margin-right: auto;
-    thead {
-        display: none;
+    text-align: center;
+  }
+}
+
+: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;
-    }
-}
+  }
+}
--- a/angular/src/app/pages/account/orders/orders.component.ts
+++ b/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;
--- a/angular/src/app/pages/cart/cart.component.ts
+++ b/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');
  }

--- a/angular/src/app/pages/products/products.component.scss
+++ b/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;
-                transition: all .5s;
+                padding: 8px 24px;
+                transition: all 0.5s;
                border-radius: 1.125rem;
+                text-align: center;
+                background: #ededed;
+                border: none;
                cursor: pointer;

                &.non-visible {