Fix Process Being Incorrectly Updated From Add Cart To Process

apps/sales/src/app/app.module.ts

@@ -1,6 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, ErrorHandler, LOCALE_ID, APP_INITIALIZER } from '@angular/core';
+import {
+  NgModule,
+  ErrorHandler,
+  LOCALE_ID,
+  APP_INITIALIZER,
+} from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,7 +32,10 @@ import { AppState } from './core/store/state/app.state';
 import { CartEntryState } from './core/store/state/cart-entry.state';
 import { BranchState } from './core/store/state/branches.state';
 import { SsoModule, SsoInterface } from 'sso';
-import { SsoAuthorizationInterceptor, HttpErrorHandlerInterceptor } from './core/interceptors';
+import {
+  SsoAuthorizationInterceptor,
+  HttpErrorHandlerInterceptor,
+} from './core/interceptors';
 import { DatePipe } from '@angular/common';
 import { CountryState } from './core/store/state/countries.state';
 import { HimaSalesErrorHandler } from './core/error/hima-sales.error-handler';
@@ -85,7 +93,9 @@ export function noop() {
   return function () {};
 }
 
-export function remissionModuleOptionsFactory(config: AppConfiguration): RemissionModuleOptions {
+export function remissionModuleOptionsFactory(
+  config: AppConfiguration
+): RemissionModuleOptions {
   return config.remissionModuleOptions;
 }
 
@@ -101,7 +111,7 @@ export function remissionModuleOptionsFactory(config: AppConfiguration): Remissi
     ComponentsModule,
     HttpClientModule,
     NgxsModule.forRoot(states, { developmentMode: !environment.production }),
-    NgxsReduxDevtoolsPluginModule.forRoot(),
+    NgxsReduxDevtoolsPluginModule.forRoot({ name: 'ISA NGXS Store' }),
     NgxsLoggerPluginModule,
     FormsModule,
     ReactiveFormsModule,

apps/sales/src/app/core/store/state/app.state.ts

@@ -10,7 +10,10 @@ import {
 import { LoadBranches, LoadUserBranch } from '../actions/branch.actions';
 import { BranchSelectors } from '../selectors/branch.selector';
 import { isNullOrUndefined } from 'util';
-import { RemoveProcessNewState, ReloadProcessData } from '../actions/process.actions';
+import {
+  RemoveProcessNewState,
+  ReloadProcessData,
+} from '../actions/process.actions';
 import { UserStateService } from '../../services/user-state.service';
 import { UserStateSyncData } from '../../models/user-state-sync.model';
 import { ReloadCustomersData } from '../actions/customer.actions';
@@ -31,7 +34,7 @@ import { ReloadRemission } from '../actions/remission.actions';
 import { ReloadFormState } from '../actions/forms.actions';
 import { FILIALE_LANDING_PAGE } from '../../utils/app.constants';
 
-export const SYNC_DATA_VERSION = 211;
+export const SYNC_DATA_VERSION = 212;
 
 export class AppStateModel {
   currentProcesssId: number;
@@ -101,9 +104,13 @@ export class AppState {
   }
 
   @Action(AppSetCurrentProcess)
-  appSetCurrentProcess(ctx: StateContext<AppStateModel>, { payload }: AppSetCurrentProcess) {
+  appSetCurrentProcess(
+    ctx: StateContext<AppStateModel>,
+    { payload }: AppSetCurrentProcess
+  ) {
     const state = ctx.getState();
-    const processExists = state.processIds.findIndex((t) => t === payload) !== -1;
+    const processExists =
+      state.processIds.findIndex((t) => t === payload) !== -1;
     if (processExists) {
       ctx.patchState({
         currentProcesssId: payload,
@@ -115,18 +122,23 @@ export class AppState {
   @Action(AppAddProcess)
   appAddProcess(ctx: StateContext<AppStateModel>, { payload }: AppAddProcess) {
     const state = ctx.getState();
-    const processExists = state.processIds.findIndex((t) => t === payload) !== -1;
+    const processExists =
+      state.processIds.findIndex((t) => t === payload) !== -1;
     if (!processExists) {
       const processIds = [...state.processIds, payload];
       const currentProcesssId = payload;
       ctx.patchState({ currentProcesssId, processIds });
 
-      const branchesLoaded = this.store.selectSnapshot(BranchSelectors.getBranches);
+      const branchesLoaded = this.store.selectSnapshot(
+        BranchSelectors.getBranches
+      );
       if (!branchesLoaded || Object.keys(branchesLoaded).length === 0) {
         this.store.dispatch(new LoadBranches());
       }
 
-      const userBranch = this.store.selectSnapshot(BranchSelectors.getUserBranch);
+      const userBranch = this.store.selectSnapshot(
+        BranchSelectors.getUserBranch
+      );
       if (isNullOrUndefined(userBranch)) {
         this.store.dispatch(new LoadUserBranch());
       }
@@ -136,7 +148,10 @@ export class AppState {
   }
 
   @Action(AppDeleteProcess)
-  appDeleteProcess(ctx: StateContext<AppStateModel>, { payload }: AppDeleteProcess) {
+  appDeleteProcess(
+    ctx: StateContext<AppStateModel>,
+    { payload }: AppDeleteProcess
+  ) {
     const state = ctx.getState();
     const currentIds = state.processIds;
     if (currentIds) {
@@ -147,7 +162,10 @@ export class AppState {
   }
 
   @Action(AppSwitchModule)
-  appSwitchModule(ctx: StateContext<AppStateModel>, { payload }: AppSwitchModule) {
+  appSwitchModule(
+    ctx: StateContext<AppStateModel>,
+    { payload }: AppSwitchModule
+  ) {
     const state = ctx.getState();
     ctx.patchState({ activeModule: payload });
     this.syncApiState(state.processIds, payload);
@@ -157,7 +175,10 @@ export class AppState {
    * Save store data on backend
    */
   @Action(AppUserDataSync)
-  appUserDataSynced(ctx: StateContext<AppStateModel>, { data, sync }: AppUserDataSync) {
+  appUserDataSynced(
+    ctx: StateContext<AppStateModel>,
+    { data, sync }: AppUserDataSync
+  ) {
     const state = ctx.getState();
 
     let currentUserData: UserStateSyncData = {};
@@ -184,7 +205,10 @@ export class AppState {
    * Initial store loading from API, triggered once on page load
    */
   @Action(ReloadSavedState)
-  reloadSavedState(ctx: StateContext<AppStateModel>, { data, sync }: ReloadSavedState) {
+  reloadSavedState(
+    ctx: StateContext<AppStateModel>,
+    { data, sync }: ReloadSavedState
+  ) {
     const state = ctx.getState();
 
     let currentUserData: UserStateSyncData = {};
@@ -208,7 +232,10 @@ export class AppState {
     if (sync && syncedData.version === SYNC_DATA_VERSION) {
       this.reloadDataFromAPI(syncedData);
 
-      if (syncedData.currentProcesssId || syncedData.activeModule === ModuleSwitcher.Branch) {
+      if (
+        syncedData.currentProcesssId ||
+        syncedData.activeModule === ModuleSwitcher.Branch
+      ) {
         ctx.patchState({
           ...state,
           synced: true,
@@ -235,11 +262,19 @@ export class AppState {
       return;
     }
     if (data.customers) {
-      this.store.dispatch(new ReloadCustomersData(data.customers, data.lastCreatedCustomerId, data.cachedCustomerSearch));
+      this.store.dispatch(
+        new ReloadCustomersData(
+          data.customers,
+          data.lastCreatedCustomerId,
+          data.cachedCustomerSearch
+        )
+      );
     }
 
     if (data.products) {
-      this.store.dispatch(new ReloadProductsData(data.products, data.cachedProductResults));
+      this.store.dispatch(
+        new ReloadProductsData(data.products, data.cachedProductResults)
+      );
     }
 
     if (data.carts) {
@@ -259,7 +294,9 @@ export class AppState {
     }
 
     if (data.processes) {
-      this.store.dispatch(new ReloadProcessData(data.processes, data.recentArticles));
+      this.store.dispatch(
+        new ReloadProcessData(data.processes, data.recentArticles)
+      );
     }
 
     if (data.formsState) {
@@ -267,11 +304,20 @@ export class AppState {
     }
 
     if (data.activeModule === ModuleSwitcher.Customer) {
-      if (data.processes && data.currentProcesssId && data.processes[data.currentProcesssId]) {
+      if (
+        data.processes &&
+        data.currentProcesssId &&
+        data.processes[data.currentProcesssId]
+      ) {
         const currentProcesssId = data.currentProcesssId;
         const currentRoute = data.processes[currentProcesssId].currentRoute;
         if (currentRoute && currentRoute.length > 0) {
-          this.routingAvailableAction(data, currentProcesssId, currentRoute, data.activeModule);
+          this.routingAvailableAction(
+            data,
+            currentProcesssId,
+            currentRoute,
+            data.activeModule
+          );
         } else {
           this.router.navigate(['/dashboard']);
         }
@@ -283,7 +329,12 @@ export class AppState {
         const currentProcesssId = -1;
         const currentRoute = data.branchProcess.currentRoute;
         if (currentRoute && currentRoute.length > 0) {
-          this.routingAvailableAction(data, currentProcesssId, currentRoute, data.activeModule);
+          this.routingAvailableAction(
+            data,
+            currentProcesssId,
+            currentRoute,
+            data.activeModule
+          );
         } else {
           this.router.navigate([FILIALE_LANDING_PAGE]);
         }
@@ -297,11 +348,24 @@ export class AppState {
     }
 
     if (data.activeModule === ModuleSwitcher.Branch) {
-      this.moduleSwitcherService.switch(ModuleSwitcher.Branch, data.branchProcess);
+      this.moduleSwitcherService.switch(
+        ModuleSwitcher.Branch,
+        data.branchProcess
+      );
     }
 
-    if (data.processesBreadcrumbs && data.activeCrumbs && (data.currentProcesssId || data.activeModule === ModuleSwitcher.Branch)) {
-      this.store.dispatch(new ReloadBreadcrumbsData(data.processesBreadcrumbs, data.activeCrumbs, data.previusMenuPath));
+    if (
+      data.processesBreadcrumbs &&
+      data.activeCrumbs &&
+      (data.currentProcesssId || data.activeModule === ModuleSwitcher.Branch)
+    ) {
+      this.store.dispatch(
+        new ReloadBreadcrumbsData(
+          data.processesBreadcrumbs,
+          data.activeCrumbs,
+          data.previusMenuPath
+        )
+      );
     }
 
     if (data.filters && data.processesSelectedFilters && data.dropdownFilters) {
@@ -327,16 +391,28 @@ export class AppState {
     );
   }
 
-  private routingAvailableAction(data: UserStateSyncData, currentProcesssId: number, currentRoute: string, module: ModuleSwitcher) {
-    const hasActiveCrumbsAvailableForProcess = data.activeCrumbs && data.activeCrumbs[currentProcesssId];
+  private routingAvailableAction(
+    data: UserStateSyncData,
+    currentProcesssId: number,
+    currentRoute: string,
+    module: ModuleSwitcher
+  ) {
+    const hasActiveCrumbsAvailableForProcess =
+      data.activeCrumbs && data.activeCrumbs[currentProcesssId];
     const activeCrumbs = data.activeCrumbs[currentProcesssId];
-    const hasProcessBreadcrumbsAvailableForProcess = data.processesBreadcrumbs && data.processesBreadcrumbs[activeCrumbs];
+    const hasProcessBreadcrumbsAvailableForProcess =
+      data.processesBreadcrumbs && data.processesBreadcrumbs[activeCrumbs];
 
     const breadcrumb = hasProcessBreadcrumbsAvailableForProcess
-      ? data.processesBreadcrumbs[activeCrumbs].find((t) => t.processId === currentProcesssId)
+      ? data.processesBreadcrumbs[activeCrumbs].find(
+          (t) => t.processId === currentProcesssId
+        )
       : null;
 
-    const breadcrumbPath = breadcrumb && breadcrumb.breadcrumbs ? breadcrumb.breadcrumbs.find((t) => t && t.path === currentRoute) : null;
+    const breadcrumbPath =
+      breadcrumb && breadcrumb.breadcrumbs
+        ? breadcrumb.breadcrumbs.find((t) => t && t.path === currentRoute)
+        : null;
 
     if (
       hasActiveCrumbsAvailableForProcess &&

apps/sales/src/app/core/store/state/process.state.ts

@@ -1,15 +1,38 @@
 import { Process, CustomerFormState } from '../../models/process.model';
-import { State, Action, StateContext, Store, Select, Selector } from '@ngxs/store';
+import {
+  State,
+  Action,
+  StateContext,
+  Store,
+  Select,
+  Selector,
+} from '@ngxs/store';
 import * as actions from '../actions/process.actions';
 import { ProductService } from '../../services/product.service';
 import { RecentArticleSearch } from '../../models/recent-article-search.model';
-import { LoadRecentProducts, AddSelectedProduct, DeleteProductsForProcess } from '../actions/product.actions';
-import { PopLastBreadcrumbs, DeleteBreadcrumbsForProcess } from '../actions/breadcrumb.actions';
+import {
+  LoadRecentProducts,
+  AddSelectedProduct,
+  DeleteProductsForProcess,
+} from '../actions/product.actions';
+import {
+  PopLastBreadcrumbs,
+  DeleteBreadcrumbsForProcess,
+} from '../actions/breadcrumb.actions';
 import { SetCartToProcess, DeleteCart } from '../actions/cart.actions';
-import { DeleteSelectedFiltersForProcess, LoadFilters, SetFilterType } from '../actions/filter.actions';
+import {
+  DeleteSelectedFiltersForProcess,
+  LoadFilters,
+  SetFilterType,
+} from '../actions/filter.actions';
 import { tap } from 'rxjs/operators';
 import { AppState, AppStateModel } from './app.state';
-import { AppSetCurrentProcess, AppDeleteProcess, AppAddProcess, AppUserDataSync } from '../actions/app.actions';
+import {
+  AppSetCurrentProcess,
+  AppDeleteProcess,
+  AppAddProcess,
+  AppUserDataSync,
+} from '../actions/app.actions';
 import { patch, append } from '@ngxs/store/operators';
 import { CurrentCustomerPageLoaded } from '../actions/customer.actions';
 import { UserStateSyncData } from '../../models/user-state-sync.model';
@@ -38,7 +61,9 @@ export class ProcessState {
   @Selector([AppState])
   static userData(process: ProcessStateModel, state: AppStateModel) {
     const processId = state.currentProcesssId;
-    return processId && process.processes[processId] ? process.processes[processId].userData : null;
+    return processId && process.processes[processId]
+      ? process.processes[processId].userData
+      : null;
   }
 
   @Action(actions.AddProcess)
@@ -102,29 +127,47 @@ export class ProcessState {
   }
 
   @Action(actions.AddCartToProcess)
-  addCart(ctx: StateContext<ProcessStateModel>, { cartId }: actions.AddCartToProcess) {
+  addCart(
+    ctx: StateContext<ProcessStateModel>,
+    { cartId }: actions.AddCartToProcess
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+
+    const isValidCustomerProcess = (processId) => processId > 0;
+
+    if (!isValidCustomerProcess(currentProcessId)) {
+      return;
+    }
+
     const process = { ...currentProcesses[currentProcessId], cartId: cartId };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
     processes[process.id] = process;
+
     this.syncApiState(currentProcessId, processes, recentArticles);
   }
 
   @Action(actions.DeleteProcess)
-  delete(ctx: StateContext<ProcessStateModel>, { payload }: actions.DeleteProcess) {
+  delete(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.DeleteProcess
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const currentProcess = state.processes[currentProcessId];
     if (!currentProcess) {
       return;
@@ -134,7 +177,9 @@ export class ProcessState {
       const processIds = this.store.selectSnapshot(AppState.getProcessIds);
       const indexOfProcessToDelete = processIds.indexOf(payload.id);
       if (indexOfProcessToDelete !== 0) {
-        this.store.dispatch(new AppSetCurrentProcess(processIds[indexOfProcessToDelete - 1]));
+        this.store.dispatch(
+          new AppSetCurrentProcess(processIds[indexOfProcessToDelete - 1])
+        );
       } else if (indexOfProcessToDelete === 0 && processIds.length > 1) {
         this.store.dispatch(new AppSetCurrentProcess(processIds[1]));
       }
@@ -156,33 +201,49 @@ export class ProcessState {
   }
 
   @Action(actions.AddSearch)
-  addSearch(ctx: StateContext<ProcessStateModel>, { payload }: actions.AddSearch) {
+  addSearch(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.AddSearch
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const process = { ...currentProcesses[currentProcessId], search: payload };
     ctx.setState(this.updateProcess(process));
 
-    const stateProcess = { ...currentProcesses[currentProcessId], search: { ...payload, firstLoad: false } };
+    const stateProcess = {
+      ...currentProcesses[currentProcessId],
+      search: { ...payload, firstLoad: false },
+    };
     const processes = { ...currentProcesses };
     processes[process.id] = stateProcess;
     this.syncApiState(currentProcessId, processes, recentArticles);
   }
 
   @Action(actions.AddCustomerSearch)
-  addCustomerSearch(ctx: StateContext<ProcessStateModel>, { payload }: actions.AddCustomerSearch) {
+  addCustomerSearch(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.AddCustomerSearch
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], customerSearch: payload };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      customerSearch: payload,
+    };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
@@ -191,19 +252,30 @@ export class ProcessState {
   }
 
   @Action(actions.ChangeCurrentRoute)
-  changeCurrentRoute(ctx: StateContext<ProcessStateModel>, { payload, removeLastBreadcrumb, queryParams }: actions.ChangeCurrentRoute) {
+  changeCurrentRoute(
+    ctx: StateContext<ProcessStateModel>,
+    { payload, removeLastBreadcrumb, queryParams }: actions.ChangeCurrentRoute
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const recentArticles = state.recentArticles;
 
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId] && payload) {
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId] &&
+      payload
+    ) {
       let previousRoute = currentProcesses[currentProcessId].currentRoute;
       const pathData = payload.split('/');
-      const lastCrumbInCustomerMenu = pathData.length > 0 ? pathData[pathData.length - 1] : '';
+      const lastCrumbInCustomerMenu =
+        pathData.length > 0 ? pathData[pathData.length - 1] : '';
 
       if (
         payload.substring(0, 14) === '/customer/edit' &&
@@ -254,26 +326,43 @@ export class ProcessState {
   }
 
   @Action(SetPreviusPath)
-  UpdatePreviusPath(ctx: StateContext<ProcessStateModel>, { path }: SetPreviusPath) {
+  UpdatePreviusPath(
+    ctx: StateContext<ProcessStateModel>,
+    { path }: SetPreviusPath
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], previousRoute: path };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      previousRoute: path,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
   @Action(AddSelectedProduct)
-  AddSelectedProduct(ctx: StateContext<ProcessStateModel>, { payload, index }: AddSelectedProduct) {
+  AddSelectedProduct(
+    ctx: StateContext<ProcessStateModel>,
+    { payload, index }: AddSelectedProduct
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], selectedItem: payload, productScrollTo: index };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      selectedItem: payload,
+      productScrollTo: index,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
@@ -284,8 +373,13 @@ export class ProcessState {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], preventLoading: true };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      preventLoading: true,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
@@ -296,32 +390,53 @@ export class ProcessState {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], preventLoading: false };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      preventLoading: false,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
   @Action(actions.UpdateCurrentRouteQueryParams)
-  updateCurrentRouteQueryParams(ctx: StateContext<ProcessStateModel>, { queryParams }: actions.UpdateCurrentRouteQueryParams) {
+  updateCurrentRouteQueryParams(
+    ctx: StateContext<ProcessStateModel>,
+    { queryParams }: actions.UpdateCurrentRouteQueryParams
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], currentRouteQueryParams: queryParams };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      currentRouteQueryParams: queryParams,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
   @Action(CurrentCustomerPageLoaded)
-  setCurrentCustomerPage(ctx: StateContext<ProcessStateModel>, { page }: CurrentCustomerPageLoaded) {
+  setCurrentCustomerPage(
+    ctx: StateContext<ProcessStateModel>,
+    { page }: CurrentCustomerPageLoaded
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], CurrentCustomerPageLoaded: page };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      CurrentCustomerPageLoaded: page,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
@@ -332,49 +447,90 @@ export class ProcessState {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], finishedOrder: undefined };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      finishedOrder: undefined,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
   @Action(actions.SetArticleSearchErrorStatus)
-  setArticleSearchErrorStatus(ctx: StateContext<ProcessStateModel>, { status }: actions.SetArticleSearchErrorStatus) {
+  setArticleSearchErrorStatus(
+    ctx: StateContext<ProcessStateModel>,
+    { status }: actions.SetArticleSearchErrorStatus
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
-      const process = { ...currentProcesses[currentProcessId], articleSearchErrorStatus: status };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
+      const process = {
+        ...currentProcesses[currentProcessId],
+        articleSearchErrorStatus: status,
+      };
       ctx.setState(this.updateProcess(process));
     }
   }
 
   @Action(actions.SetShelfSearch)
-  setShelfSearch(ctx: StateContext<ProcessStateModel>, { shelfSearch }: actions.SetShelfSearch) {
+  setShelfSearch(
+    ctx: StateContext<ProcessStateModel>,
+    { shelfSearch }: actions.SetShelfSearch
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
-      const process = { ...currentProcesses[currentProcessId], shelfSearch: shelfSearch };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
+      const process = {
+        ...currentProcesses[currentProcessId],
+        shelfSearch: shelfSearch,
+      };
       ctx.setState(this.updateProcess(process));
     }
   }
 
   @Action(actions.SetCustomerNotificationFlag)
-  setCustomerNotificationFlag(ctx: StateContext<ProcessStateModel>, { flag }: actions.SetCustomerNotificationFlag) {
+  setCustomerNotificationFlag(
+    ctx: StateContext<ProcessStateModel>,
+    { flag }: actions.SetCustomerNotificationFlag
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
-      const process = { ...currentProcesses[currentProcessId], customerNotificationFlag: flag };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
+      const process = {
+        ...currentProcesses[currentProcessId],
+        customerNotificationFlag: flag,
+      };
       ctx.setState(this.updateProcess(process));
     }
   }
@@ -384,8 +540,14 @@ export class ProcessState {
     const state = ctx.getState();
     if (state) {
       const currentProcesses = state.processes;
-      const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-      if (currentProcesses[currentProcessId] && currentProcesses[currentProcessId].id && currentProcesses[currentProcessId].new) {
+      const currentProcessId = this.store.selectSnapshot(
+        AppState.getCurrentProcessId
+      );
+      if (
+        currentProcesses[currentProcessId] &&
+        currentProcesses[currentProcessId].id &&
+        currentProcesses[currentProcessId].new
+      ) {
         const process = { ...currentProcesses[currentProcessId], new: false };
         ctx.setState(this.updateProcess(process));
       }
@@ -393,35 +555,64 @@ export class ProcessState {
   }
 
   @Action(actions.SetOnlineCustomerCreationStatus)
-  setOnlineCustomerCreationStatus(ctx: StateContext<ProcessStateModel>, { error }: actions.SetOnlineCustomerCreationStatus) {
+  setOnlineCustomerCreationStatus(
+    ctx: StateContext<ProcessStateModel>,
+    { error }: actions.SetOnlineCustomerCreationStatus
+  ) {
     const state = ctx.getState();
     if (state) {
       const currentProcesses = state.processes;
-      const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-      if (currentProcesses[currentProcessId] && currentProcesses[currentProcessId].id) {
-        const process = { ...currentProcesses[currentProcessId], onlineCustomerCreationError: error };
+      const currentProcessId = this.store.selectSnapshot(
+        AppState.getCurrentProcessId
+      );
+      if (
+        currentProcesses[currentProcessId] &&
+        currentProcesses[currentProcessId].id
+      ) {
+        const process = {
+          ...currentProcesses[currentProcessId],
+          onlineCustomerCreationError: error,
+        };
         ctx.setState(this.updateProcess(process));
       }
     }
   }
 
   @Action(actions.ClearPartOfCustomerCreationStatus)
-  clearPartOfCustomerCreationStatus(ctx: StateContext<ProcessStateModel>, { field }: actions.ClearPartOfCustomerCreationStatus) {
+  clearPartOfCustomerCreationStatus(
+    ctx: StateContext<ProcessStateModel>,
+    { field }: actions.ClearPartOfCustomerCreationStatus
+  ) {
     const state = ctx.getState();
     if (state) {
       const currentProcesses = state.processes;
-      const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-      if (currentProcesses[currentProcessId] && currentProcesses[currentProcessId].id) {
-        const onlineCustomerCreationError = currentProcesses[currentProcessId].onlineCustomerCreationError;
+      const currentProcessId = this.store.selectSnapshot(
+        AppState.getCurrentProcessId
+      );
+      if (
+        currentProcesses[currentProcessId] &&
+        currentProcesses[currentProcessId].id
+      ) {
+        const onlineCustomerCreationError =
+          currentProcesses[currentProcessId].onlineCustomerCreationError;
         if (onlineCustomerCreationError && onlineCustomerCreationError.error) {
           const updatedOnlineCustomerCreationError = {
             ...onlineCustomerCreationError,
-            invalidProperties: { ...onlineCustomerCreationError.invalidProperties, [field]: undefined },
+            invalidProperties: {
+              ...onlineCustomerCreationError.invalidProperties,
+              [field]: undefined,
+            },
           };
-          if (Object.keys(updatedOnlineCustomerCreationError.invalidProperties).length < 1) {
+          if (
+            Object.keys(updatedOnlineCustomerCreationError.invalidProperties)
+              .length < 1
+          ) {
             updatedOnlineCustomerCreationError.error = false;
           }
-          const process = { ...currentProcesses[currentProcessId], onlineCustomerCreationError: updatedOnlineCustomerCreationError };
+          const process = {
+            ...currentProcesses[currentProcessId],
+            onlineCustomerCreationError: updatedOnlineCustomerCreationError,
+          };
           ctx.setState(this.updateProcess(process));
         }
       }
@@ -429,14 +620,19 @@ export class ProcessState {
   }
 
   @Action(actions.UpdateProcessName)
-  updateProcessName(ctx: StateContext<ProcessStateModel>, { payload }: actions.UpdateProcessName) {
+  updateProcessName(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.UpdateProcessName
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const process = { ...currentProcesses[currentProcessId], name: payload };
     ctx.setState(this.updateProcess(process));
 
@@ -446,15 +642,23 @@ export class ProcessState {
   }
 
   @Action(actions.UpdateCustomerFormState)
-  updateCustomerFormState(ctx: StateContext<ProcessStateModel>, { payload }: actions.UpdateCustomerFormState) {
+  updateCustomerFormState(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.UpdateCustomerFormState
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], customerFormState: payload };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      customerFormState: payload,
+    };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
@@ -470,8 +674,14 @@ export class ProcessState {
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
       const process = { ...currentProcesses[currentProcessId], new: false };
       ctx.setState(this.updateProcess(process));
 
@@ -482,14 +692,19 @@ export class ProcessState {
   }
 
   @Action(actions.AddCustomerId)
-  addCustomerId(ctx: StateContext<ProcessStateModel>, { payload }: actions.AddCustomerId) {
+  addCustomerId(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.AddCustomerId
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const currentCustomerIds = currentProcesses[currentProcessId].customerIds;
     if (!currentCustomerIds.includes(payload)) {
       const customerIds = append([payload])(currentCustomerIds);
@@ -503,18 +718,26 @@ export class ProcessState {
   }
 
   @Action(actions.AddCustomerIds)
-  addCustomerIds(ctx: StateContext<ProcessStateModel>, { payload }: actions.AddCustomerIds) {
+  addCustomerIds(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.AddCustomerIds
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     if (currentProcessId < 1) {
       return;
     }
-    const process = { ...currentProcesses[currentProcessId], customerIds: payload };
+    const process = {
+      ...currentProcesses[currentProcessId],
+      customerIds: payload,
+    };
     const processes = { ...currentProcesses };
     processes[process.id] = process;
     ctx.patchState({ processes: processes });
@@ -522,14 +745,19 @@ export class ProcessState {
   }
 
   @Action(actions.RemoveCustomerId)
-  removeCustomerId(ctx: StateContext<ProcessStateModel>, { payload }: actions.RemoveCustomerId) {
+  removeCustomerId(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.RemoveCustomerId
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const currentCustomerIds = currentProcesses[currentProcessId].customerIds;
     const customerIds = currentCustomerIds.filter((t) => t !== payload);
     const process = { ...currentProcesses[currentProcessId], customerIds };
@@ -541,26 +769,43 @@ export class ProcessState {
   }
 
   @Action(actions.SetActiveCustomer)
-  setActiveCustomerId(ctx: StateContext<ProcessStateModel>, { payload }: actions.SetActiveCustomer) {
+  setActiveCustomerId(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.SetActiveCustomer
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], activeCustomer: payload, finishedOrderCustomer: payload };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      activeCustomer: payload,
+      finishedOrderCustomer: payload,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
   @Action(actions.SetDetailsCustomer)
-  setDetailsustomerId(ctx: StateContext<ProcessStateModel>, { payload }: actions.SetDetailsCustomer) {
+  setDetailsustomerId(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.SetDetailsCustomer
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], detailsCustomer: payload };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      detailsCustomer: payload,
+    };
     ctx.setState(this.updateProcess(process));
   }
 
@@ -572,7 +817,9 @@ export class ProcessState {
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
     const oldProcess = { ...currentProcesses[currentProcessId] };
     if (!oldProcess) {
       return;
@@ -604,15 +851,23 @@ export class ProcessState {
   }
 
   @Action(actions.SetFinishedOrderData)
-  setFinishedOrder(ctx: StateContext<ProcessStateModel>, { order }: actions.SetFinishedOrderData) {
+  setFinishedOrder(
+    ctx: StateContext<ProcessStateModel>,
+    { order }: actions.SetFinishedOrderData
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], finishedOrder: order };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      finishedOrder: order,
+    };
     const processes = { ...currentProcesses };
     processes[process.id] = process;
     ctx.patchState({ processes: processes });
@@ -621,20 +876,42 @@ export class ProcessState {
   }
 
   @Action(actions.ReloadProcessData)
-  reloadProcesses(ctx: StateContext<ProcessStateModel>, { processes, recentArticles }: actions.ReloadProcessData) {
-    ctx.setState({ processes: { ...processes }, recentArticles: recentArticles });
+  reloadProcesses(
+    ctx: StateContext<ProcessStateModel>,
+    { processes, recentArticles }: actions.ReloadProcessData
+  ) {
+    const isValidProcess = (process: Process) => {
+      return process.id && process.name;
+    };
+
+    const validProcesses = Object.entries(processes)
+      .filter(([_, process]) => isValidProcess(process))
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    ctx.setState({
+      processes: { ...validProcesses },
+      recentArticles: recentArticles,
+    });
   }
 
   @Action(actions.CustomerOrdersVisited)
-  ordersVisited(ctx: StateContext<ProcessStateModel>, { visited }: actions.CustomerOrdersVisited) {
+  ordersVisited(
+    ctx: StateContext<ProcessStateModel>,
+    { visited }: actions.CustomerOrdersVisited
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], ordersOpenend: visited };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      ordersOpenend: visited,
+    };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
@@ -643,15 +920,23 @@ export class ProcessState {
   }
 
   @Action(actions.SetProcessProductFilters)
-  updateProductFilters(ctx: StateContext<ProcessStateModel>, { filters }: actions.SetProcessProductFilters) {
+  updateProductFilters(
+    ctx: StateContext<ProcessStateModel>,
+    { filters }: actions.SetProcessProductFilters
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], productSearchFilters: filters };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      productSearchFilters: filters,
+    };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
@@ -666,9 +951,16 @@ export class ProcessState {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
-      const currentProductSearchFilters = currentProcesses[currentProcessId].productSearchFilters;
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
+      const currentProductSearchFilters =
+        currentProcesses[currentProcessId].productSearchFilters;
 
       try {
         const process = {
@@ -707,21 +999,34 @@ export class ProcessState {
   }
 
   @Action(actions.SetSelectedItemIfMissingOrChanged)
-  setSelectedItemIfMissingOrChanged(ctx: StateContext<ProcessStateModel>, { item }: actions.SetSelectedItemIfMissingOrChanged) {
+  setSelectedItemIfMissingOrChanged(
+    ctx: StateContext<ProcessStateModel>,
+    { item }: actions.SetSelectedItemIfMissingOrChanged
+  ) {
     const state = ctx.getState();
     if (!state) {
       return;
     }
     const currentProcesses = state.processes;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    if (currentProcesses && currentProcessId && currentProcesses[currentProcessId]) {
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    if (
+      currentProcesses &&
+      currentProcessId &&
+      currentProcesses[currentProcessId]
+    ) {
       const process = currentProcesses[currentProcessId];
       let updatedProcess: Process = { ...process };
       let changed = false;
       if (isNullOrUndefined(process.selectedItem)) {
         updatedProcess = { ...process, selectedItem: item };
         changed = true;
-      } else if (process.selectedItem && item && process.selectedItem.id !== item.id) {
+      } else if (
+        process.selectedItem &&
+        item &&
+        process.selectedItem.id !== item.id
+      ) {
         updatedProcess = { ...process, selectedItem: item };
         changed = true;
       }
@@ -739,8 +1044,13 @@ export class ProcessState {
     }
     const currentProcesses = state.processes;
     const recentArticles = state.recentArticles;
-    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
-    const process = { ...currentProcesses[currentProcessId], selectedItem: undefined };
+    const currentProcessId = this.store.selectSnapshot(
+      AppState.getCurrentProcessId
+    );
+    const process = {
+      ...currentProcesses[currentProcessId],
+      selectedItem: undefined,
+    };
     ctx.setState(this.updateProcess(process));
 
     const processes = { ...currentProcesses };
@@ -757,7 +1067,11 @@ export class ProcessState {
     });
   }
 
-  private syncApiState(currentProcesssId: number, processes: { [id: number]: Process }, recentArticles: RecentArticleSearch[]) {
+  private syncApiState(
+    currentProcesssId: number,
+    processes: { [id: number]: Process },
+    recentArticles: RecentArticleSearch[]
+  ) {
     const userSyncData: UserStateSyncData = {
       currentProcesssId,
       processes,