mr issues

.github/workflows/test.yml

@@ -137,7 +137,7 @@ jobs:
       - name: Cypress
         uses: cypress-io/github-action@master
         with:
-          start: ${{ matrix.test == '*mock*' && 'npm run ng -- serve -c mock' || 'npm run serve > /dev/null 2>&1' }}
+          start: ${{ matrix.test == '*mock*' && 'npm run ng -- serve' || 'npm run serve > /dev/null 2>&1' }}
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 180
           working-directory: e2e

angular.json

@@ -26,6 +26,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
+            "extractCss": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -47,9 +48,6 @@
             "scripts": []
           },
           "configurations": {
-            "mock": {
-              "extractCss": true
-            },
             "production": {
               "fileReplacements": [
                 {
@@ -109,9 +107,6 @@
             "local": {
               "browserTarget": "intershop-pwa:build:local"
             },
-            "mock": {
-              "browserTarget": "intershop-pwa:build:mock"
-            },
             "es5": {
               "browserTarget": "intershop-pwa:build:es5"
             }

src/app/app.component.ts

@@ -4,7 +4,6 @@ import { CookieLawContainerComponent } from 'angular2-cookie-law';
 import { Observable } from 'rxjs';
 
 import { AppFacade } from 'ish-core/facades/app.facade';
-import { ThemeFacade } from 'ish-core/facades/theme.facade';
 import { DeviceType } from 'ish-core/models/viewtype/viewtype.types';
 
 /**
@@ -25,11 +24,7 @@ export class AppComponent implements OnInit {
   wrapperClasses$: Observable<string[]>;
   deviceType$: Observable<DeviceType>;
 
-  constructor(
-    private appFacade: AppFacade,
-    @Inject(PLATFORM_ID) platformId: string,
-    public themeFacade: ThemeFacade // just for init (constructor)
-  ) {
+  constructor(private appFacade: AppFacade, @Inject(PLATFORM_ID) platformId: string) {
     this.isBrowser = isPlatformBrowser(platformId);
   }
 

src/app/core/configuration.module.ts

@@ -9,6 +9,7 @@ import { environment } from '../../environments/environment';
 
 import * as injectionKeys from './configurations/injection-keys';
 import { FeatureToggleModule } from './feature-toggle.module';
+import { ThemeService } from './utils/theme/theme.service';
 
 @NgModule({
   imports: [FeatureToggleModule],
@@ -38,7 +39,8 @@ import { FeatureToggleModule } from './feature-toggle.module';
   ],
 })
 export class ConfigurationModule {
-  constructor(@Inject(LOCALE_ID) lang: string, translateService: TranslateService) {
+  constructor(@Inject(LOCALE_ID) lang: string, translateService: TranslateService, themeService: ThemeService) {
+    themeService.init();
     registerLocaleData(localeDe);
     registerLocaleData(localeFr);
 

src/app/core/store/configuration/configuration.effects.ts

@@ -52,8 +52,8 @@ export class ConfigurationEffects {
         .getStateOrEnvOrDefault<string | string[]>('FEATURES', 'features')
         .pipe(map(x => (typeof x === 'string' ? x.split(/,/g) : x))),
       this.stateProperties
-        .getStateOrEnvOrDefault<string>('THEME', 'themes')
-        .pipe(map(x => (typeof x === 'string' ? x : (x as Theme[]).find(t => t.default).name)))
+        .getStateOrEnvOrDefault<string | Theme[]>('THEME', 'themes')
+        .pipe(map(x => (typeof x === 'string' ? x : x.find(t => t.default).name)))
     ),
     map(
       ([, baseURL, server, serverStatic, channel, application, features, theme]) =>

src/app/core/facades/theme.facade.ts → src/app/core/utils/theme/theme.service.ts

@@ -1,47 +1,39 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { Store, select } from '@ngrx/store';
-import { BehaviorSubject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
 
-import { THEMES } from 'ish-core/configurations/injection-keys';
-import { Theme } from 'ish-core/models/theme/theme.model';
 import { getTheme } from 'ish-core/store/configuration';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class ThemeFacade {
-  theme$: BehaviorSubject<string>;
-
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
   private renderer: Renderer2;
   private head: HTMLElement;
   private themeLinks: HTMLElement[] = [];
 
   constructor(
     private rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document: Document,
-    @Inject(THEMES) private themes: Theme[],
-    store: Store<{}>
-  ) {
+    private store: Store<{}>
+  ) {}
+
+  init() {
     this.head = this.document.head;
     this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-    this.theme$ = new BehaviorSubject(this.themes.find(x => x.default).name);
-
-    store.pipe(select(getTheme)).subscribe(theme => {
-      this.set(theme);
-    });
-
-    this.theme$.pipe(distinctUntilChanged()).subscribe(async theme => {
-      await this.loadCss(`${theme}.css`);
-      if (this.themeLinks.length === 2) {
-        this.renderer.removeChild(this.head, this.themeLinks.shift());
-      }
-    });
-  }
-
-  set(theme: string) {
-    this.theme$.next(theme);
+    this.store
+      .pipe(select(getTheme))
+      .pipe(
+        distinctUntilChanged(),
+        filter(x => !!x)
+      )
+      .subscribe(async theme => {
+        await this.loadCss(`${theme}.css`);
+
+        // remove style other theme
+        if (this.themeLinks.length === 2) {
+          this.renderer.removeChild(this.head, this.themeLinks.shift());
+        }
+      });
   }
 
   private async loadCss(filename: string) {

src/environments/environment.model.ts

@@ -1,4 +1,6 @@
+import { Locale } from 'ish-core/models/locale/locale.model';
 import { Theme } from 'ish-core/models/theme/theme.model';
+import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
 
 export interface Environment {
   production: boolean;
@@ -65,13 +67,13 @@ export interface Environment {
   productListingItemsPerPage: number;
 
   // default viewType used for product listings
-  defaultProductListingViewType: 'grid' | 'list';
+  defaultProductListingViewType: ViewType;
 
   // enable or disable service worker
   serviceWorker: boolean;
 
   // configuration of the available locales - hard coded for now
-  locales: { lang: string; currency: string; value: string; displayName: string; displayLong: string }[];
+  locales: Locale[];
 
   // themes
   themes: Theme[];