Merge pull request #2692 from ita-social-projects/bugfix/#6050-Fix-sa…

…ving-order-data-when-usbugFix/#6050-Fix-saving-order-when-user-left-page

bugFix/#6050, #6289-Fix-saving-order-when-user-left-page

src/app/main/component/shared/components/form-base/form-base.component.spec.ts

@@ -6,6 +6,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
 
 import { FormBaseComponent } from './form-base.component';
+import { Store } from '@ngrx/store';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
 
 describe('FormBaseComponent', () => {
   let component: FormBaseComponent;
@@ -18,11 +20,17 @@ describe('FormBaseComponent', () => {
     }
   };
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [FormBaseComponent],
       imports: [RouterTestingModule, MatDialogModule, HttpClientTestingModule],
-      providers: [{ provide: MatDialogRef, useValue: dialogRefStub }]
+      providers: [
+        { provide: MatDialogRef, useValue: dialogRefStub },
+        { provide: Store, useValue: storeMock }
+      ]
     }).compileComponents();
   }));
 

src/app/main/component/shared/components/warning-pop-up/warning-pop-up.component.spec.ts

@@ -5,6 +5,8 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { of } from 'rxjs';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Store, StoreModule } from '@ngrx/store';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
 
 describe('WarningPopUpComponent', () => {
   let component: WarningPopUpComponent;
@@ -27,13 +29,17 @@ describe('WarningPopUpComponent', () => {
     popupConfirm: 'popupConfirm'
   };
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [WarningPopUpComponent],
-      imports: [TranslateModule.forRoot(), MatDialogModule, BrowserDynamicTestingModule, HttpClientTestingModule],
+      imports: [TranslateModule.forRoot(), MatDialogModule, BrowserDynamicTestingModule, HttpClientTestingModule, StoreModule.forRoot({})],
       providers: [
         { provide: MatDialogRef, useValue: dialogRefStub },
-        { provide: MAT_DIALOG_DATA, useValue: popupDataStub }
+        { provide: MAT_DIALOG_DATA, useValue: popupDataStub },
+        { provide: Store, useValue: storeMock }
       ]
     }).compileComponents();
   }));

src/app/shared/ubs-add-address-pop-up/ubs-add-address-pop-up.component.spec.ts

@@ -19,6 +19,8 @@ import { LocationService } from '@global-service/location/location.service';
 import { UserOwnAuthService } from '@global-service/auth/user-own-auth.service';
 import { LanguageService } from 'src/app/main/i18n/language.service';
 import { ADDRESSESMOCK } from 'src/app/ubs/mocks/address-mock';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
