Spelina/prod update (#3933)

* changed view encapsulation from none to emulated in main page comp to fix styles leakage

* Bugfix/table cell date and address fix (#3930)

* Bugfix/table col width fix, changed pwa app name  (#3929)

* changed pwa app name

* admin table row styles

* Bugfix #8972 profile deactivation (#3925)

* Fix #8972 changed profile deactivation base url, changed a request body format

* Fix #8972 changed profile deactivation base url, changed a request body format

* Bugfix/added technical support block to main page and fixed styles (#3932)

* added technical support block for main page

* fixed translation for new tech support quills, fixed styles for main page

* tests fix

* Fix/frontend bugs (#3931)

* Add snack-bar instead 'offline' field in header

* Add filter tags for Customers

* Fix sorting in customers orders table

* Remove coma

* Add tests for snack bar and filter tags

* Fix coderabbit issues

* Fix coderabbit issues

* Remove commas

---------

Co-authored-by: vryazh <vryazhskaya@gmail.com>
Co-authored-by: Saienko Volodymyr <48810972+SaenkoVova@users.noreply.github.com>
Co-authored-by: AnastasiaRakuta <168209962+AnastasiaRakuta@users.noreply.github.com>

Author: 4 people

src/app/app.component.html

@@ -1,7 +1,3 @@
-<div *ngIf="offline" class="offline">
-  <span>offline</span>
-</div>
-
 <router-outlet></router-outlet>
 
 <app-chat-contact-admin-pop-up></app-chat-contact-admin-pop-up>

src/app/app.component.scss

@@ -1,16 +1,5 @@
 @import '../typography/typography';
 
-.offline {
-  top: 50px;
-  left: 50%;
-  position: fixed;
-  font-weight: 500;
-  font-size: larger;
-  background: transparent;
-  color: var(--error-red);
-  z-index: 999;
-}
-
 ::ng-deep .mat-select:focus-visible {
   outline: 2px solid currentcolor !important;
 }

src/app/app.component.ts

@@ -7,6 +7,7 @@ import { filter, Subject } from 'rxjs';
 import { LocalStorageService } from 'src/app/shared/services/localstorage/local-storage.service';
 import { MetaService } from 'src/app/shared/services/meta/meta.service';
 import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
+import { MatSnackBarService } from '@global-service/mat-snack-bar/mat-snack-bar.service';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +22,7 @@ export class AppComponent implements OnInit, OnDestroy {
   private readonly destroy$: Subject<void> = new Subject<void>();
   router: Router = inject(Router);
   metaService: MetaService = inject(MetaService);
-  offline: boolean;
+  private readonly snackBar = inject(MatSnackBarService);
 
   ngOnInit(): void {
     this.metaService.setMetaOnRouteChange();
@@ -45,7 +46,9 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   onNetworkStatusChange(): void {
-    this.offline = !navigator.onLine;
+    if (!navigator.onLine) {
+      this.snackBar.openSnackBar('noInternet');
+    }
   }
 
   ngOnDestroy(): void {

src/app/shared/services/mat-snack-bar/mat-snack-bar.service.ts

@@ -38,6 +38,7 @@ export class MatSnackBarService {
     successConfirmEmail: { classname: SnackbarClassName.success, key: 'snack-bar.success.confirm-email' },
     successConfirmSaveOrder: { classname: SnackbarClassName.successUbs, key: 'snack-bar.saved-order' },
     successConfirmUpdateOrder: { classname: SnackbarClassName.successUbs, key: 'snack-bar.update-order' },
+    errorOrderUnauthorized: { classname: SnackbarClassName.error, key: 'snack-bar.error.order-not-authorized' },
     successUpdateUbsData: { classname: SnackbarClassName.successUbs, key: 'snack-bar.save-employee-permissons' },
     cafeNotificationsExists: { classname: SnackbarClassName.error, key: 'update-cafe.notifications.exists' },
     cafeNotificationsCloseTime: { classname: SnackbarClassName.error, key: 'update-cafe.notifications.closeTime' },
@@ -50,7 +51,7 @@ export class MatSnackBarService {
     habitDidNotGiveUp: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.habit-did-not-give-up' },
     habitUpdated: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.new-habit-updated' },
     habitAcquired: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.habit-acquired' },
-    errorMessage: { classname: SnackbarClassName.error },
+    errorMessage: { classname: SnackbarClassName.error, key: 'snack-bar.error.error' },
     sendNewLetter: { classname: SnackbarClassName.error, key: 'snack-bar.error.restore-password-again' },
     sendNewUnblockLetter: { classname: SnackbarClassName.error, key: 'snack-bar.error.unblock-account-again' },
     changesSaved: { classname: SnackbarClassName.success, key: 'user.edit-profile.profile-changes-saved' },

src/app/store/actions/order.actions.ts

@@ -2,6 +2,7 @@ import { createAction, props } from '@ngrx/store';
 import { IUserOrderInfo } from '@ubs/ubs-user/components/ubs-user-orders-list/models/UserOrder.interface';
 import { ActiveTariffInfo, Address, AddressData, CourierLocations, OrderDetails, PersonalData } from 'src/app/ubs/ubs/models/ubs.interface';
 import { CCertificate } from 'src/app/ubs/ubs/models/ubs.model';
+import { HttpErrorResponse } from '@angular/common/http';
 
 export enum OrderActions {
   SetCurrentStep = '[Order] Set Current Step',
@@ -37,6 +38,7 @@ export enum OrderActions {
 
   GetExistingOrderDetails = '[Order] Get Existing Order Details',
   GetExistingOrderDetailsSuccess = '[Order] Get Existing Order Details Success',
+  GetExistingOrderDetailsFail = '[Order] Get Existing Order Details Fail',
 
   GetExistingOrderTariff = '[Order] Get Existing Order Tariff',
   GetExistingOrderTariffSuccess = '[Order] Get Existing Order Tariff Success',
@@ -109,6 +111,7 @@ export const GetExistingOrderDetailsSuccess = createAction(
   OrderActions.GetExistingOrderDetailsSuccess,
   props<{ orderDetails: OrderDetails }>()
 );
+export const GetExistingOrderDetailsFail = createAction(OrderActions.GetExistingOrderDetailsFail, props<{ error: HttpErrorResponse }>());
 
 export const GetExistingOrderTariff = createAction(OrderActions.GetExistingOrderTariff, props<{ orderId: number }>());
 export const GetExistingOrderTariffSuccess = createAction(

src/app/store/effects/order.effects.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { catchError, map, mergeMap, tap } from 'rxjs/operators';
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, filter, of } from 'rxjs';
 import {
   CreateAddress,
   CreateAddressFail,
@@ -14,6 +14,7 @@ import {
   GetCourierLocationsSuccess,
   GetExistingOrderDetails,
   GetExistingOrderDetailsSuccess,
+  GetExistingOrderDetailsFail,
   GetExistingOrderInfo,
   GetExistingOrderInfoSuccess,
   GetExistingOrderTariff,
@@ -35,14 +36,17 @@ import { OrderService } from 'src/app/ubs/ubs/services/order.service';
 import { LocalStorageService } from 'src/app/shared/services/localstorage/local-storage.service';
 import { Address, AddressData } from 'src/app/ubs/ubs/models/ubs.interface';
 import { MatSnackBarService } from '@global-service/mat-snack-bar/mat-snack-bar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class OrderEffects {
   constructor(
     private readonly actions: Actions,
     private readonly orderService: OrderService,
     private readonly localStorageService: LocalStorageService,
-    private readonly snackBar: MatSnackBarService
+    private readonly snackBar: MatSnackBarService,
+    private readonly router: Router
   ) {}
 
   getOrderDetails = createEffect(() =>
@@ -64,12 +68,25 @@ export class OrderEffects {
       mergeMap((action: { orderId: number }) =>
         this.orderService.getExistingOrderDetails(action.orderId).pipe(
           map((orderDetails) => GetExistingOrderDetailsSuccess({ orderDetails })),
-          catchError(() => EMPTY)
+          catchError((error: HttpErrorResponse) => of(GetExistingOrderDetailsFail({ error })))
         )
       )
     )
   );
 
+  getExistingOrderDetailsFail = createEffect(
+    () =>
+      this.actions.pipe(
+        ofType(GetExistingOrderDetailsFail),
+        filter(({ error }) => error.status === 403),
+        tap(() => {
+          this.snackBar.openSnackBar('errorOrderUnauthorized');
+          this.router.navigate(['/ubs/user/orders']);
+        })
+      ),
+    { dispatch: false }
+  );
+
   getExistingOrderTariff = createEffect(() =>
     this.actions.pipe(
       ofType(GetExistingOrderTariff),

src/app/store/functions.ts

@@ -1,10 +1,10 @@
 export function transformAddress(input: any) {
   return {
-    region: { uk: input.region, en: input.regionEn },
-    city: { uk: input.city, en: input.cityEn },
-    district: { uk: input.district, en: input.districtEn },
+    region: { uk: input.regionUk, en: input.regionEn },
+    city: { uk: input.cityUk, en: input.cityEn },
+    district: { uk: input.districtUk, en: input.districtEn },
     address: {
-      uk: `${input.street} ${input.houseNumber}, корп.- ${input.houseCorpus || ''}, п.${input.entranceNumber}`,
+      uk: `${input.streetUk} ${input.houseNumber}, корп.- ${input.houseCorpus || ''}, п.${input.entranceNumber}`,
       en: `${input.streetEn} ${input.houseNumber}, b.- ${input.houseCorpus || ''}, e.${input.entranceNumber}`
     },
     commentToAddressForClient: input.addressComment || ''

src/app/ubs/ubs-admin/components/ubs-admin-customers/customers-filters.interface.ts

@@ -0,0 +1,9 @@
+export interface FilterCustomers {
+  key: string;
+  labelKey: string;
+  fromValue?: string | null;
+  toValue?: string | null;
+  fromControl: string;
+  toControl: string;
+  isDate?: boolean;
+}

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customer-orders/ubs-admin-customer-orders.component.html

@@ -18,10 +18,12 @@
         <th id="head" mat-header-cell *matHeaderCellDef [appResizeColumn]="{ resizable: true, index: i }">
           <div class="columns_header">
             <span>{{ column.title | serverTranslate: currentLang }}</span>
-            <mat-icon *ngIf="arrowDirection !== column.title.key" (click)="onSortTable(column.title.key, 'DESC')">
+            <mat-icon *ngIf="arrowDirection !== column.title.key" (click)="onSortTable(column.title.key, 'ASC')">
               arrow_downward
             </mat-icon>
-            <mat-icon *ngIf="arrowDirection === column.title.key" (click)="onSortTable(column.title.key, 'ASC')"> arrow_upward </mat-icon>
+            <mat-icon *ngIf="arrowDirection === column.title.key" (click)="onSortTable(column.title.key, 'DESC')">
+              arrow_upward
+            </mat-icon>
           </div>
         </th>
         <td mat-cell *matCellDef="let row">

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customers.component.html

@@ -285,6 +285,25 @@
     </div>
   </div>
 </div>
+<div class="tag-filtrs-list" *ngIf="activeFilters.length">
+  <div class="tag-filter-item" *ngFor="let filter of activeFilters">
+    <button
+      type="button"
+      class="remove-item-btn"
+      (click)="removeActiveFilter(filter)"
+      [attr.aria-label]="'ubs-tables.clear-filters' | translate"
+    ></button>
+    <span class="filter-content">
+      {{ filter.labelKey | translate }}
+      <ng-container *ngIf="filter.fromValue">
+        {{ 'ubs-customer-filters.from' | translate }} {{ filter.fromValue }}
+      </ng-container>
+      <ng-container *ngIf="filter.toValue">
+        {{ 'ubs-customer-filters.to' | translate }} {{ filter.toValue }}
+      </ng-container>
+    </span>
+  </div>
+</div>
 
 <div id="table-container" class="scrolling" infiniteScroll [infiniteScrollThrottle]="100" (scrolled)="onScroll()" [scrollWindow]="false">
   <mat-table [dataSource]="dataSource" id="table" class="customers_table" *ngIf="!isLoading" cdkDropListGroup>