+import { Store } from '@ngrx/store';
 
 describe('UBSAddAddressPopUpComponent', () => {
   let component: UBSAddAddressPopUpComponent;
@@ -88,6 +90,9 @@ describe('UBSAddAddressPopUpComponent', () => {
     return valUa;
   };
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -108,6 +113,8 @@ describe('UBSAddAddressPopUpComponent', () => {
         { provide: GoogleScript, useValue: fakeGoogleScript },
         { provide: LocationService, useValue: fakeLocationServiceMock },
         { provide: LanguageService, useValue: fakeLanguageServiceMock },
+        { provide: Store, useValue: storeMock },
+
         UserOwnAuthService
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -0,0 +1,15 @@
+import { createAction, props } from '@ngrx/store';
+import { OrderDetails, PersonalData } from 'src/app/ubs/ubs/models/ubs.interface';
+
+export enum OrderActions {
+  AddOrderDetails = '[Order] Add Order Details',
+  AddPersonalData = '[Order] Add Personal Data',
+  UpdateOrderDetails = '[Order] Update Order Details',
+  UpdatePersonalData = '[Order] Update Personal Data'
+}
+
+export const AddOrderData = createAction(OrderActions.AddOrderDetails, props<{ orderDetails: OrderDetails }>());
+export const AddPersonalData = createAction(OrderActions.AddPersonalData, props<{ personalData: PersonalData }>());
+
+export const UpdateOrderData = createAction(OrderActions.UpdateOrderDetails, props<{ orderDetails: null }>());
+export const UpdatePersonalData = createAction(OrderActions.UpdatePersonalData, props<{ personalData: null }>());

src/app/store/reducers/app.reducer.ts

@@ -6,8 +6,10 @@ import { tariffReducer } from './tariff.reducer';
 import { bigOrderTableReducer } from './bigOrderTable.reducer';
 import { EcoNewsReducer } from './ecoNews.reducer';
 import { EcoEventsReducer } from './ecoEvents.reducer';
+import { orderReducer } from './order.reducer';
 
 export const appReducers: ActionReducerMap<IAppState> = {
+  order: orderReducer,
   router: routerReducer,
   employees: employeesReducer,
   locations: tariffReducer,

src/app/store/reducers/order.reducer.ts

@@ -0,0 +1,34 @@
+import { initialOrderState } from '../state/order.state';
+import { AddOrderData, AddPersonalData, UpdateOrderData, UpdatePersonalData } from '../actions/order.actions';
+import { createReducer, on } from '@ngrx/store';
+
+export const orderReducer = createReducer(
+  initialOrderState,
+  on(AddOrderData, (state, action) => {
+    return {
+      ...state,
+      orderDetails: action.orderDetails
+    };
+  }),
+
+  on(AddPersonalData, (state, action) => {
+    return {
+      ...state,
+      personalData: action.personalData
+    };
+  }),
+
+  on(UpdateOrderData, (state, action) => {
+    return {
+      ...state,
+      orderDetails: action.orderDetails
+    };
+  }),
+
+  on(UpdatePersonalData, (state, action) => {
+    return {
+      ...state,
+      personalData: action.personalData
+    };
+  })
+);

src/app/store/state/app.state.ts

@@ -4,8 +4,10 @@ import { IEmployeesState, initialEmployeesState } from './employee.state';
 import { IEcoNewsState, initialNewsState } from './ecoNews.state';
 import { ILocationsState, initialLocationsState } from './tariff.state';
 import { IEcoEventsState, initialEventsState } from './ecoEvents.state';
+import { IOrderState, initialOrderState } from './order.state';
 
 export interface IAppState {
+  order: IOrderState;
   employees: IEmployeesState;
   locations: ILocationsState;
   bigOrderTable: IBigOrderTableState;
@@ -15,6 +17,7 @@ export interface IAppState {
 }
 
 export const initialAppState: IAppState = {
+  order: initialOrderState,
   employees: initialEmployeesState,
   locations: initialLocationsState,
   bigOrderTable: initialBigOrderTableState,

src/app/store/state/order.state.ts

@@ -0,0 +1,13 @@
+import { PersonalData, OrderDetails } from 'src/app/ubs/ubs/models/ubs.interface';
+
+export interface IOrderState {
+  orderDetails: OrderDetails | null;
+  personalData: PersonalData | null;
+  error?: string | null;
+}
+
+export const initialOrderState: IOrderState = {
+  orderDetails: null,
+  personalData: null,
+  error: null
+};

src/app/ubs/mocks/order-data-mock.ts

@@ -0,0 +1,5 @@
+export const ubsOrderServiseMock = {
+  orderDetails: null,
+  personalData: null,
+  error: null
+};

src/app/ubs/ubs-admin/components/ubs-admin-address-details/ubs-admin-address-details.component.spec.ts

@@ -13,6 +13,8 @@ import { ADDRESSESMOCK } from 'src/app/ubs/mocks/address-mock';
 import { of } from 'rxjs';
 import { Language } from 'src/app/main/i18n/Language';
 import { KyivNamesEnum } from 'src/app/ubs/ubs/models/ubs.interface';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
+import { Store } from '@ngrx/store';
 
 describe('UbsAdminAddressDetailsComponent', () => {
   let component: UbsAdminAddressDetailsComponent;
@@ -57,14 +59,18 @@ describe('UbsAdminAddressDetailsComponent', () => {
   fakeLocalStorageService.getSearchAddress = () => ADDRESSESMOCK.SEARCHADDRESS;
   fakeLocalStorageService.getRequest = () => ADDRESSESMOCK.GOOGLEREQUEST;
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [UbsAdminAddressDetailsComponent],
       imports: [TranslateModule.forRoot(), HttpClientTestingModule],
       providers: [
         { provide: LocalStorageService, useValue: fakeLocalStorageService },
         { provide: LanguageService, useValue: languageServiceMock },
-        { provide: LocationService, useValue: fakeLocationServiceMock }
+        { provide: LocationService, useValue: fakeLocationServiceMock },
+        { provide: Store, useValue: storeMock }
       ]
     }).compileComponents();
   }));

src/app/ubs/ubs-user/ubs-user-orders-list/ubs-user-orders-list.component.spec.ts

@@ -10,6 +10,9 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { UbsUserOrdersListComponent } from './ubs-user-orders-list.component';
 import { HttpClientModule } from '@angular/common/http';
 import { LanguageService } from 'src/app/main/i18n/language.service';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
+import { of } from 'rxjs';
+import { Store, StoreModule } from '@ngrx/store';
 
 describe('UbsUserOrdersListComponent', () => {
   let component: UbsUserOrdersListComponent;
@@ -51,6 +54,9 @@ describe('UbsUserOrdersListComponent', () => {
   const languageServiceMock = jasmine.createSpyObj('languageService', ['getLangValue']);
   languageServiceMock.getLangValue.and.returnValue('fakeValue');
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [UbsUserOrdersListComponent, LocalizedCurrencyPipe],
@@ -60,11 +66,14 @@ describe('UbsUserOrdersListComponent', () => {
         BrowserAnimationsModule,
         TranslateModule.forRoot(),
         HttpClientModule,
-        RouterTestingModule
+        RouterTestingModule,
+        StoreModule.forRoot({})
       ],
       providers: [
+        { provide: Store, useValue: storeMock },
         { provide: MatDialog, useValue: matDialogMock },
-        { provide: LanguageService, useValue: languageServiceMock }
+        { provide: LanguageService, useValue: languageServiceMock },
+        { provide: Store, useValue: storeMock }
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();

src/app/ubs/ubs-user/ubs-user-orders-list/ubs-user-orders-list.component.ts

@@ -11,6 +11,8 @@ import { Router } from '@angular/router';
 import { UBSOrderFormService } from '../../ubs/services/ubs-order-form.service';
 import { OrderService } from '../../ubs/services/order.service';
 import { LanguageService } from 'src/app/main/i18n/language.service';
+import { UpdateOrderData, UpdatePersonalData } from 'src/app/store/actions/order.actions';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-ubs-user-orders-list',
@@ -36,7 +38,8 @@ export class UbsUserOrdersListComponent implements OnInit, OnDestroy {
     private langService: LanguageService,
     private router: Router,
     public ubsOrderService: UBSOrderFormService,
-    public orderService: OrderService
+    public orderService: OrderService,
+    private store: Store
   ) {}
 
   ngOnInit(): void {
@@ -97,7 +100,6 @@ export class UbsUserOrdersListComponent implements OnInit, OnDestroy {
   }
 
   public openOrderPaymentDialog(order: IUserOrderInfo): void {
-    sessionStorage.removeItem('key');
     if (order.paymentStatusEng === 'Unpaid') {
       this.getDataForLocalStorage(order);
     } else {
@@ -111,6 +113,7 @@ export class UbsUserOrdersListComponent implements OnInit, OnDestroy {
         }
       });
     }
+    this.cleanOrderState();
   }
 
   public getBagsQuantity(bagTypeName: string, capacity: number, order: IUserOrderInfo): number | null {
@@ -164,23 +167,6 @@ export class UbsUserOrdersListComponent implements OnInit, OnDestroy {
         total: order.orderFullPrice
       };
 
-      this.orderDetailsForSessionStorage = {
-        additionalOrders: order.additionalOrders,
-        certificatesSum: 0,
-        finalSum: order.orderFullPrice,
-        orderComment: order.orderComment,
-        pointsSum: 0,
-        pointsToUse: 0,
-        total: order.orderFullPrice,
-        quantity1: this.filterUtil(1),
-        quantity2: this.filterUtil(2),
-        quantity3: this.filterUtil(3)
-      };
-
-      const bufferArray = {};
-      Object.assign(bufferArray, this.orderDetailsForSessionStorage);
-      sessionStorage.setItem('key', JSON.stringify(bufferArray));
-
       this.personalDetails = personalDataResponse;
       this.personalDetails.senderEmail = order.sender.senderEmail !== this.personalDetails.email ? order.sender.senderEmail : null;
       this.personalDetails.senderFirstName = order.sender.senderName !== this.personalDetails.firstName ? order.sender.senderName : null;
@@ -227,4 +213,9 @@ export class UbsUserOrdersListComponent implements OnInit, OnDestroy {
   public getLangValue(uaValue: string, enValue: string): string {
     return this.langService.getLangValue(uaValue, enValue) as string;
   }
+
+  cleanOrderState(): void {
+    this.store.dispatch(UpdateOrderData({ orderDetails: null }));
+    this.store.dispatch(UpdatePersonalData({ personalData: null }));
+  }
 }

src/app/ubs/ubs-user/ubs-user-orders/ubs-user-orders.component.spec.ts

@@ -22,6 +22,8 @@ import { APP_BASE_HREF } from '@angular/common';
 import { By } from '@angular/platform-browser';
 import { LocalStorageService } from '@global-service/localstorage/local-storage.service';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ubsOrderServiseMock } from 'src/app/ubs/mocks/order-data-mock';
+import { Store, StoreModule } from '@ngrx/store';
 
 describe('UbsUserOrdersComponent', () => {
   let component: UbsUserOrdersComponent;
@@ -83,6 +85,9 @@ describe('UbsUserOrdersComponent', () => {
     fixture.detectChanges();
   };
 
+  const storeMock = jasmine.createSpyObj('Store', ['select', 'dispatch']);
+  storeMock.select.and.returnValue(of({ order: ubsOrderServiseMock }));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [UbsUserOrdersComponent, LocalizedCurrencyPipe, InfiniteScrollDirective],
@@ -94,9 +99,11 @@ describe('UbsUserOrdersComponent', () => {
         NoopAnimationsModule,
         RouterModule.forRoot([]),
         ReactiveFormsModule,
-        MatDialogModule
+        MatDialogModule,
+        StoreModule.forRoot({})
       ],
       providers: [
+        { provide: Store, useValue: storeMock },
         { provide: Router, useValue: RouterMock },
         { provide: MatSnackBarComponent, useValue: MatSnackBarMock },
         { provide: UserOrdersService, useValue: userOrderServiceMock },

src/app/ubs/ubs-user/ubs-user-orders/ubs-user-orders.component.ts

@@ -13,6 +13,8 @@ import { OrderService } from '../../ubs/services/order.service';
 import { UbsOrderLocationPopupComponent } from '../../ubs/components/ubs-order-details/ubs-order-location-popup/ubs-order-location-popup.component';
 import { AllLocationsDtos } from '../../ubs/models/ubs.interface';
 import { MatDialog } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { UpdateOrderData, UpdatePersonalData } from 'src/app/store/actions/order.actions';
 
 @Component({
   selector: 'app-ubs-user-orders',
@@ -46,7 +48,8 @@ export class UbsUserOrdersComponent implements OnInit, OnDestroy {
     private localStorage: LocalStorageService,
     private orderService: OrderService,
     private dialog: MatDialog,
-    private localStorageService: LocalStorageService
+    private localStorageService: LocalStorageService,
+    private store: Store
   ) {}
 
   onScroll() {
@@ -136,6 +139,7 @@ export class UbsUserOrdersComponent implements OnInit, OnDestroy {
 
   redirectToOrder() {
     this.getLocations(this.courierUBSName);
+    this.cleanOrderState();
   }
 
   ngOnInit() {
@@ -228,6 +232,11 @@ export class UbsUserOrdersComponent implements OnInit, OnDestroy {
     this.snackBar.openSnackBar(errorMessage);
   }
 
+  cleanOrderState(): void {
+    this.store.dispatch(UpdateOrderData({ orderDetails: null }));
+    this.store.dispatch(UpdatePersonalData({ personalData: null }));
+  }
+
   ngOnDestroy() {
     this.destroy.next();
     this.destroy.unsubscribe();